Merge pull request #121 from IBM-Bluemix/ui-updates

UI updates from InterConnect
IBM-Cloud · Mar 28, 2017 · e6a1b0f · e6a1b0f
2 parents 94ff0f7 + c943b58
commit e6a1b0f
Show file tree

Hide file tree

Showing 60 changed files with 92 additions and 22 deletions.
diff --git a/src/index.html b/src/index.html
@@ -3,6 +3,7 @@
 <head>
   <title>Logistics Wizard</title>
   <meta charset="utf-8">
+  <meta name="apple-mobile-web-app-capable" content="yes">
   <link href="https://fonts.googleapis.com/css?family=Libre+Franklin:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
 </head>
 <body>

diff --git a/src/modules/demos.js b/src/modules/demos.js
@@ -13,6 +13,7 @@ export const END_DEMO_SESSION = 'demos/END_DEMO_SESSION';
 export const GET_DEMO_SUCCESS = 'demos/GET_DEMO_SUCCESS';
 export const LOGIN = 'demos/LOGIN';
 export const LOGIN_SUCCESS = 'demos/LOGIN_SUCCESS';
+export const LOGOUT_SUCCESS = 'demos/LOGOUT_SUCCESS';
 
 export const demoSelector = state => state.demoSession;
 
@@ -60,10 +61,15 @@ export const loginSuccess = ({ token, userid }) => ({
   userid,
 });
 
+export const logoutSuccess = () => ({
+  type: LOGOUT_SUCCESS,
+});
+
 export const actions = {
   createDemoFailure,
   getDemoSuccess,
   loginSuccess,
+  logoutSuccess,
 };
 
 // ------------------------------------
@@ -108,6 +114,8 @@ const ACTION_HANDLERS = {
       loggedIn: user.id === userid,
     })),
   }),
+  [LOGOUT_SUCCESS]: () => ({
+  }),
 };
 
 // ------------------------------------
