Implement pagination in table

frontend/home/index.html

@@ -30,14 +30,21 @@
             </div>
             <div id="table-wrapper">
                 <table>
-                    <tr>
-                        <th>Temperature</th>
-                        <th>Date</th>
-                        <th>Time</th>
-                        <th>Limits</th>
-                    </tr>
-                    <tbody id="TemperatureTable"></tbody>
+                    <thead>
+                        <tr>
+                            <th>Temperature</th>
+                            <th>Date</th>
+                            <th>Time</th>
+                            <th>Limits</th>
+                        </tr>
+                    </thead>
+                    <tbody id="table-body"></tbody>
                 </table>
+
+                <div id="view-more">
+                    &#9660; View more
+                    (Showing <span id="shown-log-amount"></span>/<span id="total-log-amount"></span>)
+                </div>
             </div>
         </div>
         <div id="error" class="error"></div>

frontend/scripts/home.js

@@ -37,15 +37,14 @@ async function buildChart(data) {
     });
 }
 
-function buildTable(data) {
-    var table = document.getElementById(`TemperatureTable`);
+const TABLE_PAGINATION_SIZE = 30;
 
+function buildTable(data, offset = 0) {
     data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 
-    // TODO allow showing more than 50 by e.g. clicking
-    data = data.slice(0, 50);
+    const page = data.slice(offset, offset + TABLE_PAGINATION_SIZE);
 
-    data.forEach((log) => {
+    page.forEach(log => {
         var averageTemp = (log.tempHigh + log.tempLow) / 2.0;
         var color;
         if (log.temperature >= log.tempHigh) {
@@ -66,7 +65,7 @@ function buildTable(data) {
         const date = new Date(log.date).toLocaleDateString();
         const time = new Date(log.date).toLocaleTimeString();
 
-        table.innerHTML += `
+        document.getElementById("table-body").innerHTML += `
             <tr>
                 <td class="temperature ${color}">${log.temperature}&deg;C</td>
                 <td>${date}</td>
@@ -75,6 +74,21 @@ function buildTable(data) {
             </tr>
         `;
     });
+
+    document.getElementById("shown-log-amount").innerText = Math.min(data.length, offset + TABLE_PAGINATION_SIZE);
+    document.getElementById("total-log-amount").innerText = data.length;
+
+    if (offset + TABLE_PAGINATION_SIZE >= data.length) {
+        document.getElementById("view-more").style.display = "none";
+
+        return;
+    }
+
+    document.getElementById("view-more").style.display = "block";
+
+    document.getElementById("view-more").onclick = () => {
+        buildTable(data, offset + TABLE_PAGINATION_SIZE);
+    }
 }
 
 function handleError(err) {
@@ -83,7 +97,7 @@ function handleError(err) {
     document.getElementById("container").style.display = "none";
 }
 
-async function init() {
+async function fetchData(startDate = null, endDate = null) {
     const devices = await getDevices()
         .catch(handleError);
 
@@ -140,7 +154,7 @@ async function init() {
     });
 }
 
-init();
+fetchData();
 
 document.querySelector(".logout-container").addEventListener("click", logout);
 

frontend/styles/home.css

@@ -8,30 +8,6 @@ body {
     margin: 0 2rem;
 }
 
-.topnav {
-    overflow: hidden;
-    background-color: #333;
-}
-
-.topnav a {
-    float: left;
-    color: #f2f2f2;
-    text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
-    font-size: 17px;
-}
-
-.topnav a:hover {
-    background-color: #ddd;
-    color: black;
-}
-
-.topnav a.active {
-    background-color: #04aa6d;
-    color: white;
-}
-
 #table-wrapper {
     overflow: hidden;
     border-radius: 8px;
@@ -110,11 +86,21 @@ table tr:not(:last-child) .temperature {
     margin: 2rem;
 }
 
-.chartContainer{
-    margin: 20px;
+#view-more {
+    display: none;
+    text-align: center;
+    padding: 0.5rem;
+    color: #616161;
+    background-color: white;
+    cursor: pointer;
+    transition-duration: 100ms;
 }
 
-.tableConatiner{
-    display: flex;
-    justify-content: center;
+#view-more:hover {
+    color: #212121;
 }
+
+#view-more:active {
+    background-color: #FCFCFC;
+}
+