ABB RCS Angular Prototype - Harmonised Data Tooling

CHALLENGE OBJECTIVES

• Build the harmonised data tooling screens 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. Please note all screens in the UI section are in scope and all behavior mentioned below should be implemented.
 
These screens are for the role: “Project support”. When the role is selected, click the settings icon on the landing page, then go to Project entities,  you will see below screen (already implemented):



1. Project Entities (existing page)
Two additional tabs need to be created here: “Equipment Images”(the title “Asset image” in design is wrong) & “Columns & Tables”:
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d3600d7f1ea34b24113d914
 
Equipment Images
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d360115989d7cb33d3494aa
 
There should be 3 main section “Primary Equipment GIS”, “Primary Equipment AIS”, “Primary Equipment MIS”, copy same structure under all. If you hover on “Edit image” icon it will become blue and row will be highlighted as gray, when edit icon is clicked below screen will come, where user can upload a new image which will replace the existing image:
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d3601151ea5d2412e1a70e1
 
Columns & Tables
Please keep track of hierarchy, if we select a row, it will be highlighted as blue
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d3600d70c9049b2f6a0ffb8
 
On click of filter icon, below items will be shown
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d3600d8c203ae2f5d9a3c42
 
 
2. Policies
On click of Top-left menu, slide bar will open which will show “Policies” menu
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d3601378bc36cb2fd3191e0
 
Policies screens are already created, please link it to the page (i.e. this one: https://take.ms/1cViZe).
 
 
3. Kernel Parametrisation (new page)
One tab / page needs to be added in the left menu stack of the role’s setting page: “Kernel Parametrisation”, which will have two tabs: “Performance Models” & “Importance Calculation”
 
Manage Performance Model
There should be 3 main section “Primary Equipment GIS”, “Primary Equipment AIS”, “Primary Equipment MIS”, copy same structure under all.
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d36005bc6f3c9b2ea78d4d5
 
If I edit any equipment below screen will come:
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d36005b575c1cb26bd02c05
 
Please take care of the hierarchy:

• Accessory - It's a subsystem, new subsystem can be created and edited, for edit use setting button positioned on each subsystem:
• Use below screen for Adding or editing subsystem, please change text to  “Edit Subsystem” while editing and pre-fill the data for the subsystem: https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d36005ac351c640e734e047
  • “Basic Information” -> property category
    • “Space Heater Test”” -> Sub category, under this will have various properties, clicking the “+” icon will add a new empty row and user is able to enter values into each cell.
    • The hierarchy is like this: Accessory -> Basic Information -> *** test. For now there will always be the 5 *** test sub categories as shown in the design, users cannot add new or delete existing sub categories.
    • Each sub category will have the same structure (columns) as shown in design.

 
If you hover on any property, its description should show in tooltips
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d36005bc203ae2f5d9a2eb4
 
Wherever you see RV it indicates a real value. Example it can be any positive or negative decimal number. E.g. – 12, -0.5, -12, 0.5. To enter a real value in the dropdown user will need to select option as “Other” and enter the real value (the dropdown will need to support free input when Other is chosen):

• Minimum control value (MINCV) , Maximum control value (MAXCV): this is a dropdown that can take the following values: N/A, Usln, Calculated, Other (RV)
• Minimum specification limit (MINSL) , Maximum specification limit (MAXSL): this is a dropdown that can take these values: N/A, Other (RV)
• CT – it should be dropdown (valid values – 1 to 15 both inclusive)
• PW  is property weight – column AE (Range is 0 to 100 both inclusive) --- Direct editable entry
• CV – control value – Column R – a dropdown with valid values include:  N/A, Usln, Other (RV)
• %Minimum control value (%MINCV) , %Maximum control value (%MAXCV ) – a dropdown that can take the following values - N/A, Usln, Calculated, Other (RV)
• RBV – a dropdown that can take the following values: CV, MINCV, MAXCV , N/A
• V1, V2, V3, V4  – a dropdown that can take these values: CV, MINCV, MAXCV, N/A , Other (RV)
• Data age scale – dropdown with values: 0, 1, 2, 3
• Data age max – dropdown with values: N/A, Other (RV)
• Mandatory – dropdown with values Yes and No
• UIC - dropdown with allowed values: 1 and 0

 
*** Note: please check the table behaviour also, all cells are editable as per their input type.
 
Importance Calc
https://app.zeplin.io/project/5d35fed37fd6efb28ad90eb6/screen/5d360036835b3c413a24bc3c
 
 
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.