Add device dropdown

frontend/home/index.html

@@ -28,6 +28,20 @@
             <div class="chart-container">
                 <canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
             </div>
+
+            <div id="filters">
+                <div>
+                    <div class="form-control">
+                        <label for="device-selector">Select device</label>
+                        <select id="device-selector">
+
+                        </select>
+                    </div>
+                </div>
+
+                <div></div>
+            </div>
+
             <div id="table-wrapper">
                 <table>
                     <thead>

frontend/scripts/home.js

@@ -97,6 +97,17 @@ function handleError(err) {
     document.getElementById("container").style.display = "none";
 }
 
+function addDeviceToDropdown(device) {
+    const opt = document.createElement("option");
+    opt.innerText = `${device.name} (${device.referenceId})`;
+    opt.value = device.id;
+    document.getElementById("device-selector").appendChild(opt);
+}
+
+function randomColorChannelValue() {
+    return Math.floor(Math.random() * 256);
+}
+
 async function fetchData(startDate = null, endDate = null) {
     const devices = await getDevices()
         .catch(handleError);
@@ -104,6 +115,8 @@ async function fetchData(startDate = null, endDate = null) {
     const deviceData = [];
 
     for (const device of devices) {
+        addDeviceToDropdown(device);
+
         const data = await getLogsOnDeviceId(device.id)
             .catch(handleError);
 
@@ -119,17 +132,24 @@ async function fetchData(startDate = null, endDate = null) {
     new Chart("myChart", {
         type: "line",
         data: {
-            datasets: deviceData.map(dataset => ({
-                label: "Temperature",
-                fill: false,
-                lineTension: 0.4,
-                backgroundColor: "rgba(0,0,255,1.0)",
-                borderColor: "rgba(0,0,255,0.1)",
-                data: dataset.map(log => ({
-                    x: new Date(log.date).getTime(),
-                    y: log.temperature,
-                })),
-            })),
+            datasets: deviceData.map((dataset, i) => {
+                const color = new Array(3)
+                    .fill(null)
+                    .map(randomColorChannelValue)
+                    .join(",");
+
+                return {
+                    label: devices[i].name,
+                    fill: false,
+                    lineTension: 0.4,
+                    backgroundColor: `rgba(${color}, 1.0)`,
+                    borderColor: `rgba(${color}, 0.1)`,
+                    data: dataset.map(log => ({
+                        x: new Date(log.date).getTime(),
+                        y: log.temperature,
+                    })),
+                };
+            }),
         },
         options: {
             parsing: false,

frontend/styles/home.css

@@ -15,6 +15,12 @@ body {
     border: 1px solid #DDD;
 }
 
+#filters {
+    margin: 2rem auto;
+    display: flex;
+    justify-content: space-between;
+}
+
 table {
     font-family: arial, sans-serif;
     border-collapse: collapse;
@@ -104,3 +110,26 @@ table tr:not(:last-child) .temperature {
     background-color: #FCFCFC;
 }
 
+.form-control {
+    display: flex;
+    flex-direction: column;
+}
+
+label {
+    font-size: 0.85rem;
+    padding-left: 0.2rem;
+    color: #616161;
+}
+
+select {
+    background-color: white;
+    color: #424242;
+    border: 1px solid #DDD;
+    border-radius: 8px;
+    padding: 0.5rem 1rem;
+}
+
+select:focus {
+    border-color: #1E88E5;
+}
+