Frontend

Styling and SASS¶

All styling source files are located in resources/assets/scss. The files are split in to the original (if slightly modified) AdminLTE files and a set a of SASS modules. Webpack handles the compilation of SCSS/SASS to CSS.

The project system previously used Gulp as so there may still be references to this.

Javascript ES6¶

All Javascript source files are located in resources/assets/js. The project system uses ECMA6(2015) along with VueJS 2.x. To transpile this in to browser compatible ES5 Webpack is used to handle this. To make development easier, Node, NPM and gulp are pre-installed on the container.

Vue JS¶

The project system uses VueJS to handle most of the complicated frontend work. This includes the clocking window and the clocking display at the top of every page.

Note

It is recommended to install the Chrome dev tools plugin for VueJS

Reading Material¶

Below are some of the things you will need to learn about to be able to work with the Project System components.

It is recommended to fill in the blanks as you go along, reading all of the documentation in one chunk will not be as useful.

Components¶

The project system uses VueJS components almost exclusively to allow for easy reuse and refactor in future. We will not cover components in massive detail here but you can read about the relative topics below to learn about them.

The components registration file is located in resources/assets/js/components.js

Components

All components are contained in .vue files, these files may also depend on standard JS classes and node dependencies.

Note

Vue files should not contain styling information, use the SASS/SCSS files instead.

Compiling SASS, ES6 and Vue¶

All frontend changes need compiling down (this does not include template changes in Blade). The build commands use Webpack.

Below are the available commands for compiling.

//For development
npm run dev
npm run hot

//Watch files for changes (one uses polling)
npm run watch
npm run watch-poll

//Allow for hot reloading of Javascript (no need to refresh when developing JS)
//Not currently functional
npm run hot

//Production - Compiles AND compresses, improves performance, run this before deploying
npm run prod //alias
npm run produciton

Compilation and Development¶

When developing it is recommended to use watch / watch-poll or hot when working with JS exclusively. You can then leave the compiler in the background, be sure to check it for any compilation errors.

Clocking Indicator¶

The clocking indicator is displayed at the top of every page and keeps track of when a user is clocked in or not, how long they are clocked in for and how much time has been clocked on to projects. The primary function is to allow users to quickly clock in and out (AJAX) and display the correct metrics for the day.

// Main Component
resources/assets/js/components/Clocking/TimeDisplay.vue

Clocking Window¶

The clocking window is one of the core components for the project system. It handles the clocking of developer time against projects and maintains the passage of time.

This works by regularly polling the server in the background at set intervals, this means the clocking window can also operate autonomously without a response from the server if it goes down for some reason.

After a set amount of time has past, the clocking window will prompt the user to tell it what they are working on, during this time the prompt stops Javascript execution (browser prompt). To mitigate the JS pause, the time at the moment the prompt opens is stored and compared against when the window is satisfied with the response from the user (string length).

The component makes heavy use of other classes, be sure to look at these as well when developing. You can use your IDE to locate these files when looking at the primary component.

// Main Component
resources/assets/js/components/Clocking/Form.vue