A basic Queueing app using Angular.

Based on the Qudini Front End Test

The project was intended to use an existing node.js setup to handle the backend work. Setting this up was a little trickier than what I would have liked.

I followed the instructions from setup-angular-2-nodejs-structure-angular-cli-express to set up the Node server

I'm trying to use my typical libraries to make life easier ( but easier isn't always straightforward! )

I'm using Semantic UI as I having some issues using Bootstrap and it is the same CSS framewoek as used in the NG-2 book.

I've use angular2-moment, I was able to use the pipes but I couldn't workout how to use Moment.js within the component to verify a valid date .

The following commands create the build files in a dist directory, and serve the app The node server isn't refreshed automatically so has to be refreshed manually.

ng build --watch

In another CLI tab

npm run serve

Navigate to http://localhost:3000/

For a good guide see: ultimate-angular-cli-reference

• Using Webstorm with the Angular plugin which allows very effective use of the IDE

• The Angular CLI is used to add new elements to the app

• Backend using socket.io For bi-directional communication between the web client and the server this allows the front-end to be updated in real time.

• I have used Inheritance, this is fine as long as the chain doesn't is kept to a single parent.

• The use of Interfaces is common now in Angular where parts of libraries are used: implements OnInit, OnDestroy Example

  StatsComponent extends AbstractComponent

• Change Detection For the view to be notified that it needs to be redrawn there are a variety of strategies for Angular. I've used ChangeDetectorRef

• I have a single Angular Service which is responsible for HTTP calls = CustomerService This looks very neat.

• Typing Generally the objects are all typed. (We could go further and type for instance the Product

• Using Observables - ReplaySubject, which means that once the front-end Component Subscibes it is updated as soon as the data changes.

• ES6 Using some of the new features of ES6. Like set

  union(a:Array<any>, b:Array<any>) {
        var setA = new Set(a);
        var setB = new Set(b);
        let union = new Set([a, b]);
        return Array.from(union);
      }

• Angular stability, originally the project was very frustrating as there seemned to be a breaking change each time I worked on the project. Now it is very stable.
• I did have an Issue with import {Observable} from "rxjs/Observable"; I believe it was picking up the wrong import and failing everything.

• Add Customer Component
• Add services to call HTTP
• Add collection of Customers
• Add action to Delete Customer
• Move $http requests to a Service
• Add action to Serve Customer
• Add UI to select Products
• Create a Product Type
• Using Observables with RxJS to get update!
• Use socket.io to give push updates
• Add action to Add Customer to the Queue
• Add a Watch to the build prod task
• Create a Service to provide an Observable to supply the Queue data
• Replace HTTP call in Product Service
• Add external library (moment.js) to display Joined Time
• Make the ' app.js ' file ES6 style
• Backend - use DELETE function
• Customer - Add Push Back functionality (Change order in queue)
• Improve the API ( DELETE /customer, UPDATE /customer etc)
• UI - Make columns scrollable
• Update to Angular 4
• Fix bug with the Product list in Add Customer
• Add a `pipe' (filter)
• Make the Search UI into a Shared Component
• UI - Add served time
• Use ReplaySubject in the Time.component
• Use ReplaySubject in the Customers.component
• Use a Pipe for the Customer name search
• Use a Pipe to replace the parsing function to show the Push back button
• Use ReplaySubject in the CustomersServed.component
• Use the ReplaySubject for the Products in the New Customer component
• UI - Add more random images or something more generic
• SASS - Rationalise more
• Improve UI that shows the time
• Move all the Observables to a single Data Service
• Add UI that show the Queue Totals
• Update the Search UI to include searching for other property types
• Get the prod to do a Live reload
• Make specific Object types - is Customer type and cast response as that type
• Use Interface for Model? (Research best approach)
• Resolve moment.js imports completely - Is the 'MomentModule' really required, and are the typings being imported correctly
• Resolve issue with Moment.js - vendor.bundle.js:600 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date()
• Add tests
• Use more functionality from Immutable.js
• Add map files - This might be being done already
• Add and document debugging system (see Evernote)
• And code verification to the build task
• Add code style verification to the build task (hint)
• Find the definitive NG2 style guide
• Sort Customer Add form out (Make fields required etc)
• Add validators to the form
• Customer - Add Call Back functionality
• Add better default Customers in the Node Database

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Run ng github-pages:deploy to deploy to Github Pages.