├── .gitignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── build.gradle
├── docs
    ├── dials.png
    ├── java8react.png
    ├── sidebar.png
    ├── tables.png
    └── thumbnail.png
├── package.json
├── pom.xml
└── src
    ├── main
        ├── java
        │   └── me
        │   │   └── roybailey
        │   │       ├── http
        │   │           ├── DemoService.java
        │   │           ├── JsonTransformer.java
        │   │           ├── JsonUtil.java
        │   │           ├── ReactController.java
        │   │           ├── RestResponse.java
        │   │           ├── RestfulController.java
        │   │           └── RestfulService.java
        │   │       ├── model
        │   │           ├── Task.java
        │   │           └── TaskMeta.java
        │   │       └── service
        │   │           ├── DemoTaskService.java
        │   │           └── TaskService.java
        ├── js
        │   ├── app.js
        │   ├── dashboard.js
        │   └── nashorn-polyfill.js
        ├── jsx
        │   ├── app.jsx
        │   └── dashboard.jsx
        └── resources
        │   ├── demodata
        │       └── DemoTaskService.json
        │   ├── log4j.properties
        │   └── webapp
        │       ├── admin.html
        │       ├── assets
        │           ├── DT_bootstrap.css
        │           ├── DT_bootstrap.js
        │           ├── dashboard.html
        │           ├── form-validation.js
        │           ├── scripts.js
        │           └── styles.css
        │       ├── bootstrap
        │           ├── css
        │           │   ├── bootstrap-responsive.css
        │           │   ├── bootstrap-responsive.min.css
        │           │   ├── bootstrap.css
        │           │   └── bootstrap.min.css
        │           ├── img
        │           │   ├── glyphicons-halflings-white.png
        │           │   └── glyphicons-halflings.png
        │           └── js
        │           │   ├── bootstrap.js
        │           │   └── bootstrap.min.js
        │       ├── bundle.min.js
        │       ├── easypiechart
        │           ├── examples
        │           │   ├── excanvas.js
        │           │   ├── index.html
        │           │   └── style.css
        │           ├── jquery.easy-pie-chart.css
        │           └── jquery.easy-pie-chart.js
        │       ├── index.html
        │       ├── jquery
        │           ├── jquery-1.9.1.js
        │           └── jquery-1.9.1.min.js
        │       └── react
        │           ├── JSXTransformer.js
        │           ├── react-with-addons.js
        │           ├── react-with-addons.min.js
        │           ├── react.js
        │           └── react.min.js
    └── test
        └── java
            └── me
                └── roybailey
                    └── http
                        ├── RestResponseTest.java
                        └── RestfulControllerTest.java


/.gitignore:
--------------------------------------------------------------------------------
 1 | *.class
 2 | 
 3 | # Mobile Tools for Java (J2ME)
 4 | .mtj.tmp/
 5 | 
 6 | # Package Files #
 7 | *.jar
 8 | *.war
 9 | *.ear
