├── .bowerrc
├── .csslintrc
├── .editorconfig
├── .gitignore
├── .jshintrc
├── .travis.yml
├── LICENSE
├── README.md
├── bower.json
├── config
├── README.md
└── config_example.json
├── gulpfile.js
├── karma.conf.js
├── package.json
├── scsslint.yml
└── src
├── app
├── admin
│ ├── admin.js
│ └── loginHistory
│ │ ├── index.html
│ │ ├── login-history-controllers.js
│ │ ├── login-history-models.js
│ │ └── login-history.js
├── app.js
├── app.scss
├── assets
│ └── .gitkeep
├── core
│ ├── auth
│ │ ├── auth.js
│ │ ├── login
│ │ │ ├── login-controllers.js
│ │ │ ├── login.html
│ │ │ ├── login.js
│ │ │ └── login.scss
│ │ └── services
│ │ │ ├── AuthService.js
│ │ │ ├── UserService.js
│ │ │ └── services.js
│ ├── components
│ │ ├── FocusOn.js
│ │ └── components.js
│ ├── constants
│ │ ├── AccessLevels.js
│ │ └── BackendConfig.js
│ ├── core.js
│ ├── dependencies
│ │ └── dependencies.js
│ ├── directives
│ │ ├── ListSearch.js
│ │ ├── directives.js
│ │ └── partials
│ │ │ └── ListSearch.html
│ ├── error
│ │ ├── error-controllers.js
│ │ ├── error.js
│ │ └── partials
│ │ │ └── error.html
│ ├── filters
│ │ └── filters.js
│ ├── interceptors
│ │ ├── AuthInterceptor.js
│ │ ├── ErrorInterceptor.js
│ │ └── interceptors.js
│ ├── layout
│ │ ├── layout-controllers.js
│ │ ├── layout-directives.js
│ │ ├── layout-services.js
│ │ ├── layout.js
│ │ └── partials
│ │ │ ├── files.html
│ │ │ ├── footer.html
│ │ │ ├── header.html
│ │ │ ├── help.html
│ │ │ └── navigation.html
│ ├── libraries
│ │ ├── LoDash.js
│ │ └── libraries.js
│ ├── models
│ │ ├── DataModel.js
│ │ └── models.js
│ └── services
│ │ ├── DataService.js
│ │ ├── HttpStatusService.js
│ │ ├── ListConfigService.js
│ │ ├── MessageService.js
│ │ ├── SocketHelperService.js
│ │ └── services.js
├── examples
│ ├── about
│ │ ├── about.html
│ │ └── about.js
│ ├── author
│ │ ├── add.html
│ │ ├── author-controllers.js
│ │ ├── author-models.js
│ │ ├── author.html
│ │ ├── author.js
│ │ ├── list-info.html
│ │ └── list.html
│ ├── book
│ │ ├── add.html
│ │ ├── book-controllers.js
│ │ ├── book-models.js
│ │ ├── book.html
│ │ ├── book.js
│ │ ├── list-info.html
│ │ └── list.html
│ ├── chat
│ │ ├── chat-controllers.js
│ │ ├── chat-controllers_test.js
│ │ ├── chat-directives.js
│ │ ├── chat-info.html
│ │ ├── chat-models.js
│ │ ├── chat.html
│ │ ├── chat.js
│ │ └── chat.scss
│ ├── examples.js
│ └── messages
│ │ ├── messages-controller.js
│ │ ├── messages-info.html
│ │ ├── messages.html
│ │ └── messages.js
├── index.html
└── styles
│ ├── _angular.scss
│ ├── _base.scss
│ ├── _bootstrap.scss
│ ├── _components.scss
│ ├── _forms.scss
│ ├── _mixins.scss
│ └── modal.scss
└── dummy.js
/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 | "directory": "bower_components"
3 | }
4 |
--------------------------------------------------------------------------------
/.csslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "box-model": false,
3 | "fallback-colors": false,
4 | "box-sizing": false,
5 | "compatible-vendor-prefixes": false,
6 | "gradients": false,
7 | "adjoining-classes": false,
8 | "outline-none" : false
9 | }
10 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | bower_components/
3 | dist/*
4 | .tmp/
5 | .idea/
6 | config/config.json
7 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "browser": true,
3 | "bitwise": true,
4 | "camelcase": true,
5 | "curly": true,
6 | "eqeqeq": true,
7 | "immed": true,
8 | "indent": 2,
9 | "newcap": true,
10 | "noarg": true,
11 | "quotmark": "single",
12 | "regexp": true,
13 | "undef": true,
14 | "unused": true,
15 | "strict": true,
16 | "trailing": true,
17 | "smarttabs": true,
18 | "globals": {
19 | "angular": false,
20 | "console": false
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 |
3 | node_js:
4 | - "0.11"
5 | - "0.12"
6 | - "4.0"
7 | - "4.1"
8 | - "4.2"
9 | - "5.0"
10 |
11 | services:
12 |
13 | before_script:
14 |
15 | notifications:
16 | email: true
17 |
18 | # whitelisted branches
19 | branches:
20 | only:
21 | - master
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | =====================
3 |
4 | Copyright (c) 2015 Tarmo Leppänen
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy
7 | of this software and associated documentation files (the "Software"), to deal
8 | in the Software without restriction, including without limitation the rights
9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in
14 | all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 | THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Frontend side for angular-sailsjs-boilerplate
2 | [](https://badge.fury.io/gh/tarlepp%2Fangular-sailsjs-boilerplate-frontend)
3 | [](https://travis-ci.org/tarlepp/angular-sailsjs-boilerplate-frontend)
4 | [](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-frontend)
5 | [](https://david-dm.org/tarlepp/angular-sailsjs-boilerplate-frontend#info=devDependencies)
6 |
7 | This frontend code is used on [angular-sailsjs-boilerplate](https://github.com/tarlepp/angular-sailsjs-boilerplate)
8 |
9 | This is an example AngularJS application to demonstrate how to use separate back- and frontend applications. Currently
10 | this demo contains following features:
11 |
12 | * Login with backend
13 | * JWT token authentication after login
14 | * Simple list view (Books / Authors) to demonstrate socket communications
15 | * Generic error handler which is attached to $http and $sailsSocket
16 | * Message service to show specified messages to users
17 | * Live chat to demonstrate subscribe actions
18 |
19 | ## Used components
20 | This frontend application uses following 3rd party libraries to make all this magic happen.
21 |
22 | * slush-angular (https://github.com/slushjs/slush-angular)
23 | * AngularJS (https://github.com/angular/angular.js)
24 | * AngularUI Router (https://github.com/angular-ui/ui-router)
25 | * AngularUI Bootstrap (https://github.com/angular-ui/bootstrap)
26 | * angular-moment (https://github.com/urish/angular-moment)
27 | * Angular Bootstrap Show Errors (https://github.com/paulyoder/angular-bootstrap-show-errors)
28 | * angular-linkify (https://github.com/scottcorgan/angular-linkify)
29 | * angularSails (https://github.com/balderdashy/angularSails)
30 | * Bootstrap (https://github.com/twbs/bootstrap)
31 | * bootswatch (https://github.com/thomaspark/bootswatch/)
32 | * Font Awesome (https://github.com/FortAwesome/Font-Awesome)
33 | * noty - A jQuery Notification Plugin (https://github.com/needim/noty)
34 | * Sails JavaScript Client SDK (https://github.com/balderdashy/sails.io.js)
35 |
36 | ## Development
37 |
38 | To start developing in the project run:
39 |
40 | ```bash
41 | gulp serve
42 | ```
43 |
44 | or
45 |
46 | ```bash
47 | npm start
48 | ```
49 |
50 | Then head to `http://localhost:3001` in your browser.
51 |
52 | The `serve` tasks starts a static file server, which serves the AngularJS application, and a watch task which watches
53 | all files for changes and lints, builds and injects them into the index.html accordingly.
54 |
55 | ## Tests
56 |
57 | To run tests run:
58 |
59 | ```bash
60 | gulp test
61 | ```
62 |
63 | **Or** first inject all test files into `karma.conf.js` with:
64 |
65 | ```bash
66 | gulp karma-conf
67 | ```
68 |
69 | Then you're able to run Karma directly. Example:
70 |
71 | ```bash
72 | karma start --single-run
73 | ```
74 |
75 | ## Production ready build - a.k.a. dist
76 |
77 | To make the app ready for deploy to production run:
78 |
79 | ```bash
80 | gulp dist
81 | ```
82 |
83 | Now there's a `./dist` folder with all scripts and stylesheets concatenated and minified, also third party libraries
84 | installed with bower will be concatenated and minified into `vendors.min.js` and `vendors.min.css` respectively.
85 |
86 | To run your deployment code run:
87 |
88 | ```bash
89 | gulp production
90 | ```
91 |
92 | Then head to `http://localhost:3000` in your browser.
93 |
94 | ## License
95 | The MIT License (MIT)
96 |
97 | Copyright (c) 2015 Tarmo Leppänen
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "main": [
4 | "/dist/frontend.min.js",
5 | "/dist/frontend.min.css"
6 | ],
7 | "version": "0.1.0",
8 | "description": "Frontend application for angular-sailsjs-boilerplate",
9 | "authors": [
10 | "Tarmo Leppänen"
11 | ],
12 | "ignore": [
13 | "**/.*",
14 | "package.json",
15 | "klei.json",
16 | "gulpfile.js",
17 | "node_modules",
18 | "bower_components",
19 | "src"
20 | ],
21 | "dependencies": {
22 | "jquery": "2.1.3",
23 | "fontawesome": "4.3.0",
24 | "lodash": "3.2.0",
25 | "angular": "1.3.13",
26 | "angular-animate": "~1.3.13",
27 | "angular-loading-bar": "0.7.0",
28 | "angular-ui-router": "0.2.13",
29 | "angular-ui-bootstrap-bower": "0.12.1",
30 | "angular-ui-utils": "0.2.2",
31 | "angular-moment": "0.9.0",
32 | "angular-bootstrap-show-errors": "2.3.0",
33 | "angular-sanitize": "1.3.13",
34 | "angular-xeditable": "0.1.8",
35 | "angular-toastr": "1.0.1",
36 | "textAngular": "1.3.7",
37 | "bootbox": "4.4.0",
38 | "ngBootbox": "0.0.4",
39 | "sails.io.js": "0.11.5",
40 | "angularSails": "master",
41 | "ngstorage": "~0.3.0",
42 | "highcharts": "~4.1.3",
43 | "highcharts-ng": "~0.0.8"
44 | },
45 | "devDependencies": {
46 | "angular-mocks": "1.3.13"
47 | },
48 | "overrides": {
49 | "fontawesome": {
50 | "main": [
51 | "css/font-awesome.min.css",
52 | "fonts/FontAwesome.otf",
53 | "fonts/fontawesome-webfont.eot",
54 | "fonts/fontawesome-webfont.swg",
55 | "fonts/fontawesome-webfont.ttf",
56 | "fonts/fontawesome-webfont.svg"
57 | ]
58 | },
59 | "ngBootbox": {
60 | "main": "dist/ngBootbox.js"
61 | }
62 | },
63 | "resolutions": {
64 | "angular": "1.3.13",
65 | "bootbox": "4.4.0"
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/config/README.md:
--------------------------------------------------------------------------------
1 | Frontend config
2 | ============
3 |
4 | This folder contains example of frontend config JSON file. By default folder contains just an example file for this.
5 | If you need to override default values just copy ```config_example.json``` to ```config.json``` and make necessary
6 | changes to it. Note that ```config.json``` is ignored from vcs.
7 |
8 | Currently this configration file contains following values for frontend side:
9 |
10 |
11 | backendUrl = Sails backend URL, defaults to http://localhost:1337
12 |
--------------------------------------------------------------------------------
/config/config_example.json:
--------------------------------------------------------------------------------
1 | {
2 | "backendUrl": "http://localhost:1337",
3 | "frontend": {
4 | "ports": {
5 | "production": 3000,
6 | "development": 3001
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | /* jshint node: true */
2 | 'use strict';
3 |
4 | var gulp = require('gulp');
5 | var replace = require('gulp-replace-task');
6 | var fs = require('fs');
7 | var g = require('gulp-load-plugins')({lazy: false});
8 | var noop = g.util.noop;
9 | var es = require('event-stream');
10 | var Queue = require('streamqueue');
11 | var lazypipe = require('lazypipe');
12 | var stylish = require('jshint-stylish');
13 | var bower = require('./bower');
14 | var mainBowerFiles = require('main-bower-files');
15 | var historyApiFallback = require('connect-history-api-fallback');
16 | var isWatching = false;
17 |
18 | var htmlminOpts = {
19 | removeComments: true,
20 | collapseWhitespace: true,
21 | removeEmptyAttributes: false,
22 | collapseBooleanAttributes: true,
23 | removeRedundantAttributes: true
24 | };
25 |
26 | var settings;
27 |
28 | // Try to read frontend configuration file, fallback to default file
29 | try {
30 | settings = JSON.parse(fs.readFileSync('./config/config.json', 'utf8'));
31 | } catch (error) {
32 | settings = JSON.parse(fs.readFileSync('./config/config_example.json', 'utf8'));
33 | }
34 |
35 | /**
36 | * JS Hint
37 | */
38 | gulp.task('jshint', function() {
39 | return gulp.src([
40 | './gulpfile.js',
41 | './src/app/**/*.js'
42 | ])
43 | .pipe(g.cached('jshint'))
44 | .pipe(jshint('./.jshintrc'))
45 | .pipe(livereload());
46 | });
47 |
48 | /**
49 | * CSS
50 | */
51 | gulp.task('clean-css', function() {
52 | return gulp.src('./.tmp/css').pipe(g.clean());
53 | });
54 |
55 | gulp.task('styles', ['clean-css'], function() {
56 | return gulp.src([
57 | './src/app/**/*.scss',
58 | '!./src/app/**/_*.scss'
59 | ])
60 | .pipe(g.sass())
61 | .pipe(gulp.dest('./.tmp/css/'))
62 | .pipe(g.cached('built-css'))
63 | .pipe(livereload());
64 | });
65 |
66 | gulp.task('styles-dist', ['styles'], function() {
67 | return cssFiles().pipe(dist('css', bower.name));
68 | });
69 |
70 | gulp.task('csslint', ['styles'], function() {
71 | return cssFiles()
72 | .pipe(g.cached('csslint'))
73 | .pipe(g.csslint('./.csslintrc'))
74 | .pipe(g.csslint.reporter())
75 | ;
76 | });
77 |
78 | gulp.task('scsslint', ['styles'], function() {
79 | var scsslint = g.scssLint;
80 |
81 | return gulp.src('./src/app/**/*.scss')
82 | .pipe(scsslint({
83 | config: './scsslint.yml'
84 | }));
85 | });
86 |
87 | /**
88 | * Scripts
89 | */
90 | gulp.task('scripts-dist', ['templates-dist'], function() {
91 | return appFiles().pipe(dist('js', bower.name, {ngAnnotate: true}));
92 | });
93 |
94 | /**
95 | * Templates
96 | */
97 | gulp.task('templates', function() {
98 | return templateFiles().pipe(buildTemplates());
99 | });
100 |
101 | gulp.task('templates-dist', function() {
102 | return templateFiles({min: true}).pipe(buildTemplates());
103 | });
104 |
105 | /**
106 | * Vendors
107 | */
108 | gulp.task('vendors', function() {
109 | var bowerStream = gulp.src(mainBowerFiles());
110 |
111 | return es.merge(
112 | bowerStream.pipe(g.filter('**/*.css')).pipe(dist('css', 'vendors')),
113 | bowerStream.pipe(g.filter('**/*.js')).pipe(dist('js', 'vendors'))
114 | );
115 | });
116 |
117 | /**
118 | * Index
119 | */
120 | gulp.task('index', index);
121 | gulp.task('build-all', ['styles', 'templates'], index);
122 |
123 | function index() {
124 | var opt = {read: false};
125 |
126 | return gulp.src('./src/app/index.html')
127 | .pipe(g.inject(gulp.src(mainBowerFiles(opt)), {ignorePath: 'bower_components', starttag: ''}))
128 | .pipe(g.inject(es.merge(appFiles(), cssFiles(opt)), {ignorePath: ['.tmp', 'src/app']}))
129 | .pipe(g.embedlr())
130 | .pipe(replace({
131 | patterns: [
132 | {
133 | match: 'backendUrl',
134 | replacement: settings.backendUrl
135 | }
136 | ]
137 | }))
138 | .pipe(gulp.dest('./.tmp/'))
139 | .pipe(livereload())
140 | ;
141 | }
142 |
143 | /**
144 | * Assets
145 | */
146 | gulp.task('assets', function() {
147 | return gulp.src('./src/app/assets/**')
148 | .pipe(gulp.dest('./dist/assets'))
149 | ;
150 | });
151 |
152 | /**
153 | * Partials
154 | */
155 | gulp.task('partials', function() {
156 | return gulp.src('./src/app/partials/**')
157 | .pipe(gulp.dest('./dist/partials'))
158 | ;
159 | });
160 |
161 | /**
162 | * Fonts
163 | */
164 | gulp.task('fonts', function() {
165 | return gulp.src('./bower_components/fontawesome/fonts/**')
166 | .pipe(gulp.dest('./dist/fonts'))
167 | ;
168 | });
169 |
170 | /**
171 | * Dist
172 | */
173 | gulp.task('dist', ['vendors', 'assets', 'fonts', 'styles-dist', 'scripts-dist'], function() {
174 | return gulp.src('./src/app/index.html')
175 | .pipe(g.inject(gulp.src('./dist/vendors.min.{js,css}'), {
176 | ignorePath: 'dist',
177 | starttag: ''
178 | }))
179 | .pipe(g.inject(gulp.src('./dist/' + bower.name + '.min.{js,css}'), {ignorePath: 'dist'}))
180 | .pipe(replace({
181 | patterns: [
182 | {
183 | match: 'backendUrl',
184 | replacement: settings.backendUrl
185 | }
186 | ]
187 | }))
188 | .pipe(g.htmlmin(htmlminOpts))
189 | .pipe(gulp.dest('./dist/'))
190 | ;
191 | });
192 |
193 | /**
194 | * Static file server
195 | */
196 | gulp.task('statics', g.serve({
197 | port: settings.frontend.ports.development,
198 | root: ['./.tmp', './src/app', './bower_components'],
199 | middleware: historyApiFallback({})
200 | }));
201 |
202 | /**
203 | * Production file server, note remember to run 'gulp dist' first!
204 | */
205 | gulp.task('production', g.serve({
206 | port: settings.frontend.ports.production,
207 | root: ['./dist'],
208 | middleware: historyApiFallback({})
209 | }));
210 |
211 | /**
212 | * Watch
213 | */
214 | gulp.task('serve', ['watch']);
215 |
216 | gulp.task('watch', ['statics', 'default'], function() {
217 | isWatching = true;
218 |
219 | // Initiate livereload server:
220 | g.livereload({
221 | start: true
222 | });
223 |
224 | gulp.watch('./src/app/**/*.js', ['jshint']).on('change', function(evt) {
225 | if (evt.type !== 'changed') {
226 | gulp.start('index');
227 | }
228 | });
229 |
230 | gulp.watch('./src/app/index.html', ['index']);
231 | gulp.watch(['./src/app/**/*.html', '!./src/app/index.html'], ['templates']);
232 | gulp.watch(['./src/app/**/*.scss'], ['csslint', 'scsslint']).on('change', function(evt) {
233 | if (evt.type !== 'changed') {
234 | gulp.start('index');
235 | }
236 | });
237 | });
238 |
239 | /**
240 | * Default task
241 | */
242 | gulp.task('default', ['lint', 'build-all']);
243 |
244 | /**
245 | * Lint everything
246 | */
247 | gulp.task('lint', ['jshint', 'csslint', 'scsslint']);
248 |
249 | /**
250 | * Test
251 | */
252 | gulp.task('test', ['templates'], function() {
253 | return testFiles()
254 | .pipe(g.karma({
255 | configFile: __dirname + '/karma.conf.js',
256 | singleRun: true
257 | }))
258 | ;
259 | });
260 |
261 | /**
262 | * Inject all files for tests into karma.conf.js
263 | * to be able to run `karma` without gulp.
264 | */
265 | gulp.task('karma-conf', ['templates'], function() {
266 | return gulp.src('./karma.conf.js')
267 | .pipe(g.inject(testFiles(), {
268 | starttag: 'files: [',
269 | endtag: ']',
270 | addRootSlash: false,
271 | transform: function(filepath, file, i, length) {
272 | return ' \'' + filepath + '\'' + (i + 1 < length ? ',' : '');
273 | }
274 | }))
275 | .pipe(gulp.dest('./'))
276 | ;
277 | });
278 |
279 | /**
280 | * Test files
281 | */
282 | function testFiles() {
283 | return new Queue({objectMode: true})
284 | .Queue(gulp.src(mainBowerFiles()).pipe(g.filter('**/*.js')))
285 | .Queue(gulp.src('./bower_components/angular-mocks/angular-mocks.js'))
286 | .Queue(appFiles())
287 | .Queue(gulp.src('./src/app/**/*_test.js'))
288 | .done()
289 | ;
290 | }
291 |
292 | /**
293 | * All CSS files as a stream
294 | */
295 | function cssFiles(opt) {
296 | return gulp.src('./.tmp/css/**/*.css', opt);
297 | }
298 |
299 | /**
300 | * All AngularJS application files as a stream
301 | */
302 | function appFiles() {
303 | var files = [
304 | './.tmp/' + bower.name + '-templates.js',
305 | './src/app/**/*.js',
306 | '!./src/app/**/*_test.js'
307 | ];
308 |
309 | return gulp.src(files)
310 | .pipe(g.angularFilesort())
311 | ;
312 | }
313 |
314 | /**
315 | * All AngularJS templates/partials as a stream
316 | */
317 | function templateFiles(opt) {
318 | return gulp.src(['./src/app/**/*.html', '!./src/app/index.html'], opt)
319 | .pipe(opt && opt.min ? g.htmlmin(htmlminOpts) : noop())
320 | ;
321 | }
322 |
323 | /**
324 | * Build AngularJS templates/partials
325 | */
326 | function buildTemplates() {
327 | return lazypipe()
328 | .pipe(g.ngHtml2js, {
329 | moduleName: bower.name + '-templates',
330 | prefix: '/' + bower.name + '/',
331 | stripPrefix: '/src/app'
332 | })
333 | .pipe(g.concat, bower.name + '-templates.js')
334 | .pipe(gulp.dest, './.tmp')
335 | .pipe(livereload)()
336 | ;
337 | }
338 |
339 | /**
340 | * Concat, rename, minify
341 | *
342 | * @param {String} ext
343 | * @param {String} name
344 | * @param {Object} opt
345 | */
346 | function dist(ext, name, opt) {
347 | opt = opt || {};
348 |
349 | return lazypipe()
350 | .pipe(g.concat, name + '.' + ext)
351 | .pipe(gulp.dest, './dist')
352 | .pipe(opt.ngAnnotate ? g.ngAnnotate : noop)
353 | .pipe(opt.ngAnnotate ? g.rename : noop, name + '.annotated.' + ext)
354 | .pipe(opt.ngAnnotate ? gulp.dest : noop, './dist')
355 | .pipe(ext === 'js' ? g.uglify : g.minifyCss)
356 | .pipe(g.rename, name + '.min.' + ext)
357 | .pipe(gulp.dest, './dist')()
358 | ;
359 | }
360 |
361 | /**
362 | * Livereload (or noop if not run by watch)
363 | */
364 | function livereload() {
365 | return lazypipe()
366 | .pipe(isWatching ? g.livereload : noop)()
367 | ;
368 | }
369 |
370 | /**
371 | * Jshint with stylish reporter
372 | */
373 | function jshint(jshintfile) {
374 | // Read JSHint settings, for some reason jshint-stylish won't work on initial load of files
375 | var jshintSettings = JSON.parse(fs.readFileSync(jshintfile, 'utf8'));
376 |
377 | return lazypipe()
378 | .pipe(g.jshint, jshintSettings)
379 | .pipe(g.jshint.reporter, stylish)()
380 | ;
381 | }
382 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = function ( karma ) {
3 | process.env.PHANTOMJS_BIN = 'node_modules/phantomjs/bin/phantomjs';
4 |
5 | karma.set({
6 | /**
7 | * From where to look for files, starting with the location of this file.
8 | */
9 | basePath: './',
10 |
11 | /**
12 | * Filled by the task `gulp karma-conf`
13 | */
14 | files: [
15 | ],
16 |
17 | frameworks: [ 'mocha', 'chai', 'sinon-chai' ],
18 | plugins: [ 'karma-mocha', 'karma-mocha-reporter', 'karma-chai', 'karma-sinon-chai', 'karma-phantomjs-launcher' ],
19 |
20 | /**
21 | * How to report, by default.
22 | */
23 | reporters: 'mocha',
24 |
25 | /**
26 | * Show colors in output?
27 | */
28 | colors: true,
29 |
30 | /**
31 | * On which port should the browser connect, on which port is the test runner
32 | * operating, and what is the URL path for the browser to use.
33 | */
34 | port: 9099,
35 | runnerPort: 9100,
36 | urlRoot: '/',
37 |
38 | /**
39 | * Disable file watching by default.
40 | */
41 | autoWatch: false,
42 |
43 | /**
44 | * The list of browsers to launch to test on. This includes only "Firefox" by
45 | * default, but other browser names include:
46 | * Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS
47 | *
48 | * Note that you can also use the executable name of the browser, like "chromium"
49 | * or "firefox", but that these vary based on your operating system.
50 | *
51 | * You may also leave this blank and manually navigate your browser to
52 | * http://localhost:9099/ when you're running tests. The window/tab can be left
53 | * open and the tests will automatically occur there during the build. This has
54 | * the aesthetic advantage of not launching a browser every time you save.
55 | */
56 | browsers: [
57 | 'PhantomJS'
58 | ]
59 | });
60 | };
61 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "version": "0.2.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "gulp watch",
7 | "test": "gulp test",
8 | "postinstall": "./node_modules/bower/bin/bower install"
9 | },
10 | "keywords": [
11 | "slush, angular, slush-angular"
12 | ],
13 | "dependencies": {
14 | "bower": "1.7.7",
15 | "connect-history-api-fallback": "1.2.0"
16 | },
17 | "devDependencies": {
18 | "chai": "3.4.1",
19 | "event-stream": "3.3.2",
20 | "gulp": "3.9.1",
21 | "gulp-angular-filesort": "1.1.1",
22 | "gulp-cached": "1.1.0",
23 | "gulp-clean": "0.3.2",
24 | "gulp-concat": "2.6.0",
25 | "gulp-csslint": "0.2.2",
26 | "gulp-embedlr": "0.5.2",
27 | "gulp-filter": "4.0.0",
28 | "gulp-header": "1.7.1",
29 | "gulp-htmlmin": "1.3.0",
30 | "gulp-inject": "4.0.0",
31 | "gulp-jshint": "2.0.0",
32 | "gulp-karma": "0.0.5",
33 | "gulp-livereload": "3.8.1",
34 | "gulp-load-plugins": "1.2.0",
35 | "gulp-minify-css": "1.2.4",
36 | "gulp-ng-annotate": "2.0.0",
37 | "gulp-ng-html2js": "0.2.2",
38 | "gulp-rename": "1.2.2",
39 | "gulp-replace-task": "0.11.0",
40 | "gulp-sass": "2.2.0",
41 | "gulp-scss-lint": "0.3.9",
42 | "gulp-serve": "1.2.0",
43 | "gulp-uglify": "1.5.3",
44 | "gulp-util": "3.0.7",
45 | "jshint": "2.9.1",
46 | "jshint-stylish": "2.1.0",
47 | "karma": "0.13.15",
48 | "karma-chai": "0.1.0",
49 | "karma-chrome-launcher": "0.2.1",
50 | "karma-mocha": "0.2.0",
51 | "karma-mocha-reporter": "1.1.1",
52 | "karma-phantomjs-launcher": "0.2.1",
53 | "karma-sinon-chai": "1.1.0",
54 | "lazypipe": "1.0.1",
55 | "main-bower-files": "2.9.0",
56 | "mocha": "2.3.3",
57 | "phantomjs": "1.9.18",
58 | "sinon": "1.17.2",
59 | "sort-stream": "1.0.1",
60 | "streamqueue": "1.1.1",
61 | "tiny-lr": "0.2.1"
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/scsslint.yml:
--------------------------------------------------------------------------------
1 | # Default application configuration that all configurations inherit from.
2 |
3 | scss_files: "**/*.scss"
4 | plugin_directories: ['.scss-linters']
5 |
6 | # List of gem names to load custom linters from (make sure they are already
7 | # installed)
8 | plugin_gems: []
9 |
10 | linters:
11 | BangFormat:
12 | enabled: true
13 | space_before_bang: true
14 | space_after_bang: false
15 |
16 | BemDepth:
17 | enabled: false
18 | max_elements: 1
19 |
20 | BorderZero:
21 | enabled: true
22 | convention: zero # or `none`
23 |
24 | ColorKeyword:
25 | enabled: true
26 |
27 | ColorVariable:
28 | enabled: true
29 |
30 | Comment:
31 | enabled: true
32 |
33 | DebugStatement:
34 | enabled: true
35 |
36 | DeclarationOrder:
37 | enabled: true
38 |
39 | DisableLinterReason:
40 | enabled: false
41 |
42 | DuplicateProperty:
43 | enabled: true
44 |
45 | ElsePlacement:
46 | enabled: true
47 | style: same_line # or 'new_line'
48 |
49 | EmptyLineBetweenBlocks:
50 | enabled: true
51 | ignore_single_line_blocks: true
52 |
53 | EmptyRule:
54 | enabled: true
55 |
56 | ExtendDirective:
57 | enabled: false
58 |
59 | FinalNewline:
60 | enabled: true
61 | present: true
62 |
63 | HexLength:
64 | enabled: true
65 | style: short # or 'long'
66 |
67 | HexNotation:
68 | enabled: true
69 | style: lowercase # or 'uppercase'
70 |
71 | HexValidation:
72 | enabled: true
73 |
74 | IdSelector:
75 | enabled: true
76 |
77 | ImportantRule:
78 | enabled: true
79 |
80 | ImportPath:
81 | enabled: true
82 | leading_underscore: false
83 | filename_extension: false
84 |
85 | Indentation:
86 | enabled: true
87 | allow_non_nested_indentation: false
88 | character: space # or 'tab'
89 | width: 2
90 |
91 | LeadingZero:
92 | enabled: true
93 | style: exclude_zero # or 'include_zero'
94 |
95 | MergeableSelector:
96 | enabled: true
97 | force_nesting: true
98 |
99 | NameFormat:
100 | enabled: true
101 | allow_leading_underscore: true
102 | convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
103 |
104 | NestingDepth:
105 | enabled: true
106 | max_depth: 10
107 | ignore_parent_selectors: false
108 |
109 | PlaceholderInExtend:
110 | enabled: true
111 |
112 | PropertyCount:
113 | enabled: false
114 | include_nested: false
115 | max_properties: 10
116 |
117 | PropertySortOrder:
118 | enabled: true
119 | ignore_unspecified: false
120 | min_properties: 2
121 | separate_groups: false
122 |
123 | PropertySpelling:
124 | enabled: true
125 | extra_properties: []
126 |
127 | PropertyUnits:
128 | enabled: true
129 | global: [
130 | 'ch', 'em', 'ex', 'rem', # Font-relative lengths
131 | 'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
132 | 'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths
133 | 'deg', 'grad', 'rad', 'turn', # Angle
134 | 'ms', 's', # Duration
135 | 'Hz', 'kHz', # Frequency
136 | 'dpi', 'dpcm', 'dppx', # Resolution
137 | '%'] # Other
138 | properties: {}
139 |
140 | QualifyingElement:
141 | enabled: true
142 | allow_element_with_attribute: false
143 | allow_element_with_class: false
144 | allow_element_with_id: false
145 |
146 | SelectorDepth:
147 | enabled: true
148 | max_depth: 6
149 |
150 | SelectorFormat:
151 | enabled: true
152 | convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
153 |
154 | Shorthand:
155 | enabled: true
156 | allowed_shorthands: [1, 2, 3]
157 |
158 | SingleLinePerProperty:
159 | enabled: true
160 | allow_single_line_rule_sets: true
161 |
162 | SingleLinePerSelector:
163 | enabled: true
164 |
165 | SpaceAfterComma:
166 | enabled: true
167 | style: one_space # or 'no_space', or 'at_least_one_space'
168 |
169 | SpaceAfterPropertyColon:
170 | enabled: true
171 | style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
172 |
173 | SpaceAfterPropertyName:
174 | enabled: true
175 |
176 | SpaceAfterVariableName:
177 | enabled: true
178 |
179 | SpaceAroundOperator:
180 | enabled: true
181 | style: one_space # or 'no_space'
182 |
183 | SpaceBeforeBrace:
184 | enabled: true
185 | style: space # or 'new_line'
186 | allow_single_line_padding: false
187 |
188 | SpaceBetweenParens:
189 | enabled: true
190 | spaces: 0
191 |
192 | StringQuotes:
193 | enabled: true
194 | style: single_quotes # or double_quotes
195 |
196 | TrailingSemicolon:
197 | enabled: true
198 |
199 | TrailingWhitespace:
200 | enabled: true
201 |
202 | TrailingZero:
203 | enabled: false
204 |
205 | TransitionAll:
206 | enabled: false
207 |
208 | UnnecessaryMantissa:
209 | enabled: true
210 |
211 | UnnecessaryParentReference:
212 | enabled: true
213 |
214 | UrlFormat:
215 | enabled: true
216 |
217 | UrlQuotes:
218 | enabled: true
219 |
220 | VariableForProperty:
221 | enabled: false
222 | properties: []
223 |
224 | VendorPrefix:
225 | enabled: true
226 | identifier_list: base
227 | additional_identifiers: []
228 | excluded_identifiers: []
229 |
230 | ZeroUnit:
231 | enabled: true
232 |
233 | Compass::*:
234 | enabled: false
--------------------------------------------------------------------------------
/src/app/admin/admin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Angular module for admin component. All of these are wrapped to 'frontend.admin.login-history' angular module. This
3 | * component is divided to following logical components:
4 | *
5 | * frontend.admin.login-history
6 | *
7 | * Also this file contains all necessary information about 'frontend.admin' module route definitions.
8 | */
9 | (function() {
10 | 'use strict';
11 |
12 | // Define frontend.admin module
13 | angular.module('frontend.admin', [
14 | 'frontend.admin.login-history'
15 | ]);
16 |
17 | // Module configuration
18 | angular.module('frontend.admin')
19 | .config([
20 | '$stateProvider',
21 | function config($stateProvider) {
22 | $stateProvider
23 | .state('admin', {
24 | parent: 'frontend',
25 | data: {
26 | access: 2
27 | },
28 | views: {
29 | 'content@': {
30 | controller: [
31 | '$state',
32 | function($state) {
33 | $state.go('admin.login-history');
34 | }
35 | ]
36 | },
37 | 'pageNavigation@': {
38 | templateUrl: '/frontend/core/layout/partials/navigation.html',
39 | controller: 'NavigationController',
40 | resolve: {
41 | _items: [
42 | 'ContentNavigationItems',
43 | function resolve(ContentNavigationItems) {
44 | return ContentNavigationItems.getItems('admin');
45 | }
46 | ]
47 | }
48 | }
49 | }
50 | })
51 | ;
52 | }
53 | ])
54 | ;
55 | }());
56 |
--------------------------------------------------------------------------------
/src/app/admin/loginHistory/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | User login history ({{itemCount}})
4 |
5 |
6 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
44 |
45 |
46 |
47 |
48 |
49 | {{item.ip}}
50 |
51 |
52 | {{item.browser}}
53 |
54 |
55 | {{item.os}}
56 |
57 |
58 | {{item.user.lastName}}, {{item.user.firstName}}
59 |
60 |
61 | ({{item.user.username}})
62 |
63 |
64 |
65 | {{item.createdAt | amDateFormat : 'LLLL'}},
66 |
68 |
69 |
70 |
71 |
72 | no data founded...
73 |
74 |
75 |
76 |
77 |
78 |
86 |
87 |
88 |
89 |
90 |
91 |
93 |
94 |
96 |
97 |
99 |
' + this.key + ' {point.percentage:.1f}% '
82 | }
83 | },
84 | title: {
85 | text: ''
86 | },
87 | series: [{
88 | type: 'pie',
89 | name: '',
90 | data: []
91 | }]
92 | };
93 |
94 | var charts = [
95 | {
96 | scope: 'chartBrowser',
97 | data: 'statsBrowser',
98 | title: 'Browsers'
99 | },
100 | {
101 | scope: 'chartOs',
102 | data: 'statsOS',
103 | title: 'Operating systems'
104 | },
105 | {
106 | scope: 'chartUser',
107 | data: 'statsUser',
108 | title: 'Users'
109 | }
110 | ];
111 |
112 | _.forEach(charts, function iterator(config) {
113 | $scope[config.scope] = angular.copy(chartConfig);
114 |
115 | $scope[config.scope].series[0].data = $scope[config.data];
116 | $scope[config.scope].title.text = config.title;
117 | });
118 |
119 | // Function to change sort column / direction on list
120 | $scope.changeSort = function changeSort(item) {
121 | var sort = $scope.sort;
122 |
123 | if (sort.column === item.column) {
124 | sort.direction = !sort.direction;
125 | } else {
126 | sort.column = item.column;
127 | sort.direction = true;
128 | }
129 |
130 | _triggerFetchData();
131 | };
132 |
133 | // Watcher for items, this is needed to update charts
134 | $scope.$watch('items', function watcher(valueNew, valueOld) {
135 | if (valueNew !== valueOld) {
136 | var actions = [
137 | {
138 | action: 'Browser',
139 | scope: 'chartBrowser'
140 | },
141 | {
142 | action: 'OS',
143 | scope: 'chartOs'
144 | },
145 | {
146 | action: 'User',
147 | scope: 'chartUser'
148 | }
149 | ];
150 |
151 | // Create necessary promises to update chart data
152 | var promises = _.map(actions, function iterator(config) {
153 | LoginHistoryModel
154 | .statistics(config.action)
155 | .then(
156 | function onSuccess(data) {
157 | $scope[config.scope].series[0].data = data;
158 | }
159 | )
160 | ;
161 | });
162 |
163 | // Execute all promises
164 | $q.all(promises);
165 | }
166 | });
167 |
168 | // Simple watcher for 'currentPage' scope variable. If this is changed we need to fetch book data from server.
169 | $scope.$watch('currentPage', function watcher(valueNew, valueOld) {
170 | if (valueNew !== valueOld) {
171 | _fetchData();
172 | }
173 | });
174 |
175 | // Simple watcher for 'itemsPerPage' scope variable. If this is changed we need to fetch book data from server.
176 | $scope.$watch('itemsPerPage', function watcher(valueNew, valueOld) {
177 | if (valueNew !== valueOld) {
178 | _triggerFetchData();
179 | }
180 | });
181 |
182 | var searchWordTimer;
183 |
184 | /**
185 | * Watcher for 'filter' scope variable, which contains multiple values that we're interested
186 | * within actual GUI. This will trigger new data fetch query to server if following conditions
187 | * have been met:
188 | *
189 | * 1) Actual filter variable is different than old one
190 | * 2) Search word have not been changed in 400ms
191 | *
192 | * If those are ok, then watcher will call 'fetchData' function.
193 | */
194 | $scope.$watch('filters', function watcher(valueNew, valueOld) {
195 | if (valueNew !== valueOld) {
196 | if (searchWordTimer) {
197 | $timeout.cancel(searchWordTimer);
198 | }
199 |
200 | searchWordTimer = $timeout(_triggerFetchData, 400);
201 | }
202 | }, true);
203 |
204 | /**
205 | * Helper function to trigger actual data fetch from backend. This will just check current page
206 | * scope variable and if it is 1 call 'fetchData' function right away. Any other case just set
207 | * 'currentPage' scope variable to 1, which will trigger watcher to fetch data.
208 | *
209 | * @private
210 | */
211 | function _triggerFetchData() {
212 | if ($scope.currentPage === 1) {
213 | _fetchData();
214 | } else {
215 | $scope.currentPage = 1;
216 | }
217 | }
218 |
219 | /**
220 | * Helper function to fetch actual data for GUI from backend server with current parameters:
221 | * 1) Current page
222 | * 2) Search word
223 | * 3) Sort order
224 | * 4) Items per page
225 | *
226 | * Actually this function is doing two request to backend:
227 | * 1) Data count by given filter parameters
228 | * 2) Actual data fetch for current page with filter parameters
229 | *
230 | * These are fetched via 'LoginHistoryModel' service with promises.
231 | *
232 | * @private
233 | */
234 | function _fetchData() {
235 | $scope.loading = true;
236 |
237 | // Common parameters for count and data query
238 | var commonParameters = {
239 | where: SocketHelperService.getWhere($scope.filters),
240 | populate: 'user'
241 | };
242 |
243 | // Data query specified parameters
244 | var parameters = {
245 | limit: $scope.itemsPerPage,
246 | skip: ($scope.currentPage - 1) * $scope.itemsPerPage,
247 | sort: $scope.sort.column + ' ' + ($scope.sort.direction ? 'ASC' : 'DESC')
248 | };
249 |
250 | // Fetch data count
251 | var count = LoginHistoryModel
252 | .count(commonParameters)
253 | .then(
254 | function onSuccess(response) {
255 | $scope.itemCount = response.count;
256 | }
257 | )
258 | ;
259 |
260 | // Fetch actual data
261 | var load = LoginHistoryModel
262 | .load(_.merge({}, commonParameters, parameters))
263 | .then(
264 | function onSuccess(response) {
265 | $scope.items = response;
266 | }
267 | )
268 | ;
269 |
270 | // Load all needed data
271 | $q
272 | .all([count, load])
273 | .finally(
274 | function onFinally() {
275 | $scope.loaded = true;
276 | $scope.loading = false;
277 | }
278 | )
279 | ;
280 | }
281 | }
282 | ])
283 | ;
284 | }());
285 |
--------------------------------------------------------------------------------
/src/app/admin/loginHistory/login-history-models.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains all necessary Angular model definitions for 'frontend.admin.login-history' module.
3 | *
4 | * Note that this file should only contain models and nothing else. Also note that these "models" are just basically
5 | * services that wraps all things together.
6 | */
7 | (function () {
8 | 'use strict';
9 |
10 | /**
11 | * Model for Book API, this is used to wrap all Book objects specified actions and data change actions.
12 | */
13 | angular.module('frontend.admin.login-history')
14 | .factory('LoginHistoryModel', [
15 | '$log',
16 | 'DataModel', 'DataService',
17 | function factory(
18 | $log,
19 | DataModel, DataService
20 | ) {
21 | var model = new DataModel('userlogin');
22 |
23 | model.statistics = function statistics(type) {
24 | var self = this;
25 |
26 | return DataService
27 | .collection(self.endpoint + '/statistics/', {type: type})
28 | .then(
29 | function onSuccess(response) {
30 | return response.data;
31 | },
32 | function onError(error) {
33 | $log.error('LoginHistoryModel.statistics() failed.', error, self.endpoint, type);
34 | }
35 | )
36 | ;
37 | };
38 |
39 | return model;
40 | }
41 | ])
42 | ;
43 | }());
44 |
--------------------------------------------------------------------------------
/src/app/admin/loginHistory/login-history.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Login history component. This component is divided to following logical components:
3 | *
4 | * Controllers
5 | *
6 | * All of these are wrapped to 'frontend.admin.login-history' angular module. This also contains necessary route
7 | * definitions for this module.
8 | */
9 | (function() {
10 | 'use strict';
11 |
12 | // Define frontend.admin module.login-history
13 | angular.module('frontend.admin.login-history', []);
14 |
15 | // Module configuration
16 | angular.module('frontend.admin.login-history')
17 | .config([
18 | '$stateProvider',
19 | function config($stateProvider) {
20 | $stateProvider
21 | .state('admin.login-history', {
22 | url: '/admin/loginHistory',
23 | views: {
24 | 'content@': {
25 | templateUrl: '/frontend/admin/loginHistory/index.html',
26 | controller: 'LoginHistoryController',
27 | resolve: {
28 | _items: [
29 | 'ListConfig',
30 | 'LoginHistoryModel',
31 | function resolve(
32 | ListConfig,
33 | LoginHistoryModel
34 | ) {
35 | var config = ListConfig.getConfig();
36 |
37 | var parameters = {
38 | limit: config.itemsPerPage,
39 | sort: 'createdAt DESC',
40 | populate: 'user'
41 | };
42 |
43 | return LoginHistoryModel.load(parameters);
44 | }
45 | ],
46 | _count: [
47 | 'LoginHistoryModel',
48 | function resolve(LoginHistoryModel) {
49 | return LoginHistoryModel.count();
50 | }
51 | ],
52 | _statsBrowser: [
53 | 'LoginHistoryModel',
54 | function resolve(LoginHistoryModel) {
55 | return LoginHistoryModel.statistics('Browser');
56 | }
57 | ],
58 | _statsOS: [
59 | 'LoginHistoryModel',
60 | function resolve(LoginHistoryModel) {
61 | return LoginHistoryModel.statistics('OS');
62 | }
63 | ],
64 | _statsUser: [
65 | 'LoginHistoryModel',
66 | function resolve(LoginHistoryModel) {
67 | return LoginHistoryModel.statistics('User');
68 | }
69 | ]
70 | }
71 | }
72 | }
73 | })
74 | ;
75 | }
76 | ])
77 | ;
78 | }());
79 |
--------------------------------------------------------------------------------
/src/app/app.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Frontend application definition.
3 | *
4 | * This is the main file for the 'Frontend' application.
5 | */
6 | (function() {
7 | 'use strict';
8 |
9 | // Create frontend module and specify dependencies for that
10 | angular.module('frontend', [
11 | 'frontend-templates',
12 | 'frontend.core',
13 | 'frontend.examples',
14 | 'frontend.admin'
15 | ]);
16 |
17 | /**
18 | * Configuration for frontend application, this contains following main sections:
19 | *
20 | * 1) Configure $httpProvider and $sailsSocketProvider
21 | * 2) Set necessary HTTP and Socket interceptor(s)
22 | * 3) Turn on HTML5 mode on application routes
23 | * 4) Set up application routes
24 | */
25 | angular.module('frontend')
26 | .config([
27 | '$stateProvider', '$locationProvider', '$urlRouterProvider', '$httpProvider', '$sailsSocketProvider',
28 | '$tooltipProvider', 'cfpLoadingBarProvider',
29 | 'toastrConfig',
30 | 'AccessLevels',
31 | function config(
32 | $stateProvider, $locationProvider, $urlRouterProvider, $httpProvider, $sailsSocketProvider,
33 | $tooltipProvider, cfpLoadingBarProvider,
34 | toastrConfig,
35 | AccessLevels
36 | ) {
37 | $httpProvider.defaults.useXDomain = true;
38 |
39 | delete $httpProvider.defaults.headers.common['X-Requested-With'];
40 |
41 | // Add interceptors for $httpProvider and $sailsSocketProvider
42 | $httpProvider.interceptors.push('AuthInterceptor');
43 | $httpProvider.interceptors.push('ErrorInterceptor');
44 |
45 | // Iterate $httpProvider interceptors and add those to $sailsSocketProvider
46 | angular.forEach($httpProvider.interceptors, function iterator(interceptor) {
47 | $sailsSocketProvider.interceptors.push(interceptor);
48 | });
49 |
50 | // Set tooltip options
51 | $tooltipProvider.options({
52 | appendToBody: true
53 | });
54 |
55 | // Disable spinner from cfpLoadingBar
56 | cfpLoadingBarProvider.includeSpinner = false;
57 | cfpLoadingBarProvider.latencyThreshold = 200;
58 |
59 | // Extend default toastr configuration with application specified configuration
60 | angular.extend(
61 | toastrConfig,
62 | {
63 | allowHtml: true,
64 | closeButton: true,
65 | extendedTimeOut: 3000
66 | }
67 | );
68 |
69 | // Yeah we wanna to use HTML5 urls!
70 | $locationProvider
71 | .html5Mode({
72 | enabled: true,
73 | requireBase: false
74 | })
75 | .hashPrefix('!')
76 | ;
77 |
78 | // Routes that needs authenticated user
79 | $stateProvider
80 | .state('profile', {
81 | abstract: true,
82 | template: '
35 | * Hello, {{user().email}}
36 | *
37 | *
38 | * Happy coding!
39 | *
40 | * @todo Revoke method?
41 | * @todo Text localizations?
42 | */
43 | (function() {
44 | 'use strict';
45 |
46 | angular.module('frontend.core.auth.services')
47 | .factory('AuthService', [
48 | '$http', '$state', '$localStorage',
49 | 'AccessLevels', 'BackendConfig', 'MessageService',
50 | function factory(
51 | $http, $state, $localStorage,
52 | AccessLevels, BackendConfig, MessageService
53 | ) {
54 | return {
55 | /**
56 | * Method to authorize current user with given access level in application.
57 | *
58 | * @param {Number} accessLevel Access level to check
59 | *
60 | * @returns {Boolean}
61 | */
62 | authorize: function authorize(accessLevel) {
63 | if (accessLevel === AccessLevels.user) {
64 | return this.isAuthenticated();
65 | } else if (accessLevel === AccessLevels.admin) {
66 | return this.isAuthenticated() && Boolean($localStorage.credentials.user.admin);
67 | } else {
68 | return accessLevel === AccessLevels.anon;
69 | }
70 | },
71 |
72 | /**
73 | * Method to check if current user is authenticated or not. This will just
74 | * simply call 'Storage' service 'get' method and returns it results.
75 | *
76 | * @returns {Boolean}
77 | */
78 | isAuthenticated: function isAuthenticated() {
79 | return Boolean($localStorage.credentials);
80 | },
81 |
82 | /**
83 | * Method make login request to backend server. Successfully response from
84 | * server contains user data and JWT token as in JSON object. After successful
85 | * authentication method will store user data and JWT token to local storage
86 | * where those can be used.
87 | *
88 | * @param {*} credentials
89 | *
90 | * @returns {*|Promise}
91 | */
92 | login: function login(credentials) {
93 | return $http
94 | .post(BackendConfig.url + '/login', credentials, {withCredentials: true})
95 | .then(
96 | function(response) {
97 | MessageService.success('You have been logged in.');
98 |
99 | $localStorage.credentials = response.data;
100 | }
101 | )
102 | ;
103 | },
104 |
105 | /**
106 | * The backend doesn't care about actual user logout, just delete the token
107 | * and you're good to go.
108 | *
109 | * Question still: Should we make logout process to backend side?
110 | */
111 | logout: function logout() {
112 | $localStorage.$reset();
113 |
114 | MessageService.success('You have been logged out.');
115 |
116 | $state.go('auth.login');
117 | }
118 | };
119 | }
120 | ])
121 | ;
122 | }());
123 |
--------------------------------------------------------------------------------
/src/app/core/auth/services/UserService.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Current user data service within this you can access to currently signed in user data.
3 | * Note that if you wanna be secure about this you have to also use 'Auth' service in your
4 | * views.
5 | *
6 | * Usage example in controller:
7 | * angular
8 | * .module('app')
9 | * .controller('SomeController',[
10 | * '$scope', 'AuthService', 'UserService',
11 | * function controller($scope, AuthService, UserService) {
12 | * $scope.auth = AuthService;
13 | * $scope.user = UserService.user;
14 | * }
15 | * ])
16 | * ;
17 | *
18 | * Usage example in view:
19 | *
20 | * Hello, {{user().email}}
21 | *
22 | *
23 | * Happy coding!
24 | */
25 | (function() {
26 | 'use strict';
27 |
28 | angular.module('frontend.core.auth.services')
29 | .factory('UserService', [
30 | '$localStorage',
31 | function factory($localStorage) {
32 | return {
33 | user: function user() {
34 | return $localStorage.credentials ? $localStorage.credentials.user : {};
35 | }
36 | };
37 | }
38 | ])
39 | ;
40 | }());
41 |
--------------------------------------------------------------------------------
/src/app/core/auth/services/services.js:
--------------------------------------------------------------------------------
1 | // Generic models angular module initialize.
2 | (function() {
3 | 'use strict';
4 |
5 | angular.module('frontend.core.auth.services', []);
6 | }());
7 |
--------------------------------------------------------------------------------
/src/app/core/components/FocusOn.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Generic 'focus' component for boilerplate application. Purpose of this component is to provide an easy way to trigger
3 | * focus to specified input whenever needed.
4 | *
5 | * @link https://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field/18295416#18295416
6 | */
7 | (function() {
8 | 'use strict';
9 |
10 | /**
11 | * Directive definition for 'focus' component. This will listen 'focusOn' event on scope, and whenever that's
12 | * fired directive will check if that event is attached to current element.
13 | *
14 | * Usage example:
15 | * Error occurred
2 |
3 |
4 | Damn gerbils have stopped running again! Someone has been dispatched to poke them with a sharp stick.
5 |
6 |
7 |
12 |
13 |
14 |
17 | Back to previous page
18 |
19 |
--------------------------------------------------------------------------------
/src/app/core/filters/filters.js:
--------------------------------------------------------------------------------
1 | // Generic models angular module initialize.
2 | (function() {
3 | 'use strict';
4 |
5 | angular.module('frontend.core.filters', []);
6 | }());
7 |
--------------------------------------------------------------------------------
/src/app/core/interceptors/AuthInterceptor.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Auth interceptor for HTTP and Socket request. This interceptor will add required
3 | * JWT (Json Web Token) token to each requests. That token is validated in server side
4 | * application.
5 | *
6 | * @see http://angular-tips.com/blog/2014/05/json-web-tokens-introduction/
7 | * @see http://angular-tips.com/blog/2014/05/json-web-tokens-examples/
8 | */
9 | (function() {
10 | 'use strict';
11 |
12 | angular.module('frontend.core.interceptors')
13 | .factory('AuthInterceptor', [
14 | '$q', '$injector', '$localStorage',
15 | function(
16 | $q, $injector, $localStorage
17 | ) {
18 | return {
19 | /**
20 | * Interceptor method for $http requests. Main purpose of this method is to add JWT token
21 | * to every request that application does.
22 | *
23 | * @param {*} config HTTP request configuration
24 | *
25 | * @returns {*}
26 | */
27 | request: function requestCallback(config) {
28 | var token;
29 |
30 | // Yeah we have some user data on local storage
31 | if ($localStorage.credentials) {
32 | token = $localStorage.credentials.token;
33 | }
34 |
35 | // Yeah we have a token
36 | if (token) {
37 | if (!config.data) {
38 | config.data = {};
39 | }
40 |
41 | /**
42 | * Set token to actual data and headers. Note that we need bot ways because of socket cannot modify
43 | * headers anyway. These values are cleaned up in backend side policy (middleware).
44 | */
45 | config.data.token = token;
46 | config.headers.authorization = 'Bearer ' + token;
47 | }
48 |
49 | return config;
50 | },
51 |
52 | /**
53 | * Interceptor method that is triggered whenever response error occurs on $http requests.
54 | *
55 | * @param {*} response
56 | *
57 | * @returns {*|Promise}
58 | */
59 | responseError: function responseErrorCallback(response) {
60 | if (response.status === 401) {
61 | $localStorage.$reset();
62 |
63 | $injector.get('$state').go('auth.login');
64 | }
65 |
66 | return $q.reject(response);
67 | }
68 | };
69 | }
70 | ])
71 | ;
72 | }());
73 |
--------------------------------------------------------------------------------
/src/app/core/interceptors/ErrorInterceptor.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Interceptor for $http and $sailSocket request to handle possible errors and show
3 | * that error to user automatically. Message is shown by application 'Message' service
4 | * which uses noty library.
5 | *
6 | * @todo Add option to skip showing automatic error message
7 | */
8 | (function() {
9 | 'use strict';
10 |
11 | angular.module('frontend.core.interceptors')
12 | .factory('ErrorInterceptor', [
13 | '$q', '$injector',
14 | function($q, $injector) {
15 | return {
16 | /**
17 | * Interceptor method which is triggered whenever response occurs on $http queries. Note
18 | * that this has some sails.js specified hack for errors that returns HTTP 200 status.
19 | *
20 | * This is maybe sails.js bug, but I'm not sure of that.
21 | *
22 | * @param {*} response
23 | *
24 | * @returns {*|Promise}
25 | */
26 | response: function responseCallback(response) {
27 | if (response.data.error &&
28 | response.data.status &&
29 | response.data.status !== 200
30 | ) {
31 | return $q.reject(response);
32 | } else {
33 | return response || $q.when(response);
34 | }
35 | },
36 |
37 | /**
38 | * Interceptor method that is triggered whenever response error occurs on $http requests.
39 | *
40 | * @param {*} response
41 | *
42 | * @returns {*|Promise}
43 | */
44 | responseError: function responseErrorCallback(response) {
45 | var message = '';
46 |
47 | if (response.data && response.data.error) {
48 | message = response.data.error;
49 | } else if (response.data && response.data.message) {
50 | message = response.data.message;
51 | } else {
52 | if (typeof response.data === 'string') {
53 | message = response.data;
54 | } else if (response.statusText) {
55 | message = response.statusText;
56 | } else {
57 | message = $injector.get('HttpStatusService').getStatusCodeText(response.status);
58 | }
59 |
60 | message = message + ' (HTTP status ' + response.status + ') ';
61 | }
62 |
63 | if (message) {
64 | $injector.get('MessageService').error(message);
65 | }
66 |
67 | return $q.reject(response);
68 | }
69 | };
70 | }
71 | ])
72 | ;
73 | }());
74 |
--------------------------------------------------------------------------------
/src/app/core/interceptors/interceptors.js:
--------------------------------------------------------------------------------
1 | // Generic models angular module initialize.
2 | (function() {
3 | 'use strict';
4 |
5 | angular.module('frontend.core.interceptors', []);
6 | }());
7 |
--------------------------------------------------------------------------------
/src/app/core/layout/layout-controllers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains all necessary Angular controller definitions for 'frontend.core.layout' module.
3 | *
4 | * Note that this file should only contain controllers and nothing else.
5 | */
6 | (function() {
7 | 'use strict';
8 |
9 | /**
10 | * Generic header controller for application layout. this contains all necessary logic which is used on application
11 | * header section. Basically this contains following:
12 | *
13 | * 1) Main navigation
14 | * 2) Login / Logout
15 | * 3) Profile
16 | */
17 | angular.module('frontend.core.layout')
18 | .controller('HeaderController', [
19 | '$scope', '$state',
20 | 'HeaderNavigationItems',
21 | 'UserService', 'AuthService',
22 | function controller(
23 | $scope, $state,
24 | HeaderNavigationItems,
25 | UserService, AuthService
26 | ) {
27 | $scope.user = UserService.user;
28 | $scope.auth = AuthService;
29 | $scope.navigationItems = HeaderNavigationItems;
30 |
31 | /**
32 | * Helper function to determine if menu item needs 'not-active' class or not. This is basically
33 | * special case because of 'examples.about' state.
34 | *
35 | * @param {layout.menuItem} item Menu item object
36 | *
37 | * @returns {boolean}
38 | */
39 | $scope.isNotActive = function isNotActive(item) {
40 | return !!(item.state === 'examples' && $state.current.name === 'examples.about');
41 | };
42 |
43 | /**
44 | * Helper function to determine if specified menu item needs 'active' class or not. This is needed
45 | * because of reload of page, in this case top level navigation items are not activated without
46 | * this helper.
47 | *
48 | * @param {layout.menuItem} item Menu item object
49 | *
50 | * @returns {boolean}
51 | */
52 | $scope.isActive = function isActive(item) {
53 | var bits = $state.current.name.toString().split('.');
54 |
55 | return !!(
56 | (item.state === $state.current.name) ||
57 | (item.state === bits[0] && $state.current.name !== 'examples.about')
58 | );
59 | };
60 |
61 | // Simple helper function which triggers user logout action.
62 | $scope.logout = function logout() {
63 | AuthService.logout();
64 | };
65 | }
66 | ])
67 | ;
68 |
69 | /**
70 | * Generic footer controller for application layout. This contains all necessary logic which is used on application
71 | * footer section. Basically this contains following:
72 | *
73 | * 1) Generic links
74 | * 2) Version info parsing (back- and frontend)
75 | */
76 | angular.module('frontend.core.layout')
77 | .controller('FooterController', [
78 | function controller() {
79 | // TODO: add version info parsing
80 | }
81 | ])
82 | ;
83 |
84 | /**
85 | * Generic navigation controller for application layout. This contains all necessary logic for pages sub-navigation
86 | * section. Basically this handles following:
87 | *
88 | * 1) Sub navigation of the page
89 | * 2) Opening of information modal
90 | */
91 | angular.module('frontend.core.layout')
92 | .controller('NavigationController', [
93 | '$scope', '$state', '$modal',
94 | '_items',
95 | function controller(
96 | $scope, $state, $modal,
97 | _items
98 | ) {
99 | $scope.navigationItems = _items;
100 |
101 | // Helper function to open information modal about current GUI.
102 | $scope.openInformation = function openInformation() {
103 | $modal.open({
104 | templateUrl: '/frontend/core/layout/partials/help.html',
105 | controller: 'NavigationModalController',
106 | size: 'lg',
107 | resolve: {
108 | '_title': function resolve() {
109 | return $state.current.name.toString();
110 | },
111 | '_files': [
112 | 'NavigationInfoModalFiles',
113 | function resolve(NavigationInfoModalFiles) {
114 | return NavigationInfoModalFiles.get($state.current.name.toString());
115 | }
116 | ],
117 | '_template': function resolve() {
118 | return $state.current.views['content@'].templateUrl.replace('.html', '-info.html');
119 | }
120 | }
121 | });
122 | };
123 | }
124 | ])
125 | ;
126 |
127 | /**
128 | * Controller for navigation info modal. This is used to show GUI specified detailed information about how those
129 | * are done (links to sources + generic information / description).
130 | */
131 | angular.module('frontend.core.layout')
132 | .controller('NavigationModalController', [
133 | '$scope', '$modalInstance',
134 | 'BackendConfig',
135 | '_title', '_files', '_template',
136 | function(
137 | $scope, $modalInstance,
138 | BackendConfig,
139 | _title, _files, _template
140 | ) {
141 | $scope.title = _title;
142 | $scope.files = _files;
143 | $scope.template = _template;
144 | $scope.backendConfig = BackendConfig;
145 |
146 | // Dismiss function for modal
147 | $scope.dismiss = function dismiss() {
148 | $modalInstance.dismiss();
149 | };
150 | }
151 | ])
152 | ;
153 | }());
154 |
--------------------------------------------------------------------------------
/src/app/core/layout/layout-directives.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains all necessary Angular directive definitions for 'frontend.core.layout' module.
3 | *
4 | * Note that this file should only contain directives and nothing else.
5 | */
6 | (function() {
7 | 'use strict';
8 |
9 | /**
10 | * Directive to build file links to information modal about current GUI. Actual files are passed to this directive
11 | * within modal open function.
12 | */
13 | angular.module('frontend.core.layout')
14 | .directive('pageInfoFiles', function directive() {
15 | return {
16 | restrict: 'E',
17 | replace: true,
18 | scope: {
19 | 'files': '@'
20 | },
21 | templateUrl: '/frontend/core/layout/partials/files.html',
22 | controller: [
23 | '$scope',
24 | function controller($scope) {
25 | try {
26 | $scope.filesJson = angular.fromJson($scope.files);
27 | } catch (error) {
28 | $scope.filesJson = false;
29 | }
30 |
31 | $scope.getTooltip = function getTooltip(item) {
32 | return '' + item.title + ' ' + item.info;
33 | };
34 | }
35 | ]
36 | };
37 | })
38 | ;
39 | }());
40 |
--------------------------------------------------------------------------------
/src/app/core/layout/layout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Layout component to wrap all core layout specified stuff together. This component is divided to following logical
3 | * components:
4 | *
5 | * Controllers
6 | * Directives
7 | * Services
8 | *
9 | * All of these are wrapped to 'frontend.core.layout' angular module.
10 | */
11 | (function() {
12 | 'use strict';
13 |
14 | angular.module('frontend.core.layout', []);
15 | }());
16 |
--------------------------------------------------------------------------------
/src/app/core/layout/partials/files.html:
--------------------------------------------------------------------------------
1 |
2 |
Files used in this example
3 |
4 |
5 | Below you can see all the actual backend / frontend files which are used to make this example page work.
6 |
7 |
8 |
25 |
2 |
Requested author not found
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/examples/author/author.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Author component to wrap all author specified stuff together. This component is divided to following logical
3 | * components:
4 | *
5 | * Controllers
6 | * Models
7 | *
8 | * All of these are wrapped to 'frontend.examples.author' angular module.
9 | */
10 | (function() {
11 | 'use strict';
12 |
13 | // Define frontend.examples.author angular module
14 | angular.module('frontend.examples.author', []);
15 |
16 | // Module configuration
17 | angular.module('frontend.examples.author')
18 | .config([
19 | '$stateProvider',
20 | function config($stateProvider) {
21 | $stateProvider
22 | // Authors list
23 | .state('examples.authors', {
24 | url: '/examples/authors',
25 | views: {
26 | 'content@': {
27 | templateUrl: '/frontend/examples/author/list.html',
28 | controller: 'AuthorListController',
29 | resolve: {
30 | _items: [
31 | 'ListConfig',
32 | 'AuthorModel',
33 | function resolve(
34 | ListConfig,
35 | AuthorModel
36 | ) {
37 | var config = ListConfig.getConfig();
38 |
39 | var parameters = {
40 | populate: 'books',
41 | limit: config.itemsPerPage,
42 | sort: 'name ASC'
43 | };
44 |
45 | return AuthorModel.load(parameters);
46 | }
47 | ],
48 | _count: [
49 | 'AuthorModel',
50 | function resolve(AuthorModel) {
51 | return AuthorModel.count();
52 | }
53 | ]
54 | }
55 | }
56 | }
57 | })
58 |
59 | // Single author
60 | .state('examples.author', {
61 | url: '/examples/author/:id',
62 | views: {
63 | 'content@': {
64 | templateUrl: '/frontend/examples/author/author.html',
65 | controller: 'AuthorController',
66 | resolve: {
67 | _author: [
68 | '$stateParams',
69 | 'AuthorModel',
70 | function resolve(
71 | $stateParams,
72 | AuthorModel
73 | ) {
74 | return AuthorModel.fetch($stateParams.id);
75 | }
76 | ],
77 | _books: [
78 | '$stateParams',
79 | 'BookModel',
80 | function resolve(
81 | $stateParams,
82 | BookModel
83 | ) {
84 | return BookModel.load({author: $stateParams.id});
85 | }
86 | ],
87 | _booksCount: [
88 | '$stateParams',
89 | 'BookModel',
90 | function resolve(
91 | $stateParams,
92 | BookModel
93 | ) {
94 | return BookModel.count({author: $stateParams.id});
95 | }
96 | ]
97 | }
98 | }
99 | }
100 | })
101 |
102 | // Add new author
103 | .state('examples.author.add', {
104 | url: '/examples/author/add',
105 | data: {
106 | access: 2
107 | },
108 | views: {
109 | 'content@': {
110 | templateUrl: '/frontend/examples/author/add.html',
111 | controller: 'AuthorAddController'
112 | }
113 | }
114 | })
115 | ;
116 | }
117 | ])
118 | ;
119 | }());
120 |
--------------------------------------------------------------------------------
/src/app/examples/author/list-info.html:
--------------------------------------------------------------------------------
1 | General info
2 |
3 |
4 | This page demonstrates fetching data from the backend via WebSockets and showing it in a simple list.
5 | This example application fetches authors with related book data populated for each
6 | and also covers data pagination, sort, and search functions. The actual data is fetched from the
7 | following endpoint on the backend.
8 |
9 |
10 | GET {{backendConfig.url}}/author
11 |
12 |
13 | Note that all data communication to the backend requires a JSON Web Token (JWT )
14 | for authentication to make sure that user is allowed to access the data.
15 |
16 |
17 | Functions in this example
18 |
19 |
20 |
21 | Data fetch
22 |
23 |
24 | From backend via WebSockets using $sailsSocket service.
25 |
26 |
27 |
28 | Search
29 |
30 |
31 | Specify which columns are used in search and type your search words to see results while you're typing.
32 |
33 |
34 |
35 | Pagination
36 |
37 |
38 | By default, the page displays an example of ten books per page. You can change the number to be
39 | displayed per page.
40 |
41 |
42 |
43 | Sorting data
44 |
45 |
46 | Simply by clicking the column header. This will fetch data from backend again. Unfortunately not from
47 | relation columns... yet.
48 |
49 |
50 |
51 | Live updates
52 |
53 |
54 | GUI is automatically updated if changes are made to the data.
55 |
56 |
57 |
58 | Navigation
59 |
60 |
61 | Access to a single author and book pages simply by clicking the author or book name.
62 |
63 |
64 |
65 |
2 | Authors ({{itemCount}})
3 |
4 |
5 |
10 |
11 |
16 |
17 |
25 |
27 |
28 |
29 |
30 |
31 |
34 |
49 |
50 |
51 |
52 |
53 |
54 | {{author.name}}
55 |
56 | {{author.books.length}}
57 |
58 |
59 |
60 |
61 | no data found...
62 |
63 |
64 |
65 |
66 |
67 |
75 |
--------------------------------------------------------------------------------
/src/app/examples/book/add.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/examples/book/book-controllers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains all necessary Angular controller definitions for 'frontend.examples.book' module.
3 | *
4 | * Note that this file should only contain controllers and nothing else.
5 | */
6 | (function() {
7 | 'use strict';
8 |
9 | // Controller for new book creation.
10 | angular.module('frontend.examples.book')
11 | .controller('BookAddController', [
12 | '$scope', '$state',
13 | 'MessageService',
14 | 'BookModel',
15 | '_authors',
16 | function controller(
17 | $scope, $state,
18 | MessageService,
19 | BookModel,
20 | _authors
21 | ) {
22 | // Store authors
23 | $scope.authors = _authors;
24 |
25 | // Initialize book model
26 | $scope.book = {
27 | title: '',
28 | description: '',
29 | author: '',
30 | releaseDate: new Date()
31 | };
32 |
33 | /**
34 | * Scope function to store new book to database. After successfully save user will be redirected
35 | * to view that new created book.
36 | */
37 | $scope.addBook = function addBook() {
38 | BookModel
39 | .create(angular.copy($scope.book))
40 | .then(
41 | function onSuccess(result) {
42 | MessageService.success('New book added successfully');
43 |
44 | $state.go('examples.book', {id: result.data.id});
45 | }
46 | )
47 | ;
48 | };
49 | }
50 | ])
51 | ;
52 |
53 | // Controller to show single book on GUI.
54 | angular.module('frontend.examples.book')
55 | .controller('BookController', [
56 | '$scope', '$state',
57 | 'UserService', 'MessageService',
58 | 'BookModel', 'AuthorModel',
59 | '_book',
60 | function controller(
61 | $scope, $state,
62 | UserService, MessageService,
63 | BookModel, AuthorModel,
64 | _book
65 | ) {
66 | // Set current scope reference to model
67 | BookModel.setScope($scope, 'book');
68 |
69 | // Initialize scope data
70 | $scope.user = UserService.user();
71 | $scope.book = _book;
72 | $scope.authors = [];
73 | $scope.selectAuthor = _book.author ? _book.author.id : null;
74 |
75 | // Book delete dialog buttons configuration
76 | $scope.confirmButtonsDelete = {
77 | ok: {
78 | label: 'Delete',
79 | className: 'btn-danger',
80 | callback: function callback() {
81 | $scope.deleteBook();
82 | }
83 | },
84 | cancel: {
85 | label: 'Cancel',
86 | className: 'btn-default pull-left'
87 | }
88 | };
89 |
90 | /**
91 | * Scope function to save the modified book. This will send a
92 | * socket request to the backend server with the modified object.
93 | */
94 | $scope.saveBook = function saveBook() {
95 | var data = angular.copy($scope.book);
96 |
97 | // Set author id to update data
98 | data.author = $scope.selectAuthor;
99 |
100 | // Make actual data update
101 | BookModel
102 | .update(data.id, data)
103 | .then(
104 | function onSuccess() {
105 | MessageService.success('Book "' + $scope.book.title + '" updated successfully');
106 | }
107 | )
108 | ;
109 | };
110 |
111 | /**
112 | * Scope function to delete current book. This will send DELETE query to backend via web socket
113 | * query and after successfully delete redirect user back to book list.
114 | */
115 | $scope.deleteBook = function deleteBook() {
116 | BookModel
117 | .delete($scope.book.id)
118 | .then(
119 | function onSuccess() {
120 | MessageService.success('Book "' + $scope.book.title + '" deleted successfully');
121 |
122 | $state.go('examples.books');
123 | }
124 | )
125 | ;
126 | };
127 |
128 | /**
129 | * Scope function to fetch author data when needed, this is triggered whenever user starts to edit
130 | * current book.
131 | *
132 | * @returns {null|promise}
133 | */
134 | $scope.loadAuthors = function loadAuthors() {
135 | if ($scope.authors.length) {
136 | return null;
137 | } else {
138 | return AuthorModel
139 | .load()
140 | .then(
141 | function onSuccess(data) {
142 | $scope.authors = data;
143 | }
144 | )
145 | ;
146 | }
147 | };
148 | }
149 | ])
150 | ;
151 |
152 | // Controller which contains all necessary logic for book list GUI on boilerplate application.
153 | angular.module('frontend.examples.book')
154 | .controller('BookListController', [
155 | '$scope', '$q', '$timeout',
156 | '_',
157 | 'ListConfig', 'SocketHelperService',
158 | 'UserService', 'BookModel', 'AuthorModel',
159 | '_items', '_count', '_authors',
160 | function controller(
161 | $scope, $q, $timeout,
162 | _,
163 | ListConfig, SocketHelperService,
164 | UserService, BookModel, AuthorModel,
165 | _items, _count, _authors
166 | ) {
167 | // Set current scope reference to models
168 | BookModel.setScope($scope, false, 'items', 'itemCount');
169 | AuthorModel.setScope($scope, false, 'authors');
170 |
171 | // Add default list configuration variable to current scope
172 | $scope = angular.extend($scope, angular.copy(ListConfig.getConfig()));
173 |
174 | // Set initial data
175 | $scope.items = _items;
176 | $scope.itemCount = _count.count;
177 | $scope.authors = _authors;
178 | $scope.user = UserService.user();
179 |
180 | // Initialize used title items
181 | $scope.titleItems = ListConfig.getTitleItems(BookModel.endpoint);
182 |
183 | // Initialize default sort data
184 | $scope.sort = {
185 | column: 'releaseDate',
186 | direction: false
187 | };
188 |
189 | // Initialize filters
190 | $scope.filters = {
191 | searchWord: '',
192 | columns: $scope.titleItems
193 | };
194 |
195 | // Function to change sort column / direction on list
196 | $scope.changeSort = function changeSort(item) {
197 | var sort = $scope.sort;
198 |
199 | if (sort.column === item.column) {
200 | sort.direction = !sort.direction;
201 | } else {
202 | sort.column = item.column;
203 | sort.direction = true;
204 | }
205 |
206 | _triggerFetchData();
207 | };
208 |
209 | /**
210 | * Helper function to fetch specified author property.
211 | *
212 | * @param {Number} authorId Author id to search
213 | * @param {String} [property] Property to return, if not given returns whole author object
214 | * @param {String} [defaultValue] Default value if author or property is not founded
215 | *
216 | * @returns {*}
217 | */
218 | $scope.getAuthor = function getAuthor(authorId, property, defaultValue) {
219 | defaultValue = defaultValue || 'Unknown';
220 | property = property || true;
221 |
222 | // Find author
223 | var author = _.find($scope.authors, function iterator(author) {
224 | return parseInt(author.id, 10) === parseInt(authorId.toString(), 10);
225 | });
226 |
227 | return author ? (property === true ? author : author[property]) : defaultValue;
228 | };
229 |
230 | /**
231 | * Simple watcher for 'currentPage' scope variable. If this is changed we need to fetch book data
232 | * from server.
233 | */
234 | $scope.$watch('currentPage', function watcher(valueNew, valueOld) {
235 | if (valueNew !== valueOld) {
236 | _fetchData();
237 | }
238 | });
239 |
240 | /**
241 | * Simple watcher for 'itemsPerPage' scope variable. If this is changed we need to fetch book data
242 | * from server.
243 | */
244 | $scope.$watch('itemsPerPage', function watcher(valueNew, valueOld) {
245 | if (valueNew !== valueOld) {
246 | _triggerFetchData();
247 | }
248 | });
249 |
250 | var searchWordTimer;
251 |
252 | /**
253 | * Watcher for 'filter' scope variable, which contains multiple values that we're interested
254 | * within actual GUI. This will trigger new data fetch query to server if following conditions
255 | * have been met:
256 | *
257 | * 1) Actual filter variable is different than old one
258 | * 2) Search word have not been changed in 400ms
259 | *
260 | * If those are ok, then watcher will call 'fetchData' function.
261 | */
262 | $scope.$watch('filters', function watcher(valueNew, valueOld) {
263 | if (valueNew !== valueOld) {
264 | if (searchWordTimer) {
265 | $timeout.cancel(searchWordTimer);
266 | }
267 |
268 | searchWordTimer = $timeout(_triggerFetchData, 400);
269 | }
270 | }, true);
271 |
272 | /**
273 | * Helper function to trigger actual data fetch from backend. This will just check current page
274 | * scope variable and if it is 1 call 'fetchData' function right away. Any other case just set
275 | * 'currentPage' scope variable to 1, which will trigger watcher to fetch data.
276 | *
277 | * @private
278 | */
279 | function _triggerFetchData() {
280 | if ($scope.currentPage === 1) {
281 | _fetchData();
282 | } else {
283 | $scope.currentPage = 1;
284 | }
285 | }
286 |
287 | /**
288 | * Helper function to fetch actual data for GUI from backend server with current parameters:
289 | * 1) Current page
290 | * 2) Search word
291 | * 3) Sort order
292 | * 4) Items per page
293 | *
294 | * Actually this function is doing two request to backend:
295 | * 1) Data count by given filter parameters
296 | * 2) Actual data fetch for current page with filter parameters
297 | *
298 | * These are fetched via 'BookModel' service with promises.
299 | *
300 | * @private
301 | */
302 | function _fetchData() {
303 | $scope.loading = true;
304 |
305 | // Common parameters for count and data query
306 | var commonParameters = {
307 | where: SocketHelperService.getWhere($scope.filters)
308 | };
309 |
310 | // Data query specified parameters
311 | var parameters = {
312 | limit: $scope.itemsPerPage,
313 | skip: ($scope.currentPage - 1) * $scope.itemsPerPage,
314 | sort: $scope.sort.column + ' ' + ($scope.sort.direction ? 'ASC' : 'DESC')
315 | };
316 |
317 | // Fetch data count
318 | var count = BookModel
319 | .count(commonParameters)
320 | .then(
321 | function onSuccess(response) {
322 | $scope.itemCount = response.count;
323 | }
324 | )
325 | ;
326 |
327 | // Fetch actual data
328 | var load = BookModel
329 | .load(_.merge({}, commonParameters, parameters))
330 | .then(
331 | function onSuccess(response) {
332 | $scope.items = response;
333 | }
334 | )
335 | ;
336 |
337 | // Load all needed data
338 | $q
339 | .all([count, load])
340 | .finally(
341 | function onFinally() {
342 | $scope.loaded = true;
343 | $scope.loading = false;
344 | }
345 | )
346 | ;
347 | }
348 | }
349 | ])
350 | ;
351 | }());
352 |
--------------------------------------------------------------------------------
/src/app/examples/book/book-models.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains all necessary Angular model definitions for 'frontend.examples.book' module.
3 | *
4 | * Note that this file should only contain models and nothing else. Also note that these "models" are just basically
5 | * services that wraps all things together.
6 | */
7 | (function () {
8 | 'use strict';
9 |
10 | /**
11 | * Model for Book API, this is used to wrap all Book objects specified actions and data change actions.
12 | */
13 | angular.module('frontend.examples.book')
14 | .factory('BookModel', [
15 | 'DataModel',
16 | function factory(DataModel) {
17 | return new DataModel('book');
18 | }
19 | ])
20 | ;
21 | }());
22 |
--------------------------------------------------------------------------------
/src/app/examples/book/book.html:
--------------------------------------------------------------------------------
1 |
2 |
Requested book not found
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/examples/book/book.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Book component to wrap all book specified stuff together. This component is divided to following logical components:
3 | *
4 | * Controllers
5 | * Models
6 | *
7 | * All of these are wrapped to 'frontend.examples.book' angular module.
8 | */
9 | (function() {
10 | 'use strict';
11 |
12 | // Define frontend.examples.book angular module
13 | angular.module('frontend.examples.book', []);
14 |
15 | // Module configuration
16 | angular.module('frontend.examples.book')
17 | .config([
18 | '$stateProvider',
19 | function config($stateProvider) {
20 | $stateProvider
21 | // Book list
22 | .state('examples.books', {
23 | url: '/examples/books',
24 | views: {
25 | 'content@': {
26 | templateUrl: '/frontend/examples/book/list.html',
27 | controller: 'BookListController',
28 | resolve: {
29 | _items: [
30 | 'ListConfig',
31 | 'BookModel',
32 | function resolve(
33 | ListConfig,
34 | BookModel
35 | ) {
36 | var config = ListConfig.getConfig();
37 |
38 | var parameters = {
39 | limit: config.itemsPerPage,
40 | sort: 'releaseDate DESC'
41 | };
42 |
43 | return BookModel.load(parameters);
44 | }
45 | ],
46 | _count: [
47 | 'BookModel',
48 | function resolve(BookModel) {
49 | return BookModel.count();
50 | }
51 | ],
52 | _authors: [
53 | 'AuthorModel',
54 | function resolve(AuthorModel) {
55 | return AuthorModel.load();
56 | }
57 | ]
58 | }
59 | }
60 | }
61 | })
62 |
63 | // Single book
64 | .state('examples.book', {
65 | url: '/examples/book/:id',
66 | views: {
67 | 'content@': {
68 | templateUrl: '/frontend/examples/book/book.html',
69 | controller: 'BookController',
70 | resolve: {
71 | _book: [
72 | '$stateParams',
73 | 'BookModel',
74 | function resolve(
75 | $stateParams,
76 | BookModel
77 | ) {
78 | return BookModel.fetch($stateParams.id, {populate: 'author'});
79 | }
80 | ]
81 | }
82 | }
83 | }
84 | })
85 |
86 | // Add new book
87 | .state('examples.book.add', {
88 | url: '/examples/book/add',
89 | data: {
90 | access: 2
91 | },
92 | views: {
93 | 'content@': {
94 | templateUrl: '/frontend/examples/book/add.html',
95 | controller: 'BookAddController',
96 | resolve: {
97 | _authors: [
98 | 'AuthorModel',
99 | function resolve(AuthorModel) {
100 | return AuthorModel.load();
101 | }
102 | ]
103 | }
104 | }
105 | }
106 | })
107 | ;
108 | }
109 | ])
110 | ;
111 | }());
112 |
--------------------------------------------------------------------------------
/src/app/examples/book/list-info.html:
--------------------------------------------------------------------------------
1 | General info
2 |
3 |
4 | This page demonstrates fetching data from the backend via WebSockets and showing it in a simple list.
5 | This example application fetches books with related author data populated for each
6 | and also covers data pagination, sort, and search functions. The actual data is fetched from the
7 | following endpoint on the backend.
8 |
9 |
10 | GET {{backendConfig.url}}/book
11 |
12 |
13 | Note that all data communication to the backend requires a JSON Web Token (JWT )
14 | for authentication to make sure that user is allowed to access the data.
15 |
16 |
17 | Functions in this example
18 |
19 |
20 |
21 | Data fetch
22 |
23 |
24 | From backend via WebSockets using $sailsSocket service.
25 |
26 |
27 |
28 | Search
29 |
30 |
31 | Specify which columns are used in search and type your search words to see results while you're typing.
32 |
33 |
34 |
35 | Pagination
36 |
37 |
38 | By default, the page displays an example of ten books per page. You can change the number to be
39 | displayed per page.
40 |
41 |
42 |
43 | Sorting data
44 |
45 |
46 | Simply by clicking the column header. This will fetch data from backend again. Unfortunately not from
47 | relation columns... yet.
48 |
49 |
50 |
51 | Live updates
52 |
53 |
54 | GUI is automatically updated if changes are made to the data.
55 |
56 |
57 |
58 | Navigation
59 |
60 |
61 | Access to single book and author pages simply by clicking the book or author name.
62 |
63 |
64 |
65 |
2 | Books ({{itemCount}})
3 |
4 |
5 |
10 |
11 |
16 |
17 |
25 |
27 |
28 |
75 |
76 |
--------------------------------------------------------------------------------
/src/app/examples/chat/chat-controllers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains all necessary Angular controller definitions for 'frontend.examples.chat' module.
3 | *
4 | * Note that this file should only contain controllers and nothing else.
5 | */
6 | (function() {
7 | 'use strict';
8 |
9 | /**
10 | * Main Chat controller which handles the actions on this Chat example page. This controller is fired up whenever
11 | * user enters to following url:
12 | *
13 | * http://{YourServer}:{YourPort}/chat
14 | *
15 | * where
16 | * YourServer = Usually 'localhost', this depends on your setup.
17 | * YourPort = By default 3000 for production and 3001 for development or something else depending on your
18 | * setup.
19 | *
20 | * Controller handles message loading and creating of new messages to backend side. Basically really simple stuff.
21 | *
22 | * @todo
23 | * 1) implement 'enter' and 'leave' status messages to chat
24 | * 2) private messages to another user
25 | * 3) do not load all messages when user enters to chat
26 | * 4) add notification about new chat messages, if user is elsewhere on app
27 | */
28 | angular.module('frontend.examples.chat')
29 | .controller('ChatController', [
30 | '$scope', '$timeout', '$localStorage',
31 | 'moment',
32 | 'MessageService',
33 | 'MessageModel',
34 | '_messages',
35 | function controller(
36 | $scope, $timeout, $localStorage,
37 | moment,
38 | MessageService,
39 | MessageModel,
40 | _messages
41 | ) {
42 | // Add loaded messages to scope
43 | $scope.messages = _messages;
44 |
45 | // Get current nick of user
46 | $scope.nick = ($localStorage.chat && $localStorage.chat.nick) ? $localStorage.chat.nick : '';
47 |
48 | // Initialize message object
49 | $scope.message = {
50 | nick: $scope.nick,
51 | message: ''
52 | };
53 |
54 | // We have nick set, so load messages
55 | if ($scope.nick && $scope.nick.trim()) {
56 | _scrollBottom();
57 | }
58 |
59 | // Watcher for actual messages, whenever this is changed we need to scroll chat to bottom
60 | $scope.$watch('messages', function watcher(valueNew) {
61 | if (valueNew) {
62 | _scrollBottom();
63 | }
64 | }, true);
65 |
66 | // Enter to chat function
67 | $scope.enterToChat = function enterToChat() {
68 | if ($scope.nick && $scope.nick.trim() !== '') {
69 | $scope.message.nick = $scope.nick;
70 |
71 | $localStorage.chat = {
72 | nick: $scope.nick,
73 | time: moment().format()
74 | };
75 |
76 | _scrollBottom();
77 | } else {
78 | MessageService.error('Please provide some nick.');
79 | }
80 | };
81 |
82 | // Function to leave chat
83 | $scope.leaveChat = function leaveChat() {
84 | $scope.message.nick = '';
85 | $scope.nick = '';
86 | $scope.messages = [];
87 |
88 | $localStorage.chat = {};
89 | };
90 |
91 | // Function to post a new message to server
92 | $scope.postMessage = function postMessage() {
93 | if ($scope.message.message.trim() !== '') {
94 | MessageModel
95 | .create($scope.message)
96 | .then(
97 | function success() {
98 | $scope.message.message = '';
99 |
100 | _scrollBottom();
101 | }
102 | )
103 | ;
104 | } else {
105 | MessageService.error('Please enter some text to chat.');
106 | }
107 | };
108 |
109 | /**
110 | * Helper function to scroll to bottom of the chat
111 | *
112 | * @private
113 | */
114 | function _scrollBottom() {
115 | $timeout(function timeout() {
116 | document.getElementById('messages').scrollTop = $scope.messages.length * 50;
117 | });
118 | }
119 | }
120 | ])
121 | ;
122 | }());
123 |
--------------------------------------------------------------------------------
/src/app/examples/chat/chat-controllers_test.js:
--------------------------------------------------------------------------------
1 | /* jshint strict:false, globalstrict:false */
2 | /* global describe, it, beforeEach, inject, module */
3 | describe('ChatController', function() {
4 | var ChatController;
5 | var scope;
6 | var timeout;
7 | var localStorage;
8 | var MessageService;
9 | var MessageModel;
10 | var _messages;
11 | var sandbox;
12 |
13 | beforeEach(module('frontend'));
14 |
15 | beforeEach(inject(function($injector) {
16 | scope = $injector.get('$rootScope');
17 | timeout = $injector.get('$timeout');
18 | localStorage = $injector.get('$localStorage');
19 | MessageService = $injector.get('MessageService');
20 | MessageModel = $injector.get('MessageModel');
21 | _messages = [];
22 | sandbox = sinon.sandbox.create();
23 |
24 | ChatController = function() {
25 | return $injector.get('$controller')('ChatController', {
26 | $scope: scope,
27 | $timeout: timeout,
28 | $localStorage: localStorage,
29 | MessageService: MessageService,
30 | MessageModel: MessageModel,
31 | _messages: _messages
32 | });
33 | };
34 | }));
35 |
36 | afterEach(function() {
37 | sandbox.restore();
38 | });
39 |
40 | it('should have specified defaults', function() {
41 | ChatController();
42 |
43 | expect(scope.messages).to.be.an('array');
44 | expect(scope.nick).equal('');
45 | expect(scope.message.nick).equal('');
46 | expect(scope.message.message).equal('');
47 | });
48 |
49 | describe('When entering chat', function() {
50 | it('with nick', function() {
51 | ChatController();
52 |
53 | scope.nick = 'test nick';
54 | scope.enterToChat();
55 |
56 | expect(scope.message.nick).equal('test nick');
57 | });
58 |
59 | it('without nick', function() {
60 | ChatController();
61 |
62 | sandbox.stub(MessageService, 'error');
63 |
64 | scope.nick = '';
65 | scope.enterToChat();
66 |
67 | expect(MessageService.error.calledOnce).to.equal(true);
68 | });
69 | });
70 | });
71 |
--------------------------------------------------------------------------------
/src/app/examples/chat/chat-directives.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains all necessary Angular directive definitions for 'frontend.examples.chat' module.
3 | *
4 | * Note that this file should only contain directives and nothing else.
5 | */
6 | (function() {
7 | 'use strict';
8 |
9 | /**
10 | * Directive to resize "chat" screen to take all "possible" space on browser screen. This is just cruel thing to
11 | * do, but it works like a charm.
12 | */
13 | angular.module('frontend.examples.chat')
14 | .directive('chatScreen', [
15 | '$timeout', '$window',
16 | function directive($timeout, $window) {
17 | return {
18 | restrict: 'C',
19 | link: function link(scope, element) {
20 | var resize = function resize() {
21 | var totalHeight = angular.element($window).height() - 170;
22 |
23 | angular.element(element).css('height', totalHeight + 'px');
24 | };
25 |
26 | angular.element($window).bind('resize', function onEvent() {
27 | resize();
28 | });
29 |
30 | resize();
31 | }
32 | };
33 | }
34 | ])
35 | ;
36 | }());
37 |
--------------------------------------------------------------------------------
/src/app/examples/chat/chat-info.html:
--------------------------------------------------------------------------------
1 | General info
2 |
3 |
4 | This example demonstrates how to use sails.js and web sockets to pass updates
5 | between clients automatically. This simple chat application is perfect
6 | for this demonstration. All communications here are made via web sockets.
7 |
8 |
9 | Functions in this example
10 |
11 |
12 |
13 | Basic stuff
14 |
15 |
16 | Enter / leave chat. Create new chat message. Message updates to all clients.
17 |
18 |
19 |
20 |
4 |
Enter a nick
5 |
6 |
7 |
12 | Enter to chat
15 |
16 |
17 |
22 |
23 |
24 |
25 |
28 |
29 | [{{message.createdAt | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}]
30 |
31 |
32 |
33 | {{message.nick}}
34 |
36 |
37 |
38 |
39 |
40 |
41 |
68 |
General info
2 |
3 |
4 | This is an example page to demonstrate how this boilerplate handles errors with $http and
5 | $sailsSocket requests. Note that this magic is done automatically via the error
6 | interceptor so you don't have to do anything extra for error handling. The error handling is done
7 | via the error interceptor that is attached to $http and $sailsSocket services.
8 |
9 |
10 |
11 | This interceptor will catch all errors from $http and $sailsSocket
12 | requests and show those to the user via the message service. Note that the message shown depends
13 | on the actual error response from the backend.
14 |
15 |
16 | Functions in this example
17 |
18 |
19 |
20 | Custom messages
21 |
22 |
23 | Simple example to trigger different types of messages: info, success, warning and error with
24 | specified title and actual message .
25 |
26 |
27 |
28 | $http / $sailsSocket
29 |
30 |
31 | Examples to demonstrate invalid URL and not found record. These are handled automatically by ErrorInterceptor .
32 |
33 |
34 |
35 | Messages
2 |
3 |
4 | This page demonstrates how you can use the Message service in your application.
5 | This service is automatically hooked to $http and $sailsSocket errors.
6 |
7 |
8 |
9 |
10 |
Message trigger from form data
11 |
46 |
47 |
48 |
Automatic message trigger via $http
49 |
50 |
51 | Invalid URL
54 |
55 | Record not found
58 |
59 |
60 |
Automatic message trigger via $sailsSocket
61 |
62 |
63 | Invalid URL
66 |
67 | Record not found
70 |
71 |
72 |
Boilerplate
6 |
7 |
17 |
18 |
22 |
23 |
24 |
25 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/src/app/styles/_angular.scss:
--------------------------------------------------------------------------------
1 | // scss-lint:disable SelectorFormat
2 | [ng\:cloak],
3 | [ng-cloak],
4 | [data-ng-cloak],
5 | [x-ng-cloak],
6 | .ng-cloak,
7 | .x-ng-cloak {
8 | // scss-lint:disable ImportantRule
9 | display: none !important;
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/styles/_base.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins';
2 | @import 'forms';
3 | @import 'components';
4 | @import 'bootstrap';
5 | @import 'angular';
6 |
7 | $color-footer-text: #999;
8 | $color-footer-hover-text: #3399f3;
9 | $color-footer-hover-icons: #337bd5;
10 | $color-tooltip-title: #fff;
11 | $color-tooltip-title-border: #9b9b9b;
12 |
13 | body {
14 | cursor: default;
15 | font-family: 'PT Sans', sans-serif;
16 | overflow-y: scroll;
17 | }
18 |
19 | h1,
20 | h2,
21 | h3,
22 | h4,
23 | h5,
24 | h5 {
25 | &:first-of-type {
26 | margin-top: 10px;
27 | }
28 | }
29 |
30 | .container {
31 | max-width: 100%;
32 | min-width: 100%;
33 | }
34 |
35 | .main-container {
36 | margin-bottom: 30px;
37 | margin-top: 50px;
38 | }
39 |
40 | header .navbar-nav {
41 | float: none;
42 | }
43 |
44 | footer {
45 | .navbar {
46 | max-height: 25px;
47 | min-height: 25px;
48 | text-align: center;
49 |
50 | .navbar-nav {
51 | float: none;
52 |
53 | > li {
54 | display: inline-block;
55 | float: none;
56 |
57 | > a {
58 | font-size: 11px;
59 | line-height: 25px;
60 | padding: 0 10px;
61 |
62 | .fa {
63 | color: $color-footer-text;
64 | font-size: 14px;
65 | margin-right: 3px;
66 | position: relative;
67 | top: 1px;
68 | }
69 |
70 | &:hover {
71 | color: $color-footer-hover-text;
72 |
73 | .fa {
74 | color: $color-footer-hover-icons;
75 | }
76 | }
77 | }
78 | }
79 | }
80 | }
81 | }
82 |
83 | .no-select {
84 | @include no-select();
85 | }
86 |
87 | .pagination {
88 | margin: 0;
89 | }
90 |
91 | .text-medium {
92 | font-size: 90%;
93 | }
94 |
95 | .text-small {
96 | font-size: 80%;
97 | }
98 |
99 | .help {
100 | .fa {
101 | font-size: 20px;
102 | line-height: 14px;
103 | margin: 0 0 0 5px;
104 | position: relative;
105 | top: 2px;
106 | }
107 | }
108 |
109 | .tooltip {
110 | .title {
111 | border-bottom: 1px solid $color-tooltip-title-border;
112 | color: $color-tooltip-title;
113 | margin: 3px 0 5px;
114 | padding: 0;
115 | }
116 |
117 | .tooltip-inner {
118 | text-align: left;
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/src/app/styles/_bootstrap.scss:
--------------------------------------------------------------------------------
1 | $color-dropdown-menu-border-before: rgba(0, 0, 0, .2);
2 | $color-dropdown-menu-border-after: #fff;
3 | $color-navbar-link: #777;
4 | $color-navbar-link-hover: #3399f3;
5 |
6 | .dropdown-menu-arrow::before {
7 | border-bottom: 7px solid $color-dropdown-menu-border-before;
8 | border-left: 7px solid transparent;
9 | border-right: 7px solid transparent;
10 | content: '';
11 | display: inline-block;
12 | left: 9px;
13 | position: absolute;
14 | top: -7px;
15 | }
16 |
17 | .dropdown-menu-arrow::after {
18 | border-bottom: 6px solid $color-dropdown-menu-border-after;
19 | border-left: 6px solid transparent;
20 | border-right: 6px solid transparent;
21 | content: '';
22 | display: inline-block;
23 | left: 10px;
24 | position: absolute;
25 | top: -6px;
26 | }
27 |
28 | .pull-right.dropdown-menu-arrow::before,
29 | .btn-group.pull-right > .dropdown-menu-arrow::before {
30 | left: inherit;
31 | right: 9px;
32 | }
33 |
34 | .pull-right.dropdown-menu-arrow::after,
35 | .btn-group.pull-right > .dropdown-menu-arrow::after {
36 | left: inherit;
37 | right: 10px;
38 | }
39 |
40 | .navbar-default .navbar-nav > .active.not-active > a {
41 | color: $color-navbar-link;
42 |
43 | &:hover {
44 | color: $color-navbar-link-hover;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/app/styles/_components.scss:
--------------------------------------------------------------------------------
1 | .list-search {
2 | padding: 0;
3 | text-align: right;
4 |
5 | .fa.fa-plus-circle {
6 | position: relative;
7 | top: -6px;
8 | }
9 |
10 | .list-search-filters {
11 | max-width: 300px;
12 |
13 | form {
14 | margin: 0 0 -2px;
15 | padding: 0;
16 | position: relative;
17 | top: -9px;
18 | }
19 |
20 | .input-group-addon {
21 | cursor: pointer;
22 | padding: 0 8px;
23 |
24 | i {
25 | position: relative;
26 | top: 1px;
27 | }
28 | }
29 |
30 | ul {
31 | .title {
32 | font-size: 12px;
33 | padding: 3px 10px 0;
34 | text-transform: uppercase;
35 | white-space: nowrap;
36 | }
37 | }
38 |
39 | .dropdown-menu > li > a {
40 | padding-left: 10px;
41 |
42 | i {
43 | margin-right: 5px;
44 | }
45 | }
46 | }
47 |
48 | .list-search-filters,
49 | .pagination {
50 | display: inline-block;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/app/styles/_forms.scss:
--------------------------------------------------------------------------------
1 | $color-button-info: #fff;
2 |
3 | .editable-wrap {
4 | display: inline;
5 | }
6 |
7 | .editable-textarea {
8 | min-height: 350px;
9 | }
10 |
11 | .btn {
12 | &.active {
13 | .text-info {
14 | color: $color-button-info;
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/styles/_mixins.scss:
--------------------------------------------------------------------------------
1 | $color-box-shadow: #ababab;
2 |
3 | @mixin border-radius($radius) {
4 | // If you want to support also old browsers just un-comment lines below
5 | //-webkit-border-radius: $radius;
6 | //-moz-border-radius: $radius;
7 | //-ms-border-radius: $radius;
8 | border-radius: $radius;
9 | }
10 |
11 | @mixin no-select() {
12 | // If you want to support also old browsers just un-comment lines below
13 | //-webkit-touch-callout: none;
14 | //-webkit-user-select: none;
15 | //-khtml-user-select: none;
16 | //-moz-user-select: none;
17 | //-ms-user-select: none;
18 | user-select: none;
19 | }
20 |
21 | @mixin box-shadow($top, $left, $blur, $color: $color-box-shadow, $inset: '') {
22 | // If you want to support also old browsers just un-comment lines below
23 | //-webkit-box-shadow: $top $left $blur $color #{$inset};
24 | //-moz-box-shadow: $top $left $blur $color #{$inset};
25 | box-shadow: $top $left $blur $color #{$inset};
26 | }
27 |
28 | @mixin text-shadow($top, $left, $blur, $color) {
29 | text-shadow: $top $left $blur $color;
30 | }
31 |
32 | @mixin linear-gradient($color-from, $color-to) {
33 | // Fallback Color
34 | // If you want to support also old browsers just un-comment lines below
35 | //background-image: -webkit-gradient(linear, left top, left bottom, from($color-from), to($color-to)); // Saf4+, Chrome
36 | //background-image: -webkit-linear-gradient(top, $color-from, $color-to); // Chrome 10+, Saf5.1+, iOS 5+
37 | //background-image: -moz-linear-gradient(top, $color-from, $color-to); // FF3.6
38 | //background-image: -ms-linear-gradient(top, $color-from, $color-to); // IE10
39 | //background-image: -o-linear-gradient(top, $color-from, $color-to); // Opera 11.10+
40 | background: $color-to linear-gradient(top, $color-from, $color-to);
41 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$color-from}', EndColorStr='#{$color-to}');
42 | }
43 |
44 | @mixin border-box() {
45 | // If you want to support also old browsers just un-comment lines below
46 | //-webkit-box-sizing: border-box;
47 | //-moz-box-sizing: border-box;
48 | box-sizing: border-box;
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/styles/modal.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins';
2 |
3 | $color-border: #ccc;
4 | $color-header-start: #fff;
5 | $color-header-end: #eee;
6 | $color-footer-start: #eee;
7 | $color-footer-end: #fff;
8 |
9 | .modal {
10 | overflow: auto;
11 |
12 | .modal-title {
13 | margin: 0;
14 | }
15 | }
16 |
17 | .modal-open {
18 | overflow-y: scroll;
19 | }
20 |
21 | .modal-header,
22 | .modal-footer {
23 | @include no-select();
24 | border-color: $color-border;
25 | }
26 |
27 | .modal-header {
28 | @include linear-gradient($color-header-start, $color-header-end);
29 | border-top-left-radius: 6px;
30 | border-top-right-radius: 6px;
31 | padding: 10px 15px;
32 |
33 | .close {
34 | font-size: 45px;
35 | margin-top: -10px;
36 | }
37 | }
38 |
39 | .modal-body {
40 | @include no-select();
41 |
42 | overflow-x: auto;
43 | overflow-y: scroll;
44 |
45 | &.modal-help {
46 | padding: 0 15px;
47 | }
48 | }
49 |
50 | .modal-footer {
51 | @include linear-gradient($color-footer-start, $color-footer-end);
52 | border-bottom-left-radius: 6px;
53 | border-bottom-right-radius: 6px;
54 | margin-top: 0;
55 | padding: 10px;
56 | }
57 |
--------------------------------------------------------------------------------
/src/dummy.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * Dummy JS file for smart IDEs like php/webStorm.
5 | *
6 | * Purpose of this file is to help IDE to use autocomplete features.
7 | */
8 |
9 | var layout = {
10 | menuItem: {
11 | state: string,
12 | title: string,
13 | access: number
14 | }
15 | };
16 |
17 | var settings = {
18 | backendUrl: string,
19 | frontend: {
20 | ports: {
21 | production: number,
22 | development: number
23 | }
24 | }
25 | };
26 |
--------------------------------------------------------------------------------