Difference between revisions of "Widget:WFSP-Dashboard"

From Open Energy Information

(Fixed a style conflict with dashboard icons)
 
(14 intermediate revisions by 4 users not shown)
Line 4: Line 4:
 
</pre>
 
</pre>
 
[[Category:Widgets]]
 
[[Category:Widgets]]
[[Category:WindForSchools]]
+
[[Category:Wind for Schools]]
 
</noinclude><includeonly><!--Widget:WFSP-Dashboard-->
 
</noinclude><includeonly><!--Widget:WFSP-Dashboard-->
 
<style>
 
<style>
Line 26: Line 26:
 
}
 
}
 
.wfsp-dashboard-gauge{
 
.wfsp-dashboard-gauge{
   height: 210px;
+
   height: 230px;
 
   margin: 5px 0;
 
   margin: 5px 0;
 
}
 
}
 
.wfsp-dashboard-gauge .row {
 
.wfsp-dashboard-gauge .row {
 +
  position: relative;
 
   height: 100%;
 
   height: 100%;
 
   margin: 5px 10px;
 
   margin: 5px 10px;
Line 40: Line 41:
 
.wfsp-dashboard-gauge a {
 
.wfsp-dashboard-gauge a {
 
   color: #fff;
 
   color: #fff;
 +
  text-decoration: underline;
 +
}
 +
.a-plus-icon {
 +
  background: url('https://openei.org/w/images/7/7e/A-plus.png');
 +
  background-repeat: no-repeat;
 +
  background-position: center center;
 +
  background-size: contain;
 +
  width: 75%;
 +
  height: 75%;
 +
  margin: 25px 0 0 0;
 
}
 
}
 
.wfsp-dashboard-icon {
 
.wfsp-dashboard-icon {
   height: 150px;
+
   height: 155px;
 
   text-align: center;
 
   text-align: center;
 
}
 
}
.wfsp-dashboard-gauge i.fa {
+
.wfsp-dashboard-icon i.fa {
 
   height: 100%;
 
   height: 100%;
 
   line-height: 150px;
 
   line-height: 150px;
 
   font-size: 6.5vw;
 
   font-size: 6.5vw;
 +
}
 +
 +
.wfsp-dashboard-gauge.education p,
 +
.wfsp-dashboard-gauge.status p,
 +
.wfsp-dashboard-gauge.energy p {
 +
  margin: 0;
 
}
 
}
 
.wfsp-dashboard-gauge.education .wfsp-dashboard-data,
 
.wfsp-dashboard-gauge.education .wfsp-dashboard-data,
 
.wfsp-dashboard-gauge.status .wfsp-dashboard-data  {
 
.wfsp-dashboard-gauge.status .wfsp-dashboard-data  {
   height: 124px;
+
   height: 155px;
 
   font-size: 1.75vw;
 
   font-size: 1.75vw;
   padding: 28px 0;
+
   padding: 25px 0 0 0;
 +
}
 +
.wfsp-dashboard-gauge.education .wfsp-dashboard-data p.content-detail,
 +
.wfsp-dashboard-gauge.status .wfsp-dashboard-data p.content-detail {
 +
  margin-bottom: 10px;
 +
}
 +
.wfsp-dashboard-gauge.education .wfsp-dashboard-data p.content-detail a {
 +
  margin-right: 40px;
 +
}
 +
.wfsp-dashboard-gauge.status .wfsp-dashboard-data {
 +
  height: 155px;
 +
  font-size: 1.75vw;
 +
  padding: 25px 0 0 0;
 
}
 
}
 
.wfsp-dashboard-gauge.energy .wfsp-dashboard-data {
 
.wfsp-dashboard-gauge.energy .wfsp-dashboard-data {
   padding: 0;
+
   height: 155px;
   padding: 16px 0;
+
   padding: 25px 0 0 0;
 
   font-size: 1.5vw;
 
   font-size: 1.5vw;
 
   font-size: 1.75vw;
 
   font-size: 1.75vw;
Line 100: Line 129:
 
}
 
}
 
.wfsp-dashboard-label {
 
.wfsp-dashboard-label {
 +
  position: absolute;
 +
  bottom: 10px;
 +
  left: 10px;
 +
  width: calc(100% - 20px);
 
   display: block;
 
   display: block;
 
   clear: both;
 
   clear: both;
Line 106: Line 139:
 
   color: #2196F3;
 
   color: #2196F3;
 
   background: #fff;
 
   background: #fff;
 +
}
 +
a .wfsp-dashboard-label .btn-caret {
 +
  color: #AFAFAF;
 +
}
 +
a:hover .wfsp-dashboard-label .btn-caret {
 +
  color: #21E411;
 +
}
 +
.wfsp-dashboard-label .btn-caret i.fa {
 +
  font-size: 20px;
 +
  line-height: 1;
 
}
 
}
 
.wfsp-dashboard-note {
 
.wfsp-dashboard-note {
Line 142: Line 185:
 
}
 
}
 
.stickyHeader {
 
.stickyHeader {
 +
  display: block;
 
   position: absolute;
 
   position: absolute;
 
   background: #fff;
 
   background: #fff;
Line 233: Line 277:
 
@media screen and (max-width : 768px) {
 
@media screen and (max-width : 768px) {
 
   .wfsp-dashboard-gauge {
 
   .wfsp-dashboard-gauge {
     height: initial;
+
     height: 270px;
 
   }
 
   }
 
   .wfsp-dashboard-icon {
 
   .wfsp-dashboard-icon {
 
     height: 60px;
 
     height: 60px;
 +
    padding-top: 5px;
 
   }
 
   }
 
   .wfsp-dashboard-gauge i.fa {
 
   .wfsp-dashboard-gauge i.fa {
 
     font-size: 60px;
 
     font-size: 60px;
 
     line-height: initial;
 
     line-height: initial;
 +
  }
 +
  .a-plus-icon {
 +
    margin: 0;
 +
    width: 100%;
 +
    height: 100%;
 
   }
 
   }
 
   .wfsp-dashboard-gauge.education .wfsp-dashboard-data,
 
   .wfsp-dashboard-gauge.education .wfsp-dashboard-data,
 
   .wfsp-dashboard-gauge.status .wfsp-dashboard-data {
 
   .wfsp-dashboard-gauge.status .wfsp-dashboard-data {
     height: 90px;
+
     height: 230px;
 
     padding: 10px;
 
     padding: 10px;
 
     font-size: 3.75vw;
 
     font-size: 3.75vw;
 
     text-align: center;
 
     text-align: center;
 +
  }
 +
  .wfsp-dashboard-gauge.education .wfsp-dashboard-data p.content-detail a {
 +
    margin: 0;
 +
    padding: 0 15px;
 
   }
 
   }
 
   .wfsp-dashboard-gauge.energy {
 
   .wfsp-dashboard-gauge.energy {
Line 254: Line 308:
 
   }
 
   }
 
   .wfsp-dashboard-gauge.energy .wfsp-dashboard-data {
 
   .wfsp-dashboard-gauge.energy .wfsp-dashboard-data {
     height: 90px;
+
     height: 145px;
 
     font-size: 2.5vw;
 
     font-size: 2.5vw;
 
     font-size: 3vw;
 
     font-size: 3vw;
 
     text-align: left;
 
     text-align: left;
 +
    padding-top: 30px;
 
   }
 
   }
 
   .wfsp-dashboard-gauge.stats .wfsp-dashboard-data,
 
   .wfsp-dashboard-gauge.stats .wfsp-dashboard-data,
Line 279: Line 334:
 
     width: 50%;
 
     width: 50%;
 
     margin: 30px auto;
 
     margin: 30px auto;
 +
  }
 +
  .stickyHeader {
 +
    display: none;
 
   }
 
   }
 
}
 
}
 
@media screen and (min-width : 1400px) {
 
@media screen and (min-width : 1400px) {
 +
  .a-plus-icon {
 +
    margin-left: 20%;
 +
  }
 
   .wfsp-dashboard-gauge.education .wfsp-dashboard-data,
 
   .wfsp-dashboard-gauge.education .wfsp-dashboard-data,
 
   .wfsp-dashboard-gauge.status .wfsp-dashboard-data {
 
   .wfsp-dashboard-gauge.status .wfsp-dashboard-data {
 
     font-size: 2.5rem;
 
     font-size: 2.5rem;
 +
  }
 +
  .wfsp-dashboard-gauge.education .wfsp-dashboard-data {
 +
    padding-top: 25px;
 
   }
 
   }
 
   .wfsp-dashboard-gauge.energy .wfsp-dashboard-data {
 
   .wfsp-dashboard-gauge.energy .wfsp-dashboard-data {
Line 297: Line 361:
 
<script>
 
<script>
 
$(document).ready(function(){
 
$(document).ready(function(){
 +
  // Number of days since last report to be considered active.
 +
  var daysSinceLastViableReport = 10;
 +
  var lastViableReportTime = new Date();
 +
  lastViableReportTime.setDate(lastViableReportTime.getDate() - daysSinceLastViableReport);
 +
 
   //WFSP main page
 
   //WFSP main page
 
   if(location.pathname == "/wiki/Wind_for_Schools_Portal"){
 
   if(location.pathname == "/wiki/Wind_for_Schools_Portal"){
Line 328: Line 397:
 
             var turbineStatus = itemData[i].turbine_status.toString().replace(/,/g,'<br />');
 
             var turbineStatus = itemData[i].turbine_status.toString().replace(/,/g,'<br />');
 
             var systemStatus = itemData[i].system_status.toString().replace(/,/g,'<br />');
 
             var systemStatus = itemData[i].system_status.toString().replace(/,/g,'<br />');
             var lastReported = new Date((itemData[i].last_reported).concat(" UTC"));
+
             var lastReported = new Date((itemData[i].last_reported).concat(" UTC").replace(/-/g, "/"));
 +
 
 +
            var oneMonthAgo = new Date();
 +
            oneMonthAgo.setDate(oneMonthAgo.getDate() - 30);
  
             var oneWeekAgo = new Date();
+
             if (lastReported < lastViableReportTime) {
             oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+
              var statusCode = 'unregistered statusCell';
 +
              systemStatus = 'Not reporting';
 +
             }
  
             if (lastReported > oneWeekAgo) {reportingProjects += 1};
+
             if (lastReported > oneMonthAgo && lastReported >= lastViableReportTime) {reportingProjects += 1};
  
 
             wfspEnergy += turbineEnergy;
 
             wfspEnergy += turbineEnergy;
Line 350: Line 424:
 
             $('tr[data-id="'+turbineID+'"]').append('<td>'+turbinePower+'</td><td>'+turbineWindSpeed+'</td><td>'+turbineDailyEnergy+'</td><td>'+turbineEnergy+'</td><td>'+turbineStatus+'</td><td class="alert '+statusCode+'">'+systemStatus+'</td><td>'+String(lastReported).slice(0,21)+'</td>');
 
             $('tr[data-id="'+turbineID+'"]').append('<td>'+turbinePower+'</td><td>'+turbineWindSpeed+'</td><td>'+turbineDailyEnergy+'</td><td>'+turbineEnergy+'</td><td>'+turbineStatus+'</td><td class="alert '+statusCode+'">'+systemStatus+'</td><td>'+String(lastReported).slice(0,21)+'</td>');
 
           }
 
           }
          // console.log(reportingProjects);
 
 
           totalProjects = Object.keys(latestData).length;
 
           totalProjects = Object.keys(latestData).length;
 
           //health = Math.round((runningProjects/totalProjects)*100);
 
           //health = Math.round((runningProjects/totalProjects)*100);
Line 386: Line 459:
  
 
     //add table head <thead>
 
     //add table head <thead>
     $('.turbine-table table').prepend('<thead><tr><th class="active ascending">School</th><th>Location</th><th>Power (kW)</th><th>Wind (m/s)</th><th>Energy Today (kWh)</th><th>Total Energy (kWh)</th><th>Turbine Status</th><th>System Status</th><th>Last Reported</th></tr></thead>');
+
     $('.turbine-table table').prepend('<thead><tr><th class="active ascending">School</th><th>Location</th><th>Power (W)</th><th>Wind (m/s)</th><th>Energy Today (kWh)</th><th>Total Energy (kWh)</th><th>Turbine Status</th><th>System Status</th><th>Last Reported</th></tr></thead>');
  
 
     //add data-index to th elements
 
     //add data-index to th elements
Line 494: Line 567:
 
             var turbineStatus = itemData[i].turbine_status.toString().replace(/,/g,'<br />');
 
             var turbineStatus = itemData[i].turbine_status.toString().replace(/,/g,'<br />');
 
             var systemStatus = itemData[i].system_status.toString().replace(/,/g,'<br />');
 
             var systemStatus = itemData[i].system_status.toString().replace(/,/g,'<br />');
             var lastReported = String(new Date((itemData[i].last_reported).concat(" UTC"))).slice(0,21);
+
             var lastReported = new Date((itemData[i].last_reported).concat(" UTC").replace(/-/g, "/"));
 +
 
 +
            if (lastReported < lastViableReportTime) {
 +
              systemStatus = 'Not reporting';
 +
            }
 +
            lastReported = String(lastReported).slice(0,21);
  
 
             $('.watts').text(turbinePower.toFixed(2)*1000);
 
             $('.watts').text(turbinePower.toFixed(2)*1000);

Latest revision as of 11:19, 29 June 2018

This widget helps with Wind for Schools Portal Dashboard content.

{{#Widget:WFSP-Dashboard}}