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 implement some new features and fix some bugs in the tool.
 

Prizes

Please note this is NOT a challenge with fixed prizes, instead we have some challenge specific rules on prizes:

1. Winners will still be decided based on review scores
2. Submitters will fail review for fixing less than 10 issues
3. 1st place winner will get $1200 if 12 - 13 issues are fixed
4. 1st place winner will get $1400 if 14 - 15 issues are fixed
5. 1st place winner will get $1800 for fixing all issues
6. 2nd place prize is fixed to $700

 

Page Entry

Here’s how you get to the SLD 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 SLD Editor section and click the SLD Edit mode button

Technology Stack

• GoJS
• Angular 6
• HTML5
• Javascript
• CSS

 

Challenge Requirements

Note: register to download the full spec with screenshots in the forum!!

1. SLD icons should be snapping on the grid
2. When a connection is established vertically or horizontally, while resizing or moving assets, when the connection reaches a point when the intersection gap in between two lines is very short, the line should snap and become linear straight.
3. All icons should have a connection passing through, which means they are connected. That’s also valid for the case of “Combined Disconnected Ground Switcher” and similar equipment icons.
4. New clamp equipment icon need to added. Use high quality svg file from the sketch file provided.
5. A logic shall be placed to avoid overlap label text on top which other causing issues for reading.
6. When activating Outage Areas in SLD, the overlay white color is too low, resulting into confusion on which is on or not, when you click on outage area button background should be like this screen.
7. When Shade(s) are active, dragging new equipment from the equipment library without any data shouldn’t be considered part of previous simulation, specially before getting connected.
8. Modals: In any case a modal is summon on top of the SLD, it should follow the same design used globally in Settings. A new modal shall never be open on top another one like in the example. There shall be a dark background color behind the modal to highlight the prompt action. The layout, buttons, text style, title, and components have to be the same used globally, like the one provided in the example. Cancel action is done by pressing X button.
9. “Busbar”, “Cable circuit”, “Bus duct” and “Transmission” interaction when clicking should be about expanding its size. Other assets should be the ones connecting into it. When expanding the bar should become blue as the design have specified in Zeplin.
10. When interacting with Outage Areas, after creating a second OA, selecting back the first one should toggle the selection also on the table view.
11. The equipment library shall never have a scroll bar. The icons layout should be the same as the one provided by the design. In addition, there shall be a functionality to collapse the panel and hide on the right side of the page.
12. Need to be able to delete connection line between two equipments without deleting the equipments first
13. Selecting all and Panning. To select assets the user should be able to make a selection with the mouse pointer at the board. To pan the canvas, the user should press and hold space bar and click and drag the board around.
14. When equipments are too close to each other they should connect automatically.
15. When trying to select an equipment by mouse clicking and dragging it, if we cover some part of the equipment it should select the equipment.
16. Please provide detailed instructions on how we can integrate GoJS license into the code, we’ll follow the instructions and integrate that internally.

 

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 reference 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.