ABB RCS Angular Prototype - CI

CHALLENGE OBJECTIVES

• Build the CI pages 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
The following screens are all in scope of this challenge, and we’ll provide sketch file which contains full design. There are multiple flows for different roles.
 
*** Note: all 28 screens in the CI section are in scope, even if they are not referenced below.
 
*** Note: register to download the full spec with screenshots from forum.
 
Maintenance Technician Role:
Once quality sme creates the task, it will go to maintenance technician, please follow the flow pdf for more details.
 
Planned Tab: if user select CI task, Sync all button will be disabled but if he selects a CI task and click on the Review button, below screen will come:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7c7e0caed450e09e31d4
 
If user click on Perform button, following screen will come:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5adedfce2924e08afb

On click on next button, will come to Q1:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b59612127025ff537c1
 
User can add assets by clicking on Add Asset button:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5b5f42033494420499
 
To add external factor:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5b4657157308d052b0
Edit Additional factor will open the add popup will prefilled info. And title of Popup will also be changed as “Edit..” . Now if we click on cancel, this factor will be deleted.
 
Add events Timeline:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5baf33bb3e309ce196
We can add it by clicking on edit button. And title of Popup will also be changed as “Edit..” . Now if we click on cancel, this factor will be deleted, see below. Note the edit icon is missing in our design but it’s necessary.
 
Next button will take us to Q2:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5980cda83cfb0e30f7
 
There are 3 subviews here- Tree, FishBone, Table
Fishbone View: It represents Tree view only.

https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5ac0b47862911bb7e5
 
Table View:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5a4657157308d05089
Note that table view is independent, it’s just a simple table, nothing to do with other views.
 
Tree View: We can never add a level above, only sublevels can be added. Please note that in Tree View, he have to show bones like PDF.
 
Add bone view:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5bd917507332fc8871
 
Edit bone: On selection on existing bone
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5a4657157308d0517c
 
Add recommendation:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5b2a1bf3b008957cd4
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5bdedfce2924e08cb8
 
Popup option will change on selection of “Recommended Action”. Please follow the flow pdf.
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5a4657157308d0517c
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5af92ecf147a4004e5
 
***Note: Copy Recommendation to other Bone: Please follow the flow for other options, deleting fish bone, copying recommendations. Recommendation can be copied to multiple bone and during that details tab will be disabled.For e.g. I can select 3 bones and paste.
As a result, the same recommendation appears in all 3 bones. Check the pdf flow spec pages 40 to 43 to better understand this).
 
Example of FishBone concept: <screenshot in forum>
 
Level will always be connected to level above that. (See 2, 4th, 5th)
 
Initiate Irregular task:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5baf33bb3e309ce1d1
Name of the task: will always be prefilled, just add suffix to the task name
Other info will be defined by the user.
Task Validator: logged in user and cant be edited.
Execution Date: It can be selected.
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5adedfce2924e08ba6
 
Q3:
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5c8156c00fc0b379b1
Flow: 15.5.4.1 / Technician / CI / Performing task / Q3 - 15.5.4.12 / Technician / CI / Performing task / Q3
If we select a root cause in graph, in bottom it will filter all the recommendation related to that root cause. But if we select one recommendation, it will change show the reflection in graph and populate the probability and contribution. it will show how much risk is reduced by that recommendation.
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5cbdc8bf41f70bf2e8
 
And if we click anywhere else other than the root cause, the system will show the normal screen with all recommendations, and we can collapse the graph also.
 
Once you edit and save it, green indication will come on that recommendation.
https://app.zeplin.io/project/5d1f77c69956d67345f61e72/screen/5d1f7b5bc0b47862911bba2c
 
And later we can withdraw(Withhold suggestion) the submission also, On doing this, green color disappears.

Q4:
Its same as Q3
And now user will submit it. Submit can be done at any point of time.
 
 
CLIENT SPECIFIC REQUIREMENTS
1. Avoid ngx datatable for records display.
 
2. Please tell your developers to use the below example as reference.
Implement bootstrap in all pages – i.e. use the 12-column grid layout provided by bootstrap.
 
<div class = col col-sm-6 col-md-4 col-lg-3 col-xl-3> </div>
 
Col - screen size < 576px
SM - ≥576px and < 768px.
MD - ≥768px and < 992px.
LG - ≥992px and < 1200PX
XL - > 1200PX.
All pages must be responsive.
 
3. Support for the following browsers Chrome , Safari and Internet explorer-11 and above.
 
4. We need to make sure all the screens (except SLD) are responsive (bootstrap enabled) . Also there is no restriction on the size of the screen like 760PX etc.
 
In short they must be responsive using Bootstrap and should adapt to screens size.
 
IMPORTANT REQUIREMENTS

• Widget should be of fixed size as in sketch files.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.