Refactor tabs to use a library.

We still need to refactor the css to match, though
This commit is contained in:
Starbeamrainbowlabs 2019-02-01 18:37:51 +00:00
parent f3addb3a93
commit 697d857e74
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
5 changed files with 55 additions and 40 deletions

View file

@ -1,5 +1,9 @@
# Changelog
## v0.3.0 - 1st February 2019
-
## v0.2.0 - 26th January 2019
The first entry!

View file

@ -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;

View file

@ -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 = `<li><a href="#tab-info">Info</a></li>
<li><a href="#tab-data">Data</a></li>`;
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);
// ----------------------------------

5
package-lock.json generated
View file

@ -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",

View file

@ -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",