ABB RCS Angular Prototype Challenge #2

Project Background
RCS is an Asset Reliability Centered Business Performance Tool, specifically designed for Power Grids and Substations asset reliability management. For this project, we are going to run a series of prototype challenges to build a web based UI for the tool.
 
Challenge Objectives
In the previous challenge we have implemented part 1 of the prototype, but since then the design has evolved quite a bit. The purpose of this challenge is to update the previous prototype to match the latest design.
 
Technology Stack

• AngularJS 6
• Bootstrap 4
• HTML 5
• Javascript
• CSS

 
API Integration
Although the API is not ready yet, you need to implement simple controllers / services to fetch the data showing in the app from JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort so hard coded data is not acceptable.
 
We are going to share JSON format with dummy data with details on which JSON is for which screen, you should use that as base.
 
Page Requirements
Register to download full spec from challenge forum that contains screenshots.
 
Important Requirements

• Bootstrap 4 should be used
• Prototype should use configurable field names and validation messages (Key and Values are Defined in JSON file)
• Properly implement internationalization-i18n. Please define the mechanism and provide all resources in English. Make all messages, labels, etc configurable
• Implement field level validation (error message should be displayed below the mandatory fields)
• Show loading spinners when populating data from API / local service to UI
• Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups like the ones we have in the prototype
• The base prototype implements password protection on all pages, do NOT break that
• No linting errors
• No errors with prod builds

 
General Requirements

• Must use Angular 6 and follow the provided design.
• The main content should have fluid width to fill all available space.
• Pagination should work whenever applicable.
• Must follow Angular best coding practices
• You are expected to create a detailed README file including information on how to setup, run and verify your application.

 
HTML Requirements

• HTML should be valid HTML5 compliant.
• Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.
• Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

 
Code Requirements

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors.
• All CSS naming should not have any conflicts.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Make sure npm run build works without any errors.

 
Javascript Requirements

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. 
• Use typescript and linter for code quality

 
Licenses & Attribution

• Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.
• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 
Browser Requirements
Windows: IE 11+, Chrome Latest, Firefox Latest
Mac: Safari Latest, Chrome Latest, Firefox Latest
Tablets: Safari / Chrome on iPad, Chrome on Android Tablets
 
Documentation
Register to download the following documents we provided in the forum

• Design source in Sketch format
• Base code

Final Submission Guidelines

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.