@@ -177,6 +185,7 @@ export function *watchEndDemoSession() {
     const demoState = yield select(demoSelector);
     try {
       yield call(api.endDemo, demoState.guid);
+      yield put(logoutSuccess());
     }
     catch (error) {
       console.log('Error during logout', error);

diff --git a/src/modules/demos.test.js b/src/modules/demos.test.js
@@ -9,6 +9,7 @@ import {
   GET_DEMO_SUCCESS,
   LOGIN_SUCCESS,
   LOGIN,
+  LOGOUT_SUCCESS,
   getDemoSession,
   getDemoSuccess,
   login,
@@ -17,6 +18,7 @@ import {
   demoSelector,
   watchGetDemoSession,
   watchLogin,
+  logoutSuccess,
 } from './demos';
 
 
@@ -40,6 +42,10 @@ test('(Constant) LOGIN_SUCCESS === "demos/LOGIN_SUCCESS"', t => {
   t.is(LOGIN_SUCCESS, 'demos/LOGIN_SUCCESS');
 });
 
+test('(Constant) LOGOUT_SUCCESS === "demos/LOGOUT_SUCCESS"', t => {
+  t.is(LOGOUT_SUCCESS, 'demos/LOGOUT_SUCCESS');
+});
+
 test('(Action) getDemoSession',
   actionTest(
     getDemoSession,
@@ -68,6 +74,13 @@ test('(Action) loginSuccess',
     { type: LOGIN_SUCCESS, token: { token: 'token' }, userid: 'userid' })
   );
 
+test('(Action) logoutSuccess',
+  actionTest(
+    logoutSuccess,
+    { token: { token: 'token' }, userid: 'userid' },
+    { type: LOGOUT_SUCCESS })
+  );
+
 test('(Reducer) initializes with empty state', t => {
   t.deepEqual(demosReducer(undefined, {}), {});
 });

diff --git a/src/routes/Dashboard/components/ForecastTile/ForecastTile.jsx b/src/routes/Dashboard/components/ForecastTile/ForecastTile.jsx
@@ -9,6 +9,7 @@ import {
   TableRowColumn,
 } from 'material-ui/Table';
 import LoadingSpinner from 'components/LoadingSpinner';
+import classes from './ForecastTile.scss';
 
 const styles = {
   wrapper: {
@@ -39,7 +40,14 @@ const ForecastTile = ({ weather }) => {
         <TableRow key={i}>
           <TableRowColumn style={styles.column}>{forecast.dow}</TableRowColumn>
           <TableRowColumn style={styles.column}>
+            <img
+              alt={forecast.day ? forecast.day.phrase_22char : forecast.night.phrase_22char}
+              className={classes.weatherIcon}
+              src={`/images/weather/${forecast.day ?
+                forecast.day.icon_code : forecast.night.icon_code}.png`}
+            />
             {forecast.day ? forecast.day.phrase_22char : forecast.night.phrase_22char}
+
           </TableRowColumn>
         </TableRow>
       )}

diff --git a/src/routes/Dashboard/components/ForecastTile/ForecastTile.scss b/src/routes/Dashboard/components/ForecastTile/ForecastTile.scss
@@ -18,3 +18,8 @@
   justify-content: center;
   align-items: center;
 }
+
+.weatherIcon {
+  width: 32px;
+  margin-right: 15px;
+}
diff --git a/src/routes/Dashboard/components/Map/MapMarker/MapMarker.scss b/src/routes/Dashboard/components/Map/MapMarker/MapMarker.scss
@@ -1,3 +1,5 @@
+@import '~styles/base/colors';
+
 .distributionCenter, .retailer, .shipment {
   text-align: center;
   display: inline-block;
@@ -12,8 +14,6 @@
     width: 30px;
     height: 30px;
     margin: 1px;
-    border: 1px solid rgba(0,0,0,0);
-    border-radius: 15px;
   }
 
   &.selected div {
@@ -26,7 +26,7 @@
 // --------------------------------------------
 .distributionCenter {
   color: #cc780f;
-  font-size: 16px;
+  font-size: 18px;
 
   & div i {
     padding-top: 6px;
@@ -41,29 +41,34 @@
 // --------------------------------------------
 // Shipment
 // --------------------------------------------
+
 .shipment {
-  color: #749f67;
-  font-size: 16px;
+  color: $map3Primary;
+  font-size: 25px;
+
 
   & div i {
     padding-top: 4px;
   }
 
   &:hover, &.selected {
-    background-color: #749f67;
+    background-color: $map3Primary;
     color: white;
+    width: 36px;
+    height: 35px;
   }
 }
 
+
 // --------------------------------------------
 // Retailer
 // --------------------------------------------
 .retailer {
-  color: #ad3e9c;
+  color: $map2Primary;
   font-size: 24px;
 
   &:hover, &.selected {
-    background-color: #ad3e9c;
+    background-color: $map2Primary;
     color: white;
   }
 }

diff --git a/src/routes/Dashboard/components/Map/PopUpCard/DCCard/DCCard.jsx b/src/routes/Dashboard/components/Map/PopUpCard/DCCard/DCCard.jsx
@@ -43,8 +43,11 @@ const DCCard = ({ address, contact, shipments, idToNameResolver }) => (
           <Table>
             <TableBody displayRowCheckbox={false}>
               {shipments.map(shipment => (
-                <TableRow>
-                  <TableRowColumn style={styles.column}>{idToNameResolver.resolve('retailer', shipment.toId)}</TableRowColumn>
+                <TableRow key={shipment.id}>
+                  <TableRowColumn style={styles.column}>
+                    <i className={`fa fa-truck ${classes.icon}`} />&nbsp;
+                    {idToNameResolver.resolve('retailer', shipment.toId)}
+                  </TableRowColumn>
                   <TableRowColumn style={styles.column2}>{shipment.status}</TableRowColumn>
                 </TableRow>
               ))}

diff --git a/src/routes/Dashboard/components/Map/PopUpCard/RetailerCard/RetailerCard.jsx b/src/routes/Dashboard/components/Map/PopUpCard/RetailerCard/RetailerCard.jsx
@@ -74,8 +74,11 @@ export class RetailerCard extends React.PureComponent {
               <Table>
                 <TableBody displayRowCheckbox={false}>
                   {shipments.map(shipment => (
-                    <TableRow>
-                      <TableRowColumn style={styles.column}>{this.props.idToNameResolver.resolve('distributionCenter', shipment.fromId)}</TableRowColumn>
+                    <TableRow key={`TR-${shipment.id}`}>
+                      <TableRowColumn style={styles.column}>
+                        <i className={`fa fa-truck ${classes.icon}`} />&nbsp;
+                        {this.props.idToNameResolver.resolve('distributionCenter', shipment.fromId)}
+                      </TableRowColumn>
                       <TableRowColumn style={styles.column2}>{shipment.status}</TableRowColumn>
                     </TableRow>
                   ))}

diff --git a/src/routes/Dashboard/components/Map/PopUpCard/ShipmentCard/ShipmentCard.jsx b/src/routes/Dashboard/components/Map/PopUpCard/ShipmentCard/ShipmentCard.jsx
@@ -34,9 +34,11 @@ export class ShipmentCard extends React.PureComponent {
       status,
       currentLocation,
       estimatedTimeOfArrival,
-      updatedAt,
       fromId,
       toId,
+      averageSpeed,
+      shipmentHumidity,
+      shipmentTemp,
     } = this.props.shipment;
 
     return (
@@ -67,9 +69,20 @@ export class ShipmentCard extends React.PureComponent {
         }
 
         <div className={classes.subtitle2}>
-          Last Updated
+          Shipment Data
+        </div>
+        <div>
+          <i className={`fa fa-car ${classes.icon}`} aria-hidden="true" />
+          {`Average Speed: ${averageSpeed || '-'} mph`}
+        </div>
+        <div>
+          <i className={`fa fa-snowflake-o ${classes.icon}`} aria-hidden="true" />
+          {`Humidity: ${shipmentHumidity || '-'} %`}
+        </div>
+        <div>
+          <i className={`fa fa-thermometer ${classes.icon}`} aria-hidden="true" />
+          {`Temperature: ${shipmentTemp || '-'}°F`}
         </div>
-        <div>{updatedAt ? formatTime(updatedAt) : 'N/A'}</div>
 
         <div className={classes.subtitle2}>
           Origin
@@ -87,8 +100,17 @@ export class ShipmentCard extends React.PureComponent {
               Current Weather
             </div>
             <div>
-              {currentLocation.weather ?
-               `${currentLocation.weather.observation.temp}° | ${currentLocation.weather.observation.wx_phrase}` :
+
+              {currentLocation.weather ? <div>
+                <img
+                  alt={currentLocation.weather.observation.wx_phrase}
+                  className={classes.weatherIcon}
+                  src={`/images/weather/${currentLocation.weather.observation.wx_icon}.png`}
+                />
+                {`${currentLocation.weather.observation.temp}
+                ° | ${currentLocation.weather.observation.wx_phrase}`}
+              </div>
+               :
                (<div style={{ textAlign: 'center' }}><LoadingSpinner size={60} /></div>)}
             </div>
           </div>

diff --git a/src/services/index.js b/src/services/index.js
@@ -1,7 +1,8 @@
 // Polyfill for fetch() not yet implemented by all browsers http://caniuse.com/#feat=fetch
 import 'whatwg-fetch';
 
-export const controllerApi = `${__CONTROLLER_API__}/api/v1`;
+// remove trailing / from url and add /api/v1
+export const controllerApi = `${__CONTROLLER_API__.replace(/\/$/, '')}/api/v1`;
 
 export const callApi = (endpoint, {
   apiUrl = controllerApi,

diff --git a/src/static/images/weather/0.png b/src/static/images/weather/0.png
diff --git a/src/static/images/weather/1.png b/src/static/images/weather/1.png
diff --git a/src/static/images/weather/10.png b/src/static/images/weather/10.png
diff --git a/src/static/images/weather/11.png b/src/static/images/weather/11.png
diff --git a/src/static/images/weather/12.png b/src/static/images/weather/12.png
diff --git a/src/static/images/weather/13.png b/src/static/images/weather/13.png
diff --git a/src/static/images/weather/14.png b/src/static/images/weather/14.png
diff --git a/src/static/images/weather/15.png b/src/static/images/weather/15.png
diff --git a/src/static/images/weather/16.png b/src/static/images/weather/16.png
diff --git a/src/static/images/weather/17.png b/src/static/images/weather/17.png
diff --git a/src/static/images/weather/18.png b/src/static/images/weather/18.png
diff --git a/src/static/images/weather/19.png b/src/static/images/weather/19.png
diff --git a/src/static/images/weather/2.png b/src/static/images/weather/2.png
diff --git a/src/static/images/weather/20.png b/src/static/images/weather/20.png
diff --git a/src/static/images/weather/21.png b/src/static/images/weather/21.png
diff --git a/src/static/images/weather/22.png b/src/static/images/weather/22.png
diff --git a/src/static/images/weather/23.png b/src/static/images/weather/23.png
diff --git a/src/static/images/weather/24.png b/src/static/images/weather/24.png
diff --git a/src/static/images/weather/25.png b/src/static/images/weather/25.png
diff --git a/src/static/images/weather/26.png b/src/static/images/weather/26.png
diff --git a/src/static/images/weather/27.png b/src/static/images/weather/27.png
diff --git a/src/static/images/weather/28.png b/src/static/images/weather/28.png
diff --git a/src/static/images/weather/29.png b/src/static/images/weather/29.png
diff --git a/src/static/images/weather/3.png b/src/static/images/weather/3.png
diff --git a/src/static/images/weather/30.png b/src/static/images/weather/30.png
diff --git a/src/static/images/weather/31.png b/src/static/images/weather/31.png
diff --git a/src/static/images/weather/32.png b/src/static/images/weather/32.png
diff --git a/src/static/images/weather/33.png b/src/static/images/weather/33.png
diff --git a/src/static/images/weather/34.png b/src/static/images/weather/34.png
diff --git a/src/static/images/weather/35.png b/src/static/images/weather/35.png
diff --git a/src/static/images/weather/36.png b/src/static/images/weather/36.png
diff --git a/src/static/images/weather/37.png b/src/static/images/weather/37.png
diff --git a/src/static/images/weather/38.png b/src/static/images/weather/38.png
diff --git a/src/static/images/weather/39.png b/src/static/images/weather/39.png
diff --git a/src/static/images/weather/4.png b/src/static/images/weather/4.png
diff --git a/src/static/images/weather/40.png b/src/static/images/weather/40.png
diff --git a/src/static/images/weather/41.png b/src/static/images/weather/41.png
diff --git a/src/static/images/weather/42.png b/src/static/images/weather/42.png
diff --git a/src/static/images/weather/43.png b/src/static/images/weather/43.png
diff --git a/src/static/images/weather/44.png b/src/static/images/weather/44.png
diff --git a/src/static/images/weather/45.png b/src/static/images/weather/45.png
diff --git a/src/static/images/weather/46.png b/src/static/images/weather/46.png
diff --git a/src/static/images/weather/47.png b/src/static/images/weather/47.png
diff --git a/src/static/images/weather/5.png b/src/static/images/weather/5.png
diff --git a/src/static/images/weather/6.png b/src/static/images/weather/6.png
diff --git a/src/static/images/weather/7.png b/src/static/images/weather/7.png
diff --git a/src/static/images/weather/8.png b/src/static/images/weather/8.png
diff --git a/src/static/images/weather/9.png b/src/static/images/weather/9.png
diff --git a/src/static/images/weather/na.png b/src/static/images/weather/na.png
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
@@ -9,10 +9,10 @@ $textColor: $primary2Color;
 $backgroundColor: rgba(239, 242, 245, 1);
 $map1Primary: #DB7C00;
 $map1Accent: #FAF1E8;
-$map2Primary: #9320A2;
-$map2Accent: #F6ECF5;
-$map3Primary: #749C68;
-$map3Accent: #F4F9F2;
+$map2Primary: #749C68;
+$map2Accent: #F4F9F2;
+$map3Primary: #9320A2;
+$map3Accent: #F6ECF5;
 
 :export { navColor: $navColor; }
 :export { primary1Color: $primary1Color; }