Various fixes

City-of-Bloomington · Jan 20, 2016 · abee176 · abee176
1 parent b9e5708
commit abee176
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 58 deletions.
diff --git a/building/templates/unit_costs_snippet.html b/building/templates/unit_costs_snippet.html
@@ -7,7 +7,7 @@
     <table class="table">
         <tbody>
             <tr>
-                <td width="40%"><strong>Current Rent</strong></td>
+                <td width="35%"><strong>Current Rent</strong></td>
                 <td>${{ unit.rent|floatformat:2 }}</td>
             </tr>
             <tr>
@@ -38,7 +38,7 @@
         var state   = "{{building.state}}";
         var zip     = "{{building.postal_code}}";
 
-        document.rentrocketApp.run(run);
+        angular.module('rentrocketApp').run(run);
 
 
         function run($rootScope) {

diff --git a/content/templates/layout.html b/content/templates/layout.html
@@ -22,34 +22,20 @@
     <link href="/static/css/home.css" rel="stylesheet" type="text/css">
     <link href="/static/css/font-awesome.min.css" rel="stylesheet">
 
-    <!-- Ionic CSS -->
-    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
-    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
 
+    <!-- Spinner -->
+    <link href="/static/js/vendor/enerscore/enerscore.tpl.css" rel="stylesheet">    
+
+
+    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
     <script data-require="angular-resource@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-resource.js"></script>
 
 
+
     <!-- Enerscore Script Contrib -->
     <script type="text/javascript" src="/static/js/vendor/enerscore/enerscore.directive.js"></script>
 
-    <script>
-        (function() {
-
-            'use strict';
-
-            // Define the Rentrocket Angular App 
-            document.rentrocketApp = angular.module('rentrocketApp', [ 
-
-                // Ionic
-                'ionic',
-
-                // Directives
-                'enerscore.directive.enerscoreRentrocket',
-            ]);
-
-        }());
-
-    </script>
+
 
 
     {% block custom_css %}{% endblock %}    

diff --git a/static/js/vendor/enerscore/enerscore.directive.js b/static/js/vendor/enerscore/enerscore.directive.js
@@ -25,6 +25,11 @@
         ])
         .directive('enerscoreRentrocket', enerscoreDirectiveRentRocket);
 
+    angular.module('rentrocketApp', [ 
+                // Directives
+                'enerscore.directive.enerscoreRentrocket',
+            ]);
+
     function EnerscoreCtrl($scope, EnerscorePropertySearch) {
 
         var address = $scope.address;
@@ -47,6 +52,7 @@
             $scope.property = properties[0];
             $scope.propertyJson = JSON.stringify($scope.property, undefined, 4);
 
+            $scope.totalColor = "{color: 'red'}";
 
             console.log($scope.query);
 
@@ -177,8 +183,13 @@
 
         resource.prototype.score = function() {
             var self = this;
-            return score(self.year());
-        };
+            if (!self.energyScore)  {
+                return 'U';
+            }
+            return self.energyScore.energyScore;
+        }
+
+
 
         return resource;
 
@@ -211,27 +222,6 @@
         return address.address1 + ', ' + address.addressTown + ', ' + address.addressState + ' ' + address.addressPostalCode;
     }
 
-    function usage(yearBuilt, area) {
-
-        var k = (yearBuilt <= 1945) ? 1.284 :
-            (yearBuilt <= 1978) ? 1.073 :
-            (yearBuilt <= 2001) ? 0.922 :
-            (yearBuilt <= 2007) ? 0.859 :
-            (yearBuilt <= 2015) ? 0.737 : 0;
-
-        return k * area;
-    }
-
-    function score(yearBuilt) {
-
-        var es = (yearBuilt <= 1945) ? 'F' :
-            (yearBuilt <= 1978) ? 'D' :
-            (yearBuilt <= 2001) ? 'C' :
-            (yearBuilt <= 2007) ? 'B' :
-            (yearBuilt <= 2015) ? 'A' : 'N/A';
-
-        return es;
-    }
-
+
 
 }())
diff --git a/static/js/vendor/enerscore/enerscore.tpl.css b/static/js/vendor/enerscore/enerscore.tpl.css
@@ -0,0 +1,65 @@
+.enerscore {
+    margin: 0;
+    padding 0;
+}
+
+.enerscore .total {
+    color: #EF6A15;
+}
+
+.enerscore .breakdown > .row {
+    margin: 0;
+    padding: 0;
+}
+
+.spinner {
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: #EF6A15;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% { 
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% { 
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
diff --git a/static/js/vendor/enerscore/enerscore.tpl.html b/static/js/vendor/enerscore/enerscore.tpl.html
@@ -5,59 +5,65 @@
         </a>
     </td>
     <td ng-if="property">
-        <div class="row" style="margin: 0; padding: 0"> 
-            <div class="col-xs-2" style="margin: 0; padding: 0">
+        <div class="row enerscore"> 
+            <div class="col-xs-2">
                 <img src="http://assets.enerscore.com/assets/images/grades/{{property.score().toLowerCase()}}.png" width="25px" height="25px" />
             </div>
-            <div class="col-xs-10">
-                <div class="row" style="margin: 0; padding: 0">
+            <div class="col-xs-10 breakdown">
+                <div class="row">
                     <div class="col-xs-6">
                         <strong>Total</strong>
                     </div>
                     <div class="col-xs-6">
                         {{property.cost()}}
                     </div>
                 </div>
-                <div class="row" style="margin: 0; padding: 0">
+                <div class="row">
                     <div class="col-xs-6">
                         <strong>Electrical</strong>
                     </div>
                     <div class="col-xs-6">
                         {{property.electrical()}}
                     </div>
                 </div>
-                <div class="row" style="margin: 0; padding: 0">
+                <div class="row">
                     <div class="col-xs-6">
                         <strong>Heating</strong>
                     </div>
                     <div class="col-xs-6">
                         {{property.heating()}}
                     </div>
                 </div>
-                <div class="row" style="margin: 0; padding: 0">
+                <div class="row">
                     <div class="col-xs-6">
                         <strong>Cooling</strong>
                     </div>
                     <div class="col-xs-6">
                         {{property.cooling()}}
                     </div>
                 </div>
-                <div class="row" style="margin: 0; padding: 0">
+                <!-- <div class="row">
                     <div class="col-xs-6">
                         <strong>Water</strong>
                     </div>
                     <div class="col-xs-6">
                         {{property.water()}}
                     </div>
-                </div>
+                </div> -->
 
             </div>
 
         </div>
     </td>
     <td ng-if="!property">
-        <ion-spinner ng-if="!placeholder" icon="lines" class="spinner-calm"></ion-spinner>
-        <span ng-if="placeholder === 'unavailable'" style="margin: 0; padding: 0">
+        <div ng-if="!placeholder" class="spinner">
+          <div class="rect1"></div>
+          <div class="rect2"></div>
+          <div class="rect3"></div>
+          <div class="rect4"></div>
+          <div class="rect5"></div>
+        </div>
+        <span ng-if="placeholder === 'unavailable'">
             Enerscore unavailable at this time.<br />
             Click <a ng-href="{{query}}" target="_blank">here</a> for details.
         </span>