add css support
This commit is contained in:
parent
1b7d9efaac
commit
1edb72ac38
|
|
@ -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"
|
||||
);
|
||||
}
|
||||
</script>
|
||||
<div>
|
||||
<label>Base Plan:
|
||||
<input name="plan" id="base_plan" type="text" value="band-plan-iaru_r1_hf.yml">
|
||||
<input id="base_input" type="text" value="band-plan-iaru_r1_hf.yml">
|
||||
</label>
|
||||
<label>Extension:
|
||||
<input name="plan" id="extension_plan" type="text" value="band-plan-de.yml">
|
||||
<input id="extension_input" type="text" value="band-plan-de.yml">
|
||||
</label>
|
||||
<button onclick="update_plan()">Change plans</button>
|
||||
<label>CSS:
|
||||
<input id="css_input" type="text" value="standard.css">
|
||||
</label>
|
||||
<button onclick="update_inputs()">Update</button>
|
||||
</div>
|
||||
<div id="togglebuttons"></div>
|
||||
<div>
|
||||
<button id="download">Download list</button>
|
||||
<button id="download_base">Download base plan</button>
|
||||
<button id="download_extension">Download extension plan</button>
|
||||
<button id="download_css">Download css file</button>
|
||||
<button id="create_link">Create link</button>
|
||||
<button onclick="help()">Help</button>
|
||||
</div>
|
||||
|
|
|
|||
25
standard.css
Normal file
25
standard.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
div.cell-bandwidth-20 {
|
||||
background-color: Salmon !important;
|
||||
}
|
||||
div.cell-bandwidth-200 {
|
||||
background-color: LightPink !important;
|
||||
}
|
||||
div.cell-bandwidth-500 {
|
||||
background-color: LightGreen !important;
|
||||
}
|
||||
div.cell-bandwidth-2700 {
|
||||
background-color: LightYellow !important;
|
||||
}
|
||||
div.cell-bandwidth-6000 {
|
||||
background-color: LightBlue !important;
|
||||
}
|
||||
div.cell-bandwidth-unrestricted {
|
||||
background-color: LightGray !important;
|
||||
}
|
||||
div.cell-bandwidth-undefined {
|
||||
background-color: Red !important;
|
||||
}
|
||||
div.tabulator-cell[class*='contest_preferred'] {
|
||||
background-color: Gold !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue