Challenge Overview
Project Overview
We are building a web based application that allows Construction Project Managers to track tasks and the number of hours spent on each task, their costs, materials and equipment.
Currently, they are using a legacy Powerbuilder application along with emails and spreadsheets to track their progress. With this project, we are seeking to modernize this by building a HTML5 based application.
Challenge Overview
We have a UI Prototype for the front end of the challenge. In addition to the front end, we have a back end written in Node.js.
This challenge deals with updating the UI Prototype to use AngularJS and connect the prototype with Node.js backend.
Challenge Details
After registration, you will be provided with the UI Prototype files and the Node.js backend application. This will be available in the challenge forums.
Install the backend application using the deployment guide. Carry out this step carefully and verify that you have installed it correctly - see the verification section in the deployment guide.
The Node.js application currently has routes to handle CRUD calls and also serves a minimalist AngularJS based web application.
Your task is to replace this minimalist AngularJS web application with the UI Prototype. Update the UI Prototype to use AngularJS. Create any additional routes in the Node.js server to provide the data for this web application.
You will notice that there are two variations of each page. One for "Admin" users and one for "Superintendent" users. These are the only two user roles for this application.
Depending on the role of the user logged in, show the appropriate page.
Following are the pages that you need to update :-
1. login.html
Hide the "Forgot password" link.
"Remember Me" option should work.
We use AD Authentication. Currently, the backend has a mock service that always returns true for registered users. These users already exist in the database. See the existing minimalist Web application to know which users these are. The same users should work in the prototype too.
If you attempt to login using a username that is not registered, show the message "Invalid username or password" in a popup.
2. projects-admin.html / projects-superintendent.html
This page shows all the projects that are assigned to the logged in user. Users with role "Admin" can see all projects. Users with role "Superintendent" can only see projects which they are assigned to.
See the minimalist web application to check how this works. There already seem to be routes to carry this out so your work is cut out.
Click on the "Filter" button. The filter section expands. Within this section there is another "Filter" button. Rename it to "Apply". Filter should work.
Currently in the prototype, if a filter is applied, the filter section collapses. However, there is no indication that a filter has been applied. Change the border of the filter button to a suitable color to indicate that a filter exists once the filter section collapses.
Currently in the prototype, there is no tooltip of the icons in the "Actions" column. Provide appropriate tooltips indicating the action. (Edit Project, Edit Project Permissions, Delete Project)
Delete Project - This feature will not be avaialble in the Offline Mode - See the "Offline Web Application" section below.
Create New Project - This feature will not be available in the Offline Mode - See the "Offline Web Application" section below.
Edit Project - This feature will not be available in the Offline Mode - See the "Offline Web Application" section below.
Edit Project Permissions - This feature will not be available in the Offline Mode - See the "Offline Web Application" section below.
Here is the mapping between the UI elements and the database tables (Format: UI Element -> Table.columnName) :-
- Project # -> project.projnum
- Location -> project.location
- Facility Type -> project.facilitytype
- Customer -> project.customer
- Status -> project.completed
3. project-create-admin.html
This page will not be shown in the Offline Mode - See the "Offline Web Application" section below.
4. project-edit-admin.html / project-edit-superintendent.html
This page will not be shown in the Offline Mode - See the "Offline Web Application" section below.
5. project-permission-admin.html
This page will not be shown in the Offline Mode - See the "Offline Web Application" section below.
Although users with role "Admin" can see all projects, you still need to show them here.
Currently in the prototype, when deleting user permissions, there is no warning. Show a warning before deleting a user (Are you sure you want to remove user <username>? yes/no)
If the user being deleted is having "Admin" role, then mention this in the warning (<username> is an admin user. Are you sure you want to remove user <username>? yes/no)
Click on the filter button. The filter section expands. Inside this, there is another "Filter" button. Rename this to "Apply". Filter should work.
Currently in the prototype, if a filter is applied, the filter section collapses. However, there is no indication that a filter has been applied. Change the border of the filter button to a suitable color to indicate that a filter exists once the filter section collapses. Ensure that the border color is consistent with the color used for the filter in the projects-admin / project-superintendent page (See page at point 2 above)
Click on "Add More Users" button. In the popup, click on "Search". Hide the "Search" button and the "Search Results" section. Also in the select dropdown for "Role", remove the "All" as an option. A user can have only two roles - "Admin" and "Superintendent". Rename "Add Users" to "Add User". Once a username is entered and the "Add User" button is clicked, the user is granted permission to work on the project. See the minimalist web application which has this feature. However, the backend only allows users with role "Superintendent" to be assigned to projects (as admin users already have access). Correct this to accept both roles.
6. schedule-list-current-admin.html / schedule-list-current-superintendent.html
Delete Schedule - This feature will not be available in the Offline Mode - See the "Offline Web Application" section below.
Here is the mapping between the UI elements and the database tables (Format: UI Element -> Table.columnName) :-
- Contract Type -> project.contractType
- Rev -> project.rev
- Contractor -> project.contractor
- Project # -> project.projnum
- Location -> project.location
- Facility Type ->project.facilitytype
- Customer -> Not mapped (may be taken up during Final Fixes stage)
- Project Manager -> project.projmanager
- Expected Start Date ->project.projstartdate
- Expected Completion Date -> project.projenddate
- Status -> Not mapped (may be taken up during Final Fixes stage)
7. Header (All pages)
Hide the "Last Login" and the "Notification" elements.
The "username" is not a link.
Offline Web Application
Certain pages are available in the offline mode. This means that once a user logs in, the user is able to navigate through these pages without the need to have an internet connection. Update the Node.js server to provide a manifest file of the available offline web pages.
In the above pages, the page and feature which is not needed in offline mode is explicitly mentioned. Other features and pages are assumed to be required in offline mode.
In addition to this, you will use HTML5 offline storage feature to store the retrieved data for display in these offline pages. Certain features are not available in offline mode. In such a case, show a message to the user if the user tries to perform that action. You can show it in a popup (Your application is currently offline. This feature is not available in offline mode).
The application should automatically detect when the user is not connected. It should automatically reconnect without user intervention.
Backend Node.js application
Currently the Node.js application has routes to access the database and also provides both HTTP and HTTPS server. It currently serves the minimalist web application.
There are two types of routes - one for the database and one for the web application. However, the web application routes do not follow the DRY principle.
Hence, create new routes in the config/routes.js and create appropriate controllers, if needed. See how the database table CRUD routes are configured to get examples.
Materials Provided
- UI Prototype
- Node.js Application with a minimalist Web Application
- SQL Server Database Backup (Import this into your database)
Points to Note
Use AngularJS partials. Do no use Angular UI Bootstrap. Angular UI Router is allowed. Follow the DRY principle.
Access to routes is restricted based on user role and authentication. Use the appropriate middlewares to carry out the same. See the minimalist web application to see how it performs here.
Follow the existing application's coding style.
If we have requested to "hide" a feature keep the corresponding HTML tags of the prototype but do not show it in the UI - hide the elements through CSS.
In the above pages, any links that exist that navigate to other pages not part of this challenge - make them dummy links.
Although the prototype contains two variations of a page for each the two user roles, you need to have only one AngularJS partial for that page. Depending on the user logged in, show / hide the UI elements. See how the minimalist web application does this.
Create RESTful routes for the actions, if does not exist. For example, in the User Interface, if we delete a project, it should actually delete the project from the database. Although not explicitly mentioned for each pages, it is understood that you need to make calls to the server to carry the actions out.
Finally, note that you need to replace the minimalist web application with the provided Prototype after updating the prototype to use AngularJS. Don't keep the minimalist application in your submission.
Final Submission Guidelines
Ensure that you have updated the Deployment guide, if required.
Compress your application into a .zip file and submit it through the Submit and Review utility.
Your submission must include both the Updated AngularJS prototype and the updated backend.
Code Aesthetics
- Code must be clean (no non-applicable comments, unused variables etc), tidy (consistent indents) and well commented
- Clear and purposeful naming for variables, classes etc.