dm5wk/band-plan-web
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add range css selector

Browse source
This commit is contained in:
Wolfgang 2024-05-29 17:47:19 +02:00
parent a6e4aa701f
commit e181276de9
2 changed files with 29 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
band-plan.html
View file

@ -257,12 +257,15 @@ div>label {
// e. g. cell-bandwidth-2700 // e. g. cell-bandwidth-2700
// list like cw, narrow will be split to two entries // list like cw, narrow will be split to two entries
column.formatter = function(cell) { column.formatter = function(cell) {
let f = String(cell.getField()).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_"); let f = String(cell.getField()).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
let v = String(cell.getValue()).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,]+/g, " ").replaceAll(" ", "_"); let v = String(cell.getValue()).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,-]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
v.split(",").forEach((s) => { v.split(",").forEach((s) => {
cell.getElement().classList.add("cell-" + f + "-" + s.replace(/^_+|_+$/g, "")); cell.getElement().classList.add("cell-" + f + "-" + s.replace(/^_+|_+$/g, ""));
}); });
cell.getElement().classList.add("cell-" + f); cell.getElement().classList.add("cell-" + f);
if ((f === "frequency") && (v.indexOf("-") > -1)) {
cell.getElement().classList.add("cell-" + f + "-" + "is_range");
}
return cell.getValue(); return cell.getValue();
} }
}); });
@ -274,11 +277,14 @@ div>label {
// list like cw, narrow will be split to two entries // list like cw, narrow will be split to two entries
rowFormatter: function(row){ rowFormatter: function(row){
for (const [key, value] of Object.entries(row.getData())) { for (const [key, value] of Object.entries(row.getData())) {
let k = String(key).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_"); let k = String(key).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
let v = String(value).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,]+/g, " ").replaceAll(" ", "_"); let v = String(value).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,-]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
v.split(",").forEach((s) => { v.split(",").forEach((s) => {
row.getElement().classList.add("row-" + k + "-" + s.replace(/^_+|_+$/g, "")); row.getElement().classList.add("row-" + k + "-" + s.replace(/^_+|_+$/g, ""));
}); });
if ((k === "frequency") && (v.indexOf("-") > -1)) {
row.getElement().classList.add("row-" + k + "-" + "is_range");
}
} }
}, },
}); });

36
standard.css
View file

@ -1,25 +1,27 @@
div.cell-bandwidth-20 { .cell-bandwidth-20 {
background-color: Salmon !important; background-color: color-mix(in srgb, Salmon 50%, transparent);
} }
div.cell-bandwidth-200 { .cell-bandwidth-200 {
background-color: LightPink !important; background-color: color-mix(in srgb, Pink 50%, transparent);
} }
div.cell-bandwidth-500 { .cell-bandwidth-500 {
background-color: LightGreen !important; background-color: color-mix(in srgb, Green 50%, transparent);
} }
div.cell-bandwidth-2700 { .cell-bandwidth-2700 {
background-color: LightYellow !important; background-color: color-mix(in srgb, Yellow 50%, transparent);
} }
div.cell-bandwidth-6000 { .cell-bandwidth-6000 {
background-color: LightBlue !important; background-color: color-mix(in srgb, Blue 50%, transparent);
} }
div.cell-bandwidth-unrestricted { .cell-bandwidth-unrestricted {
background-color: LightGray !important; background-color: color-mix(in srgb, Gray 50%, transparent);
} }
div.cell-bandwidth-undefined { .row-bandwidth-undefined>.tabulator-cell {
background-color: Red !important; background-color: color-mix(in srgb, Red 50%, transparent);
} }
div.tabulator-cell[class*='contest_preferred'] { .cell-frequency:not(.cell-frequency-is_range) {
background-color: Gold !important; background-color: color-mix(in srgb, Cyan 50%, transparent);
}
[class*='contest_preferred'] {
background-color: color-mix(in srgb, Gold 30%, transparent);
} }