Project Overview

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

There’s an important module called SLD (Single Line Diagram) editor in the tool, which is an editor used to create diagrams.
In the previous challenges, we have implemented the SLD editor using GoJS. For the purpose of this challenge, we need to fix some bugs in the tool.
 

Page Entry

Here’s how you get to the GIS editor page:

1. Login as olduser
2. Click the setting icon on the top right corner of page
3. Click Project Modelling on the side menu
4. Hover over the GIS Module button and click it

Technology Stack

• Angular 6
• HTML5
• Javascript
• CSS

 

Challenge Requirements

We are fixing the following issue in the F2F:

• #126: right now drag & drop is not working properly in the GIS editor, we need to fix it to make it work. Please register to see full issue details in the forum.

Client Specific Requirements

1. Avoid ngx datatable for records display.
2. Support for the following browsers Chrome , Safari (Mac only) and IE 11 and above.
3. Pages should adapt to screen sizes using Bootstrap.
 

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
• We may need winner’s help to merge code into our repo

 

General Requirements

• Must use Angular 6 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

What To Submit

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