diff --git a/Changelog.md b/Changelog.md
index 5b13007..400070e 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -1,5 +1,9 @@
# Changelog
+## v0.3.0 - 1st February 2019
+
+ -
+
## v0.2.0 - 26th January 2019
The first entry!
diff --git a/client_src/css/popup.css b/client_src/css/popup.css
index 42ed9c8..f4c3796 100644
--- a/client_src/css/popup.css
+++ b/client_src/css/popup.css
@@ -4,11 +4,18 @@
h2.device-name { text-align: center; }
.device-name::after {
- content: "#" attr(data-id);
- float: right; margin-right: 1em;
-
- font-size: 80%;
- color: hsl(230, 45%, 65%);
+ content: "#" attr(data-id);
+ float: right; margin-right: 1em;
+
+ font-size: 80%;
+ color: hsl(230, 45%, 65%);
+}
+
+.tab-panes .tab-pane {
+ display: none
+}
+.tab-panes .active {
+ display: block
}
.tabs {
@@ -40,7 +47,7 @@ h2.device-name { text-align: center; }
color: hsl(252, 100%, 59%);
text-decoration: none;
}
-.tabs li a.selected { opacity: 1; }
+.tabs li.active a { opacity: 1; }
/* Default */
.tab-content { display: none; }
@@ -50,32 +57,32 @@ h2.device-name { text-align: center; }
.device-data {
display: flex; justify-content: center;
- min-height: 20em;
+ min-height: 20em;
padding-top: 1em;
}
.device-params { margin: 0 auto; }
.device-property-table {
- border-collapse: collapse;
+ border-collapse: collapse;
}
.device-property-table tr:nth-child(odd) {
- background: hsla(222, 100%, 70%, 0.25);
+ background: hsla(222, 100%, 70%, 0.25);
}
.device-property-table th {
- padding-right: 2em;
+ padding-right: 2em;
}
.device-property-table td:nth-child(2) {
- border-left: 0.2em solid hsl(222, 100%, 59%);
- padding-left: 0.5em;
+ border-left: 0.2em solid hsl(222, 100%, 59%);
+ padding-left: 0.5em;
}
.reading-types {
list-style-type: none;
padding: 0;
- display: flex;
- flex-direction: row;
+ display: flex;
+ flex-direction: row;
}
.reading-types button {
margin: 0.25em;
diff --git a/client_src/js/LayerDeviceMarkers.mjs b/client_src/js/LayerDeviceMarkers.mjs
index fc64746..0f25bb9 100644
--- a/client_src/js/LayerDeviceMarkers.mjs
+++ b/client_src/js/LayerDeviceMarkers.mjs
@@ -5,6 +5,7 @@ import 'leaflet.markercluster';
// import CreateElement from 'dom-create-element-query-selector';
// We're using the git repo for now until an update is released, and rollup doesn't like that apparently
import CreateElement from '../../node_modules/dom-create-element-query-selector/src/index.js';
+import tabs from 'tabs';
import Config from './Config.mjs';
import DeviceReadingDisplay from './DeviceReadingDisplay.mjs';
@@ -87,22 +88,21 @@ class LayerDeviceMarkers {
// Select a tab by default
window.location = "#tab-data";
- result.appendChild(CreateElement("ul.tabs"));
- let tabs = result.querySelector(".tabs");
- tabs.innerHTML = `Info
- Data`;
- tabs.addEventListener("click", (event) => {
- tabs.querySelectorAll("a").forEach((el) => el.classList.remove("selected"));
- event.target.classList.add("selected");
- })
+ let tabContainer = CreateElement("div.tab-container",
+ CreateElement("ul.tabs",
+ CreateElement("li", CreateElement("a.tab.active", "Info")),
+ CreateElement("li", CreateElement("a.tab", "Data"))
+ ),
+ CreateElement("div.tab-panes",
+ CreateElement("div.device-params.tab-pane.active")
+ // The tab pane for the graph is added dynamically below
+ )
+ );
+ result.appendChild(tabContainer);
// ----------------------------------
- let data_container = CreateElement("div.device-data",
- CreateElement("div.device-params.tab-content#tab-info")
- );
- result.appendChild(data_container);
- let params_container = data_container.querySelector(".device-params");
+ let params_container = tabContainer.querySelector(".device-params");
let info_list = [];
for(let property in device_info) {
@@ -114,11 +114,8 @@ class LayerDeviceMarkers {
// some property values
let value = device_info[property];
- // Filter out undefined properties
- if(typeof value == "undefined" || value === null) {
+ if(typeof value == "undefined" || value === null)
value = "(not specified)";
- }
-
// If the value isn't a string, but is still 'truthy'
if(typeof value != "string") {
@@ -126,9 +123,7 @@ class LayerDeviceMarkers {
case "location":
value = `(${value[0]}, ${value[1]})`;
break;
- default:
- value = value.toString();
- break;
+ default: value = value.toString(); break;
}
}
@@ -138,7 +133,9 @@ class LayerDeviceMarkers {
CreateElement("td.value", value)
));
}
- params_container.appendChild(CreateElement("table.device-property-table", ...info_list));
+ params_container.appendChild(
+ CreateElement("table.device-property-table", ...info_list)
+ );
params_container.appendChild(CreateElement("p.device-notes",
CreateElement("em", device_info.other || "")
@@ -146,14 +143,15 @@ class LayerDeviceMarkers {
// ----------------------------------
- // TODO: Allow the user to change the reading type
let chart_device_data = new DeviceReadingDisplay(Config, device_info.id);
chart_device_data.setup("PM25").then(() =>
console.info("[layer/markers] Device chart setup complete!")
);
- chart_device_data.display.classList.add("tab-content");
- chart_device_data.display.setAttribute("id", "tab-data");
- data_container.appendChild(chart_device_data.display);
+ chart_device_data.display.classList.add("tab-pane");
+ tabContainer.querySelector(".tab-panes").appendChild(chart_device_data.display);
+
+
+ tabs(tabContainer);
// ----------------------------------
diff --git a/package-lock.json b/package-lock.json
index 0c2c4c1..02786d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4830,6 +4830,11 @@
"whet.extend": "~0.9.9"
}
},
+ "tabs": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/tabs/-/tabs-0.2.0.tgz",
+ "integrity": "sha1-Rw9vL6VGYGTrGpUB10wWqIPPv9o="
+ },
"terser": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-3.14.1.tgz",
diff --git a/package.json b/package.json
index ec21d11..77a53b1 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
"leaflet.markercluster": "^1.4.1",
"moment": "^2.23.0",
"nanomodal": "^5.1.1",
- "smartsettings": "^1.2.3"
+ "smartsettings": "^1.2.3",
+ "tabs": "^0.2.0"
},
"devDependencies": {
"@types/chart.js": "^2.7.42",