From d1f489ec9bbb40904ff49707f03f0e8cf7e07a9a Mon Sep 17 00:00:00 2001 From: dm5wk Date: Tue, 28 May 2024 21:55:39 +0200 Subject: [PATCH] add css support --- band-plan.html | 92 +++++++++++++++++++++++++++++++++++++------------- 1 file changed, 69 insertions(+), 23 deletions(-) diff --git a/band-plan.html b/band-plan.html index 44faa72..70a3ec1 100644 --- a/band-plan.html +++ b/band-plan.html @@ -63,28 +63,30 @@ div>label { location.search.substr(1).split("&").forEach((param) => { let p = param.split("="); let key = p[0]; - if (key === "base") { - document.getElementById("base_plan").value = decodeURIComponent(p[1]); - } - if (key === "ext") { - document.getElementById("extension_plan").value = decodeURIComponent(p[1]); - } + ["base", "extension", "css"].forEach((id) => { + if (key === id) { + document.getElementById(id + "_input").value = decodeURIComponent(p[1]); + } + }); }); - update_plan(); + update_inputs(); - ["base", "extension"].forEach((id) => { - create_element_link(document.getElementById("download_" + id), document.getElementById(id + "_plan").value); - document.getElementById("download_" + id).addEventListener("keydown", (event) => { + ["base", "extension", "css"].forEach((id) => { + // download buttons + create_element_link(document.getElementById("download_" + id), document.getElementById(id + "_input").value); + // enter on input fields + document.getElementById(id + "_input").addEventListener("keydown", (event) => { if (event.key === "Enter") { - update_plan() + update_inputs() } }); }); create_element_link(document.getElementById("create_link"), function() { return window.location.href.split("?")[0] + "?" - + "base=" + document.getElementById("base_plan").value - + "&ext=" + document.getElementById("extension_plan").value; + + "base=" + document.getElementById("base_input").value + + "&extension=" + document.getElementById("extension_input").value; + + "&css=" + document.getElementById("css_input").value; }); }); @@ -250,10 +252,35 @@ div>label { if (typeof header["extension"].titles[column.field] !== "undefined") { column.title = header["extension"].titles[column.field]; } + + // add css styles for formatting based on cell values + // e. g. cell-bandwidth-2700 + // list like cw, narrow will be split to two entries + column.formatter = function(cell) { + let f = String(cell.getField()).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_"); + let v = String(cell.getValue()).toLowerCase().replace(/[^\w,]+/g, " ").replaceAll(" ", "_"); + v.split(",").forEach((s) => { + cell.getElement().classList.add("cell-" + f + "-" + s.replace(/^_+|_+$/g, "")); + }); + cell.getElement().classList.add("cell-" + f); + return cell.getValue(); + } }); return definitions; }, + // add css styles for formatting based on cell data + // e. g. row-mode-cw, row-bandwidth-200 + // list like cw, narrow will be split to two entries + rowFormatter: function(row){ + for (const [key, value] of Object.entries(row.getData())) { + let k = String(key).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_"); + let v = String(value).toLowerCase().replace(/[^\w,]+/g, " ").replaceAll(" ", "_"); + v.split(",").forEach((s) => { + row.getElement().classList.add("row-" + k + "-" + s.replace(/^_+|_+$/g, "")); + }); + } + }, }); document.getElementById("download").addEventListener("click", () => { @@ -263,7 +290,7 @@ div>label { } table.download( "pdf", - path.basename(document.getElementById("base_plan").value, ".yml") + ".pdf", + path.basename(document.getElementById("base_input").value, ".yml") + ".pdf", { orientation:"portrait" }, download_range); }); @@ -284,10 +311,10 @@ div>label { document.getElementById("error").innerText = ""; } - function update_plan() { + function update_inputs() { Promise.all([ - fetch(document.getElementById("base_plan").value, { mode: "cors" }), - fetch(document.getElementById("extension_plan").value, { mode: "cors" }), + fetch(document.getElementById("base_input").value, { mode: "cors" }), + fetch(document.getElementById("extension_input").value, { mode: "cors" }), ]).then((res) => { res.forEach((r) => { if (!r.ok) { @@ -306,35 +333,54 @@ div>label { }).catch((e) => { display_error(e); }); + + // add stylesheet, clear before adding + let el = document.getElementById("link_css"); + if (el !== null) { + el.remove(); + } + let href = document.getElementById("css_input").value; + if (href !== "") { + let link = document.createElement("link"); + link.type = "text/css"; + link.rel = "stylesheet"; + link.href = href; + link.id = "link_css"; + document.head.appendChild(link); + } } // used in button // eslint-disable-next-line no-unused-vars function help() { alert( - "Base plan and Extension plan: use your own yml file for a band plan, URLs are possible, CORS needs to be allowed for the files, download standard files for examples\n" + "Base plan, extension plan and css: use your own files for the band plan and css, URLs are possible, CORS needs to be allowed for the files, download standard files for examples\n" + "Filter rows with text in column headings, use filter starting with \"!\" as exclusion\n" + "Download list: saves .pdf of the current list (selection of rows apply)\n" + "Selection of rows with mouse possible\n" - + "Download plans: get the yml plans\n" - + "Create link: get link for currently selected plans for bookmarking\n" + + "Download plans/css: get the yml and css files\n" + + "Create link: get link for currently selected plans and css for bookmarking\n" ); }
- + +
+