ABB RCS Angular Prototype - IE and KB

CHALLENGE OBJECTIVES

• Build the  Information Explorer and Knowledge Bank as shown in the design

 
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.

 
TECHNOLOGY STACK

• Angular 7
• Bootstrap
• HTML5
• Javascript
• CSS

 
SCREEN REQUIREMENTS
These screens (https://take.ms/Qq3xO) are all in scope of this challenge even if they are not listed below, and we’ll provide sketch file which contains full design.
 
*** The UX screens are provided to help you better understand the flow / interaction / functionalities of the screens, make sure you check them to properly implement your prototype.
 
*** Many of the key elements (map view, SLD viewer) were already implemented in other parts of the prototype, so you should be able to reuse existing code for these.
 
Project Manager Dashboard
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d32198cc203ae2f5d7591a5
Note this screen is not in sketch but it’s in scope, we just need to update the existing dashboard to match design.
 
Information Explorer
Click on the top left icon, will open this panel and click of Information Explorer menu, this page will appear:
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28ab50815a4263eafd1a55
For map we are using open street map, it's already designed in GIS screens, you can refer the implementation from there.
 
Information Explorer Dashboard:
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28ab50de0d04565130f90e
 
Notification View
Top notification icon will be highlighted if the system has any new notification, and we have any substation related notification and we click on that,it will take us to below page.Substation will be highlighted with blue dot in table and map view both:
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28ab5061bfa64c2eda9776
 
Hover
If we hover on a region in map or on table view or on substation in risk matrix, all substation in that region will be highlighted on risk matrix, mapview and tableview:
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28ab50306ff84c9a4f1f11

Assets
Its behaviour is same like substations, in risk matrix all assets will plotted and if there is a new notification for an asset it will be highlighted, if we hover on region it will be highlighted in risk matrix, mapview and table. Notifications concept is same like Substation. Hover behavior is also same like substation.
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28ab50306ff84c9a4f1d29
 
SLD View
If we click on an asset, it will open its sld view in view mode only:
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28ab4fb4a4605645b95e8a
 
For notification of assets, its assets will be highlighted in sld view and risk matrix:
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28ab5069a8664c70c1ad82
 
Hover document: Please follow the UX flow for this. Asset will be highlighted on sld, risk matrix and table view if we hover on them at anyplace.
 
Expansion of asset table:
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28ab50a1f25163f0f1016b
 
Asset Info file
If we double click on any asset,  asset info file will open. this view is already there, just add same in read only mode:
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28ab4f91677e564be84b9f
 
Knowledge Bank
It will be opened from left slide menu, the same place where we have “Information Explorer” menu. We don't have UI screens for each of the tab but please refer the uX section for them.
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28abb392949e4cfbfd367f
 
Instead of Region, please show “SLD Equipment Reference” Place this after substation column: <download full spec to see screenshot>

For other tabs will have the same kind of screen with different sets of data, we should be able to view pdf or any file attached with each row. Please refer UX section for this.
https://app.zeplin.io/project/5d28ab2ab86fcc4c402e2c17/screen/5d28abb2de0d04565130fdab
 
Below are the list of columns to be shown for each tab.
Note for Image gallery and Maintenance policies tabs you can check the UX screens to see the columns. For other tabs see below.
 
Performance reports
Name
Reference name
Description
Creation date
Created by
 
Task reports
Reference name
Team
Planning type
Execution date
Priority
 
Continuous improvement
Name
Team
Execution date
Preparation date
Planning type
Problem statement
Locations
Criticality
 
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. Please follow the same approach we have done in the base code.
• Implement field level validation (error message should be displayed below the mandatory fields)
• Show loading spinners when populating data from API / local JSON 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
• No linting errors
• No errors with prod builds
• Please follow zeplin designs accurately, follow fonts, colors, padding, margins everything.

 
GENERAL REQUIREMENTS

• Must use Angular 7 and follow the provided design.
• The main content should have fluid width to fill all the 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 a 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

Final Submission Guidelines

FINAL DELIVERABLES

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.
• Please note that winner is responsible of raising a merge request to our code repo.