Start Binnovation build

app/components/canvas-element/template.hbs

@@ -61,6 +61,9 @@
         {{stories/complete/rta-daily-accidents}}
         {{stories/complete/rta-pedestrians-vehicles}}
         --}}
+
+        {{stories/complete/binnovation/bin-levels}}
+        {{stories/complete/binnovation/motivational-messages}}
 
         {{#if currentCanvas}}
             {{#each currentCanvas.stories as |story|}}

app/components/stories/complete/binnovation/bin-levels/component.js

@@ -0,0 +1,61 @@
+/* global Ember, hebeutils, _ */
+import DefaultStory from 'hebe-dash/components/stories/story-types/default-story/component';
+
+export default DefaultStory.extend({
+    // Story settings (including default values)
+    // Uncomment any setting you need to change, delete any you don't need
+    initialConfig: {
+        title: 'How full is my bin?', // (Provide a story title)
+        subTitle: '', // (Provide a story subtitle)
+        scroll: false, // (Should the story vertically scroll its content?)
+        showHeaderBorder: false,
+        viewOnly: true,
+        showLoading: true
+    },
+
+    fillPercentage: 0,
+    fillPercentageRemaining: Ember.computed('fillPercentage', function fillPercentageRemaining() {
+        const fillPercentage = this.get('fillPercentage');
+
+        return 100 - fillPercentage;
+    }),
+    fillText: Ember.computed('fillPercentage', function fillText() {
+        const fillPercentage = this.get('fillPercentage');
+
+        if (fillPercentage >= 80) {
+            return 'Getting full<br>Keep an eye on me';
+        } else {
+            return 'Plenty of room<br>Keep it coming';
+        }
+    }),
+    fillColour: Ember.computed('fillPercentage', function fillColour() {
+        const fillPercentage = this.get('fillPercentage');
+
+        if (fillPercentage >= 80) {
+            return 'orange';
+        } else {
+            return 'green';
+        }
+    }),
+    recyclingTrend: 'more', // more, same, less
+    recyclingPercentage: 6,
+    // batteryStatus: null, // can't write this until we get the sensor
+    // connectionStatus: null, // can't write this until we get the sensor
+    previousBinDay: null,
+    nextBinDay: null,
+    currentDate: null,
+    rotationAmount: null,
+    showProgress: false,
+    isBinDay: false,
+
+    onInsertElement: function() {
+        const _this = this;
+
+        setTimeout(function() {
+            _this.set('fillPercentage', 35);
+            _this.set('loaded', true);
+            _this.set('rotationAmount', 360);
+            _this.set('isBinDay', true);
+        });
+    }.on('didInsertElement')
+});

app/components/stories/complete/binnovation/bin-levels/template.hbs

@@ -0,0 +1,66 @@
+{{#stories/story-base}}
+
+    <p spc-bin-levels_label>{{if isBinDay 'Today is bin day!' 'My next bin day'}}</p>
+
+    <div spc-bin-levels="{{if isBinDay 'is-bin-day'}}">
+        <div spc-bin-levels-progress="{{if (gt rotationAmount 0) 'is-visible'}}">
+            <div spc-bin-levels-progress_slice="{{if (gt rotationAmount '50') '>50'}}">
+                <div spc-bin-levels-progress_bar="{{if isBinDay 'is-bin-day'}}" style="-webkit-transform: rotate({{rotationAmount}}deg); -moz-transform: rotate({{rotationAmount}}deg); transform: rotate({{rotationAmount}}deg);"></div>
+
+                {{!-- {{#if (gt rotationAmount '50')}} --}}
+                <div spc-bin-levels-progress_fill="{{if (gt rotationAmount '50') '>50'}} {{if isBinDay 'is-bin-day'}}"></div>
+                {{!-- {{/if}} --}}
+            </div>
+        </div>
+
+        <div spc-bin-levels_bin-day="{{if isBinDay 'is-bin-day'}}" style="-webkit-transform: rotate({{rotationAmount}}deg); -moz-transform: rotate({{rotationAmount}}deg); transform: rotate({{rotationAmount}}deg);" class="svg-bin icon-bin" data-grunticon-embed></div>
+        <div spc-bin-levels-fill>
+            <div spc-bin-levels-fill_inner>
+                <div spc-bin-levels-fill_circle="back">
+                    <div spc-bin-levels-fill_data="back">
+                        <p spc-bin-levels-fill_desc="back">{{{fillText}}}</p>
+                        <div spc-bin-levels-fill_label-level>
+                            <p spc-bin-levels-fill_label>Fill level</p>
+                            <p spc-bin-levels-fill_level>{{fillPercentage}}%</p>
+                        </div>
+                    </div>
+                </div>
+                <div spc-bin-levels-fill_circle="front {{fillColour}}" style="margin-top: {{fillPercentageRemaining}}%;">
+                    <div spc-bin-levels-fill_circle-inner="front" style="top: -{{fillPercentageRemaining}}%;">
+                        <div spc-bin-levels-fill_data="front">
+                            <p spc-bin-levels-fill_desc="front">{{{fillText}}}</p>
+                            <div spc-bin-levels-fill_label-level>
+                                <p spc-bin-levels-fill_label="front">Fill level</p>
+                                <p spc-bin-levels-fill_level="front">{{fillPercentage}}%</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div spc-bin-levels-stats>
+        <div cpn-table="fixed">
+            <div cpn-table_cell="middle" cpn-width="50%" cpn-padding="all-half">
+                <div spc-bin-levels-stats_icon data-grunticon-embed class="svg-bin icon-bin"></div>
+                {{#if (eq recyclingTrend 'more')}}
+                <p spc-bin-levels-stats_update>You have recycled {{recyclingPercentage}}% more than usual so far</p>
+                {{/if}}
+
+                {{#if (eq recyclingTrend 'less')}}
+                <p spc-bin-levels-stats_update>You have recycled {{recyclingPercentage}}% less than usual so far</p>
+                {{/if}}
+
+                {{#if (eq recyclingTrend 'same')}}
+                <p spc-bin-levels-stats_update>You have recycled the same as usual so far</p>
+                {{/if}}
+            </div>
+            <div cpn-table_cell="middle" cpn-width="50%" cpn-bg-color="white" cpn-padding="top-half right bottom-half left">
+                <p spc-bin-levels-stats_status>Battery</p>
+                <p spc-bin-levels-stats_status>Connected</p>
+            </div>
+        </div>
+    </div>
+
+{{/stories/story-base}}

app/components/stories/complete/binnovation/motivational-messages/component.js

@@ -0,0 +1,29 @@
+/* global Ember, hebeutils, _ */
+import DefaultStory from 'hebe-dash/components/stories/story-types/default-story/component';
+
+export default DefaultStory.extend({
+    // Story settings (including default values)
+    // Uncomment any setting you need to change, delete any you don't need
+    initialConfig: {
+        title: '', // (Provide a story title)
+        subTitle: '', // (Provide a story subtitle)
+        height: '1', // (Set the height of the story)
+        scroll: false, // (Should the story vertically scroll its content?)
+        showLoading: true,
+        viewOnly: true,
+        showHeaderBorder: false
+    },
+
+    primaryMessage: null,
+    secondaryMessage: null,
+
+    onInsertElement: function() {
+        const _this = this;
+
+        setTimeout(function() {
+            _this.set('loaded', true);
+            _this.set('primaryMessage', 'You are recyling 6% more than when we started');
+            _this.set('secondaryMessage', 'We will save the rainforest in no time... Keep it up');
+        });
+    }.on('didInsertElement')
+});

app/components/stories/complete/binnovation/motivational-messages/template.hbs

@@ -0,0 +1,14 @@
+{{#stories/story-base}}
+
+    <div spc-mot-msg cpn-clearfix>
+        <div spc-mot-msg_graphic-outer>
+            <div spc-mot-msg_graphic data-grunticon-embed class="svg-bin icon-bin"></div>
+        </div>
+
+        <div cpn-padding="top" cpn-overflow="hidden">
+            <p spc-mot-msg_pri>{{primaryMessage}}</p>
+            <p spc-mot-msg_sec>{{secondaryMessage}}</p>
+        </div>
+    </div>
+
+{{/stories/story-base}}

app/styles/app.scss

@@ -153,4 +153,6 @@
 @import "components/stories/_bid/quick-search";
 @import "components/stories/_bid/search-people";
 @import "components/stories/_bid/bid-value-tile";
-*/
+*/
+@import "components/stories/_binnovation/bin-levels";
+@import "components/stories/_binnovation/motivational-messages";

app/styles/base/_styleguide.scss

@@ -29,7 +29,11 @@ body {
     &[solomon-app~="bid"] {
         color: $bid-dark-blue;
     }
-
+
+    &[solomon-app~="binnovation"] {
+        color: $binnovation-black;
+    }
+
     > .ember-view {
         height:100%;
         position: relative;
@@ -218,6 +222,19 @@ img {
             z-index: 2;
         }
     }
+
+    [solomon-app~="binnovation"] & {
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: rem(3px);
+            background-color: $binnovation-black;
+            z-index: 2;
+        }
+    }
 }
     .site-header__inner {
         width: 100%;
@@ -382,4 +399,4 @@ img {
                 padding-bottom: rem($spacing-base);
                 border-bottom: rem(1px) solid rgba(0,0,0,.1);
                 margin-bottom: rem($spacing-base * 2);
-            }
+            }

app/styles/components/_dashboard-logo.scss

@@ -18,6 +18,11 @@
         background-image: url('./img/nhs-logo.png');
         background-size: 100% 100%;
     }
+
+    [solomon-app~="binnovation"] & {
+        background-image: url('./img/binnovation/bradford-logo.png');
+        background-size: 100% 100%;
+    }
 }
 
 [spc-dashboard-logo="compact"] {
@@ -48,6 +53,11 @@
     [solomon-app~="bid"] & {
         display: none;
     }
+
+    [solomon-app~="binnovation"] & {
+        width: 96.25px;
+        height: 27.5px;
+    }
 }
 
 [spc-dashboard-logo="expanded"] {
@@ -92,4 +102,9 @@
             }
         }
     }
+
+    [solomon-app~="binnovation"] & {
+        width: 192.5px;
+        height: 55px;
+    }
 }

app/styles/components/_manipulation-panel.scss

@@ -19,6 +19,10 @@ $panel-width: 375px;
     [solomon-app~="bid"] & {
         border-top-color: $bid-dark-blue;
     }
+
+    [solomon-app~="binnovation"] & {
+        border-top-color: $binnovation-black;
+    }
 }
 
 [cpn-manipulation-panel~="is-open"] {