An UI component for Employee Scheduling application that makes employee scheduling management easy, fast and mobile. The API component for this application can be found here. I wrote a few blog posts about this project and they can be found on my blog.
This demo is running from gh-pages branch in backend-less development env (see How to Run section). Below, you can find login credentials for different user roles.
ROLE | PASSWORD | |
---|---|---|
employee | employee@test.com | password |
supervisor | supervisor@test.com | password |
manager | manager@test.com | password |
admin | admin@test.com | password |
Click here to see it in action!
TODO: (martin) add folder development structure
build/
|- dist --> distribution source code that goes to production
| |- fonts/ --> fonts
| |- images/ --> image files
| |- scripts/ --> js files
| | |- main.min-12345.js --> concat, minify angular app js files and cached html templates
| |- styles/ --> css files
| |- main.min-12345.css --> concat & minify app css files
| |- index.html --> app main file
|- docs/ --> app documentation
You need to install Node.js and then the development tools. Node.js comes with a package manager called npm (requires npm version >= 2.0.0 for this project) for installing NodeJS applications and libraries.
Install Node.js (requires node.js version >= 0.12.0)
1. Clone or fork this repository:
$ git clone git@github.com:martinmicunda/employee-scheduling-ui.git
$ cd employee-scheduling-ui
2. Install local dependencies
$ npm install
Note: Verify that all 3rd party dependencies from package.json are installed on your local machine. If you have followed the instructions and there have been no errors when executing the above commands, the dependencies should be installed.
When you're working on project with real back-end start with:
$ npm start
NOTE: The
npm start
task is alias fornpm start -- --env=DEV
. The back-end code for this application can be found here.
This task will install all dependencies, build dev environment, monitor the source files, compile SASS to CSS and launch the browser. The task also includes Browsersync, so you no longer have to manually refresh your page after making changes! Make sure API_URL
constant in gulp/const.js
file points to your API back-end.
If you don't want to launch the browser when serving code then pass --open=false
flag:
$ npm start -- --open=false
When you're working on project without real back-end start with:
$ npm start -- --env=TEST
NOTE: This is really useful for backend-less testing in CI env or backend-less development if you don't have access to real back-end. Data from
fixtures
folders will be served.
If you want to run production optimized code with fixtures
data start with:
$ npm start -- --env=TEST --optimize=true
NOTE: This produce optimized build like
--env=PROD
and also includefixtures
data into bundle.
When you're working on project with real back-end and want to try production bundle start with:
$ npm start -- --env=PROD
NOTE: This run against the code specify in
build/dist
folder. See build section for more details howbuild
is created.
Every time the unit tests are executed, a coverage report is created in the test-reports/coverage
sub-directory and coverage thresholds
can be set in COVERAGE
constant in gulp/const.js
file. The npm test
task has optional arguments --browsers=(IE|PhantomJS|Chrome|Firefox|Safari)
, --watch
and --nocoverage
. Make sure that the browsers you want to run test against are installed on your local machine. The PhantomJS
should be already installed after you run npm install
.
To run test start with:
$ npm test
NOTE: The
npm test
task is alias fornpm run test-unit -- --browsers=PhantomJS
.
To run test against specific browser e.g. Chrome
start with:
$ npm test -- --browsers=Chrome
To run test against multiple browsers at the same time start with:
$ npm test -- --browsers=IE,Chrome,Firefox,Safari
To watch for file changes and re-run tests on each change start with:
$ npm test -- --watch
To watch for file changes and re-run tests without coverage report start with:
$ npm test -- --watch --nocoverage
To run test and push coverage report to Coveralls start with:
$ npm test -- --watch --coveralls
TODO
The build task get app ready for production. The build task include transpilation from ES6 to ES5, concatenation, minification, compression, asset revision, template cache, cdn etc. If there have been no errors when executing the build command, the build should be located in build/dist
directory and this build is ready for uploading to the server! To initiate a full build, you simply run the follow task:
$ npm run build
If you want use CDN then add your CDN url to CDN_URL
constant in gulp/const.js
file and then run the build task with argument --cdn
to replace local path with CDN url:
$ npm run build -- --cdn
TODO
TODO
Copyright (c) 2014-2015 Martin Micunda
Source code is open source and released under the GNU GPL v3 license.