SunShot - Tangerine NodeJS UI-API Integration

Introduction

Welcome to the SunShot - Tangerine UI-API Integration Challenge! We’re a technology company first, and a marketing facilitator second. Our goal is to dynamically communicate the commitment and progress of our corporate clients to the community by transforming scientific data into something on a scale that is meaningful to people. We don’t provide the customer’s messaging but we give them the metered data, design and physical components so that our systems become a branded communications tool that conveys their commitment to Corporate Social Responsibility.

For this challenge, the goal is to use the responsive HTML prototype and hook it up to the API calls using Angular.js. The HTML prototype, backend API URLs and demo accounts are available as challenge assets. Please refer to the provided API endpoint definition and sample API responses. 

Requirements

Index.html - Wire to the /api/login API

The user must login to access any of the pages in the application. If they try to access any page in the application without logging in, they get re-directed to the login screen.

• Remember me and Forgot Password are currently not in use.

 

Sign Out

• Wire to the /api/logout API call

home-case1.html

Get all data from the respective endpoint and render it as per the page below.

 

The timestamp on Home page will come from feed and format will be Month Date HH:MM  It is associated with the power values that are displayed on the Home page (as shown below).  This way the viewer knows whether the information is recent or if it is out-of-date.  Sometimes there are delays in uploading the data feeds from the solar energy system and/or the utility, so it is important that the time displayed is from the data feed.  

For the icon colors shown above, please note -

- Electric from Utility icon is always red when there is a non-zero value (greyed out when zero)

- Electric being Generated icon is always yellow when there is a non-zero value (greyed out when zero)

- Electric to Utility is always green when there is a non-zero value (greyed out when zero)

- The color of the Home icon changes based on where the electricity is from:  Red if 100% from utility; yellow if 100% from Solar (this is true whether there is electric exported to the utility or not) and then, if possible, orange if from both Solar and Utility.

The ‘Right Now’ values are always in W/ KW (NOT Wh or KWh as shown in the mockup).

Wire this to  /api/feed/mvp_home

• If ac_demand is positive, power is being imported from the utility to the home: the “Electric from Utility” icon should be red; the “Electric to Utility” icon should be gray; the line/arrow from “Electric from Utility” to “Electric Use Right Now” should be enabled/active; and the line/arrow from “Electric to Utility” should be disabled/inactive.  “Electric from Utility” should be the ac_demand value, and “Electric to Utility” should be zero.

• If ac_demand is negative, power is being exported from the home to the utility: the “Electric from Utility” icon should be gray; the “Electric to Utility” icon should be green; the line/arrow from “Electric from Utility” to “Electric Use Right Now” should be disabled/inactive; and the line/arrow from “Electric to Utility” should be enabled/active.  “Electric from Utility” should be zero, and “Electric to Utility” should be the ac_demand value, negated.

• If ac_demand is zero, then 100% of the home's electricity is being provided by the solar panels. The Home and the Solar Panel icons will both be yellow. And the arrow from the Panels to the home will be active. Both Utility icons should be grey and both lines inactive.

• The ac_power_generated value should be used for the “Electric Being Generated” icon.

• The value for the “Electric Use Right Now” icon should be ac_demand + ac_power_generated.  (So, if ac_demand is -0.5 kW, and ac_power_generated is 4 kW, then 3.5 kW of the generated power is being used right now, and the remaining 0.5 kW is being exported to the grid.)

usage-details.html

Use can switch between day, week, month and year. Please refer to the provided API definitions for day and week. Note that there are no APIs for Month and Year so these can be left out for now. Day means current day, Week means current week and so on and so forth.

 

The chart data should be drawn based on the response received from the API.

Please note that the carousel here represents the selection in the top bar -  day/ week/ month/ year.

Day - wire to /api/feed/mvp_day

Response

Week

Week - wire to /api/feed/mvp_week

Powered By

Powered by - wire to /api/logos/<id>

Month

Not Required - this will be greyed out and not implemented.  The chart shouldn’t show

Year

Not Required - this will be greyed out and not implemented.  The chart shouldn’t show

alerts.html

1. Wire this call to /api/notifications.

2. We would like to pull notification data periodically as per a configurable interval. Make sure your implementation is able to pull and display notification data based on periodic updates as per this interval.

3. We currently do NOT have a delete notification endpoint. However, we would like the ability to delete a notification (the UI already supports this) by logging the deleted notification data (title, detail, timestemp) into a local log file.

 

• For the times shown next to each notification, it should be displayed based on the timestamp field. as part of the API response.

• The icon for each notification is shown based on the following rules

  • The API response will include a "severity" element for each notification whose value will be "warning", "alert", or "info";

  • The API response will include a "source" element whose value will be "grid", "site", or "inverter"

  • The displayed icon should be based on the combination of above. Please use the provided icon set as part of the attached prototype for the same.

  • The notification API should be called in the background on a configurable time interval - use 5 minutes as the default.

  • - Please note that you need to pass includeExpired=true parameter to see the expired notifications from yesterday. A "you are pulling from the grid during peak hours" notification should show up later in the day (11 or 12PM, site-local time) and expire after 4 hours, and a "tomorrow is peak demand" notification should show up around 6PM and expire after 8 hours (All times Pacific)

Refer to the provided endpoint documentation for details/ use cases for notifications.

Final Submission Guidelines

• Submit the complete source code as a zip file

• Deployment Guide must contain all deployment and verification instructions. Include instructions on how to deploy to Heroku

• Deploy the app on Heroku and provide the Heroku URL as part of your Deployment Guide

• Submit a demo video of your submission

• The winner will be asked to merge/ commit his code on our Git repo.