96h ABB RCS Angular Prototype - Notifications

CHALLENGE OBJECTIVES

• Build the Notification panel 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
All screens from the zeplin project are all in scope of this challenge unless otherwise specified, even if the screen is not listed below, and we’ll provide sketch file which contains full design (focus on the Notifications UI page in sketch).
 
Notifications are the new features of the application, whenever a user will login, notification will be shown in the top bar and on his dashboard too. Below is the design for this:
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e04d767941b82a85758
 
Size of the notification popup is fixed, it can't be bigger than the given size in sketch.
 
Account Notification
If user has got a new role, on click of this notification role dropdown will be highlighted with little shaking effect.
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e040707b29d1c89a7fa
 
Check this shake / wobble example, we want to implement the same effect: https://daneden.github.io/animate.css/
 
And When he will open the dropdown that role will be highlighted for him:
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e0435d7bd77bd0a0829
 
Notification Hover:
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e04d2ff819df6cad199
 
Mark As Read or Unread:
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e053c761e9d4656e9a9
 
Load More:
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e0505f47a9d58b37f16
 
Mark All as Read:
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e0535d7bd77bd0a0889
 
Settings
On click of setting button, below popup will be opened:
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e027eeaaf9dff1475bf
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e02bf24167764cfb9e5
 
Email Settings Options are: hourly, daily, weekly and monthly
 
System Notification
If the system is down or disconnected, system notification will appear on the dashboard and it cant be closed, it will be dismissed once system is up again (for now hide it after 10 seconds):
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e03f400e26b0087ef2b
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e03bf24167764cfba6f
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e033c761e9d4656e86d
 
On above Popup: Instead of Asset X - its should say  “Tag X lost connection to Scada”
 
Task Notification
If there are any notifications on tasks, it will be highlighted on task level and it will disappear when we click on the task.
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e03d767941b82a855ac
 
 
Performance Notification
Example of performance notification, once user will click it, it will take him to substation page:
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e053c761e9d4656e9a9
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d27615889d8fb6af4e1d915
 
Note the substation page (2nd link above) is an existing page and doesn’t need to be implemented. You just need to jump to the page when a performance notification is clicked.
 
Email Template
Create a template for Email, email will be sent from backend, we just have to develop the UI (this will be a standalone html file that’s not part of the prototype):
https://app.zeplin.io/project/5d275dc1b34fae9df074c977/screen/5d275e0297220c09e1eb1a9e
 
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.