From 697d857e7467c670eb72badc51d55b5b90e03535 Mon Sep 17 00:00:00 2001 From: Starbeamrainbowlabs Date: Fri, 1 Feb 2019 18:37:51 +0000 Subject: [PATCH] Refactor tabs to use a library. We still need to refactor the css to match, though --- Changelog.md | 4 +++ client_src/css/popup.css | 35 ++++++++++++-------- client_src/js/LayerDeviceMarkers.mjs | 48 +++++++++++++--------------- package-lock.json | 5 +++ package.json | 3 +- 5 files changed, 55 insertions(+), 40 deletions(-) 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",