hanze/iwa-panda2

commit 0162ec370a9db1382c742e5a03394ff9c5613b75
parent 4b56441ece797c4886a5815e029b5ae22c3c4a3f
Author: Kninteman <[email protected]>
Date:   Mon, 12 Jun 2023 21:48:43 +0200

Opmaak Table en Graph

Diffstat:
M
Model/Key.php
5
+++--
M
css/dashboard.css
21
+++++++++------------
M
js/panda.js
7
+++----
M
views/dashboard.html
11
+++++++++--
M
views/hdata.html
2
+-

5 files changed, 25 insertions(+), 21 deletions(-)
diff --git a/Model/Key.php b/Model/Key.php
@@ -16,7 +16,7 @@ Class Key{

     function retrieveZooData($key){
         $db = new mysqli("86.92.67.21", "friedel", "hailiwa", "wap2");
         $weather_data = [];
-        $query = "SELECT distinct temperature, wind_speed, nl.name as city
+        $query = "SELECT distinct temperature, wind_speed, nl.name as city, co.country as country
                   FROM weather_data wd
                   JOIN station s ON wd.station_name = s.name
                   JOIN contract_station cs ON cs.station_name = s.name
@@ -35,7 +35,8 @@ Class Key{

                 $wind_chill = windchill($row["temperature"], $row["wind_speed"]);
                 $weather_data[] = [
                     'windchill' => $wind_chill,
-                    'location' => $row['city']
+                    'location' => $row['city'],
+                    'country' => $row['country']
                 ];
             }
                 header('Content-Type: application/json');
diff --git a/css/dashboard.css b/css/dashboard.css
@@ -77,6 +77,7 @@ h1 {

     color: white;
     box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);
     border-radius: 4px;
+    font-size: 4vw;
 }
 
 .block2 {
@@ -87,6 +88,7 @@ h1 {

     height: auto;
     align-items: center;
     justify-content: center;
+    width: 100%;
 }
 
 .content-title {
@@ -103,20 +105,13 @@ h1 {

     margin: 5px;
 }
 
-.fancy-list {
-    list-style-type: none;
-    font-size: 4vw;
-    position: relative;
-    padding-left: 20px;
-    margin-bottom: 10px;
-}
-
-.fancy-list li {
-    margin-bottom: 10px;
+.topFiveTable {
+    margin: 2vw 5% 3vw 5%;
+    width: 90%;
 }
 
-.fancy-list li:first-child {
-    margin-top: 10px;
+.topFiveTable thead {
+    font-weight: bold;
 }
 
 #myChart {
@@ -154,10 +149,12 @@ h1 {

 
     /* DATA BLOCKS */
     .block1 {
+        font-size: 16px;
         margin: 20px auto 20px;
     }
 
     .block2 {
+        font-size: 16px;
         margin: 40px auto 40px;
     }
 
diff --git a/js/panda.js b/js/panda.js
@@ -11,7 +11,7 @@ fetch(`http://localhost:8080/api/${zooToken}`)

         windchills.sort(jsonSorter('windchill'));
         let slicedArray = windchills.slice(0, 5);
 
-        let weatherlist = document.querySelector('.table');
+        let weatherlist = document.querySelector('.topFiveTable tbody');
         for (i=0; i<5; i++) {
             let newRow = weatherlist.insertRow()
             let newCellRank = newRow.insertCell();
@@ -19,7 +19,7 @@ fetch(`http://localhost:8080/api/${zooToken}`)

             newCellRank.appendChild(newTextRank);
 
             let newCellZoo = newRow.insertCell();
-            let newTextZoo = document.createTextNode(slicedArray[i].location);
+            let newTextZoo = document.createTextNode(slicedArray[i].location + ' - ' + slicedArray[i].country );
             newCellZoo.appendChild(newTextZoo);
 
             let newCellChill = newRow.insertCell();
@@ -47,7 +47,7 @@ var ctx = document.getElementById('myChart').getContext('2d');

 var myChart = new Chart(ctx, {
     type: 'line',
     data: {
-        labels: ['Measurement 1', 'Measurement 2', 'Measurement 3', 'Measurement 4', 'Measurement 5'],
+        labels: ['Measurement 1', 'Measurement 2', 'Measurement 3', 'Measurement 4', 'Last Measurement'],
         datasets: [
             {
                 label: 'Chengdu Research Facility 1',
@@ -69,7 +69,6 @@ var myChart = new Chart(ctx, {

         responsive: true,
         scales: {
             y: {
-                beginAtZero: true,
                 grid: {
                     color: 'gray'
                 },
diff --git a/views/dashboard.html b/views/dashboard.html
@@ -16,7 +16,7 @@

         <li><a href="/dashboard" class="a-small-logo"><IMG class="img-small-logo" SRC="/img/small_logo.png"></a></li>
         <li><a href="/dashboard" class="a-big-logo"><IMG class="img-big-logo" SRC="/img/big-logo.png"></a></li>
         <li><a href="#" class="active">Dashboard</a></li>
-        <li><a href="/hdata">Historic Data</a></li>
+        <li><a href="/hdata">Historical Data</a></li>
         <li><a href="/logout">Logout</a></li>
     </ul>
 </nav>
@@ -30,7 +30,14 @@

         <div class="content-title">
             <h2>Top 5 - Zoo's</h2>
         </div>
-        <table class="table"></table>
+        <table class="topFiveTable">
+            <thead>
+            <td>Nr</td>
+            <td>Location</td>
+            <td>Windchill Corrected Temperature in Celsius</td>
+            </thead>
+            <tbody></tbody>
+        </table>
     </div>
 </div>
 
diff --git a/views/hdata.html b/views/hdata.html
@@ -15,7 +15,7 @@

     <li><a href="/dashboard" class="a-small-logo"><IMG class="img-small-logo" SRC="/img/small_logo.png"></a></li>
     <li><a href="/dashboard" class="a-big-logo"><IMG class="img-big-logo" SRC="/img/big-logo.png"></a></li>
     <li><a href="/dashboard">Dashboard</a></li>
-    <li><a href="#" class="active">Historic Data</a></li>
+    <li><a href="#" class="active">Historical Data</a></li>
     <li><a href="#">Logout</a></li>
   </ul>
 </nav>

Generated by gitin!