10 | 
11 | # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
12 | hs_err_pid*
13 | 
14 | .idea
15 | .gradle
16 | .module-cache
17 | build/
18 | target/
19 | node_modules/
20 | 
21 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | module.exports = function (grunt) {
  2 |     grunt.loadNpmTasks('grunt-curl');
  3 |     grunt.loadNpmTasks('grunt-contrib-less');
  4 |     grunt.loadNpmTasks('grunt-contrib-watch');
  5 |     grunt.loadNpmTasks('grunt-contrib-jshint');
  6 |     grunt.loadNpmTasks('grunt-contrib-uglify');
  7 |     grunt.loadNpmTasks('grunt-contrib-copy');
  8 |     grunt.loadNpmTasks('grunt-react');
  9 | 
 10 |     grunt.initConfig({
 11 |         pkg: grunt.file.readJSON('package.json'),
 12 | 
 13 |         curl: {
 14 |             'google-fonts-source': {
 15 |                 src: 'http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic',
 16 |                 dest: 'src/main/resources/webapp/assets/google-fonts-lato.css'
 17 |             }
 18 |         },
 19 | 
 20 |         less: {
 21 |             development: {
 22 |                 options: {
 23 |                     paths: ["public/css"]
 24 |                 },
 25 |                 files: {
 26 |                     "public/css/style.css": "public/css/less/style.less"
 27 |                 }
 28 |             }
 29 |         },
 30 | 
 31 |         watch: {
 32 |             jsx: {
 33 |                 files: 'src/main/jsx/*.jsx',
 34 |                 tasks: 'react'
 35 |             },
 36 |             uglify: {
 37 |                 files: 'src/main/js/*.js',
 38 |                 tasks: 'uglify'
 39 |             }
 40 |         },
 41 | 
 42 |         jshint: {
 43 |             files: [
 44 |                 '*.js'
 45 |             ],
 46 |             options: {
 47 |                 expr: true,
 48 |                 globals: {
 49 |                     jQuery: true,
 50 |                     console: true,
 51 |                     module: true,
 52 |                     document: true
 53 |                 }
 54 |             }
 55 |         },
 56 | 
 57 |         uglify: {
 58 |             options: {
 59 |                 mangle: {
 60 |                     except: ['jQuery', 'Backbone']
 61 |                 }
 62 |             },
 63 |             bundle: {
 64 |                 files: {
 65 |                     'src/main/resources/webapp/bundle.min.js': [
 66 |                         'src/main/js/nashorn-polyfill.js',
 67 |                         'node_modules/react/dist/react.js',
 68 |                         'node_modules/moment/min/moment.min.js',
 69 |                         'src/main/js/app.js',
 70 |                         'src/main/js/dashboard.js'
 71 |                     ]
 72 |                 }
 73 |             }
 74 |         },
 75 | 
 76 |         copy: {
 77 |             main: {
 78 |                 files: [
 79 |                     // includes files within path
 80 |                     {
 81 |                         expand: true,
 82 |                         cwd: 'node_modules/react/dist/',
 83 |                         src: ['*'],
 84 |                         dest: 'src/main/resources/webapp/react/',
 85 |                         filter: 'isFile',
 86 |                         flatten: true
 87 |                     },
 88 | 
 89 |                     // includes files within path and its sub-directories
 90 |                     //{
 91 |                     //    expand: false,
 92 |                     //    src: ['node_modules/react/dist/**'],
 93 |                     //    dest: 'src/main/resources/webapp/react/'
 94 |                     //},
 95 | 
 96 |                     // makes all src relative to cwd
 97 |                     // {expand: true, cwd: 'path/', src: ['**'], dest: 'dest/'},
 98 | 
 99 |                     // flattens results to a single level
100 |                     // {expand: true, flatten: true, src: ['path/**'], dest: 'dest/', filter: 'isFile'},
101 |                 ]
102 |             }
103 |         },
104 | 
105 |         react: {
106 |             mappings: {
107 |                 files: [
108 |                     {
109 |                         expand: true,
110 |                         cwd: 'src/main/jsx',
111 |                         src: ['**/*.jsx'],
112 |                         dest: 'src/main/js',
113 |                         ext: '.js'
114 |                     }
115 |                 ]
116 |             }
117 |         }
118 |     });
119 | };
120 | 
121 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Roy Bailey
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # SparkJava Retrofit React Demonstration
  2 | 
  3 | > ___A Java 8 web application using lightweight frameworks and [ReactJS](https://facebook.github.io/react/) for the UI___
  4 | 
  5 | 
  6 | 
  7 | ## Basic Idea
  8 | 
  9 | A Java 8 process with an embedded rest-api and web application, where the web application user interface is constructed using the React JavaScript components via the Nashorn engine with access to Java services.
 10 | 
 11 | 
 12 | ## Dependencies
 13 | 
 14 | SparkJava and Guava keep the overall dependencies lightweight (not even a single spring library here).
 15 | 
 16 | 
 17 | * **[SparkJava](http://sparkjava.com/)** - A minimalist Java 8 web application framework
 18 | * **[Retrofit](http://square.github.io/retrofit/)** - A type-safe REST client for Java
 19 | * **[ReactJS](http://facebook.github.io/react/)** - A Javascript library for building user interfaces
 20 | * **[Bootstrap-Admin-Theme](https://github.com/VinceG/Bootstrap-Admin-Theme)** - A web dashboard courtesy of Vincent Gabriel
 21 | * **[JMustache](https://github.com/samskivert/jmustache)** - A Java template engine
 22 | 
 23 | Also using **[Quava](https://code.google.com/p/guava-libraries/)** and a choice of **[Gradle](http://gradle)** or **[Maven](http://maven.apache.org)** for Java builds.
 24 | 
 25 | 
 26 | ## Taking it for a spin
 27 | 
 28 | Make sure you have `JDK 1.8.0_05-b13` or above.
 29 | 
 30 | command | description
 31 | --------|------------
 32 | `gradle build` | to compile and run the tests
 33 | `mvn clean install` | to compile and run the tests
 34 | `grunt watch` | compile jsx into js resource (from `src/main/jsx` into `src/main/js`)
 35 | [`DemoService`](src/main/java/me/roybailey/http/DemoService.java) | Start Web Application [http://localhost:4545](http://localhost:4545)
 36 | 
 37 | Alternatively run the `gradle installApp` command to create a runnable distribution package in `build/install/sparkjava-retrofit-react` and run the appropriate script in the `bin` folder.
 38 | 
 39 | > These dials are using a JavaScript charting library but are rendered using ReactJS with data from Java:
 40 | 
 41 | ![JavaScript charts with data from Java](docs/dials.png)
 42 | 
 43 | > These tables are rendered using ReactJS with data from Java, one table uses a Java service with direct access to the data store, the other Java service calls the rest-api from within Java to obtain the same data:
 44 | 
 45 | ![ReactJS Tables](docs/tables.png)
 46 | 
 47 | _the `?skip=2&limit=4` parameters on the request URL are passed into ReactJS and back to Java services_
 48 | 
 49 | 
 50 | ## License
 51 | 
 52 | [`MIT license`](LICENSE)
 53 | 
 54 | 
 55 | 
 56 | ## Overview
 57 | 
 58 | ##### The REST api
 59 | 
 60 | The rest-api provides a simple (yet richer than the usual todo list) [`task`](src/main/java/me/roybailey/model/Task.java) data model encapsulated behind a [TaskService interface](src/main/java/me/roybailey/service/TaskService.java) (the typical Data-Access-Object pattern).  For the purpose of this exercise the tasks are seeded from a small sample of data and kept in-memory.  There are only a couple of read operations defined as the main focus is to render data.  However, this Data-Access-Object implementation could be swapped out for any Java based database or messaging connection and enriched to include fully functional CRUD (create, read, update, delete) functionality.
 61 | 
 62 | > See [`RestfulController`](src/main/java/me/roybailey/http/RestfulController.java)
 63 | 
 64 | 
 65 | ##### The User Interface
 66 | 
 67 | The first version of [Bootstrap-Admin-Theme](https://github.com/VinceG/Bootstrap-Admin-Theme) is purely a static copy of the original with the dashboard sidebar changed to provide the menu of demonstration links.  Useful for showing how rich static content can be rendered easily with [SparkJava](http://sparkjava.com/).
 68 | 
 69 | ![SideBar](docs/sidebar.png)
 70 | 
 71 | The second version is the [Dashboard content rendered by ReactJS](src/main/jsx/dashboard.jsx), with a [minimal HTML template](src/main/resources/webapp/assets/dashboard.html) to keep the surrounding page `<script>` and `<head>` tags separate.
 72 | 
 73 | 
 74 | ##### Setting up Nashorn with ReactJS
 75 | 
 76 | **[Npm](https://www.npmjs.com/)** is used to download JavaScript packages.  **[Grunt](http://gruntjs.com/)** is used to compile `jsx` and to create a ***bundle.js*** of all Javascript needed for Nashorn.  This keeps the Java Nashorn loading code simple.
 77 | 
 78 | > Java to setup Nashorn
 79 | 
 80 | ```Java
 81 |         nashorn = (NashornScriptEngine) new ScriptEngineManager().getEngineByName("nashorn");
 82 | 		...
 83 |         Bindings bindings = new SimpleBindings();
 84 |         bindings.put("JavaTaskService", taskService);
 85 |         nashorn.setBindings(bindings, ScriptContext.GLOBAL_SCOPE);
 86 |         ...
 87 |         nashorn.eval(new InputStreamReader(this.getClass().getResourceAsStream("/webapp/bundle.min.js")));
 88 | ```
 89 | 
 90 | There are three steps above:
 91 | 
 92 | 1. Create the Nashorn JavaScript engine instance
 93 | 1. Inject any Java services you want your JavaScript to access
 94 | 1. Load the pre-created bundle.js
 95 | 
 96 | Creating the Nashorn engine instance is simple enough, although there is a little bit of [nashorn-polyfill](src/main/js/nashorn-polyfill.js) to be aware of (this gets included in the bundle.js).
 97 | 
 98 | The ability to use 'Dependency Injection' into your JavaScript makes it possible to access any Java services you have while rendering a page.  There may need to be some data type conversions but this is a very powerful option and avoids trying to find JavaScript drivers for everything.
 99 | 
100 | > JavaScript to call back into Java services
101 | 
102 | ```JavaScript
103 |     loadTaskDataFromJavaDirectly: function () {
104 |         return Java.from(JavaTaskService.getTaskList(this.props.skip, this.props.limit));
105 |     },
106 | ```
107 | 
108 | Lastly we leverage `npm` and `grunt` to create a ***bundle.js*** containing ReactJS and any other libraries you wish to have access to.  *Note: this bundle.js is a simple Grunt concatenation bundle using `uglify`, not a `webpack` or `browserify` bundle*.
109 | 
110 | 
111 | ##### The Flow
112 | 
113 | Calling the rest-api will perform all operations in Java; the rest-api converts the incoming endpoint into calls to the data-access-object.  However, the web application calls take the following route:
114 | 
115 | 1. `java8` [SparkJava](http://sparkjava.com/) calls a rendering function in the Nashorn JavaScript engine with properties from the Java process (mapped from the request query parameters)
116 | 1. `nashorn` starts rendering the component graph using `React.renderToString`
117 | 1. `nashorn` calls any Java services for data *at the time of rendering*
118 | 1. `java8` service can do anything Java can do and return results to the React component renderer
119 | 1. `nashorn` completes and returns the rendered content to `java8`
120 | 1. `java8` maps the `title` and `content` into a HTML template and returns the response 
121 | 
122 | ![Java8 React Diagram](docs/java8react.png)
123 | 
124 | 
125 | ##### Testing
126 | 
127 | This entire project is one big test so the only unit tests focus on testing the rest-api using [Retrofit](http://square.github.io/retrofit/).  Retrofit allows you to define a simple interface for your rest-api and leave the plumbing up to the Retrofit library.  A real gem!
128 | 
129 | > Example Java Retrofit RESTful api interface (See [`RestfulService`](src/main/java/me/roybailey/http/RestfulService.java) for full version)
130 | 
131 | ```Java
132 | public interface RestfulService {
133 | 
134 |     @GET("/api/v1/tasks")
135 |     RestResponse<List<Task>> getTasks(
136 |             @Query("skip") int skip,
137 |             @Query("limit") int limit
138 |     );
139 | }
140 | ```
141 | 
142 | > Example Java test using [Retrofit](http://square.github.io/retrofit/) (See [`RestfulControllerTest`](src/test/java/me/roybailey/http/RestfulControllerTest.java))
143 | 
144 | ```Java
145 |     RestAdapter restAdapter = new RestAdapter.Builder()
146 |                 .setEndpoint("http://localhost:4545")
147 |                 .build();
148 |     RestfulService taskService = restAdapter.create(RestfulService.class);
149 |     RestResponse<List<Task>> response = taskService.getTasks(1,4);
150 |     List<Task> tasks = response.content;
151 | ```
152 | 
153 | 
154 | This project was built and tested on a Mac laptop, using Chrome, with `JDK 1.8.0_05-b13`.  It has not been tested/built on any Windows or Linux platforms but should work providing you have a Java 8 installed.
155 | 
156 | 
157 | 


--------------------------------------------------------------------------------
/build.gradle:
--------------------------------------------------------------------------------
 1 | apply plugin: 'java'
 2 | apply plugin: 'maven'
 3 | apply plugin:'application'
 4 | 
 5 | mainClassName = 'me.roybailey.http.DemoService'
 6 | 
 7 | repositories {
 8 |     mavenLocal()
 9 |     mavenCentral()
10 | }
11 | 
12 | dependencies {
13 |     compile('org.slf4j:slf4j-api:1.7.10')
14 |     compile('org.slf4j:slf4j-log4j12:1.7.10')
15 |     compile('com.sparkjava:spark-core:2.1') {
16 |         exclude group: 'org.slf4j'
17 |     }
18 |     compile('com.squareup.retrofit:retrofit:1.9.0')
19 |     compile('com.squareup.okhttp:okhttp-urlconnection:2.2.0')
20 |     compile('com.squareup.okhttp:okhttp:2.2.0')
21 |     compile('com.google.guava:guava:18.0')
22 |     compile('com.samskivert:jmustache:1.10')
23 |     testCompile('junit:junit:4.12')
24 | }
25 | 
26 | sourceCompatibility = 1.8
27 | targetCompatibility = 1.8
28 | version = '1.0'
29 | 
30 | jar {
31 |     manifest {
32 |         attributes 'Implementation-Title': 'Research SparkJava, Retrofit, React', 'Implementation-Version': version
33 |     }
34 | }
35 | 
36 | uploadArchives {
37 |     repositories {
38 |         mavenLocal()
39 |     }
40 | }
41 | 
42 | task pom << {
43 |     println "${project.group}::${project.version}"
44 |     pom {
45 |         project {
46 |             groupId 'me.roybailey'
47 |             artifactId 'sparkjava-retrofit-react'
48 |             version '1.0.0-SNAPSHOT'
49 |         }
50 |     }.writeTo("pom.xml")
51 | }
52 | 


--------------------------------------------------------------------------------
/docs/dials.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roybailey/sparkjava-retrofit-react/f4c75c815892153a90b6e94bccc319208c198f0d/docs/dials.png


--------------------------------------------------------------------------------
/docs/java8react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roybailey/sparkjava-retrofit-react/f4c75c815892153a90b6e94bccc319208c198f0d/docs/java8react.png


--------------------------------------------------------------------------------
/docs/sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roybailey/sparkjava-retrofit-react/f4c75c815892153a90b6e94bccc319208c198f0d/docs/sidebar.png


--------------------------------------------------------------------------------
/docs/tables.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roybailey/sparkjava-retrofit-react/f4c75c815892153a90b6e94bccc319208c198f0d/docs/tables.png


--------------------------------------------------------------------------------
/docs/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roybailey/sparkjava-retrofit-react/f4c75c815892153a90b6e94bccc319208c198f0d/docs/thumbnail.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sparkjava-retrofit-react",
 3 |   "version": "0.0.0",
 4 |   "description": "SparkJava and React",
 5 |   "main": "app.js",
 6 |   "dependencies": {
 7 |     "moment": "^2.10.2",
 8 |     "path": "^0.11.14",
 9 |     "react": "^0.13.1"
10 |   },
11 |   "devDependencies": {
12 |     "grunt": "^0.4.5",
13 |     "grunt-contrib-copy": "^0.8.0",
14 |     "grunt-contrib-jshint": "^0.11.1",
15 |     "grunt-contrib-less": "^1.0.1",
16 |     "grunt-contrib-uglify": "^0.9.1",
17 |     "grunt-contrib-watch": "^0.6.1",
18 |     "grunt-curl": "^2.2.0",
19 |     "grunt-react": "^0.12.1"
20 |   },
21 |   "scripts": {
22 |     "test": "echo \"Error: no test specified\" && exit 1",
23 |     "watch": "grunt watch"
24 |   },
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "https://github.com/roybailey/sparkjava-retrofit-react.git"
28 |   },
29 |   "author": "Roy Bailey",
30 |   "license": "MIT",
31 |   "bugs": {
32 |     "url": "https://github.com/roybailey/sparkjava-retrofit-react/issues"
33 |   },
34 |   "homepage": "https://github.com/roybailey/sparkjava-retrofit-react"
35 | }
36 | 


--------------------------------------------------------------------------------
/pom.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"
 3 |          xmlns="http://maven.apache.org/POM/4.0.0"
 4 |          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 5 |     <modelVersion>4.0.0</modelVersion>
 6 | 
 7 |     <groupId>me.roybailey</groupId>
 8 |     <artifactId>sparkjava-retrofit-react</artifactId>
 9 |     <version>1.0.0-SNAPSHOT</version>
10 | 
11 |     <properties>
12 |         <jdk.version>1.8</jdk.version>
13 |     </properties>
14 | 
15 |     <dependencies>
16 |         <dependency>
17 |             <groupId>org.slf4j</groupId>
18 |             <artifactId>slf4j-api</artifactId>
19 |             <version>1.7.10</version>
20 |             <scope>compile</scope>
21 |         </dependency>
22 |         <dependency>
23 |             <groupId>com.samskivert</groupId>
24 |             <artifactId>jmustache</artifactId>
25 |             <version>1.10</version>
26 |             <scope>compile</scope>
27 |         </dependency>
28 |         <dependency>
29 |             <groupId>junit</groupId>
30 |             <artifactId>junit</artifactId>
31 |             <version>4.12</version>
32 |             <scope>test</scope>
33 |         </dependency>
34 |         <dependency>
35 |             <groupId>com.google.guava</groupId>
36 |             <artifactId>guava</artifactId>
37 |             <version>18.0</version>
38 |             <scope>compile</scope>
39 |         </dependency>
40 |         <dependency>
41 |             <groupId>com.squareup.okhttp</groupId>
42 |             <artifactId>okhttp-urlconnection</artifactId>
43 |             <version>2.2.0</version>
44 |             <scope>compile</scope>
45 |         </dependency>
46 |         <dependency>
47 |             <groupId>org.slf4j</groupId>
48 |             <artifactId>slf4j-log4j12</artifactId>
49 |             <version>1.7.10</version>
50 |             <scope>compile</scope>
51 |         </dependency>
52 |         <dependency>
53 |             <groupId>com.squareup.okhttp</groupId>
54 |             <artifactId>okhttp</artifactId>
55 |             <version>2.2.0</version>
56 |             <scope>compile</scope>
57 |         </dependency>
58 |         <dependency>
59 |             <groupId>com.sparkjava</groupId>
60 |             <artifactId>spark-core</artifactId>
61 |             <version>2.1</version>
62 |             <scope>compile</scope>
63 |             <exclusions>
64 |                 <exclusion>
65 |                     <groupId>org.slf4j</groupId>
66 |                     <artifactId>slf4j-simple</artifactId>
67 |                 </exclusion>
68 |             </exclusions>
69 |         </dependency>
70 |         <dependency>
71 |             <groupId>com.squareup.retrofit</groupId>
72 |             <artifactId>retrofit</artifactId>
73 |             <version>1.9.0</version>
74 |             <scope>compile</scope>
75 |         </dependency>
76 |     </dependencies>
77 | 
78 |     <build>
79 |         <plugins>
80 |             <plugin>
81 |                 <groupId>org.apache.maven.plugins</groupId>
82 |                 <artifactId>maven-compiler-plugin</artifactId>
83 |                 <configuration>
84 |                     <source>${jdk.version}</source>
85 |                     <target>${jdk.version}</target>
86 |                 </configuration>
87 |             </plugin>
88 |         </plugins>
89 |     </build>
90 | 
91 | </project>
92 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/http/DemoService.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.http;
 2 | 
 3 | import me.roybailey.service.DemoTaskService;
 4 | import org.eclipse.jetty.http.HttpStatus;
 5 | 
 6 | import static spark.Spark.*;
 7 | import static spark.Spark.after;
 8 | import static spark.SparkBase.port;
 9 | import static spark.SparkBase.staticFileLocation;
10 | 
11 | 
12 | public class DemoService {
13 | 
14 |     public static final int PORT = 4545;
15 | 
16 |     public static void main(String[] args) {
17 | 
18 |         // setup sparkjava global settings
19 |         port(PORT);
20 |         staticFileLocation("/webapp");
21 | 
22 |         before("/protected/*", (request, response) -> {
23 |             // ... check if authenticated
24 |             halt(HttpStatus.UNAUTHORIZED_401, "Go Away!");
25 |         });
26 | 
27 |         after((request, response) -> response.header("Access-Control-Allow-Origin", "*"));
28 |         after((request, response) -> response.header("cache-control", "no-cache"));
29 | 
30 |         // add some global routes
31 |         get("/", (request, response) -> {
32 |             response.redirect("/admin.html");
33 |             return HttpStatus.OK_200;
34 |         });
35 |         get("/status", "application/json", (request, response) -> "{ \"version\": 1.0 }");
36 | 
37 |         // simple dependency injection
38 |         try {
39 |             DemoTaskService taskService = new DemoTaskService();
40 |             new RestfulController(taskService);
41 |             new ReactController(taskService);
42 |         } catch (Exception err) {
43 |             throw new RuntimeException("Failed to start server", err);
44 |         }
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/http/JsonTransformer.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.http;
 2 | 
 3 | 
 4 | import com.google.gson.Gson;
 5 | import spark.ResponseTransformer;
 6 | 
 7 | public class JsonTransformer implements ResponseTransformer {
 8 | 
 9 |     private Gson jsonService = JsonUtil.DefaultGsonBuilder.create();
10 | 
11 |     @Override
12 |     public String render(Object model) {
13 |         String result = "";
14 |         try {
15 |             result = jsonService.toJson(model);
16 |         } catch (Exception e) {
17 |             e.printStackTrace();
18 |         }
19 |         return result;
20 |     }
21 | 
22 | }
23 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/http/JsonUtil.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.http;
 2 | 
 3 | import com.google.gson.*;
 4 | 
 5 | import java.lang.reflect.Type;
 6 | import java.time.LocalDateTime;
 7 | import java.time.format.DateTimeFormatter;
 8 | 
 9 | /**
10 |  * Json utility service to centralize the tooling and settings
11 |  */
12 | public class JsonUtil {
13 | 
14 |     private static class DateTimeSerializer implements JsonSerializer<LocalDateTime> {
15 | 
16 |         public JsonElement serialize(LocalDateTime src, Type typeOfSrc, JsonSerializationContext context) {
17 |             String isoDateTime = src.format(DateTimeFormatter.ISO_DATE_TIME);
18 |             return new JsonPrimitive(isoDateTime);
19 |         }
20 |     }
21 | 
22 |     private static class DateTimeDeserializer implements JsonDeserializer<LocalDateTime> {
23 |         public LocalDateTime deserialize(JsonElement json, Type typeOfT, JsonDeserializationContext context)
24 |                 throws JsonParseException {
25 |             return LocalDateTime.parse(json.getAsJsonPrimitive().getAsString(), DateTimeFormatter.ISO_DATE_TIME);
26 |         }
27 |     }
28 | 
29 |     public static GsonBuilder DefaultGsonBuilder = new GsonBuilder()
30 |             .registerTypeAdapter(LocalDateTime.class, new DateTimeSerializer())
31 |             .registerTypeAdapter(LocalDateTime.class, new DateTimeDeserializer());
32 | 
33 | 
34 | }
35 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/http/ReactController.java:
--------------------------------------------------------------------------------
  1 | package me.roybailey.http;
  2 | 
  3 | import com.google.common.base.Stopwatch;
  4 | import com.google.common.collect.ImmutableList;
  5 | import com.google.common.collect.ImmutableMap;
  6 | import com.google.common.io.ByteStreams;
  7 | import com.samskivert.mustache.Mustache;
  8 | import com.samskivert.mustache.Template;
  9 | import jdk.nashorn.api.scripting.NashornScriptEngine;
 10 | import me.roybailey.service.DemoTaskService;
 11 | import me.roybailey.model.Task;
 12 | import org.slf4j.Logger;
 13 | import org.slf4j.LoggerFactory;
 14 | import retrofit.RestAdapter;
 15 | import retrofit.converter.GsonConverter;
 16 | 
 17 | import javax.script.Bindings;
 18 | import javax.script.ScriptContext;
 19 | import javax.script.ScriptEngineManager;
 20 | import javax.script.SimpleBindings;
 21 | import java.io.FileReader;
 22 | import java.io.InputStream;
 23 | import java.io.InputStreamReader;
 24 | import java.nio.file.Files;
 25 | import java.nio.file.Path;
 26 | import java.nio.file.Paths;
 27 | import java.util.*;
 28 | 
 29 | import static spark.Spark.*;
 30 | 
 31 | /**
 32 |  * Demonstration of React controller using Nashorn
 33 |  */
 34 | public class ReactController {
 35 | 
 36 |     private static Logger LOG = LoggerFactory.getLogger(ReactController.class);
 37 | 
 38 |     public static final String BASE = "http://localhost:" + DemoService.PORT;
 39 | 
 40 |     private final NashornScriptEngine nashorn;
 41 | 
 42 |     public ReactController(DemoTaskService taskService) throws Exception {
 43 | 
 44 |         LOG.info("Loading nashorn...");
 45 |         Stopwatch timer = Stopwatch.createStarted();
 46 |         nashorn = (NashornScriptEngine) new ScriptEngineManager().getEngineByName("nashorn");
 47 |         // React depends on the "global" variable
 48 |         nashorn.eval("var global = this");
 49 |         // Dependency Injection Setup
 50 |         // making java services available to javascript global scope
 51 |         // note the names here are the global names used in JavaScript to call back into these Java objects
 52 |         Bindings bindings = new SimpleBindings();
 53 |         bindings.put("JavaReactController", this);
 54 |         bindings.put("JavaTaskService", taskService);
 55 |         nashorn.setBindings(bindings, ScriptContext.GLOBAL_SCOPE);
 56 |         // eval react.js
 57 |         nashorn.eval(new InputStreamReader(this.getClass().getResourceAsStream("/webapp/bundle.min.js")));
 58 |         timer.stop();
 59 |         LOG.info("Nashorn loaded..." + timer);
 60 | 
 61 |         after((request, response) -> response.header("Access-Control-Allow-Origin", "*"));
 62 | 
 63 |         get("/react", "text/html", (request, response) ->
 64 |                 render("renderTitle", ImmutableMap.<String, Object>builder()
 65 |                         .put("title", "This came from Java React")
 66 |                         .build()));
 67 | 
 68 |         get("/react/dashboard", "text/html", (request, response) ->
 69 |                 renderWithTemplate("renderDashboard", "assets/dashboard.html",
 70 |                         ImmutableMap.<String, Object>builder()
 71 |                                 .putAll(request.queryMap().toMap())
 72 |                                 .put("title", "Java8 React Dashboard")
 73 |                                 .put("message", "Java8 React Dashboard Loaded Successfully")
 74 |                                 .build()));
 75 |     }
 76 | 
 77 |     /**
 78 |      * Render a page using a Mustache template
 79 |      *
 80 |      * @param renderer the react renderer to call
 81 |      * @param template the mustache template html (with 'title' and 'content' tokens)
 82 |      * @param props    properties to pass into react
 83 |      * @return the html to return from page call
 84 |      */
 85 |     private Object renderWithTemplate(String renderer, String template, Map<String, Object> props) {
 86 |         String htmlContent = render(renderer, props);
 87 |         String htmlResult;
 88 |         LOG.info("Loading template {} with renderer {}", template, renderer);
 89 |         Stopwatch timer = Stopwatch.createStarted();
 90 |         try {
 91 |             String html = new String(ByteStreams.toByteArray(this.getClass().getResourceAsStream("/webapp/" + template)));
 92 |             // compile the template using mustache engine...
 93 |             Template tmpl = Mustache.compiler().compile(html);
 94 |             // create template tokens...
 95 |             Map<String, String> data = ImmutableMap.<String, String>builder()
 96 |                     .put("title", String.valueOf(props.get("title")))
 97 |                     .put("content", htmlContent)
 98 |                     .build();
 99 |             // map template tokens...
100 |             htmlResult = tmpl.execute(data);
101 |         } catch (Exception err) {
102 |             err.printStackTrace();
103 |             throw new IllegalStateException("failed to render react component", err);
104 |         } finally {
105 |             timer.stop();
106 |             LOG.info("Template {} with renderer {} loaded {}", template, renderer, timer);
107 |         }
108 |         return htmlResult.toString();
109 |     }
110 | 
111 |     /**
112 |      * Render something using Nashorn and React
113 |      *
114 |      * @param renderer the react renderer to call
115 |      * @param props    properties to pass into react
116 |      * @return the html to return from page call
117 |      */
118 |     public String render(String renderer, Map<String, Object> props) {
119 |         try {
120 |             Object html = nashorn.invokeFunction(renderer, props);
121 |             return String.valueOf(html);
122 |         } catch (Exception err) {
123 |             err.printStackTrace();
124 |             throw new IllegalStateException("failed to render react component", err);
125 |         }
126 |     }
127 | 
128 |     /**
129 |      * Gets the statistics for rendering the percent charts on the dashboard.
130 |      *
131 |      * @return simple map of name+value
132 |      */
133 |     public List<Map<String, Object>> loadStatisticsAsArray() {
134 | 
135 |         //Getting the runtime reference from system to generate some statistics
136 |         Runtime runtime = Runtime.getRuntime();
137 |         double totalMemory = runtime.totalMemory();
138 |         double freeMemory = runtime.freeMemory();
139 |         double usedMemory = (runtime.totalMemory() - runtime.freeMemory());
140 | 
141 |         return ImmutableList.<Map<String, Object>>builder()
142 |                 .add(ImmutableMap.<String, Object>builder().put("name", "Used/Total Memory").put("value", Math.floor(usedMemory / totalMemory * 100)).build())
143 |                 .add(ImmutableMap.<String, Object>builder().put("name", "Free/Total Memory").put("value", Math.floor(freeMemory / totalMemory * 100)).build())
144 |                 .add(ImmutableMap.<String, Object>builder().put("name", "Random Statistic").put("value", Math.floor(50 + 50 * Math.random())).build())
145 |                 .add(ImmutableMap.<String, Object>builder().put("name", "Random Statistic").put("value", Math.floor(50 + 50 * Math.random())).build())
146 |                 .build();
147 |     }
148 | 
149 |     /**
150 |      * Gets the Task List via Java but by making a further RESTful API call out.
151 |      */
152 |     public List<Task> getTaskList(int skip, int limit) {
153 | 
154 |         RestAdapter restAdapter = new RestAdapter.Builder()
155 |                 .setEndpoint(BASE)
156 |                 .setRequestInterceptor((request) -> request.addHeader("User-Agent", "ReactController"))
157 |                 .setConverter(new GsonConverter(JsonUtil.DefaultGsonBuilder.create()))
158 |                 .setLogLevel(RestAdapter.LogLevel.FULL)
159 |                 .build();
160 | 
161 |         RestfulService taskService = restAdapter.create(RestfulService.class);
162 |         RestResponse<List<Task>> response = taskService.getTasks(skip, limit);
163 | 
164 |         return (response.content != null) ? response.content : Collections.emptyList();
165 |     }
166 | }
167 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/http/RestResponse.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.http;
 2 | 
 3 | import java.util.HashMap;
 4 | import java.util.Map;
 5 | 
 6 | /**
 7 |  * Standard response for a RESTful request returning some content and _links
 8 |  */
 9 | public class RestResponse<T> {
10 | 
11 |     public static class Builder<T> {
12 | 
13 |         private T content;
14 |         private Map<String, Object> _links = new HashMap<>();
15 | 
16 |         public Builder() {
17 |         }
18 | 
19 |         public Builder(T content) {
20 |             this.content = content;
21 |         }
22 | 
23 |         public Builder<T> withContent(T content) {
24 |             this.content = content;
25 |             return this;
26 |         }
27 | 
28 |         public Builder<T> withLink(String name, String href, String description) {
29 |             Map<String, Object> mapValues = new HashMap<>();
30 |             mapValues.put("href", href);
31 |             mapValues.put("description", description);
32 |             this._links.put(name, mapValues);
33 |             return this;
34 |         }
35 | 
36 |         public RestResponse<T> build() {
37 |             return new RestResponse<>(this.content, this._links);
38 |         }
39 |     }
40 | 
41 |     public static <T> Builder<T> builder(T content) {
42 |         return new RestResponse.Builder<>(content);
43 |     }
44 | 
45 |     public static <T> Builder<T> builder() {
46 |         return new RestResponse.Builder<>();
47 |     }
48 | 
49 |     //
50 |     //
51 |     //
52 | 
53 |     public T content;
54 |     public Map<String, Object> _links;
55 | 
56 |     public RestResponse(T content, Map<String, Object> links) {
57 |         this.content = content;
58 |         this._links = links;
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/http/RestfulController.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.http;
 2 | 
 3 | import com.google.gson.reflect.TypeToken;
 4 | import me.roybailey.service.DemoTaskService;
 5 | import me.roybailey.model.Task;
 6 | import me.roybailey.model.TaskMeta;
 7 | import org.slf4j.Logger;
 8 | import org.slf4j.LoggerFactory;
 9 | 
10 | import java.io.IOException;
11 | import java.lang.reflect.Type;
12 | import java.util.List;
13 | 
14 | import static spark.Spark.get;
15 | 
16 | /**
17 |  * Demonstration Restful controller for api
18 |  */
19 | public class RestfulController {
20 | 
21 |     private static Logger LOG = LoggerFactory.getLogger(RestfulController.class);
22 | 
23 |     static final String JSON = "application/json";
24 | 
25 |     /* capture generic response types for json serialization */
26 |     static final Type TaskMetaType = new TypeToken<RestResponse<TaskMeta>>() {
27 |     }.getType();
28 | 
29 |     static final Type TaskListType = new TypeToken<RestResponse<List<Task>>>() {
30 |     }.getType();
31 | 
32 |     //
33 |     //
34 |     //
35 | 
36 |     private final DemoTaskService taskService;
37 |     private final JsonTransformer jsonTransformer = new JsonTransformer();
38 | 
39 |     public DemoTaskService getTaskService() {
40 |         return taskService;
41 |     }
42 | 
43 |     public RestfulController(DemoTaskService taskService) throws IOException {
44 | 
45 |         this.taskService = taskService;
46 | 
47 |         get("/api/v1", JSON, (request, response) ->
48 |                 RestResponse.<Void>builder()
49 |                         .withLink("tasks-meta", request.url() + "/tasks-meta", "gets tasks total count")
50 |                         .withLink("tasks", request.url() + "/tasks", "gets all tasks")
51 |                         .build()
52 |                 , jsonTransformer);
53 | 
54 |         get("/api/v1/tasks", JSON, (request, response) -> {
55 |             Integer skip = request.queryMap("skip").integerValue();
56 |             Integer limit = request.queryMap("limit").integerValue();
57 |             if (skip == null) {
58 |                 skip = 0;
59 |             }
60 |             if (limit == null) {
61 |                 limit = 10;
62 |             }
63 |             return RestResponse.<List<Task>>builder()
64 |                     .withContent(taskService.getTaskList(skip, limit))
65 |                     .build();
66 |         }, jsonTransformer);
67 | 
68 |         get("/api/v1/tasks-meta", JSON, (request, response) ->
69 |                 RestResponse.builder(new TaskMeta(taskService.getTaskTotal())).build()
70 |                 , jsonTransformer);
71 |     }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/http/RestfulService.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.http;
 2 | 
 3 | 
 4 | import me.roybailey.model.Task;
 5 | import me.roybailey.model.TaskMeta;
 6 | import retrofit.client.Response;
 7 | import retrofit.http.GET;
 8 | import retrofit.http.Query;
 9 | 
10 | import java.util.List;
11 | 
12 | /**
13 |  * API interface for our restful service api
14 |  */
15 | public interface RestfulService {
16 | 
17 |     @GET("/api/v1")
18 |     Response getStatus();
19 | 
20 |     @GET("/api/v1/tasks-meta")
21 |     RestResponse<TaskMeta> getTaskMeta();
22 | 
23 |     @GET("/api/v1/tasks")
24 |     RestResponse<List<Task>> getTasks(
25 |             @Query("skip") int skip,
26 |             @Query("limit") int limit
27 |     );
28 | }
29 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/model/Task.java:
--------------------------------------------------------------------------------
  1 | package me.roybailey.model;
  2 | 
  3 | import java.time.LocalDateTime;
  4 | import java.time.format.DateTimeFormatter;
  5 | import java.util.UUID;
  6 | 
  7 | /**
  8 |  * Task object
  9 |  */
 10 | public class Task {
 11 | 
 12 |     public static class Builder {
 13 | 
 14 |         private String guid;
 15 |         private String name;
 16 |         private String description;
 17 |         private LocalDateTime dueDate;
 18 |         private Integer effort;
 19 |         private Integer progress;
 20 | 
 21 |         public Builder withGuid(String guid) {
 22 |             this.guid = guid;
 23 |             return this;
 24 |         }
 25 | 
 26 |         public Builder withName(String name) {
 27 |             this.name = name;
 28 |             return this;
 29 |         }
 30 | 
 31 |         public Builder withDescription(String description) {
 32 |             this.description = description;
 33 |             return this;
 34 |         }
 35 | 
 36 |         public Builder withDueDate(String dueDate) {
 37 |             this.dueDate = LocalDateTime.parse(dueDate, DateTimeFormatter.ISO_DATE_TIME);
 38 |             return this;
 39 |         }
 40 | 
 41 |         public Builder withEffort(int effort) {
 42 |             this.effort = effort;
 43 |             return this;
 44 |         }
 45 | 
 46 |         public Builder withProgress(int progress) {
 47 |             this.progress = progress;
 48 |             return this;
 49 |         }
 50 | 
 51 |         public Task build() {
 52 |             return new Task(
 53 |                     (this.guid == null)? UUID.randomUUID().toString() : this.guid,
 54 |                     this.name,
 55 |                     this.description,
 56 |                     this.dueDate,
 57 |                     this.effort,
 58 |                     this.progress
 59 |             );
 60 |         }
 61 |     }
 62 | 
 63 |     public static Builder builder() {
 64 |         return new Task.Builder();
 65 |     }
 66 | 
 67 |     //
 68 |     //
 69 |     //
 70 | 
 71 |     private String guid;
 72 |     private String name;
 73 |     private String description;
 74 |     private LocalDateTime dueDate;
 75 |     private Integer effort;
 76 |     private Integer progress;
 77 | 
 78 |     public Task(String guid, String name) {
 79 |         this(guid, name, name,
 80 |                 LocalDateTime.now().plusDays(5),
 81 |                 100, 0);
 82 |     }
 83 | 
 84 |     public Task(
 85 |             String guid,
 86 |             String name,
 87 |             String description,
 88 |             LocalDateTime dueDate,
 89 |             Integer effort,
 90 |             Integer progress
 91 |     ) {
 92 |         this.guid = guid;
 93 |         this.name = name;
 94 |         this.description = description;
 95 |         this.dueDate = dueDate;
 96 |         this.effort = effort;
 97 |         this.progress = progress;
 98 |     }
 99 | 
100 |     @Override
101 |     public String toString() {
102 |         return "Task{" +
103 |                 "guid=" + guid +
104 |                 ", name='" + name + '\'' +
105 |                 ", dueDate=" + dueDate +
106 |                 ", progress=" + progress +
107 |                 '}';
108 |     }
109 | 
110 |     public String getGuid() {
111 |         return guid;
112 |     }
113 | 
114 |     public String getName() {
115 |         return name;
116 |     }
117 | 
118 |     public String getDescription() {
119 |         return description;
120 |     }
121 | 
122 |     public LocalDateTime getDueDate() {
123 |         return dueDate;
124 |     }
125 | 
126 |     public Integer getEffort() {
127 |         return effort;
128 |     }
129 | 
130 |     public Integer getProgress() {
131 |         return progress;
132 |     }
133 | 
134 |     @Override
135 |     public boolean equals(Object o) {
136 |         if (this == o) return true;
137 |         if (o == null || getClass() != o.getClass()) return false;
138 | 
139 |         Task task = (Task) o;
140 | 
141 |         return !(guid != null ? !guid.equals(task.guid) : task.guid != null);
142 | 
143 |     }
144 | 
145 |     @Override
146 |     public int hashCode() {
147 |         return guid != null ? guid.hashCode() : 0;
148 |     }
149 | }
150 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/model/TaskMeta.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.model;
 2 | 
 3 | import java.io.Serializable;
 4 | 
 5 | /**
 6 |  * Simple Task Meta object to return any meta data about tasks.
 7 |  */
 8 | public class TaskMeta implements Serializable {
 9 | 
10 |     private Integer total;
11 | 
12 |     public TaskMeta(Integer total) {
13 |         this.total = total;
14 |     }
15 | 
16 |     public Integer getTotal() {
17 |         return total;
18 |     }
19 | 
20 |     @Override
21 |     public String toString() {
22 |         return "TaskMeta{" +
23 |                 "total=" + total +
24 |                 '}';
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/service/DemoTaskService.java:
--------------------------------------------------------------------------------
  1 | package me.roybailey.service;
  2 | 
  3 | import com.google.common.collect.ImmutableMap;
  4 | import com.google.common.io.Resources;
  5 | import com.google.gson.Gson;
  6 | import com.google.gson.reflect.TypeToken;
  7 | import me.roybailey.http.JsonUtil;
  8 | import me.roybailey.model.Task;
  9 | import org.slf4j.Logger;
 10 | import org.slf4j.LoggerFactory;
 11 | 
 12 | import java.io.InputStreamReader;
 13 | import java.io.Reader;
 14 | import java.lang.reflect.Type;
 15 | import java.net.URL;
 16 | import java.nio.charset.StandardCharsets;
 17 | import java.util.HashMap;
 18 | import java.util.List;
 19 | import java.util.Map;
 20 | import java.util.concurrent.atomic.AtomicInteger;
 21 | import java.util.stream.Collectors;
 22 | 
 23 | /**
 24 |  * Demonstration service implementation
 25 |  */
 26 | public class DemoTaskService implements TaskService {
 27 | 
 28 |     private static Logger LOG = LoggerFactory.getLogger(DemoTaskService.class);
 29 | 
 30 |     static final Type MockTaskType = new TypeToken<Map<String, Task>>() {
 31 |     }.getType();
 32 | 
 33 |     static Map<String, Task> demodata = ImmutableMap.<String, Task>builder()
 34 |             .put("1", Task.builder()
 35 |                     .withGuid("1")
 36 |                     .withName("Shopping")
 37 |                     .withDescription("Shopping needs to be done")
 38 |                     .withDueDate("2015-04-16T12:00:00.000Z")
 39 |                     .withEffort(100)
 40 |                     .withProgress(0)
 41 |                     .build())
 42 |             .put("2", Task.builder()
 43 |                     .withGuid("2")
 44 |                     .withName("Washing")
 45 |                     .withDescription("Washing needs to be done")
 46 |                     .withDueDate("2015-04-16T17:19:25.257Z")
 47 |                     .withEffort(100)
 48 |                     .withProgress(0).build())
 49 |             .put("3", Task.builder()
 50 |                     .withGuid("3")
 51 |                     .withName("Car Service")
 52 |                     .withDescription("Car Service needs to be done")
 53 |                     .withDueDate("2015-04-16T17:19:25.257Z")
 54 |                     .withEffort(100)
 55 |                     .withProgress(0).build())
 56 |             .put("4", Task.builder()
 57 |                     .withGuid("4")
 58 |                     .withName("Revision Study")
 59 |                     .withDescription("Revision Study needs to be done")
 60 |                     .withDueDate("2015-04-16T12:00:00.000Z")
 61 |                     .withEffort(100)
 62 |                     .withProgress(0).build())
 63 |             .put("5", Task.builder()
 64 |                     .withGuid("5")
 65 |                     .withName("Appointment")
 66 |                     .withDescription("Appointment needs to be done")
 67 |                     .withDueDate("2015-04-16T12:00:00.000Z")
 68 |                     .withEffort(100)
 69 |                     .withProgress(0).build())
 70 |             .put("6", Task.builder()
 71 |                     .withGuid("6")
 72 |                     .withName("Trip to tip")
 73 |                     .withDescription("Trip to tip needs to be done")
 74 |                     .withDueDate("2015-04-16T12:00:00.000Z")
 75 |                     .withEffort(100)
 76 |                     .withProgress(0).build())
 77 |             .put("7", Task.builder()
 78 |                     .withGuid("7")
 79 |                     .withName("Tidy garage")
 80 |                     .withDescription("Tidy garage needs to be done")
 81 |                     .withDueDate("2015-04-16T12:00:00.000Z")
 82 |                     .withEffort(100)
 83 |                     .withProgress(0).build())
 84 |             .put("8", Task.builder()
 85 |                     .withGuid("8")
 86 |                     .withName("Fix broken chair")
 87 |                     .withDescription("Fix broken chair needs to be done")
 88 |                     .withDueDate("2015-04-16T12:00:00.000Z")
 89 |                     .withEffort(100)
 90 |                     .withProgress(0).build())
 91 |             .put("9", Task.builder()
 92 |                     .withGuid("9")
 93 |                     .withName("Order present")
 94 |                     .withDescription("Order present needs to be done")
 95 |                     .withDueDate("2015-04-16T12:00:00.000Z")
 96 |                     .withEffort(100)
 97 |                     .withProgress(0).build())
 98 |             .build();
 99 | 
100 |     // create our demo cache of tasks
101 |     // to be replaced with your favorite database service
102 |     Map<String, Task> mapTasks = new HashMap<>();
103 | 
104 |     public DemoTaskService() {
105 |         Gson gson = JsonUtil.DefaultGsonBuilder.create();
106 | 
107 |         // load the demo data from json in classpath package
108 |         String filename = DemoTaskService.class.getSimpleName() + ".json";
109 |         String filepath = "/demodata/" + filename;
110 |         try {
111 |             mapTasks = gson.fromJson(new InputStreamReader(this.getClass().getResourceAsStream(filepath)), MockTaskType);
112 |         } catch (Exception err) {
113 |             LOG.warn("Failed to load " + filepath + " using hard-coded data", err);
114 |             mapTasks.putAll(demodata);
115 |         }
116 | 
117 |         LOG.debug(String.valueOf(mapTasks));
118 |     }
119 | 
120 |     @Override
121 |     public Task getTaskById(String guid) {
122 |         return mapTasks.get(guid);
123 |     }
124 | 
125 |     @Override
126 |     public List<Task> getTaskList(int skip, int limit) {
127 |         AtomicInteger counter = new AtomicInteger(limit);
128 |         List<Task> result = mapTasks.values().stream()
129 |                 .skip(skip)
130 |                 .filter(it -> (counter.getAndAdd(-1)) > 0)
131 |                 .collect(Collectors.toList());
132 |         return result;
133 |     }
134 | 
135 |     @Override
136 |     public Integer getTaskTotal() {
137 |         return this.mapTasks.size();
138 |     }
139 | }
140 | 


--------------------------------------------------------------------------------
/src/main/java/me/roybailey/service/TaskService.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.service;
 2 | 
 3 | import me.roybailey.model.Task;
 4 | 
 5 | import java.util.List;
 6 | 
 7 | /**
 8 |  * Simple data access object interface.
 9 |  */
10 | public interface TaskService {
11 | 
12 |     Task getTaskById(String guid);
13 | 
14 |     List<Task> getTaskList(int skip, int limit);
15 | 
16 |     Integer getTaskTotal();
17 | }
18 | 


--------------------------------------------------------------------------------
/src/main/js/app.js:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var TitleView = React.createClass({displayName: "TitleView",
 4 |     render: function() {
 5 |         return React.createElement("h1", null, this.props.text);
 6 |     }
 7 | });
 8 | 
 9 | var renderTitle = function (javaProps) {
10 |     return React.renderToString(
11 |         React.createElement(TitleView, {text: javaProps.title})
12 |     );
13 | };


--------------------------------------------------------------------------------
/src/main/js/dashboard.js:
--------------------------------------------------------------------------------
  1 | /** @jsx React.DOM */
  2 | 
  3 | var NavBarTop = React.createClass({displayName: "NavBarTop",
  4 |     render: function () {
  5 |         return (
  6 |             React.createElement("div", {className: "navbar navbar-fixed-top"}, 
  7 |                 React.createElement("div", {className: "navbar-inner"}, 
  8 |                     React.createElement("div", {className: "container-fluid"}, 
  9 |                         React.createElement("a", {className: "btn btn-navbar", "data-toggle": "collapse", "data-target": ".nav-collapse"}, 
 10 |                             React.createElement("span", {className: "icon-bar"}), 
 11 |                             React.createElement("span", {className: "icon-bar"}), 
 12 |                             React.createElement("span", {className: "icon-bar"})
 13 |                         ), 
 14 |                         React.createElement("a", {className: "brand", href: "#"}, "SparkJava React"), 
 15 | 
 16 |                         React.createElement("div", {className: "nav-collapse collapse"}, 
 17 |                             React.createElement("ul", {className: "nav pull-right"}, 
 18 |                                 React.createElement("li", {className: "dropdown"}, 
 19 |                                     React.createElement("a", {href: "#", role: "button", className: "dropdown-toggle", "data-toggle": "dropdown"}, 
 20 |                                         React.createElement("i", {className: "icon-user"}), 
 21 |                                         "Roy Bailey", 
 22 |                                         React.createElement("i", {className: "caret"})
 23 |                                     ), 
 24 |                                     React.createElement("ul", {className: "dropdown-menu"}, 
 25 |                                         React.createElement("li", null, 
 26 |                                             React.createElement("a", {tabindex: "-1", href: "http://roybailey.biz"}, "Profile")
 27 |                                         ), 
 28 |                                         React.createElement("li", {className: "divider"}), 
 29 |                                         React.createElement("li", null, 
 30 |                                             React.createElement("a", {tabindex: "-1", 
 31 |                                                href: "https://github.com/roybailey/sparkjava-retrofit-react"}, "GitHub" + ' ' +
 32 |                                                 "Code")
 33 |                                         )
 34 |                                     )
 35 |                                 )
 36 |                             ), 
 37 |                             React.createElement("ul", {className: "nav"}, 
 38 |                                 React.createElement("li", {className: "active"}, 
 39 |                                     React.createElement("a", {href: "#"}, "Dashboard")
 40 |                                 ), 
 41 |                                 React.createElement("li", {className: "dropdown"}, 
 42 |                                     React.createElement("a", {href: "#", "data-toggle": "dropdown", className: "dropdown-toggle"}, "Settings", 
 43 |                                         React.createElement("b", {className: "caret"})
 44 |                                     ), 
 45 |                                     React.createElement("ul", {className: "dropdown-menu", id: "menu1"}, 
 46 |                                         React.createElement("li", null, 
 47 |                                             React.createElement("a", {href: "#"}, "Tools", 
 48 |                                                 React.createElement("i", {className: "icon-arrow-right"})
 49 | 
 50 |                                             ), 
 51 |                                             React.createElement("ul", {className: "dropdown-menu sub-menu"}, 
 52 |                                                 React.createElement("li", null, 
 53 |                                                     React.createElement("a", {href: "#"}, "Reports")
 54 |                                                 ), 
 55 |                                                 React.createElement("li", null, 
 56 |                                                     React.createElement("a", {href: "#"}, "Logs")
 57 |                                                 ), 
 58 |                                                 React.createElement("li", null, 
 59 |                                                     React.createElement("a", {href: "#"}, "Errors")
 60 |                                                 )
 61 |                                             )
 62 |                                         ), 
 63 |                                         React.createElement("li", null, 
 64 |                                             React.createElement("a", {href: "#"}, "SEO Settings")
 65 |                                         ), 
 66 |                                         React.createElement("li", null, 
 67 |                                             React.createElement("a", {href: "#"}, "Other Link")
 68 |                                         ), 
 69 |                                         React.createElement("li", {className: "divider"}), 
 70 |                                         React.createElement("li", null, 
 71 |                                             React.createElement("a", {href: "#"}, "Other Link")
 72 |                                         ), 
 73 |                                         React.createElement("li", null, 
 74 |                                             React.createElement("a", {href: "#"}, "Other Link")
 75 |                                         )
 76 |                                     )
 77 |                                 ), 
 78 |                                 React.createElement("li", {className: "dropdown"}, 
 79 |                                     React.createElement("a", {href: "#", role: "button", className: "dropdown-toggle", "data-toggle": "dropdown"}, "Content", 
 80 |                                         React.createElement("i", {className: "caret"})
 81 |                                     ), 
 82 |                                     React.createElement("ul", {className: "dropdown-menu"}, 
 83 |                                         React.createElement("li", null, 
 84 |                                             React.createElement("a", {tabindex: "-1", href: "#"}, "Blog")
 85 |                                         ), 
 86 |                                         React.createElement("li", null, 
 87 |                                             React.createElement("a", {tabindex: "-1", href: "#"}, "News")
 88 |                                         ), 
 89 |                                         React.createElement("li", null, 
 90 |                                             React.createElement("a", {tabindex: "-1", href: "#"}, "Custom Pages")
 91 |                                         ), 
 92 |                                         React.createElement("li", null, 
 93 |                                             React.createElement("a", {tabindex: "-1", href: "#"}, "Calendar")
 94 |                                         ), 
 95 |                                         React.createElement("li", {className: "divider"}), 
 96 |                                         React.createElement("li", null, 
 97 |                                             React.createElement("a", {tabindex: "-1", href: "#"}, "FAQ")
 98 |                                         )
 99 |                                     )
100 |                                 ), 
101 |                                 React.createElement("li", {className: "dropdown"}, 
102 |                                     React.createElement("a", {href: "#", role: "button", className: "dropdown-toggle", "data-toggle": "dropdown"}, "Users", 
103 |                                         React.createElement("i", {className: "caret"})
104 |                                     ), 
105 |                                     React.createElement("ul", {className: "dropdown-menu"}, 
106 |                                         React.createElement("li", null, 
107 |                                             React.createElement("a", {tabindex: "-1", href: "#"}, "User List")
108 |                                         ), 
109 |                                         React.createElement("li", null, 
110 |                                             React.createElement("a", {tabindex: "-1", href: "#"}, "Search")
111 |                                         ), 
112 |                                         React.createElement("li", null, 
113 |                                             React.createElement("a", {tabindex: "-1", href: "#"}, "Permissions")
114 |                                         )
115 |                                     )
116 |                                 )
117 |                             )
118 |                         )
119 |                     )
120 |                 )
121 |             )
122 |         );
123 |     }
124 | });
125 | 
126 | 
127 | var SideBar = React.createClass({displayName: "SideBar",
128 |     render: function () {
129 |         return (
130 |             React.createElement("div", {className: "span3", id: "sidebar"}, 
131 |                 React.createElement("ul", {className: "nav nav-list bs-docs-sidenav nav-collapse collapse"}, 
132 |                     React.createElement("li", null, 
133 |                         React.createElement("a", {href: "/admin.html"}, React.createElement("span", {className: "badge badge-success pull-right"}, "HTML"), " Bootstrap" + ' ' +
134 |                             "Dashboard")
135 |                     ), 
136 |                     React.createElement("li", null, 
137 |                         React.createElement("a", {href: "/react"}, React.createElement("span", {className: "badge badge-success pull-right"}, "Java8"), " React Health" + ' ' +
138 |                             "Check")
139 |                     ), 
140 |                     React.createElement("li", {className: "active"}, 
141 |                         React.createElement("a", {href: "/react/dashboard"}, React.createElement("span", {className: "badge badge-success pull-right"}, "Java8"), " React" + ' ' +
142 |                             "Dashboard")
143 |                     ), 
144 |                     React.createElement("li", null, 
145 |                         React.createElement("a", {href: "/api/v1"}, React.createElement("span", {className: "badge badge-success pull-right"}, "json"), " API Discovery")
146 |                     )
147 |                 )
148 |             )
149 |         );
150 |     }
151 | });
152 | 
153 | var displayNone = {
154 |     display: 'none'
155 | };
156 | 
157 | 
158 | var StatisticsGraph = React.createClass({displayName: "StatisticsGraph",
159 |     render: function () {
160 |         return (
161 |             React.createElement("div", {className: "span3"}, 
162 |                 React.createElement("div", {className: "chart", "data-percent": this.props.percent}, this.props.percent, "%"), 
163 |                 React.createElement("div", {className: "chart-bottom-heading"}, 
164 |                     React.createElement("span", {className: "label label-info"}, this.props.label)
165 |                 )
166 |             )
167 |         );
168 |     }
169 | });
170 | 
171 | 
172 | var TaskTableRow = React.createClass({displayName: "TaskTableRow",
173 |     render: function () {
174 |         return (
175 |             React.createElement("tr", null, 
176 |                 React.createElement("td", null, this.props.guid), 
177 |                 React.createElement("td", null, this.props.name), 
178 |                 React.createElement("td", null, (this.props.dueDate === null) ? "" : "" + this.props.dueDate), 
179 |                 React.createElement("td", null, this.props.effort)
180 |             )
181 |         );
182 |     }
183 | });
184 | 
185 | 
186 | var TaskTable = React.createClass({displayName: "TaskTable",
187 |     render: function () {
188 |         console.log("loader function=" + this.props.loader);
189 |         var rs = this.props.loader();
190 |         console.log("loader result=" + rs);
191 |         var todoRows = rs.map(function (child) {
192 |             console.log("task=" + child.name);
193 |             var dueDate = moment(Date.parse(child.dueDate)).format('L');
194 |             return React.createElement(TaskTableRow, {guid: child.guid, name: child.name, dueDate: dueDate, effort: child.effort});
195 |         }.bind(this));
196 |         return (
197 |             React.createElement("div", {className: "block-content collapse in"}, 
198 |                 React.createElement("table", {className: "table table-striped"}, 
199 |                     React.createElement("thead", null, 
200 |                     React.createElement("tr", null, 
201 |                         React.createElement("th", null, "#"), 
202 |                         React.createElement("th", null, "Name"), 
203 |                         React.createElement("th", null, "Date"), 
204 |                         React.createElement("th", null, "Effort")
205 |                     )
206 |                     ), 
207 |                     React.createElement("tbody", null, 
208 |                     todoRows
209 |                     )
210 |                 )
211 |             )
212 |         );
213 |     }
214 | });
215 | 
216 | 
217 | var TaskWidget = React.createClass({displayName: "TaskWidget",
218 |     render: function () {
219 |         return (
220 |             React.createElement("div", {className: "span6"}, 
221 |                 React.createElement("div", {className: "block"}, 
222 |                     React.createElement("div", {className: "navbar navbar-inner block-header"}, 
223 |                         React.createElement("div", {className: "muted pull-left"}, this.props.title), 
224 |                         React.createElement("div", {className: "pull-right"}, 
225 |                             React.createElement("span", {className: "badge badge-info"}, this.props.count)
226 |                         )
227 |                     ), 
228 |                     React.createElement(TaskTable, {loader: this.props.loader})
229 |                 )
230 |             )
231 |         );
232 |     }
233 | });
234 | 
235 | 
236 | var Content = React.createClass({displayName: "Content",
237 |     loadTaskDataFromMockup: function (skip, limit) {
238 |         return [
239 |             {guid: "1", name: "aaaa", effort: 10, dueDate: "2015-04-30"},
240 |             {guid: "2", name: "bbbb", effort: 10, dueDate: "2015-05-31"},
241 |             {guid: "3", name: "cccc", effort: 10, dueDate: "2015-06-30"},
242 |             {guid: "4", name: "dddd", effort: 10, dueDate: "2015-07-31"}
243 |         ];
244 |     },
245 |     loadTaskDataFromJavaDirectly: function () {
246 |         console.log("this.props.skip=" + this.props.skip);
247 |         console.log("this.props.limit=" + this.props.limit);
248 |         return Java.from(JavaTaskService.getTaskList(this.props.skip, this.props.limit));
249 |     },
250 |     loadTaskDataFromJavaAPICalls: function (skip, limit) {
251 |         console.log("skip=" + skip);
252 |         console.log("limit=" + limit);
253 |         return Java.from(JavaReactController.getTaskList(skip, limit));
254 |     },
255 |     renderStatistics: function () {
256 |         // get the data from global java dependency injection service
257 |         // and convert Java array into javascript array
258 |         var rs = Java.from(JavaReactController.loadStatisticsAsArray());
259 |         console.log("rs " + JSON.stringify(rs));
260 |         console.log("rs[0] " + JSON.stringify(rs[0]));
261 |         console.log("rs[0].name " + JSON.stringify(rs[0].name));
262 |         return rs.map(function (child) {
263 |             console.log("statistic=" + child.name);
264 |             return React.createElement(StatisticsGraph, {percent: child.value, label: child.name});
265 |         }.bind(this));
266 |     },
267 |     render: function () {
268 |         console.log("Content.render() " + JSON.stringify(this.props));
269 |         return (
270 |             React.createElement("div", {className: "span9", id: "content"}, 
271 |                 React.createElement("div", {className: "row-fluid"}, 
272 |                     React.createElement("div", {className: "alert alert-success"}, 
273 |                         React.createElement("button", {type: "button", className: "close", "data-dismiss": "alert"}, "×"), 
274 |                         React.createElement("h4", null, "Success"), 
275 |                         this.props.message
276 |                     ), 
277 |                     React.createElement("div", {className: "navbar"}, 
278 |                         React.createElement("div", {className: "navbar-inner"}, 
279 |                             React.createElement("ul", {className: "breadcrumb"}, 
280 |                                 React.createElement("i", {className: "icon-chevron-left hide-sidebar"}, 
281 |                                     React.createElement("a", {href: "#", title: "Hide Sidebar", rel: "tooltip"}, 
282 |                                         " ")
283 |                                 ), 
284 |                                 React.createElement("i", {className: "icon-chevron-right show-sidebar", style: displayNone}, 
285 |                                     React.createElement("a", {href: "#", 
286 |                                        title: "Show Sidebar", 
287 |                                        rel: "tooltip"}, " ")
288 |                                 ), 
289 |                                 React.createElement("li", null, 
290 |                                     React.createElement("a", {href: "#"}, "Dashboard"), 
291 |                                     React.createElement("span", {className: "divider"}, "/")
292 |                                 ), 
293 |                                 React.createElement("li", null, 
294 |                                     React.createElement("a", {href: "#"}, "Settings"), 
295 |                                     React.createElement("span", {className: "divider"}, "/")
296 |                                 ), 
297 |                                 React.createElement("li", {className: "active"}, "Tools")
298 |                             )
299 |                         )
300 |                     )
301 |                 ), 
302 |                 React.createElement("div", {className: "row-fluid"}, 
303 |                     React.createElement("div", {className: "block"}, 
304 |                         React.createElement("div", {className: "navbar navbar-inner block-header"}, 
305 |                             React.createElement("div", {className: "muted pull-left"}, "Statistics"), 
306 |                             React.createElement("div", {className: "pull-right"}, 
307 |                                 React.createElement("span", {className: "badge badge-warning"}, "View More")
308 | 
309 |                             )
310 |                         ), 
311 |                         React.createElement("div", {className: "block-content collapse in"}, 
312 |                             this.renderStatistics()
313 |                         )
314 |                     )
315 |                 ), 
316 |                 React.createElement("div", {className: "row-fluid"}, 
317 |                     React.createElement(TaskWidget, {title: "Tasks loaded from Java directly", count: "100", 
318 |                                 loader: this.loadTaskDataFromJavaDirectly.bind(this, this.props.skip, this.props.limit)}), 
319 |                     React.createElement(TaskWidget, {title: "Tasks loaded from Java making API calls", count: "200", 
320 |                                 loader: this.loadTaskDataFromJavaAPICalls.bind(this, this.props.skip, this.props.limit)})
321 |                 )
322 |             )
323 |         );
324 |     }
325 | });
326 | 
327 | 
328 | var Container = React.createClass({displayName: "Container",
329 |     render: function () {
330 |         console.log("Container.render() " + JSON.stringify(this.props));
331 |         return (
332 |             React.createElement("div", {className: "container-fluid"}, 
333 |                 React.createElement("div", {className: "row-fluid"}, 
334 |                     React.createElement(SideBar, null), 
335 |                     React.createElement(Content, {message: this.props.message, skip: this.props.skip, limit: this.props.limit})
336 |                 ), 
337 |                 React.createElement("hr", null), 
338 |                 React.createElement("footer", null, 
339 |                     React.createElement("p", null, "© Roy Bailey 2015")
340 |                 )
341 |             )
342 |         );
343 |     }
344 | });
345 | 
346 | 
347 | var renderDashboard = function (javaProps) {
348 |     console.log("Dashboard.render() " + JSON.stringify(javaProps.message));
349 |     console.log("....");
350 |     var childProps = {
351 |         skip: (Java.from(javaProps.skip) ? parseInt(Java.from(javaProps.skip)[0]) : 0),
352 |         limit: (Java.from(javaProps.limit) ? parseInt(Java.from(javaProps.limit)[0]) : 5)
353 |     };
354 |     console.log("childProps " + JSON.stringify(childProps));
355 |     return React.renderToString(
356 |         React.createElement("div", null, 
357 |             React.createElement(NavBarTop, null), 
358 |             React.createElement(Container, {message: javaProps.message, skip: childProps.skip, limit: childProps.limit})
359 |         )
360 |     );
361 | };
362 | 
363 | 


--------------------------------------------------------------------------------
/src/main/js/nashorn-polyfill.js:
--------------------------------------------------------------------------------
1 | var global = this;
2 | var window = this;
3 | 
4 | var console = {};
5 | console.debug = print;
6 | console.warn = print;
7 | console.log = print;


--------------------------------------------------------------------------------
/src/main/jsx/app.jsx:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var TitleView = React.createClass({
 4 |     render: function() {
 5 |         return <h1>{this.props.text}</h1>;
 6 |     }
 7 | });
 8 | 
 9 | var renderTitle = function (javaProps) {
10 |     return React.renderToString(
11 |         React.createElement(TitleView, {text: javaProps.title})
12 |     );
13 | };


--------------------------------------------------------------------------------
/src/main/jsx/dashboard.jsx:
--------------------------------------------------------------------------------
  1 | /** @jsx React.DOM */
  2 | 
  3 | var NavBarTop = React.createClass({
  4 |     render: function () {
  5 |         return (
  6 |             <div className="navbar navbar-fixed-top">
  7 |                 <div className="navbar-inner">
  8 |                     <div className="container-fluid">
  9 |                         <a className="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 10 |                             <span className="icon-bar"></span>
 11 |                             <span className="icon-bar"></span>
 12 |                             <span className="icon-bar"></span>
 13 |                         </a>
 14 |                         <a className="brand" href="#">SparkJava React</a>
 15 | 
 16 |                         <div className="nav-collapse collapse">
 17 |                             <ul className="nav pull-right">
 18 |                                 <li className="dropdown">
 19 |                                     <a href="#" role="button" className="dropdown-toggle" data-toggle="dropdown">
 20 |                                         <i className="icon-user"></i>
 21 |                                         Roy Bailey
 22 |                                         <i className="caret"></i>
 23 |                                     </a>
 24 |                                     <ul className="dropdown-menu">
 25 |                                         <li>
 26 |                                             <a tabindex="-1" href="http://roybailey.biz">Profile</a>
 27 |                                         </li>
 28 |                                         <li className="divider"></li>
 29 |                                         <li>
 30 |                                             <a tabindex="-1"
 31 |                                                href="https://github.com/roybailey/sparkjava-retrofit-react">GitHub
 32 |                                                 Code</a>
 33 |                                         </li>
 34 |                                     </ul>
 35 |                                 </li>
 36 |                             </ul>
 37 |                             <ul className="nav">
 38 |                                 <li className="active">
 39 |                                     <a href="#">Dashboard</a>
 40 |                                 </li>
 41 |                                 <li className="dropdown">
 42 |                                     <a href="#" data-toggle="dropdown" className="dropdown-toggle">Settings
 43 |                                         <b className="caret"></b>
 44 |                                     </a>
 45 |                                     <ul className="dropdown-menu" id="menu1">
 46 |                                         <li>
 47 |                                             <a href="#">Tools
 48 |                                                 <i className="icon-arrow-right"></i>
 49 | 
 50 |                                             </a>
 51 |                                             <ul className="dropdown-menu sub-menu">
 52 |                                                 <li>
 53 |                                                     <a href="#">Reports</a>
 54 |                                                 </li>
 55 |                                                 <li>
 56 |                                                     <a href="#">Logs</a>
 57 |                                                 </li>
 58 |                                                 <li>
 59 |                                                     <a href="#">Errors</a>
 60 |                                                 </li>
 61 |                                             </ul>
 62 |                                         </li>
 63 |                                         <li>
 64 |                                             <a href="#">SEO Settings</a>
 65 |                                         </li>
 66 |                                         <li>
 67 |                                             <a href="#">Other Link</a>
 68 |                                         </li>
 69 |                                         <li className="divider"></li>
 70 |                                         <li>
 71 |                                             <a href="#">Other Link</a>
 72 |                                         </li>
 73 |                                         <li>
 74 |                                             <a href="#">Other Link</a>
 75 |                                         </li>
 76 |                                     </ul>
 77 |                                 </li>
 78 |                                 <li className="dropdown">
 79 |                                     <a href="#" role="button" className="dropdown-toggle" data-toggle="dropdown">Content
 80 |                                         <i className="caret"></i>
 81 |                                     </a>
 82 |                                     <ul className="dropdown-menu">
 83 |                                         <li>
 84 |                                             <a tabindex="-1" href="#">Blog</a>
 85 |                                         </li>
 86 |                                         <li>
 87 |                                             <a tabindex="-1" href="#">News</a>
 88 |                                         </li>
 89 |                                         <li>
 90 |                                             <a tabindex="-1" href="#">Custom Pages</a>
 91 |                                         </li>
 92 |                                         <li>
 93 |                                             <a tabindex="-1" href="#">Calendar</a>
 94 |                                         </li>
 95 |                                         <li className="divider"></li>
 96 |                                         <li>
 97 |                                             <a tabindex="-1" href="#">FAQ</a>
 98 |                                         </li>
 99 |                                     </ul>
100 |                                 </li>
101 |                                 <li className="dropdown">
102 |                                     <a href="#" role="button" className="dropdown-toggle" data-toggle="dropdown">Users
103 |                                         <i className="caret"></i>
104 |                                     </a>
105 |                                     <ul className="dropdown-menu">
106 |                                         <li>
107 |                                             <a tabindex="-1" href="#">User List</a>
108 |                                         </li>
109 |                                         <li>
110 |                                             <a tabindex="-1" href="#">Search</a>
111 |                                         </li>
112 |                                         <li>
113 |                                             <a tabindex="-1" href="#">Permissions</a>
114 |                                         </li>
115 |                                     </ul>
116 |                                 </li>
117 |                             </ul>
118 |                         </div>
119 |                     </div>
120 |                 </div>
121 |             </div>
122 |         );
123 |     }
124 | });
125 | 
126 | 
127 | var SideBar = React.createClass({
128 |     render: function () {
129 |         return (
130 |             <div className="span3" id="sidebar">
131 |                 <ul className="nav nav-list bs-docs-sidenav nav-collapse collapse">
132 |                     <li>
133 |                         <a href="/admin.html"><span className="badge badge-success pull-right">HTML</span> Bootstrap
134 |                             Dashboard</a>
135 |                     </li>
136 |                     <li>
137 |                         <a href="/react"><span className="badge badge-success pull-right">Java8</span> React Health
138 |                             Check</a>
139 |                     </li>
140 |                     <li className="active">
141 |                         <a href="/react/dashboard"><span className="badge badge-success pull-right">Java8</span> React
142 |                             Dashboard</a>
143 |                     </li>
144 |                     <li>
145 |                         <a href="/api/v1"><span className="badge badge-success pull-right">json</span> API Discovery</a>
146 |                     </li>
147 |                 </ul>
148 |             </div>
149 |         );
150 |     }
151 | });
152 | 
153 | var displayNone = {
154 |     display: 'none'
155 | };
156 | 
157 | 
158 | var StatisticsGraph = React.createClass({
159 |     render: function () {
160 |         return (
161 |             <div className="span3">
162 |                 <div className="chart" data-percent={this.props.percent}>{this.props.percent}%</div>
163 |                 <div className="chart-bottom-heading">
164 |                     <span className="label label-info">{this.props.label}</span>
165 |                 </div>
166 |             </div>
167 |         );
168 |     }
169 | });
170 | 
171 | 
172 | var TaskTableRow = React.createClass({
173 |     render: function () {
174 |         return (
175 |             <tr>
176 |                 <td>{this.props.guid}</td>
177 |                 <td>{this.props.name}</td>
178 |                 <td>{(this.props.dueDate === null) ? "" : "" + this.props.dueDate}</td>
179 |                 <td>{this.props.effort}</td>
180 |             </tr>
181 |         );
182 |     }
183 | });
184 | 
185 | 
186 | var TaskTable = React.createClass({
187 |     render: function () {
188 |         console.log("loader function=" + this.props.loader);
189 |         var rs = this.props.loader();
190 |         console.log("loader result=" + rs);
191 |         var todoRows = rs.map(function (child) {
192 |             console.log("task=" + child.name);
193 |             var dueDate = moment(Date.parse(child.dueDate)).format('L');
194 |             return <TaskTableRow guid={child.guid} name={child.name} dueDate={dueDate} effort={child.effort}/>;
195 |         }.bind(this));
196 |         return (
197 |             <div className="block-content collapse in">
198 |                 <table className="table table-striped">
199 |                     <thead>
200 |                     <tr>
201 |                         <th>#</th>
202 |                         <th>Name</th>
203 |                         <th>Date</th>
204 |                         <th>Effort</th>
205 |                     </tr>
206 |                     </thead>
207 |                     <tbody>
208 |                     {todoRows}
209 |                     </tbody>
210 |                 </table>
211 |             </div>
212 |         );
213 |     }
214 | });
215 | 
216 | 
217 | var TaskWidget = React.createClass({
218 |     render: function () {
219 |         return (
220 |             <div className="span6">
221 |                 <div className="block">
222 |                     <div className="navbar navbar-inner block-header">
223 |                         <div className="muted pull-left">{this.props.title}</div>
224 |                         <div className="pull-right">
225 |                             <span className="badge badge-info">{this.props.count}</span>
226 |                         </div>
227 |                     </div>
228 |                     <TaskTable loader={this.props.loader}/>
229 |                 </div>
230 |             </div>
231 |         );
232 |     }
233 | });
234 | 
235 | 
236 | var Content = React.createClass({
237 |     loadTaskDataFromMockup: function (skip, limit) {
238 |         return [
239 |             {guid: "1", name: "aaaa", effort: 10, dueDate: "2015-04-30"},
240 |             {guid: "2", name: "bbbb", effort: 10, dueDate: "2015-05-31"},
241 |             {guid: "3", name: "cccc", effort: 10, dueDate: "2015-06-30"},
242 |             {guid: "4", name: "dddd", effort: 10, dueDate: "2015-07-31"}
243 |         ];
244 |     },
245 |     loadTaskDataFromJavaDirectly: function () {
246 |         console.log("this.props.skip=" + this.props.skip);
247 |         console.log("this.props.limit=" + this.props.limit);
248 |         return Java.from(JavaTaskService.getTaskList(this.props.skip, this.props.limit));
249 |     },
250 |     loadTaskDataFromJavaAPICalls: function (skip, limit) {
251 |         console.log("skip=" + skip);
252 |         console.log("limit=" + limit);
253 |         return Java.from(JavaReactController.getTaskList(skip, limit));
254 |     },
255 |     renderStatistics: function () {
256 |         // get the data from global java dependency injection service
257 |         // and convert Java array into javascript array
258 |         var rs = Java.from(JavaReactController.loadStatisticsAsArray());
259 |         console.log("rs " + JSON.stringify(rs));
260 |         console.log("rs[0] " + JSON.stringify(rs[0]));
261 |         console.log("rs[0].name " + JSON.stringify(rs[0].name));
262 |         return rs.map(function (child) {
263 |             console.log("statistic=" + child.name);
264 |             return <StatisticsGraph percent={child.value} label={child.name}/>;
265 |         }.bind(this));
266 |     },
267 |     render: function () {
268 |         console.log("Content.render() " + JSON.stringify(this.props));
269 |         return (
270 |             <div className="span9" id="content">
271 |                 <div className="row-fluid">
272 |                     <div className="alert alert-success">
273 |                         <button type="button" className="close" data-dismiss="alert">&times;</button>
274 |                         <h4>Success</h4>
275 |                         {this.props.message}
276 |                     </div>
277 |                     <div className="navbar">
278 |                         <div className="navbar-inner">
279 |                             <ul className="breadcrumb">
280 |                                 <i className="icon-chevron-left hide-sidebar">
281 |                                     <a href='#' title="Hide Sidebar" rel='tooltip'>
282 |                                         &nbsp;</a>
283 |                                 </i>
284 |                                 <i className="icon-chevron-right show-sidebar" style={displayNone}>
285 |                                     <a href='#'
286 |                                        title="Show Sidebar"
287 |                                        rel='tooltip'>&nbsp;</a>
288 |                                 </i>
289 |                                 <li>
290 |                                     <a href="#">Dashboard</a>
291 |                                     <span className="divider">/</span>
292 |                                 </li>
293 |                                 <li>
294 |                                     <a href="#">Settings</a>
295 |                                     <span className="divider">/</span>
296 |                                 </li>
297 |                                 <li className="active">Tools</li>
298 |                             </ul>
299 |                         </div>
300 |                     </div>
301 |                 </div>
302 |                 <div className="row-fluid">
303 |                     <div className="block">
304 |                         <div className="navbar navbar-inner block-header">
305 |                             <div className="muted pull-left">Statistics</div>
306 |                             <div className="pull-right">
307 |                                 <span className="badge badge-warning">View More</span>
308 | 
309 |                             </div>
310 |                         </div>
311 |                         <div className="block-content collapse in">
312 |                             {this.renderStatistics()}
313 |                         </div>
314 |                     </div>
315 |                 </div>
316 |                 <div className="row-fluid">
317 |                     <TaskWidget title="Tasks loaded from Java directly" count="100"
318 |                                 loader={this.loadTaskDataFromJavaDirectly.bind(this, this.props.skip, this.props.limit)}/>
319 |                     <TaskWidget title="Tasks loaded from Java making API calls" count="200"
320 |                                 loader={this.loadTaskDataFromJavaAPICalls.bind(this, this.props.skip, this.props.limit)}/>
321 |                 </div>
322 |             </div>
323 |         );
324 |     }
325 | });
326 | 
327 | 
328 | var Container = React.createClass({
329 |     render: function () {
330 |         console.log("Container.render() " + JSON.stringify(this.props));
331 |         return (
332 |             <div className="container-fluid">
333 |                 <div className="row-fluid">
334 |                     <SideBar />
335 |                     <Content message={this.props.message} skip={this.props.skip} limit={this.props.limit}/>
336 |                 </div>
337 |                 <hr/>
338 |                 <footer>
339 |                     <p>&copy; Roy Bailey 2015</p>
340 |                 </footer>
341 |             </div>
342 |         );
343 |     }
344 | });
345 | 
346 | 
347 | var renderDashboard = function (javaProps) {
348 |     console.log("Dashboard.render() " + JSON.stringify(javaProps.message));
349 |     console.log("....");
350 |     var childProps = {
351 |         skip: (Java.from(javaProps.skip) ? parseInt(Java.from(javaProps.skip)[0]) : 0),
352 |         limit: (Java.from(javaProps.limit) ? parseInt(Java.from(javaProps.limit)[0]) : 5)
353 |     };
354 |     console.log("childProps " + JSON.stringify(childProps));
355 |     return React.renderToString(
356 |         <div>
357 |             <NavBarTop/>
358 |             <Container message={javaProps.message} skip={childProps.skip} limit={childProps.limit}/>
359 |         </div>
360 |     );
361 | };
362 | 
363 | 


--------------------------------------------------------------------------------
/src/main/resources/demodata/DemoTaskService.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "1": {
 3 |     "guid": 1,
 4 |     "name": "Shopping",
 5 |     "description": "Shopping needs to be done",
 6 |     "dueDate": "2015-04-16T17:19:25.257Z",
 7 |     "effort": 100,
 8 |     "progress": 0
 9 |   },
10 |   "2": {
11 |     "guid": 2,
12 |     "name": "Washing",
13 |     "description": "Washing needs to be done",
14 |     "dueDate": "2015-04-16T17:19:25.257Z",
15 |     "effort": 100,
16 |     "progress": 0
17 |   },
18 |   "3": {
19 |     "guid": 3,
20 |     "name": "Car Service",
21 |     "description": "Car Service needs to be done",
22 |     "dueDate": "2015-04-16T17:19:25.257Z",
23 |     "effort": 100,
24 |     "progress": 0
25 |   },
26 |   "4": {
27 |     "guid": 4,
28 |     "name": "Revision Study",
29 |     "description": "Revision Study needs to be done",
30 |     "dueDate": "2015-04-16T17:19:25.257Z",
31 |     "effort": 100,
32 |     "progress": 0
33 |   },
34 |   "5": {
35 |     "guid": 5,
36 |     "name": "Appointment",
37 |     "description": "Appointment needs to be done",
38 |     "dueDate": "2015-04-16T17:19:25.257Z",
39 |     "effort": 100,
40 |     "progress": 0
41 |   },
42 |   "6": {
43 |     "guid": 6,
44 |     "name": "Trip to tip",
45 |     "description": "Trip to tip needs to be done",
46 |     "dueDate": "2015-04-16T17:19:25.257Z",
47 |     "effort": 100,
48 |     "progress": 0
49 |   },
50 |   "7": {
51 |     "guid": 7,
52 |     "name": "Tidy garage",
53 |     "description": "Tidy garage needs to be done",
54 |     "dueDate": "2015-04-16T17:19:25.257Z",
55 |     "effort": 100,
56 |     "progress": 0
57 |   },
58 |   "8": {
59 |     "guid": 8,
60 |     "name": "Fix broken chair",
61 |     "description": "Fix broken chair needs to be done",
62 |     "dueDate": "2015-04-16T17:19:25.257Z",
63 |     "effort": 100,
64 |     "progress": 0
65 |   },
66 |   "9": {
67 |     "guid": 9,
68 |     "name": "Order present",
69 |     "description": "Order present needs to be done",
70 |     "dueDate": "2015-04-16T17:19:25.257Z",
71 |     "effort": 100,
72 |     "progress": 0
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/main/resources/log4j.properties:
--------------------------------------------------------------------------------
 1 | # Root logger option
 2 | log4j.rootLogger=INFO, stdout
 3 | 
 4 | log4j.me.roybailey=DEBUG, stdout
 5 | 
 6 | # Direct log messages to stdout
 7 | log4j.appender.stdout=org.apache.log4j.ConsoleAppender
 8 | log4j.appender.stdout.Target=System.out
 9 | log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
10 | log4j.appender.stdout.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %-5p %c{1}:%L - %m%n
11 | 


--------------------------------------------------------------------------------
/src/main/resources/webapp/admin.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html class="no-js">
  3 | 
  4 | <head>
  5 |     <title>Admin Home Page</title>
  6 |     <!-- Bootstrap -->
  7 |     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  8 |     <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
  9 |     <link href="easypiechart/jquery.easy-pie-chart.css" rel="stylesheet" media="screen">
 10 |     <link href="assets/styles.css" rel="stylesheet" media="screen">
 11 |     <script src="jquery/jquery-1.9.1.min.js"></script>
 12 |     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
 13 |     <!--[if lt IE 9]>
 14 |     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 15 |     <![endif]-->
 16 | </head>
 17 | 
 18 | <body>
 19 | <div class="navbar navbar-fixed-top">
 20 |     <div class="navbar-inner">
 21 |         <div class="container-fluid">
 22 |             <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 23 |                 <span class="icon-bar"></span>
 24 |                 <span class="icon-bar"></span>
 25 |             </a>
 26 |             <a class="brand" href="#">Bootstrap Admin Theme</a>
 27 | 
 28 |             <div class="nav-collapse collapse">
 29 |                 <ul class="nav pull-right">
 30 |                     <li class="dropdown">
 31 |                         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i
 32 |                                 class="icon-user"></i> Vincent Gabriel <i class="caret"></i>
 33 | 
 34 |                         </a>
 35 |                         <ul class="dropdown-menu">
 36 |                             <li>
 37 |                                 <a tabindex="-1" href="http://vinceg.github.io/Bootstrap-Admin-Theme/">Original Demo</a>
 38 |                             </li>
 39 |                             <li class="divider"></li>
 40 |                             <li>
 41 |                                 <a tabindex="-1" href="https://github.com/VinceG/Bootstrap-Admin-Theme">GitHub for Bootstrap Theme</a>
 42 |                             </li>
 43 |                         </ul>
 44 |                     </li>
 45 |                 </ul>
 46 |                 <ul class="nav">
 47 |                     <li class="active">
 48 |                         <a href="#">Dashboard</a>
 49 |                     </li>
 50 |                     <li class="dropdown">
 51 |                         <a href="#" data-toggle="dropdown" class="dropdown-toggle">Settings <b class="caret"></b>
 52 | 
 53 |                         </a>
 54 |                         <ul class="dropdown-menu" id="menu1">
 55 |                             <li>
 56 |                                 <a href="#">Tools <i class="icon-arrow-right"></i>
 57 | 
 58 |                                 </a>
 59 |                                 <ul class="dropdown-menu sub-menu">
 60 |                                     <li>
 61 |                                         <a href="#">Reports</a>
 62 |                                     </li>
 63 |                                     <li>
 64 |                                         <a href="#">Logs</a>
 65 |                                     </li>
 66 |                                     <li>
 67 |                                         <a href="#">Errors</a>
 68 |                                     </li>
 69 |                                 </ul>
 70 |                             </li>
 71 |                             <li>
 72 |                                 <a href="#">SEO Settings</a>
 73 |                             </li>
 74 |                             <li>
 75 |                                 <a href="#">Other Link</a>
 76 |                             </li>
 77 |                             <li class="divider"></li>
 78 |                             <li>
 79 |                                 <a href="#">Other Link</a>
 80 |                             </li>
 81 |                             <li>
 82 |                                 <a href="#">Other Link</a>
 83 |                             </li>
 84 |                         </ul>
 85 |                     </li>
 86 |                     <li class="dropdown">
 87 |                         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Content <i class="caret"></i>
 88 |                         </a>
 89 |                         <ul class="dropdown-menu">
 90 |                             <li>
 91 |                                 <a tabindex="-1" href="#">Blog</a>
 92 |                             </li>
 93 |                             <li>
 94 |                                 <a tabindex="-1" href="#">News</a>
 95 |                             </li>
 96 |                             <li>
 97 |                                 <a tabindex="-1" href="#">Custom Pages</a>
 98 |                             </li>
 99 |                             <li>
100 |                                 <a tabindex="-1" href="#">Calendar</a>
101 |                             </li>
102 |                             <li class="divider"></li>
103 |                             <li>
104 |                                 <a tabindex="-1" href="#">FAQ</a>
105 |                             </li>
106 |                         </ul>
107 |                     </li>
108 |                     <li class="dropdown">
109 |                         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Users <i
110 |                                 class="caret"></i>
111 | 
112 |                         </a>
113 |                         <ul class="dropdown-menu">
114 |                             <li>
115 |                                 <a tabindex="-1" href="#">User List</a>
116 |                             </li>
117 |                             <li>
118 |                                 <a tabindex="-1" href="#">Search</a>
119 |                             </li>
120 |                             <li>
121 |                                 <a tabindex="-1" href="#">Permissions</a>
122 |                             </li>
123 |                         </ul>
124 |                     </li>
125 |                 </ul>
126 |             </div>
127 |             <!--/.nav-collapse -->
128 |         </div>
129 |     </div>
130 | </div>
131 | <div class="container-fluid">
132 |     <div class="row-fluid">
133 |         <div class="span3" id="sidebar">
134 |             <ul class="nav nav-list bs-docs-sidenav nav-collapse collapse">
135 |                 <li class="active">
136 |                     <a href="/admin.html"><span class="badge badge-success pull-right">HTML</span> Bootstrap Dashboard</a>
137 |                 </li>
138 |                 <li>
139 |                     <a href="/react"><span class="badge badge-success pull-right">Java8</span> React Health Check</a>
140 |                 </li>
141 |                 <li>
142 |                     <a href="/react/dashboard"><span class="badge badge-success pull-right">Java8</span> React Dashboard</a>
143 |                 </li>
144 |                 <li>
145 |                     <a href="/api/v1"><span class="badge badge-success pull-right">json</span> API Discovery</a>
146 |                 </li>
147 |             </ul>
148 |         </div>
149 | 
150 |         <!--/span-->
151 |         <div class="span9" id="content">
152 |             <div class="row-fluid">
153 |                 <div class="alert alert-success">
154 |                     <button type="button" class="close" data-dismiss="alert">&times;</button>
155 |                     <h4>Success</h4>
156 |                     Cut down static demo of Dashboard Loaded Successfully
157 |                 </div>
158 |                 <div class="navbar">
159 |                     <div class="navbar-inner">
160 |                         <ul class="breadcrumb">
161 |                             <i class="icon-chevron-left hide-sidebar"><a href='#' title="Hide Sidebar" rel='tooltip'>
162 |                                 &nbsp;</a></i>
163 |                             <i class="icon-chevron-right show-sidebar" style="display:none;"><a href='#'
164 |                                                                                                 title="Show Sidebar"
165 |                                                                                                 rel='tooltip'>&nbsp;</a></i>
166 |                             <li>
167 |                                 <a href="#">Dashboard</a> <span class="divider">/</span>
168 |                             </li>
169 |                             <li>
170 |                                 <a href="#">Settings</a> <span class="divider">/</span>
171 |                             </li>
172 |                             <li class="active">Tools</li>
173 |                         </ul>
174 |                     </div>
175 |                 </div>
176 |             </div>
177 |             <div class="row-fluid">
178 |                 <!-- block -->
179 |                 <div class="block">
180 |                     <div class="navbar navbar-inner block-header">
181 |                         <div class="muted pull-left">Statistics</div>
182 |                         <div class="pull-right"><span class="badge badge-warning">View More</span>
183 | 
184 |                         </div>
185 |                     </div>
186 |                     <div class="block-content collapse in">
187 |                         <div class="span3">
188 |                             <div class="chart" data-percent="73">73%</div>
189 |                             <div class="chart-bottom-heading"><span class="label label-info">Visitors</span>
190 | 
191 |                             </div>
192 |                         </div>
193 |                         <div class="span3">
194 |                             <div class="chart" data-percent="53">53%</div>
195 |                             <div class="chart-bottom-heading"><span class="label label-info">Page Views</span>
196 | 
197 |                             </div>
198 |                         </div>
199 |                         <div class="span3">
200 |                             <div class="chart" data-percent="83">83%</div>
201 |                             <div class="chart-bottom-heading"><span class="label label-info">Users</span>
202 | 
203 |                             </div>
204 |                         </div>
205 |                         <div class="span3">
206 |                             <div class="chart" data-percent="13">13%</div>
207 |                             <div class="chart-bottom-heading"><span class="label label-info">Orders</span>
208 | 
209 |                             </div>
210 |                         </div>
211 |                     </div>
212 |                 </div>
213 |                 <!-- /block -->
214 |             </div>
215 |             <div class="row-fluid">
216 |                 <div class="span6">
217 |                     <!-- block -->
218 |                     <div class="block">
219 |                         <div class="navbar navbar-inner block-header">
220 |                             <div class="muted pull-left">Users</div>
221 |                             <div class="pull-right"><span class="badge badge-info">1,234</span>
222 | 
223 |                             </div>
224 |                         </div>
225 |                         <div class="block-content collapse in">
226 |                             <table class="table table-striped">
227 |                                 <thead>
228 |                                 <tr>
229 |                                     <th>#</th>
230 |                                     <th>First Name</th>
231 |                                     <th>Last Name</th>
232 |                                     <th>Username</th>
233 |                                 </tr>
234 |                                 </thead>
235 |                                 <tbody>
236 |                                 <tr>
237 |                                     <td>1</td>
238 |                                     <td>Mark</td>
239 |                                     <td>Otto</td>
240 |                                     <td>@mdo</td>
241 |                                 </tr>
242 |                                 <tr>
243 |                                     <td>2</td>
244 |                                     <td>Jacob</td>
245 |                                     <td>Thornton</td>
246 |                                     <td>@fat</td>
247 |                                 </tr>
248 |                                 <tr>
249 |                                     <td>3</td>
250 |                                     <td>Vincent</td>
251 |                                     <td>Gabriel</td>
252 |                                     <td>@gabrielva</td>
253 |                                 </tr>
254 |                                 </tbody>
255 |                             </table>
256 |                         </div>
257 |                     </div>
258 |                     <!-- /block -->
259 |                 </div>
260 |                 <div class="span6">
261 |                     <!-- block -->
262 |                     <div class="block">
263 |                         <div class="navbar navbar-inner block-header">
264 |                             <div class="muted pull-left">Orders</div>
265 |                             <div class="pull-right"><span class="badge badge-info">752</span>
266 | 
267 |                             </div>
268 |                         </div>
269 |                         <div class="block-content collapse in">
270 |                             <table class="table table-striped">
271 |                                 <thead>
272 |                                 <tr>
273 |                                     <th>#</th>
274 |                                     <th>Product</th>
275 |                                     <th>Date</th>
276 |                                     <th>Amount</th>
277 |                                 </tr>
278 |                                 </thead>
279 |                                 <tbody>
280 |                                 <tr>
281 |                                     <td>1</td>
282 |                                     <td>Coat</td>
283 |                                     <td>02/02/2013</td>
284 |                                     <td>$25.12</td>
285 |                                 </tr>
286 |                                 <tr>
287 |                                     <td>2</td>
288 |                                     <td>Jacket</td>
289 |                                     <td>01/02/2013</td>
290 |                                     <td>$335.00</td>
291 |                                 </tr>
292 |                                 <tr>
293 |                                     <td>3</td>
294 |                                     <td>Shoes</td>
295 |                                     <td>01/02/2013</td>
296 |                                     <td>$29.99</td>
297 |                                 </tr>
298 |                                 </tbody>
299 |                             </table>
300 |                         </div>
301 |                     </div>
302 |                     <!-- /block -->
303 |                 </div>
304 |             </div>
305 |             <div class="row-fluid">
306 |                 <div class="span6">
307 |                     <!-- block -->
308 |                     <div class="block">
309 |                         <div class="navbar navbar-inner block-header">
310 |                             <div class="muted pull-left">Clients</div>
311 |                             <div class="pull-right"><span class="badge badge-info">17</span>
312 | 
313 |                             </div>
314 |                         </div>
315 |                         <div class="block-content collapse in">
316 |                             <table class="table table-striped">
317 |                                 <thead>
318 |                                 <tr>
319 |                                     <th>#</th>
320 |                                     <th>First Name</th>
321 |                                     <th>Last Name</th>
322 |                                     <th>Username</th>
323 |                                 </tr>
324 |                                 </thead>
325 |                                 <tbody>
326 |                                 <tr>
327 |                                     <td>1</td>
328 |                                     <td>Mark</td>
329 |                                     <td>Otto</td>
330 |                                     <td>@mdo</td>
331 |                                 </tr>
332 |                                 <tr>
333 |                                     <td>2</td>
334 |                                     <td>Jacob</td>
335 |                                     <td>Thornton</td>
336 |                                     <td>@fat</td>
337 |                                 </tr>
338 |                                 <tr>
339 |                                     <td>3</td>
340 |                                     <td>Vincent</td>
341 |                                     <td>Gabriel</td>
342 |                                     <td>@gabrielva</td>
343 |                                 </tr>
344 |                                 </tbody>
345 |                             </table>
346 |                         </div>
347 |                     </div>
348 |                     <!-- /block -->
349 |                 </div>
350 |                 <div class="span6">
351 |                     <!-- block -->
352 |                     <div class="block">
353 |                         <div class="navbar navbar-inner block-header">
354 |                             <div class="muted pull-left">Invoices</div>
355 |                             <div class="pull-right"><span class="badge badge-info">812</span>
356 | 
357 |                             </div>
358 |                         </div>
359 |                         <div class="block-content collapse in">
360 |                             <table class="table table-striped">
361 |                                 <thead>
362 |                                 <tr>
363 |                                     <th>#</th>
364 |                                     <th>Date</th>
365 |                                     <th>Amount</th>
366 |                                 </tr>
367 |                                 </thead>
368 |                                 <tbody>
369 |                                 <tr>
370 |                                     <td>1</td>
371 |                                     <td>02/02/2013</td>
372 |                                     <td>$25.12</td>
373 |                                 </tr>
374 |                                 <tr>
375 |                                     <td>2</td>
376 |                                     <td>01/02/2013</td>
377 |                                     <td>$335.00</td>
378 |                                 </tr>
379 |                                 <tr>
380 |                                     <td>3</td>
381 |                                     <td>01/02/2013</td>
382 |                                     <td>$29.99</td>
383 |                                 </tr>
384 |                                 </tbody>
385 |                             </table>
386 |                         </div>
387 |                     </div>
388 |                     <!-- /block -->
389 |                 </div>
390 |             </div>
391 |         </div>
392 |     </div>
393 |     <hr>
394 |     <footer>
395 |         <p>&copy; Vincent Gabriel 2013</p>
396 |     </footer>
397 | </div>
398 | <!--/.fluid-container-->
399 | <script src="bootstrap/js/bootstrap.min.js"></script>
400 | <script src="easypiechart/jquery.easy-pie-chart.js"></script>
401 | <script src="assets/scripts.js"></script>
402 | <script>
403 |     $(function() {
404 |         // Easy pie charts
405 |         $('.chart').easyPieChart({animate: 1000});
406 |     });
407 | </script>
408 | </body>
409 | 
410 | </html>


--------------------------------------------------------------------------------
/src/main/resources/webapp/assets/DT_bootstrap.css:
--------------------------------------------------------------------------------
  1 | .table-toolbar {
  2 |     margin-bottom: 15px;
  3 | }
  4 | 
  5 | div.dataTables_length label {
  6 | 	float: left;
  7 | 	text-align: left;
  8 | }
  9 | 
 10 | div.dataTables_length select {
 11 | 	width: 75px;
 12 | }
 13 | 
 14 | div.dataTables_filter label {
 15 | 	float: right;
 16 | }
 17 | 
 18 | div.dataTables_info {
 19 | 	padding-top: 8px;
 20 | }
 21 | 
 22 | div.dataTables_paginate {
 23 | 	float: right;
 24 | 	margin: 0;
 25 | }
 26 | 
 27 | table.table {
 28 | 	clear: both;
 29 | 	margin-bottom: 6px !important;
 30 | 	max-width: none !important;
 31 | }
 32 | 
 33 | table.table thead .sorting,
 34 | table.table thead .sorting_asc,
 35 | table.table thead .sorting_desc,
 36 | table.table thead .sorting_asc_disabled,
 37 | table.table thead .sorting_desc_disabled {
 38 | 	cursor: pointer;
 39 | 	*cursor: hand;
 40 | }
 41 | 
 42 | table.table thead .sorting { background: url('../vendors/datatables/images/sort_both.png') no-repeat center right; }
 43 | table.table thead .sorting_asc { background: url('../vendors/datatables/images/sort_asc.png') no-repeat center right; }
 44 | table.table thead .sorting_desc { background: url('../vendors/datatables/images/sort_desc.png') no-repeat center right; }
 45 | 
 46 | table.table thead .sorting_asc_disabled { background: url('../vendors/datatables/images/sort_asc_disabled.png') no-repeat center right; }
 47 | table.table thead .sorting_desc_disabled { background: url('../vendors/datatables/images/sort_desc_disabled.png') no-repeat center right; }
 48 | 
 49 | table.dataTable th:active {
 50 | 	outline: none;
 51 | }
 52 | 
 53 | /* Scrolling */
 54 | div.dataTables_scrollHead table {
 55 | 	margin-bottom: 0 !important;
 56 | 	border-bottom-left-radius: 0;
 57 | 	border-bottom-right-radius: 0;
 58 | }
 59 | 
 60 | div.dataTables_scrollHead table thead tr:last-child th:first-child,
 61 | div.dataTables_scrollHead table thead tr:last-child td:first-child {
 62 | 	border-bottom-left-radius: 0 !important;
 63 | 	border-bottom-right-radius: 0 !important;
 64 | }
 65 | 
 66 | div.dataTables_scrollBody table {
 67 | 	border-top: none;
 68 | 	margin-bottom: 0 !important;
 69 | }
 70 | 
 71 | div.dataTables_scrollBody tbody tr:first-child th,
 72 | div.dataTables_scrollBody tbody tr:first-child td {
 73 | 	border-top: none;
 74 | }
 75 | 
 76 | div.dataTables_scrollFoot table {
 77 | 	border-top: none;
 78 | }
 79 | 
 80 | 
 81 | 
 82 | 
 83 | /*
 84 |  * TableTools styles
 85 |  */
 86 | .table tbody tr.active td,
 87 | .table tbody tr.active th {
 88 | 	background-color: #08C;
 89 | 	color: white;
 90 | }
 91 | 
 92 | .table tbody tr.active:hover td,
 93 | .table tbody tr.active:hover th {
 94 | 	background-color: #0075b0 !important;
 95 | }
 96 | 
 97 | .table-striped tbody tr.active:nth-child(odd) td,
 98 | .table-striped tbody tr.active:nth-child(odd) th {
 99 | 	background-color: #017ebc;
100 | }
101 | 
102 | table.DTTT_selectable tbody tr {
103 | 	cursor: pointer;
104 | 	*cursor: hand;
105 | }
106 | 
107 | div.DTTT .btn {
108 | 	color: #333 !important;
109 | 	font-size: 12px;
110 | }
111 | 
112 | div.DTTT .btn:hover {
113 | 	text-decoration: none !important;
114 | }
115 | 
116 | 
117 | ul.DTTT_dropdown.dropdown-menu a {
118 | 	color: #333 !important; /* needed only when demo_page.css is included */
119 | }
120 | 
121 | ul.DTTT_dropdown.dropdown-menu li:hover a {
122 | 	background-color: #0088cc;
123 | 	color: white !important;
124 | }
125 | 
126 | /* TableTools information display */
127 | div.DTTT_print_info.modal {
128 | 	height: 150px;
129 | 	margin-top: -75px;
130 | 	text-align: center;
131 | }
132 | 
133 | div.DTTT_print_info h6 {
134 | 	font-weight: normal;
135 | 	font-size: 28px;
136 | 	line-height: 28px;
137 | 	margin: 1em;
138 | }
139 | 
140 | div.DTTT_print_info p {
141 | 	font-size: 14px;
142 | 	line-height: 20px;
143 | }
144 | 
145 | .dataTables_wrapper .row {
146 | 	margin-left:0px;
147 | }
148 | 
149 | /*
150 |  * FixedColumns styles
151 |  */
152 | div.DTFC_LeftHeadWrapper table,
153 | div.DTFC_LeftFootWrapper table,
154 | table.DTFC_Cloned tr.even {
155 | 	background-color: white;
156 | }
157 | 
158 | div.DTFC_LeftHeadWrapper table {
159 | 	margin-bottom: 0 !important;
160 | 	border-top-right-radius: 0 !important;
161 | 	border-bottom-left-radius: 0 !important;
162 | 	border-bottom-right-radius: 0 !important;
163 | }
164 | 
165 | div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
166 | div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
167 | 	border-bottom-left-radius: 0 !important;
168 | 	border-bottom-right-radius: 0 !important;
169 | }
170 | 
171 | div.DTFC_LeftBodyWrapper table {
172 | 	border-top: none;
173 | 	margin-bottom: 0 !important;
174 | }
175 | 
176 | div.DTFC_LeftBodyWrapper tbody tr:first-child th,
177 | div.DTFC_LeftBodyWrapper tbody tr:first-child td {
178 | 	border-top: none;
179 | }
180 | 
181 | div.DTFC_LeftFootWrapper table {
182 | 	border-top: none;
183 | }
184 | 


--------------------------------------------------------------------------------
/src/main/resources/webapp/assets/DT_bootstrap.js:
--------------------------------------------------------------------------------
  1 | /* Set the defaults for DataTables initialisation */
  2 | $.extend( true, $.fn.dataTable.defaults, {
  3 | 	"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
  4 | 	"sPaginationType": "bootstrap",
  5 | 	"oLanguage": {
  6 | 		"sLengthMenu": "_MENU_ records per page"
  7 | 	}
  8 | } );
  9 | 
 10 | 
 11 | /* Default class modification */
 12 | $.extend( $.fn.dataTableExt.oStdClasses, {
 13 | 	"sWrapper": "dataTables_wrapper form-inline"
 14 | } );
 15 | 
 16 | 
 17 | /* API method to get paging information */
 18 | $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
 19 | {
 20 | 	return {
 21 | 		"iStart":         oSettings._iDisplayStart,
 22 | 		"iEnd":           oSettings.fnDisplayEnd(),
 23 | 		"iLength":        oSettings._iDisplayLength,
 24 | 		"iTotal":         oSettings.fnRecordsTotal(),
 25 | 		"iFilteredTotal": oSettings.fnRecordsDisplay(),
 26 | 		"iPage":          oSettings._iDisplayLength === -1 ?
 27 | 			0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
 28 | 		"iTotalPages":    oSettings._iDisplayLength === -1 ?
 29 | 			0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
 30 | 	};
 31 | };
 32 | 
 33 | 
 34 | /* Bootstrap style pagination control */
 35 | $.extend( $.fn.dataTableExt.oPagination, {
 36 | 	"bootstrap": {
 37 | 		"fnInit": function( oSettings, nPaging, fnDraw ) {
 38 | 			var oLang = oSettings.oLanguage.oPaginate;
 39 | 			var fnClickHandler = function ( e ) {
 40 | 				e.preventDefault();
 41 | 				if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
 42 | 					fnDraw( oSettings );
 43 | 				}
 44 | 			};
 45 | 
 46 | 			$(nPaging).addClass('pagination').append(
 47 | 				'<ul>'+
 48 | 					'<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
 49 | 					'<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
 50 | 				'</ul>'
 51 | 			);
 52 | 			var els = $('a', nPaging);
 53 | 			$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
 54 | 			$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
 55 | 		},
 56 | 
 57 | 		"fnUpdate": function ( oSettings, fnDraw ) {
 58 | 			var iListLength = 5;
 59 | 			var oPaging = oSettings.oInstance.fnPagingInfo();
 60 | 			var an = oSettings.aanFeatures.p;
 61 | 			var i, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
 62 | 
 63 | 			if ( oPaging.iTotalPages < iListLength) {
 64 | 				iStart = 1;
 65 | 				iEnd = oPaging.iTotalPages;
 66 | 			}
 67 | 			else if ( oPaging.iPage <= iHalf ) {
 68 | 				iStart = 1;
 69 | 				iEnd = iListLength;
 70 | 			} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
 71 | 				iStart = oPaging.iTotalPages - iListLength + 1;
 72 | 				iEnd = oPaging.iTotalPages;
 73 | 			} else {
 74 | 				iStart = oPaging.iPage - iHalf + 1;
 75 | 				iEnd = iStart + iListLength - 1;
 76 | 			}
 77 | 
 78 | 			for ( i=0, ien=an.length ; i<ien ; i++ ) {
 79 | 				// Remove the middle elements
 80 | 				$('li:gt(0)', an[i]).filter(':not(:last)').remove();
 81 | 
 82 | 				// Add the new list items and their event handlers
 83 | 				for ( j=iStart ; j<=iEnd ; j++ ) {
 84 | 					sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
 85 | 					$('<li '+sClass+'><a href="#">'+j+'</a></li>')
 86 | 						.insertBefore( $('li:last', an[i])[0] )
 87 | 						.bind('click', function (e) {
 88 | 							e.preventDefault();
 89 | 							oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
 90 | 							fnDraw( oSettings );
 91 | 						} );
 92 | 				}
 93 | 
 94 | 				// Add / remove disabled classes from the static elements
 95 | 				if ( oPaging.iPage === 0 ) {
 96 | 					$('li:first', an[i]).addClass('disabled');
 97 | 				} else {
 98 | 					$('li:first', an[i]).removeClass('disabled');
 99 | 				}
100 | 
101 | 				if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
102 | 					$('li:last', an[i]).addClass('disabled');
103 | 				} else {
104 | 					$('li:last', an[i]).removeClass('disabled');
105 | 				}
106 | 			}
107 | 		}
108 | 	}
109 | } );
110 | 
111 | 
112 | /*
113 |  * TableTools Bootstrap compatibility
114 |  * Required TableTools 2.1+
115 |  */
116 | if ( $.fn.DataTable.TableTools ) {
117 | 	// Set the classes that TableTools uses to something suitable for Bootstrap
118 | 	$.extend( true, $.fn.DataTable.TableTools.classes, {
119 | 		"container": "DTTT btn-group",
120 | 		"buttons": {
121 | 			"normal": "btn",
122 | 			"disabled": "disabled"
123 | 		},
124 | 		"collection": {
125 | 			"container": "DTTT_dropdown dropdown-menu",
126 | 			"buttons": {
127 | 				"normal": "",
128 | 				"disabled": "disabled"
129 | 			}
130 | 		},
131 | 		"print": {
132 | 			"info": "DTTT_print_info modal"
133 | 		},
134 | 		"select": {
135 | 			"row": "active"
136 | 		}
137 | 	} );
138 | 
139 | 	// Have the collection use a bootstrap compatible dropdown
140 | 	$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
141 | 		"collection": {
142 | 			"container": "ul",
143 | 			"button": "li",
144 | 			"liner": "a"
145 | 		}
146 | 	} );
147 | }
148 | 
149 | 
150 | /* Table initialisation */
151 | $(document).ready(function() {
152 | 	$('#example').dataTable( {
153 | 		"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
154 | 		"sPaginationType": "bootstrap",
155 | 		"oLanguage": {
156 | 			"sLengthMenu": "_MENU_ records per page"
157 | 		}
158 | 	} );
159 | 
160 | 	$('#example2').dataTable( {
161 | 		"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
162 | 		"sPaginationType": "bootstrap",
163 | 		"oLanguage": {
164 | 			"sLengthMenu": "_MENU_ records per page"
165 | 		}
166 | 	} );
167 | 
168 | } );


--------------------------------------------------------------------------------
/src/main/resources/webapp/assets/dashboard.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="no-js">
 3 | 
 4 | <head>
 5 |     <title>{{{title}}}</title>
 6 |     <!-- Bootstrap -->
 7 |     <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
 8 |     <link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 9 |     <link href="/easypiechart/jquery.easy-pie-chart.css" rel="stylesheet" media="screen">
10 |     <link href="/assets/styles.css" rel="stylesheet" media="screen">
11 |     <script src="/jquery/jquery-1.9.1.min.js"></script>
12 |     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
13 |     <!--[if lt IE 9]>
14 |     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
15 |     <![endif]-->
16 | </head>
17 | 
18 | <body>
19 | {{{content}}}
20 | <script src="/bootstrap/js/bootstrap.min.js"></script>
21 | <script src="/easypiechart/jquery.easy-pie-chart.js"></script>
22 | <script src="/assets/scripts.js"></script>
23 | <script>
24 |     $(function () {
25 |         // Easy pie charts
26 |         $('.chart').easyPieChart({animate: 1000});
27 |     });
28 | </script>
29 | </body>
30 | 
31 | </html>
32 | 


--------------------------------------------------------------------------------
/src/main/resources/webapp/assets/form-validation.js:
--------------------------------------------------------------------------------
 1 | var FormValidation = function () {
 2 | 
 3 |     var handleValidation1 = function() {
 4 |         // for more info visit the official plugin documentation: 
 5 |             // http://docs.jquery.com/Plugins/Validation
 6 | 
 7 |             var form1 = $('#form_sample_1');
 8 |             var error1 = $('.alert-error', form1);
 9 |             var success1 = $('.alert-success', form1);
10 | 
11 |             form1.validate({
12 |                 errorElement: 'span', //default input error message container
13 |                 errorClass: 'help-inline', // default input error message class
14 |                 focusInvalid: false, // do not focus the last invalid input
15 |                 ignore: "",
16 |                 rules: {
17 |                     name: {
18 |                         minlength: 2,
19 |                         required: true
20 |                     },
21 |                     email: {
22 |                         required: true,
23 |                         email: true
24 |                     },
25 |                     url: {
26 |                         required: true,
27 |                         url: true
28 |                     },
29 |                     number: {
30 |                         required: true,
31 |                         number: true
32 |                     },
33 |                     digits: {
34 |                         required: true,
35 |                         digits: true
36 |                     },
37 |                     creditcard: {
38 |                         required: true,
39 |                         creditcard: true
40 |                     },
41 |                     occupation: {
42 |                         minlength: 5,
43 |                     },
44 |                     category: {
45 |                         required: true
46 |                     }
47 |                 },
48 | 
49 |                 invalidHandler: function (event, validator) { //display error alert on form submit              
50 |                     success1.hide();
51 |                     error1.show();
52 |                     FormValidation.scrollTo(error1, -200);
53 |                 },
54 | 
55 |                 highlight: function (element) { // hightlight error inputs
56 |                     $(element)
57 |                         .closest('.help-inline').removeClass('ok'); // display OK icon
58 |                     $(element)
59 |                         .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
60 |                 },
61 | 
62 |                 unhighlight: function (element) { // revert the change done by hightlight
63 |                     $(element)
64 |                         .closest('.control-group').removeClass('error'); // set error class to the control group
65 |                 },
66 | 
67 |                 success: function (label) {
68 |                     label
69 |                         .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
70 |                     .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
71 |                 },
72 | 
73 |                 submitHandler: function (form) {
74 |                     success1.show();
75 |                     error1.hide();
76 |                 }
77 |             });
78 |     }
79 | 
80 |     return {
81 |         //main function to initiate the module
82 |         init: function () {
83 | 
84 |             handleValidation1();
85 | 
86 |         },
87 | 
88 | 	// wrapper function to scroll to an element
89 |         scrollTo: function (el, offeset) {
90 |             pos = el ? el.offset().top : 0;
91 |             jQuery('html,body').animate({
92 |                     scrollTop: pos + (offeset ? offeset : 0)
93 |                 }, 'slow');
94 |         }
95 | 
96 |     };
97 | 
98 | }();


--------------------------------------------------------------------------------
/src/main/resources/webapp/assets/scripts.js:
--------------------------------------------------------------------------------
 1 | $(function() {
 2 |     // Side Bar Toggle
 3 |     $('.hide-sidebar').click(function() {
 4 | 	  $('#sidebar').hide('fast', function() {
 5 | 	  	$('#content').removeClass('span9');
 6 | 	  	$('#content').addClass('span12');
 7 | 	  	$('.hide-sidebar').hide();
 8 | 	  	$('.show-sidebar').show();
 9 | 	  });
10 | 	});
11 | 
12 | 	$('.show-sidebar').click(function() {
13 | 		$('#content').removeClass('span12');
14 | 	   	$('#content').addClass('span9');
15 | 	   	$('.show-sidebar').hide();
16 | 	   	$('.hide-sidebar').show();
17 | 	  	$('#sidebar').show('fast');
18 | 	});
19 | });


--------------------------------------------------------------------------------
/src/main/resources/webapp/assets/styles.css:
--------------------------------------------------------------------------------
  1 | /** Home Page **/
  2 | body {
  3 | 	padding-top: 0;
  4 | 	padding-bottom: 40px;
  5 | 	background-color: #f5f5f5;
  6 | }
  7 | 
  8 | 
  9 | @media (min-width: 979px){
 10 |     body {
 11 |             padding-top: 60px;
 12 |     }
 13 | }
 14 | 
 15 | 
 16 | /** Login Page **/
 17 | #login {
 18 |     padding-top: 40px;
 19 |     padding-bottom: 40px;
 20 | }
 21 | 
 22 | #login .form-signin {
 23 |     max-width: 300px;
 24 |     padding: 19px 29px 29px;
 25 |     margin: 0 auto 20px;
 26 |     background-color: #fff;
 27 |     border: 1px solid #e5e5e5;
 28 |     -webkit-border-radius: 5px;
 29 |        -moz-border-radius: 5px;
 30 |             border-radius: 5px;
 31 |     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
 32 |        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
 33 |             box-shadow: 0 1px 2px rgba(0,0,0,.05);
 34 | }
 35 | #login .form-signin .form-signin-heading,
 36 | #login .form-signin .checkbox {
 37 |     margin-bottom: 10px;
 38 | }
 39 | #login .form-signin input[type="text"],
 40 | #login .form-signin input[type="password"] {
 41 |     font-size: 16px;
 42 |     height: auto;
 43 |     margin-bottom: 15px;
 44 |     padding: 7px 9px;
 45 | }
 46 | 
 47 | /** 2 level sub menu **/
 48 | .dropdown-menu-with-subs .sub-menu {
 49 |   left: 100%;
 50 |   position: absolute;
 51 |   top: 0;
 52 |   visibility: hidden;
 53 |   margin-top: -1px;
 54 | }
 55 | 
 56 | .dropdown-menu-with-subs li:hover .sub-menu {
 57 |   visibility: visible;
 58 |   display: block;
 59 | }
 60 | 
 61 | .navbar .sub-menu:before {
 62 |   border-bottom: 7px solid transparent;
 63 |   border-left: none;
 64 |   border-right: 7px solid rgba(0, 0, 0, 0.2);
 65 |   border-top: 7px solid transparent;
 66 |   left: -7px;
 67 |   top: 10px;
 68 | }
 69 | .navbar .sub-menu:after {
 70 |   border-top: 6px solid transparent;
 71 |   border-left: none;
 72 |   border-right: 6px solid #fff;
 73 |   border-bottom: 6px solid transparent;
 74 |   left: 10px;
 75 |   top: 11px;
 76 |   left: -6px;
 77 | }
 78 | 
 79 | /** Global **/
 80 | #content {
 81 |   margin-left:0px;
 82 | }
 83 | .hide-sidebar, .show-sidebar {
 84 |   cursor: pointer;
 85 | }
 86 | .padd-bottom {
 87 |   margin-bottom: 5px;
 88 | }
 89 | .breadcrumb {
 90 | 	margin: 0 0 0px;
 91 | 	padding: 10px 0px;
 92 | 	background-color: transparent;
 93 | }
 94 | 
 95 | .block {
 96 | 	border: 1px solid #ccc;
 97 | 	background: white;
 98 | 	margin: 1em 0em;
 99 | 	border-top: none;
100 | }
101 | 
102 | .block-content {
103 | 	margin: 1em;
104 | 	min-height: .25em;
105 | }
106 | 
107 | .block-header {
108 | 	margin-bottom: 0px;
109 | 	border-right: none;
110 | 	border-left: none;
111 | 	-webkit-border-radius: 0px;
112 | 	-moz-border-radius: 0px;
113 | 	border-radius: 0px;
114 | }
115 | .block-header div {
116 | 	padding-top: 10px;
117 | }
118 | 
119 | .easyPieChart {
120 | 	margin: 0px auto;
121 | }
122 | 
123 | .chart-bottom-heading {
124 | 	margin-top: 5px;
125 | 	text-align: center;
126 | }
127 | 
128 | /** Side Bar **/
129 | .bs-docs-sidenav {
130 |   max-width: 228px;
131 |   margin: 30px 0 0;
132 |   padding: 0;
133 |   background-color: #fff;
134 |   -webkit-border-radius: 6px;
135 |      -moz-border-radius: 6px;
136 |           border-radius: 6px;
137 |   -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
138 |      -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
139 |           box-shadow: 0 1px 4px rgba(0,0,0,.065);
140 | }
141 | .bs-docs-sidenav > li > a {
142 |   display: block;
143 |   width: 190px \9;
144 |   margin: 0 0 -1px;
145 |   padding: 8px 14px;
146 |   border: 1px solid #e5e5e5;
147 | }
148 | .bs-docs-sidenav > li:first-child > a {
149 |   -webkit-border-radius: 6px 6px 0 0;
150 |      -moz-border-radius: 6px 6px 0 0;
151 |           border-radius: 6px 6px 0 0;
152 | }
153 | .bs-docs-sidenav > li:last-child > a {
154 |   -webkit-border-radius: 0 0 6px 6px;
155 |      -moz-border-radius: 0 0 6px 6px;
156 |           border-radius: 0 0 6px 6px;
157 | }
158 | .bs-docs-sidenav > .active > a {
159 |   position: relative;
160 |   z-index: 2;
161 |   padding: 9px 15px;
162 |   border: 0;
163 |   text-shadow: 0 1px 0 rgba(0,0,0,.15);
164 |   -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
165 |      -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
166 |           box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
167 | }
168 | /* Chevrons */
169 | .bs-docs-sidenav .icon-chevron-right {
170 |   float: right;
171 |   margin-top: 2px;
172 |   margin-right: -6px;
173 |   opacity: .25;
174 | }
175 | .bs-docs-sidenav > li > a:hover {
176 |   background-color: #f5f5f5;
177 | }
178 | .bs-docs-sidenav a:hover .icon-chevron-right {
179 |   opacity: .5;
180 | }
181 | .bs-docs-sidenav .active .icon-chevron-right,
182 | .bs-docs-sidenav .active a:hover .icon-chevron-right {
183 |   opacity: 1;
184 | }
185 | .bs-docs-sidenav.affix {
186 |   top: 40px;
187 | }
188 | .bs-docs-sidenav.affix-bottom {
189 |   position: absolute;
190 |   top: auto;
191 |   bottom: 270px;
192 | }
193 | 
194 | /* Icons
195 | ------------------------- */
196 | .the-icons {
197 |   margin-left: 0;
198 |   list-style: none;
199 | }
200 | .the-icons li {
201 |   float: left;
202 |   width: 25%;
203 |   line-height: 25px;
204 | }
205 | .the-icons i:hover {
206 |   background-color: rgba(255,0,0,.25);
207 | }
208 | 
209 | 
210 | .control-label .required {
211 |   color: #e02222;
212 |   font-size: 12px;
213 |   padding-left: 2px;
214 | }
215 | 


--------------------------------------------------------------------------------
/src/main/resources/webapp/bootstrap/css/bootstrap-responsive.min.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Bootstrap Responsive v2.3.2
 3 |  *
 4 |  * Copyright 2013 Twitter, Inc
 5 |  * Licensed under the Apache License v2.0
 6 |  * http://www.apache.org/licenses/LICENSE-2.0
 7 |  *
 8 |  * Designed and built with all the love in the world by @mdo and @fat.
 9 |  */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@-ms-viewport{width:device-width}.hidden{display:none;visibility:hidden}.visible-phone{display:none!important}.visible-tablet{display:none!important}.hidden-desktop{display:none!important}.visible-desktop{display:inherit!important}@media(min-width:768px) and (max-width:979px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-tablet{display:inherit!important}.hidden-tablet{display:none!important}}@media(max-width:767px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-phone{display:inherit!important}.hidden-phone{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:inherit!important}.hidden-print{display:none!important}}@media(min-width:1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:30px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span12{width:1170px}.span11{width:1070px}.span10{width:970px}.span9{width:870px}.span8{width:770px}.span7{width:670px}.span6{width:570px}.span5{width:470px}.span4{width:370px}.span3{width:270px}.span2{width:170px}.span1{width:70px}.offset12{margin-left:1230px}.offset11{margin-left:1130px}.offset10{margin-left:1030px}.offset9{margin-left:930px}.offset8{margin-left:830px}.offset7{margin-left:730px}.offset6{margin-left:630px}.offset5{margin-left:530px}.offset4{margin-left:430px}.offset3{margin-left:330px}.offset2{margin-left:230px}.offset1{margin-left:130px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.564102564102564%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%}.row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%}.row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%}.row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%}.row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%}.row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%}.row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%}.row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%}.row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%}.row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%}.row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%}.row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%}.row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%}.row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%}.row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%}.row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%}.row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%}.row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%}.row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%}.row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%}.row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%}.row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%}.row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%}.row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%}.row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%}.row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%}.row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%}.row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%}.row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%}.row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%}.row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%}.row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%}.row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%}.row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%}.row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:30px}input.span12,textarea.span12,.uneditable-input.span12{width:1156px}input.span11,textarea.span11,.uneditable-input.span11{width:1056px}input.span10,textarea.span10,.uneditable-input.span10{width:956px}input.span9,textarea.span9,.uneditable-input.span9{width:856px}input.span8,textarea.span8,.uneditable-input.span8{width:756px}input.span7,textarea.span7,.uneditable-input.span7{width:656px}input.span6,textarea.span6,.uneditable-input.span6{width:556px}input.span5,textarea.span5,.uneditable-input.span5{width:456px}input.span4,textarea.span4,.uneditable-input.span4{width:356px}input.span3,textarea.span3,.uneditable-input.span3{width:256px}input.span2,textarea.span2,.uneditable-input.span2{width:156px}input.span1,textarea.span1,.uneditable-input.span1{width:56px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media(min-width:768px) and (max-width:979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span12{width:724px}.span11{width:662px}.span10{width:600px}.span9{width:538px}.span8{width:476px}.span7{width:414px}.span6{width:352px}.span5{width:290px}.span4{width:228px}.span3{width:166px}.span2{width:104px}.span1{width:42px}.offset12{margin-left:764px}.offset11{margin-left:702px}.offset10{margin-left:640px}.offset9{margin-left:578px}.offset8{margin-left:516px}.offset7{margin-left:454px}.offset6{margin-left:392px}.offset5{margin-left:330px}.offset4{margin-left:268px}.offset3{margin-left:206px}.offset2{margin-left:144px}.offset1{margin-left:82px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.7624309392265194%;*margin-left:2.709239449864817%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.7624309392265194%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.43646408839778%;*width:91.38327259903608%}.row-fluid .span10{width:82.87292817679558%;*width:82.81973668743387%}.row-fluid .span9{width:74.30939226519337%;*width:74.25620077583166%}.row-fluid .span8{width:65.74585635359117%;*width:65.69266486422946%}.row-fluid .span7{width:57.18232044198895%;*width:57.12912895262725%}.row-fluid .span6{width:48.61878453038674%;*width:48.56559304102504%}.row-fluid .span5{width:40.05524861878453%;*width:40.00205712942283%}.row-fluid .span4{width:31.491712707182323%;*width:31.43852121782062%}.row-fluid .span3{width:22.92817679558011%;*width:22.87498530621841%}.row-fluid .span2{width:14.3646408839779%;*width:14.311449394616199%}.row-fluid .span1{width:5.801104972375691%;*width:5.747913483013988%}.row-fluid .offset12{margin-left:105.52486187845304%;*margin-left:105.41847889972962%}.row-fluid .offset12:first-child{margin-left:102.76243093922652%;*margin-left:102.6560479605031%}.row-fluid .offset11{margin-left:96.96132596685082%;*margin-left:96.8549429881274%}.row-fluid .offset11:first-child{margin-left:94.1988950276243%;*margin-left:94.09251204890089%}.row-fluid .offset10{margin-left:88.39779005524862%;*margin-left:88.2914070765252%}.row-fluid .offset10:first-child{margin-left:85.6353591160221%;*margin-left:85.52897613729868%}.row-fluid .offset9{margin-left:79.8342541436464%;*margin-left:79.72787116492299%}.row-fluid .offset9:first-child{margin-left:77.07182320441989%;*margin-left:76.96544022569647%}.row-fluid .offset8{margin-left:71.2707182320442%;*margin-left:71.16433525332079%}.row-fluid .offset8:first-child{margin-left:68.50828729281768%;*margin-left:68.40190431409427%}.row-fluid .offset7{margin-left:62.70718232044199%;*margin-left:62.600799341718584%}.row-fluid .offset7:first-child{margin-left:59.94475138121547%;*margin-left:59.838368402492065%}.row-fluid .offset6{margin-left:54.14364640883978%;*margin-left:54.037263430116376%}.row-fluid .offset6:first-child{margin-left:51.38121546961326%;*margin-left:51.27483249088986%}.row-fluid .offset5{margin-left:45.58011049723757%;*margin-left:45.47372751851417%}.row-fluid .offset5:first-child{margin-left:42.81767955801105%;*margin-left:42.71129657928765%}.row-fluid .offset4{margin-left:37.01657458563536%;*margin-left:36.91019160691196%}.row-fluid .offset4:first-child{margin-left:34.25414364640884%;*margin-left:34.14776066768544%}.row-fluid .offset3{margin-left:28.45303867403315%;*margin-left:28.346655695309746%}.row-fluid .offset3:first-child{margin-left:25.69060773480663%;*margin-left:25.584224756083227%}.row-fluid .offset2{margin-left:19.88950276243094%;*margin-left:19.783119783707537%}.row-fluid .offset2:first-child{margin-left:17.12707182320442%;*margin-left:17.02068884448102%}.row-fluid .offset1{margin-left:11.32596685082873%;*margin-left:11.219583872105325%}.row-fluid .offset1:first-child{margin-left:8.56353591160221%;*margin-left:8.457152932878806%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:20px}input.span12,textarea.span12,.uneditable-input.span12{width:710px}input.span11,textarea.span11,.uneditable-input.span11{width:648px}input.span10,textarea.span10,.uneditable-input.span10{width:586px}input.span9,textarea.span9,.uneditable-input.span9{width:524px}input.span8,textarea.span8,.uneditable-input.span8{width:462px}input.span7,textarea.span7,.uneditable-input.span7{width:400px}input.span6,textarea.span6,.uneditable-input.span6{width:338px}input.span5,textarea.span5,.uneditable-input.span5{width:276px}input.span4,textarea.span4,.uneditable-input.span4{width:214px}input.span3,textarea.span3,.uneditable-input.span3{width:152px}input.span2,textarea.span2,.uneditable-input.span2{width:90px}input.span1,textarea.span1,.uneditable-input.span1{width:28px}}@media(max-width:767px){body{padding-right:20px;padding-left:20px}.navbar-fixed-top,.navbar-fixed-bottom,.navbar-static-top{margin-right:-20px;margin-left:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;width:auto;clear:none;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}.thumbnails>li{float:none;margin-left:0}[class*="span"],.uneditable-input[class*="span"],.row-fluid [class*="span"]{display:block;float:none;width:100%;margin-left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.span12,.row-fluid .span12{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="offset"]:first-child{margin-left:0}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}.controls-row [class*="span"]+[class*="span"]{margin-left:0}.modal{position:fixed;top:20px;right:20px;left:20px;width:auto;margin:0}.modal.fade{top:-100px}.modal.fade.in{top:20px}}@media(max-width:480px){.nav-collapse{-webkit-transform:translate3d(0,0,0)}.page-header h1 small{display:block;line-height:20px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.media .pull-left,.media .pull-right{display:block;float:none;margin-bottom:10px}.media-object{margin-right:0;margin-left:0}.modal{top:10px;right:10px;left:10px}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media(max-width:979px){body{padding-top:0}.navbar-fixed-top,.navbar-fixed-bottom{position:static}.navbar-fixed-top{margin-bottom:20px}.navbar-fixed-bottom{margin-top:20px}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-right:10px;padding-left:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 10px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#777;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:9px 15px;font-weight:bold;color:#777;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .nav>li>a:focus,.nav-collapse .dropdown-menu a:hover,.nav-collapse .dropdown-menu a:focus{background-color:#f2f2f2}.navbar-inverse .nav-collapse .nav>li>a,.navbar-inverse .nav-collapse .dropdown-menu a{color:#999}.navbar-inverse .nav-collapse .nav>li>a:hover,.navbar-inverse .nav-collapse .nav>li>a:focus,.navbar-inverse .nav-collapse .dropdown-menu a:hover,.navbar-inverse .nav-collapse .dropdown-menu a:focus{background-color:#111}.nav-collapse.in .btn-group{padding:0;margin-top:5px}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;display:none;float:none;max-width:none;padding:0;margin:0 15px;background-color:transparent;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .open>.dropdown-menu{display:block}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .nav>li>.dropdown-menu:before,.nav-collapse .nav>li>.dropdown-menu:after{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:10px 15px;margin:10px 0;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1)}.navbar-inverse .nav-collapse .navbar-form,.navbar-inverse .nav-collapse .navbar-search{border-top-color:#111;border-bottom-color:#111}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{height:0;overflow:hidden}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-right:10px;padding-left:10px}}@media(min-width:980px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}}
10 | 


--------------------------------------------------------------------------------
/src/main/resources/webapp/bootstrap/img/glyphicons-halflings-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roybailey/sparkjava-retrofit-react/f4c75c815892153a90b6e94bccc319208c198f0d/src/main/resources/webapp/bootstrap/img/glyphicons-halflings-white.png


--------------------------------------------------------------------------------
/src/main/resources/webapp/bootstrap/img/glyphicons-halflings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roybailey/sparkjava-retrofit-react/f4c75c815892153a90b6e94bccc319208c198f0d/src/main/resources/webapp/bootstrap/img/glyphicons-halflings.png


--------------------------------------------------------------------------------
/src/main/resources/webapp/bootstrap/js/bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap.js by @fat & @mdo
3 | * Copyright 2013 Twitter, Inc.
4 | * http://www.apache.org/licenses/LICENSE-2.0.txt
5 | */
6 | !function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(".dropdown-backdrop").remove(),e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||("ontouchstart"in document.documentElement&&e('<div class="dropdown-backdrop"/>').insertBefore(e(this)).on("click",r),s.toggleClass("open")),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);


--------------------------------------------------------------------------------
/src/main/resources/webapp/easypiechart/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <title>Easy Pie Chart</title>
 6 |         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 7 |         <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 8 |         <script type="text/javascript" src="excanvas.js"></script>
 9 |         <script type="text/javascript" src="../jquery.easy-pie-chart.js"></script>
10 | 
11 |         <link rel="stylesheet" type="text/css" href="style.css" media="screen">
12 |         <link rel="stylesheet" type="text/css" href="../jquery.easy-pie-chart.css" media="screen">
13 | 
14 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
15 | 
16 |         <script type="text/javascript">
17 |             var initPieChart = function() {
18 |                 $('.percentage').easyPieChart({
19 |                     animate: 1000
20 |                 });
21 |                 $('.percentage-light').easyPieChart({
22 |                     barColor: function(percent) {
23 |                         percent /= 100;
24 |                         return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)";
25 |                     },
26 |                     trackColor: '#666',
27 |                     scaleColor: false,
28 |                     lineCap: 'butt',
29 |                     lineWidth: 15,
30 |                     animate: 1000
31 |                 });
32 | 
33 |                 $('.updateEasyPieChart').on('click', function(e) {
34 |                   e.preventDefault();
35 |                   $('.percentage, .percentage-light').each(function() {
36 |                     var newValue = Math.round(100*Math.random());
37 |                     $(this).data('easyPieChart').update(newValue);
38 |                     $('span', this).text(newValue);
39 |                   });
40 |                 });
41 |             };
42 |         </script>
43 |     </head>
44 |     <body onload="initPieChart();">
45 |         <div class="container">
46 |             <h1>EASY PIE CHART</h1>
47 |             <div class="chart">
48 |                 <div class="percentage" data-percent="55"><span>55</span>%</div>
49 |                 <div class="label">New visits</div>
50 |             </div>
51 |             <div class="chart">
52 |                 <div class="percentage" data-percent="46"><span>46</span>%</div>
53 |                 <div class="label">Bounce rate</div>
54 |             </div>
55 |             <div class="chart">
56 |                 <div class="percentage" data-percent="92"><span>92</span>%</div>
57 |                 <div class="label">Server load</div>
58 |             </div>
59 |             <div class="chart">
60 |                 <div class="percentage" data-percent="84"><span>752</span>MB</div>
61 |                 <div class="label">Used RAM</div>
62 |             </div>
63 |             <div style="clear:both;"></div>
64 |             <div class="dark">
65 |                 <div class="chart">
66 |                     <div class="percentage-light" data-percent="55"><span>55</span>%</div>
67 |                     <div class="label">New visits</div>
68 |                 </div>
69 |                 <div class="chart">
70 |                     <div class="percentage-light" data-percent="46"><span>46</span>%</div>
71 |                     <div class="label">Bounce rate</div>
72 |                 </div>
73 |                 <div class="chart">
74 |                     <div class="percentage-light" data-percent="92"><span>92</span>%</div>
75 |                     <div class="label">Server load</div>
76 |                 </div>
77 |                 <div class="chart">
78 |                     <div class="percentage-light" data-percent="84"><span>752</span>MB</div>
79 |                     <div class="label">Used RAM</div>
80 |                 </div>
81 |                 <div style="clear:both;"></div>
82 |             </div>
83 | 
84 |             <p><a href="#" class="button updateEasyPieChart">Update pie charts</a></p>
85 | 
86 |             <p class="credits">Inspired by: <a href="http://drbl.in/ezuc" target="_blank">Simple Pie Charts II by Rafal Bromirski on dribble</a></p>
87 |         </div>
88 |     </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/src/main/resources/webapp/easypiechart/examples/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font: 13px/1.4 'Helvetica Neue', 'Helvetica','Arial', sans-serif;
  3 |     color: #333;
  4 | }
  5 | 
  6 | .container {
  7 |     width: 520px;
  8 |     margin: auto;
  9 | }
 10 | 
 11 | h1 {
 12 |     border-bottom: 1px solid #d9d9d9;
 13 | }
 14 | 
 15 | a {
 16 |     color: #be2221;
 17 |     text-decoration: none;
 18 | }
 19 | 
 20 | .chart {
 21 |     float: left;
 22 |     margin: 10px;
 23 | }
 24 | 
 25 | .percentage,
 26 | .label {
 27 |     text-align: center;
 28 |     color: #333;
 29 |     font-weight: 100;
 30 |     font-size: 1.2em;
 31 |     margin-bottom: 0.3em;
 32 | }
 33 | 
 34 | .credits {
 35 |     padding-top: 0.5em;
 36 |     clear: both;
 37 |     color: #999;
 38 | }
 39 | 
 40 | .credits a {
 41 |     color: #333;
 42 | }
 43 | 
 44 | .dark {
 45 |     background: #333;
 46 | }
 47 | 
 48 | .dark .percentage-light,
 49 | .dark .label {
 50 |     text-align: center;
 51 |     color: #999;
 52 |     font-weight: 100;
 53 |     font-size: 1.2em;
 54 |     margin-bottom: 0.3em;
 55 | }
 56 | 
 57 | 
 58 | .button {
 59 |   -webkit-box-shadow: inset 0 0 1px #000, inset 0 1px 0 1px rgba(255,255,255,0.2), 0 1px 1px -1px rgba(0, 0, 0, .5);
 60 |   -moz-box-shadow: inset 0 0 1px #000, inset 0 1px 0 1px rgba(255,255,255,0.2), 0 1px 1px -1px rgba(0, 0, 0, .5);
 61 |   box-shadow: inset 0 0 1px #000, inset 0 1px 0 1px rgba(255,255,255,0.2), 0 1px 1px -1px rgba(0, 0, 0, .5);
 62 |   -webkit-border-radius: 3px;
 63 |   -moz-border-radius: 3px;
 64 |   border-radius: 3px;
 65 |   padding: 6px 20px;
 66 |   font-weight: bold;
 67 |   text-transform: uppercase;
 68 |   display: block;
 69 |   margin: auto;
 70 |   max-width: 200px;
 71 |   text-align: center;
 72 |   background-color: #5c5c5c;
 73 |   background-image: -moz-linear-gradient(top, #666666, #4d4d4d);
 74 |   background-image: -ms-linear-gradient(top, #666666, #4d4d4d);
 75 |   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#666666), to(#4d4d4d));
 76 |   background-image: -webkit-linear-gradient(top, #666666, #4d4d4d);
 77 |   background-image: -o-linear-gradient(top, #666666, #4d4d4d);
 78 |   background-image: linear-gradient(top, #666666, #4d4d4d);
 79 |   background-repeat: repeat-x;
 80 |   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#4d4d4d', GradientType=0);
 81 |   color: #ffffff;
 82 |   text-shadow: 0 1px 1px #333333;
 83 | }
 84 | .button:hover {
 85 |   color: #ffffff;
 86 |   text-decoration: none;
 87 |   background-color: #616161;
 88 |   background-image: -moz-linear-gradient(top, #6b6b6b, #525252);
 89 |   background-image: -ms-linear-gradient(top, #6b6b6b, #525252);
 90 |   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6b6b6b), to(#525252));
 91 |   background-image: -webkit-linear-gradient(top, #6b6b6b, #525252);
 92 |   background-image: -o-linear-gradient(top, #6b6b6b, #525252);
 93 |   background-image: linear-gradient(top, #6b6b6b, #525252);
 94 |   background-repeat: repeat-x;
 95 |   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b6b6b', endColorstr='#525252', GradientType=0);
 96 | }
 97 | .button:active {
 98 |   background-color: #575757;
 99 |   background-image: -moz-linear-gradient(top, #616161, #474747);
100 |   background-image: -ms-linear-gradient(top, #616161, #474747);
101 |   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#616161), to(#474747));
102 |   background-image: -webkit-linear-gradient(top, #616161, #474747);
103 |   background-image: -o-linear-gradient(top, #616161, #474747);
104 |   background-image: linear-gradient(top, #616161, #474747);
105 |   background-repeat: repeat-x;
106 |   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#616161', endColorstr='#474747', GradientType=0);
107 |   -webkit-transform: translate(0, 1px);
108 |   -moz-transform: translate(0, 1px);
109 |   -ms-transform: translate(0, 1px);
110 |   -o-transform: translate(0, 1px);
111 |   transform: translate(0, 1px);
112 | }
113 | .button:disabled {
114 |   background-color: #dddddd;
115 |   background-image: -moz-linear-gradient(top, #e7e7e7, #cdcdcd);
116 |   background-image: -ms-linear-gradient(top, #e7e7e7, #cdcdcd);
117 |   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e7e7e7), to(#cdcdcd));
118 |   background-image: -webkit-linear-gradient(top, #e7e7e7, #cdcdcd);
119 |   background-image: -o-linear-gradient(top, #e7e7e7, #cdcdcd);
120 |   background-image: linear-gradient(top, #e7e7e7, #cdcdcd);
121 |   background-repeat: repeat-x;
122 |   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7e7e7', endColorstr='#cdcdcd', GradientType=0);
123 |   color: #939393;
124 |   text-shadow: 0 1px 1px #fff;
125 | }
126 | 
127 | @media screen and (max-device-width: 480px) {
128 |   .container{
129 |     width: 100%;
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------
/src/main/resources/webapp/easypiechart/jquery.easy-pie-chart.css:
--------------------------------------------------------------------------------
 1 | .easyPieChart {
 2 |     position: relative;
 3 |     text-align: center;
 4 | }
 5 | 
 6 | .easyPieChart canvas {
 7 |     position: absolute;
 8 |     top: 0;
 9 |     left: 0;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/main/resources/webapp/easypiechart/jquery.easy-pie-chart.js:
--------------------------------------------------------------------------------
  1 | // Generated by CoffeeScript 1.4.0
  2 | 
  3 | /*
  4 | Easy pie chart is a jquery plugin to display simple animated pie charts for only one value
  5 | 
  6 | Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
  7 | and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  8 | 
  9 | Built on top of the jQuery library (http://jquery.com)
 10 | 
 11 | @source: http://github.com/rendro/easy-pie-chart/
 12 | @autor: Robert Fleischmann
 13 | @version: 1.0.1
 14 | 
 15 | Inspired by: http://dribbble.com/shots/631074-Simple-Pie-Charts-II?list=popular&offset=210
 16 | Thanks to Philip Thrasher for the jquery plugin boilerplate for coffee script
 17 | */
 18 | 
 19 | 
 20 | (function() {
 21 | 
 22 |   (function($) {
 23 |     $.easyPieChart = function(el, options) {
 24 |       var addScaleLine, animateLine, drawLine, easeInOutQuad, renderBackground, renderScale, renderTrack,
 25 |         _this = this;
 26 |       this.el = el;
 27 |       this.$el = $(el);
 28 |       this.$el.data("easyPieChart", this);
 29 |       this.init = function() {
 30 |         var percent;
 31 |         _this.options = $.extend({}, $.easyPieChart.defaultOptions, options);
 32 |         percent = parseInt(_this.$el.data('percent'), 10);
 33 |         _this.percentage = 0;
 34 |         _this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "'></canvas>").get(0);
 35 |         _this.$el.append(_this.canvas);
 36 |         if (typeof G_vmlCanvasManager !== "undefined" && G_vmlCanvasManager !== null) {
 37 |           G_vmlCanvasManager.initElement(_this.canvas);
 38 |         }
 39 |         _this.ctx = _this.canvas.getContext('2d');
 40 |         if (window.devicePixelRatio > 1.5) {
 41 |           $(_this.canvas).css({
 42 |             width: _this.options.size,
 43 |             height: _this.options.size
 44 |           });
 45 |           _this.canvas.width *= 2;
 46 |           _this.canvas.height *= 2;
 47 |           _this.ctx.scale(2, 2);
 48 |         }
 49 |         _this.ctx.translate(_this.options.size / 2, _this.options.size / 2);
 50 |         _this.$el.addClass('easyPieChart');
 51 |         _this.$el.css({
 52 |           width: _this.options.size,
 53 |           height: _this.options.size,
 54 |           lineHeight: "" + _this.options.size + "px"
 55 |         });
 56 |         _this.update(percent);
 57 |         return _this;
 58 |       };
 59 |       this.update = function(percent) {
 60 |         if (_this.options.animate === false) {
 61 |           return drawLine(percent);
 62 |         } else {
 63 |           return animateLine(_this.percentage, percent);
 64 |         }
 65 |       };
 66 |       renderScale = function() {
 67 |         var i, _i, _results;
 68 |         _this.ctx.fillStyle = _this.options.scaleColor;
 69 |         _this.ctx.lineWidth = 1;
 70 |         _results = [];
 71 |         for (i = _i = 0; _i <= 24; i = ++_i) {
 72 |           _results.push(addScaleLine(i));
 73 |         }
 74 |         return _results;
 75 |       };
 76 |       addScaleLine = function(i) {
 77 |         var offset;
 78 |         offset = i % 6 === 0 ? 0 : _this.options.size * 0.017;
 79 |         _this.ctx.save();
 80 |         _this.ctx.rotate(i * Math.PI / 12);
 81 |         _this.ctx.fillRect(_this.options.size / 2 - offset, 0, -_this.options.size * 0.05 + offset, 1);
 82 |         return _this.ctx.restore();
 83 |       };
 84 |       renderTrack = function() {
 85 |         var offset;
 86 |         offset = _this.options.size / 2 - _this.options.lineWidth / 2;
 87 |         if (_this.options.scaleColor !== false) {
 88 |           offset -= _this.options.size * 0.08;
 89 |         }
 90 |         _this.ctx.beginPath();
 91 |         _this.ctx.arc(0, 0, offset, 0, Math.PI * 2, true);
 92 |         _this.ctx.closePath();
 93 |         _this.ctx.strokeStyle = _this.options.trackColor;
 94 |         _this.ctx.lineWidth = _this.options.lineWidth;
 95 |         return _this.ctx.stroke();
 96 |       };
 97 |       renderBackground = function() {
 98 |         if (_this.options.scaleColor !== false) {
 99 |           renderScale();
100 |         }
101 |         if (_this.options.trackColor !== false) {
102 |           return renderTrack();
103 |         }
104 |       };
105 |       drawLine = function(percent) {
106 |         var offset;
107 |         renderBackground();
108 |         _this.ctx.strokeStyle = $.isFunction(_this.options.barColor) ? _this.options.barColor(percent) : _this.options.barColor;
109 |         _this.ctx.lineCap = _this.options.lineCap;
110 |         _this.ctx.lineWidth = _this.options.lineWidth;
111 |         offset = _this.options.size / 2 - _this.options.lineWidth / 2;
112 |         if (_this.options.scaleColor !== false) {
113 |           offset -= _this.options.size * 0.08;
114 |         }
115 |         _this.ctx.save();
116 |         _this.ctx.rotate(-Math.PI / 2);
117 |         _this.ctx.beginPath();
118 |         _this.ctx.arc(0, 0, offset, 0, Math.PI * 2 * percent / 100, false);
119 |         _this.ctx.stroke();
120 |         return _this.ctx.restore();
121 |       };
122 |       animateLine = function(from, to) {
123 |         var currentStep, fps, steps;
124 |         fps = 30;
125 |         steps = fps * _this.options.animate / 1000;
126 |         currentStep = 0;
127 |         _this.options.onStart.call(_this);
128 |         _this.percentage = to;
129 |         if (_this.animation) {
130 |           clearInterval(_this.animation);
131 |           _this.animation = false;
132 |         }
133 |         return _this.animation = setInterval(function() {
134 |           _this.ctx.clearRect(-_this.options.size / 2, -_this.options.size / 2, _this.options.size, _this.options.size);
135 |           renderBackground.call(_this);
136 |           drawLine.call(_this, [easeInOutQuad(currentStep, from, to - from, steps)]);
137 |           currentStep++;
138 |           if ((currentStep / steps) > 1) {
139 |             clearInterval(_this.animation);
140 |             _this.animation = false;
141 |             return _this.options.onStop.call(_this);
142 |           }
143 |         }, 1000 / fps);
144 |       };
145 |       easeInOutQuad = function(t, b, c, d) {
146 |         var easeIn, easing;
147 |         easeIn = function(t) {
148 |           return Math.pow(t, 2);
149 |         };
150 |         easing = function(t) {
151 |           if (t < 1) {
152 |             return easeIn(t);
153 |           } else {
154 |             return 2 - easeIn((t / 2) * -2 + 2);
155 |           }
156 |         };
157 |         t /= d / 2;
158 |         return c / 2 * easing(t) + b;
159 |       };
160 |       return this.init();
161 |     };
162 |     $.easyPieChart.defaultOptions = {
163 |       barColor: '#ef1e25',
164 |       trackColor: '#f2f2f2',
165 |       scaleColor: '#dfe0e0',
166 |       lineCap: 'round',
167 |       size: 110,
168 |       lineWidth: 3,
169 |       animate: false,
170 |       onStart: $.noop,
171 |       onStop: $.noop
172 |     };
173 |     $.fn.easyPieChart = function(options) {
174 |       return $.each(this, function(i, el) {
175 |         var $el;
176 |         $el = $(el);
177 |         if (!$el.data('easyPieChart')) {
178 |           return $el.data('easyPieChart', new $.easyPieChart(el, options));
179 |         }
180 |       });
181 |     };
182 |     return void 0;
183 |   })(jQuery);
184 | 
185 | }).call(this);
186 | 


--------------------------------------------------------------------------------
/src/main/resources/webapp/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html class="no-js">
  3 | <head>
  4 |     <meta charset="utf-8"/>
  5 |     <title>SparkJava - Retrofit - React</title>
  6 |     <!-- Bootstrap -->
  7 |     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  8 |     <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
  9 |     <link href="assets/styles.css" rel="stylesheet" media="screen">
 10 |     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
 11 |     <!--[if lt IE 9]>
 12 |     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 13 |     <![endif]-->
 14 | </head>
 15 | 
 16 | <body>
 17 | <div class="navbar navbar-fixed-top">
 18 |     <div class="navbar-inner">
 19 |         <div class="container-fluid">
 20 |             <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 21 |                 <span class="icon-bar"></span>
 22 |                 <span class="icon-bar"></span>
 23 |             </a>
 24 |             <a class="brand" href="#">SparkJava React</a>
 25 | 
 26 |             <div class="nav-collapse collapse">
 27 |                 <ul class="nav pull-right">
 28 |                     <li class="dropdown">
 29 |                         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
 30 |                             <i class="icon-user"></i> Roy Bailey <i class="caret"></i>
 31 |                         </a>
 32 |                         <ul class="dropdown-menu">
 33 |                             <li>
 34 |                                 <a tabindex="-1" href="#">Profile</a>
 35 |                             </li>
 36 |                             <li class="divider"></li>
 37 |                             <li>
 38 |                                 <a tabindex="-1" href="login.html">Logout</a>
 39 |                             </li>
 40 |                         </ul>
 41 |                     </li>
 42 |                 </ul>
 43 |                 <ul class="nav">
 44 |                     <li class="active">
 45 |                         <a href="#">Dashboard</a>
 46 |                     </li>
 47 |                     <li class="dropdown">
 48 |                         <a href="#" data-toggle="dropdown" class="dropdown-toggle">Settings <b class="caret"></b>
 49 | 
 50 |                         </a>
 51 |                         <ul class="dropdown-menu" id="menu1">
 52 |                             <li>
 53 |                                 <a href="#">Tools <i class="icon-arrow-right"></i>
 54 | 
 55 |                                 </a>
 56 |                                 <ul class="dropdown-menu sub-menu">
 57 |                                     <li>
 58 |                                         <a href="#">Reports</a>
 59 |                                     </li>
 60 |                                     <li>
 61 |                                         <a href="#">Logs</a>
 62 |                                     </li>
 63 |                                     <li>
 64 |                                         <a href="#">Errors</a>
 65 |                                     </li>
 66 |                                 </ul>
 67 |                             </li>
 68 |                             <li>
 69 |                                 <a href="#">SEO Settings</a>
 70 |                             </li>
 71 |                             <li>
 72 |                                 <a href="#">Other Link</a>
 73 |                             </li>
 74 |                             <li class="divider"></li>
 75 |                             <li>
 76 |                                 <a href="#">Other Link</a>
 77 |                             </li>
 78 |                             <li>
 79 |                                 <a href="#">Other Link</a>
 80 |                             </li>
 81 |                         </ul>
 82 |                     </li>
 83 |                     <li class="dropdown">
 84 |                         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Content <i
 85 |                                 class="caret"></i>
 86 | 
 87 |                         </a>
 88 |                         <ul class="dropdown-menu">
 89 |                             <li>
 90 |                                 <a tabindex="-1" href="admin.html">HTML Bootstrap Admin Theme</a>
 91 |                             </li>
 92 |                             <li>
 93 |                                 <a tabindex="-1" href="react-tutorial/index.html">HTML React Tutorial</a>
 94 |                             </li>
 95 |                             <li>
 96 |                                 <a tabindex="-1" href="flare.html">HTML Data Visualization</a>
 97 |                             </li>
 98 |                             <li class="divider"></li>
 99 |                             <li>
100 |                                 <a tabindex="-1" href="/react/todomvc">React TodoMVC</a>
101 |                             </li>
102 |                             <li>
103 |                                 <a tabindex="-1" href="/react/dashboard">React Dashboard</a>
104 |                             </li>
105 |                             <li class="divider"></li>
106 |                             <li>
107 |                                 <a tabindex="-1" href="api/v1">API Discovery</a>
108 |                             </li>
109 |                             <li>
110 |                                 <a tabindex="-1" href="api/v1/todos">Todos</a>
111 |                             </li>
112 |                         </ul>
113 |                     </li>
114 |                     <li class="dropdown">
115 |                         <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Users <i
116 |                                 class="caret"></i>
117 | 
118 |                         </a>
119 |                         <ul class="dropdown-menu">
120 |                             <li>
121 |                                 <a tabindex="-1" href="#">User List</a>
122 |                             </li>
123 |                             <li>
124 |                                 <a tabindex="-1" href="#">Search</a>
125 |                             </li>
126 |                             <li>
127 |                                 <a tabindex="-1" href="#">Permissions</a>
128 |                             </li>
129 |                         </ul>
130 |                     </li>
131 |                 </ul>
132 |             </div>
133 |             <!--/.nav-collapse -->
134 |         </div>
135 |     </div>
136 | </div>
137 | <div class="container-fluid">
138 |     <div class="row-fluid">
139 |         <div class="span3" id="sidebar">
140 |             <ul class="nav nav-list bs-docs-sidenav nav-collapse collapse">
141 |                 <li class="active">
142 |                     <a href="admin.html"><i class="icon-chevron-right"></i> Bootstrap Admin Theme</a>
143 |                 </li>
144 |                 <li>
145 |                     <a href="api/v1"><i class="icon-chevron-right"></i> API (Discovery)</a>
146 |                 </li>
147 |                 <li>
148 |                     <a href="#"><span class="badge badge-info pull-right">27</span> Todos</a>
149 |                 </li>
150 |                 <li>
151 |                     <a href="#"><span class="badge badge-info pull-right">1,234</span> Hits</a>
152 |                 </li>
153 |             </ul>
154 |         </div>
155 | 
156 |         <!--/span-->
157 |         <div class="span9" id="content">
158 |             <div class="row-fluid">
159 |                 <div class="alert alert-success">
160 |                     <button type="button" class="close" data-dismiss="alert">&times;</button>
161 |                     <h4>Success</h4>
162 |                     The operation completed successfully
163 |                 </div>
164 |                 <div class="navbar">
165 |                     <div class="navbar-inner">
166 |                         <ul class="breadcrumb">
167 |                             <i class="icon-chevron-left hide-sidebar"><a href='#' title="Hide Sidebar" rel='tooltip'>
168 |                                 &nbsp;</a></i>
169 |                             <i class="icon-chevron-right show-sidebar" style="display:none;"><a href='#'
170 |                                                                                                 title="Show Sidebar"
171 |                                                                                                 rel='tooltip'>&nbsp;</a></i>
172 |                             <li>
173 |                                 <a href="#">Dashboard</a> <span class="divider">/</span>
174 |                             </li>
175 |                             <li>
176 |                                 <a href="#">Settings</a> <span class="divider">/</span>
177 |                             </li>
178 |                             <li class="active">Tools</li>
179 |                         </ul>
180 |                     </div>
181 |                 </div>
182 |             </div>
183 |             <div class="row-fluid">
184 |                 <!-- block -->
185 |                 <div class="block">
186 |                     <div class="navbar navbar-inner block-header">
187 |                         <div class="muted pull-left">Statistics</div>
188 |                         <div class="pull-right"><span class="badge badge-warning">View More</span>
189 | 
190 |                         </div>
191 |                     </div>
192 |                     <div class="block-content collapse in">
193 |                         <div class="span3">
194 |                             <div class="chart" data-percent="73">73%</div>
195 |                             <div class="chart-bottom-heading"><span class="label label-info">Visitors</span>
196 | 
197 |                             </div>
198 |                         </div>
199 |                         <div class="span3">
200 |                             <div class="chart" data-percent="53">53%</div>
201 |                             <div class="chart-bottom-heading"><span class="label label-info">Page Views</span>
202 | 
203 |                             </div>
204 |                         </div>
205 |                         <div class="span3">
206 |                             <div class="chart" data-percent="83">83%</div>
207 |                             <div class="chart-bottom-heading"><span class="label label-info">Users</span>
208 | 
209 |                             </div>
210 |                         </div>
211 |                         <div class="span3">
212 |                             <div class="chart" data-percent="13">13%</div>
213 |                             <div class="chart-bottom-heading"><span class="label label-info">Orders</span>
214 | 
215 |                             </div>
216 |                         </div>
217 |                     </div>
218 |                 </div>
219 |                 <!-- /block -->
220 |             </div>
221 |             <div class="row-fluid">
222 |                 <div class="span6">
223 |                     <!-- block -->
224 |                     <div class="block">
225 |                         <div class="navbar navbar-inner block-header">
226 |                             <div class="muted pull-left">Users</div>
227 |                             <div class="pull-right"><span class="badge badge-info">1,234</span>
228 | 
229 |                             </div>
230 |                         </div>
231 |                         <div class="block-content collapse in">
232 |                             <table class="table table-striped">
233 |                                 <thead>
234 |                                 <tr>
235 |                                     <th>#</th>
236 |                                     <th>First Name</th>
237 |                                     <th>Last Name</th>
238 |                                     <th>Username</th>
239 |                                 </tr>
240 |                                 </thead>
241 |                                 <tbody>
242 |                                 <tr>
243 |                                     <td>1</td>
244 |                                     <td>Mark</td>
245 |                                     <td>Otto</td>
246 |                                     <td>@mdo</td>
247 |                                 </tr>
248 |                                 <tr>
249 |                                     <td>2</td>
250 |                                     <td>Jacob</td>
251 |                                     <td>Thornton</td>
252 |                                     <td>@fat</td>
253 |                                 </tr>
254 |                                 <tr>
255 |                                     <td>3</td>
256 |                                     <td>Vincent</td>
257 |                                     <td>Gabriel</td>
258 |                                     <td>@gabrielva</td>
259 |                                 </tr>
260 |                                 </tbody>
261 |                             </table>
262 |                         </div>
263 |                     </div>
264 |                     <!-- /block -->
265 |                 </div>
266 |                 <div class="span6">
267 |                     <!-- block -->
268 |                     <div class="block">
269 |                         <div class="navbar navbar-inner block-header">
270 |                             <div class="muted pull-left">Orders</div>
271 |                             <div class="pull-right"><span class="badge badge-info">752</span>
272 | 
273 |                             </div>
274 |                         </div>
275 |                         <div class="block-content collapse in">
276 |                             <table class="table table-striped">
277 |                                 <thead>
278 |                                 <tr>
279 |                                     <th>#</th>
280 |                                     <th>Product</th>
281 |                                     <th>Date</th>
282 |                                     <th>Amount</th>
283 |                                 </tr>
284 |                                 </thead>
285 |                                 <tbody>
286 |                                 <tr>
287 |                                     <td>1</td>
288 |                                     <td>Coat</td>
289 |                                     <td>02/02/2013</td>
290 |                                     <td>$25.12</td>
291 |                                 </tr>
292 |                                 <tr>
293 |                                     <td>2</td>
294 |                                     <td>Jacket</td>
295 |                                     <td>01/02/2013</td>
296 |                                     <td>$335.00</td>
297 |                                 </tr>
298 |                                 <tr>
299 |                                     <td>3</td>
300 |                                     <td>Shoes</td>
301 |                                     <td>01/02/2013</td>
302 |                                     <td>$29.99</td>
303 |                                 </tr>
304 |                                 </tbody>
305 |                             </table>
306 |                         </div>
307 |                     </div>
308 |                     <!-- /block -->
309 |                 </div>
310 |             </div>
311 |         </div>
312 |     </div>
313 |     <hr>
314 |     <footer>
315 |         <p>&copy; Roy Bailey 2015</p>
316 |     </footer>
317 | </div>
318 | <script src="jquery/jquery-1.9.1.min.js"></script>
319 | <script src="bootstrap/js/bootstrap.min.js"></script>
320 | <script src="assets/scripts.js"></script>
321 | </body>
322 | 
323 | </html>


--------------------------------------------------------------------------------
/src/test/java/me/roybailey/http/RestResponseTest.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.http;
 2 | 
 3 | import com.google.gson.Gson;
 4 | import me.roybailey.model.Task;
 5 | import me.roybailey.model.TaskMeta;
 6 | import org.junit.Test;
 7 | 
 8 | import java.io.IOException;
 9 | import java.time.LocalDateTime;
10 | import java.util.ArrayList;
11 | import java.util.List;
12 | 
13 | import static org.hamcrest.CoreMatchers.is;
14 | import static org.junit.Assert.assertThat;
15 | import static org.junit.Assert.assertTrue;
16 | 
17 | 
18 | /**
19 |  * Isolated testing of RestResponse serialization/deserialization via gson
20 |  */
21 | public class RestResponseTest {
22 | 
23 |     @Test
24 |     public void getTaskMetaSerialization() throws IOException {
25 |         RestResponse<TaskMeta> expected = RestResponse.builder(new TaskMeta(10)).build();
26 | 
27 |         Gson gson = JsonUtil.DefaultGsonBuilder.create();
28 |         String json = gson.toJson(expected);
29 |         RestResponse<TaskMeta> actual = gson.fromJson(json, RestfulController.TaskMetaType);
30 | 
31 |         assertThat(actual.content.getClass().getName(), is(expected.content.getClass().getName()));
32 |         assertThat(actual.content.getTotal(), is(expected.content.getTotal()));
33 |     }
34 | 
35 |     @Test
36 |     public void getTaskListSerialization() throws IOException {
37 |         List<Task> content = new ArrayList<>();
38 |         content.add(new Task("1", "TEST", "testing...123", LocalDateTime.of(2015, 1, 1, 12, 00, 00), 100, 50));
39 |         RestResponse<List<Task>> expected = RestResponse.<List<Task>>builder().withContent(content).build();
40 | 
41 |         Gson gson = JsonUtil.DefaultGsonBuilder.create();
42 |         String json = gson.toJson(expected);
43 |         System.out.println(json);
44 |         RestResponse<List<Task>> actual = gson.fromJson(json, RestfulController.TaskListType);
45 | 
46 |         assertThat(actual.content.getClass().getName(), is(expected.content.getClass().getName()));
47 |         assertThat(actual.content.size(), is(expected.content.size()));
48 |         assertThat(actual.content.get(0).getGuid(), is(expected.content.get(0).getGuid()));
49 |         assertThat(actual.content.get(0).getName(), is(expected.content.get(0).getName()));
50 |         assertThat(actual.content.get(0).getDescription(), is(expected.content.get(0).getDescription()));
51 |         assertTrue(actual.content.get(0).getDueDate().isEqual(expected.content.get(0).getDueDate()));
52 |         assertThat(actual.content.get(0).getEffort(), is(expected.content.get(0).getEffort()));
53 |         assertThat(actual.content.get(0).getProgress(), is(expected.content.get(0).getProgress()));
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/test/java/me/roybailey/http/RestfulControllerTest.java:
--------------------------------------------------------------------------------
 1 | package me.roybailey.http;
 2 | 
 3 | import com.google.gson.Gson;
 4 | import com.google.gson.reflect.TypeToken;
 5 | import me.roybailey.model.Task;
 6 | import me.roybailey.model.TaskMeta;
 7 | import org.eclipse.jetty.http.HttpStatus;
 8 | import org.junit.*;
 9 | import retrofit.RestAdapter;
10 | import retrofit.client.Response;
11 | import retrofit.converter.GsonConverter;
12 | import spark.Spark;
13 | 
14 | import java.io.IOException;
15 | import java.io.InputStreamReader;
16 | import java.lang.reflect.Type;
17 | import java.util.List;
18 | import java.util.Map;
19 | 
20 | import static org.hamcrest.core.Is.is;
21 | import static org.junit.Assert.*;
22 | 
23 | 
24 | public class RestfulControllerTest {
25 | 
26 |     public static final String BASE = "http://localhost:" + DemoService.PORT;
27 | 
28 |     @BeforeClass
29 |     public static void beforeClass() {
30 |         DemoService.main(null);
31 |     }
32 | 
33 |     @AfterClass
34 |     public static void afterClass() {
35 |         Spark.stop();
36 |     }
37 | 
38 |     RestAdapter restAdapter;
39 | 
40 |     @Before
41 |     public void beforeTest() {
42 |         restAdapter = new RestAdapter.Builder()
43 |                 .setEndpoint(BASE)
44 |                 .setRequestInterceptor((request) -> request.addHeader("User-Agent", "RestfulControllerTest"))
45 |                 .setLogLevel(RestAdapter.LogLevel.FULL)
46 |                 .setConverter(new GsonConverter(JsonUtil.DefaultGsonBuilder.create()))
47 |                 .build();
48 |     }
49 | 
50 |     @After
51 |     public void afterTest() {
52 |         restAdapter = null;
53 |     }
54 | 
55 |     @Test
56 |     public void getStatus() throws IOException {
57 |         RestfulService taskService = restAdapter.create(RestfulService.class);
58 |         Response response = taskService.getStatus();
59 |         assertEquals(HttpStatus.OK_200, response.getStatus());
60 | 
61 |         Gson gson = JsonUtil.DefaultGsonBuilder.create();
62 |         Type collectionType = new TypeToken<Map<String, Object>>() {
63 |         }.getType();
64 |         Map<String, Object> status = gson.fromJson(new InputStreamReader(response.getBody().in()), collectionType);
65 | 
66 |         assertEquals(1, status.size());
67 |         Map<String, Object> links = (Map<String, Object>) status.get("_links");
68 |         assertNotNull(links);
69 |         assertEquals(BASE + "/api/v1/tasks-meta", ((Map<String, Object>) links.get("tasks-meta")).get("href"));
70 |     }
71 | 
72 |     @Test
73 |     public void getTaskCount() throws IOException {
74 |         RestfulService taskService = restAdapter.create(RestfulService.class);
75 |         RestResponse<TaskMeta> response = taskService.getTaskMeta();
76 | 
77 |         assertThat(response.content.getTotal(), is(9));
78 |     }
79 | 
80 |     @Test
81 |     public void getTasks() throws IOException {
82 |         RestfulService taskService = restAdapter.create(RestfulService.class);
83 |         RestResponse<List<Task>> response = taskService.getTasks(1,4);
84 |         List<Task> tasks = response.content;
85 | 
86 |         assertThat(tasks.size(), is(4));
87 |         assertNotNull(tasks.get(0).getDueDate());
88 |         assertNotNull(tasks.get(0).getEffort());
89 |         assertNotNull(tasks.get(0).getProgress());
90 |         assertThat(tasks.get(0).getName(), is("Washing"));
91 |         assertThat(tasks.get(1).getName(), is("Car Service"));
92 |     }
93 | }
94 | 


--------------------------------------------------------------------------------