new design for rendertest #8
@ -274,13 +274,22 @@ table {
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
line-height: normal;
|
||||
/*overflow: hidden;*/ /* ugly chrome-based */
|
||||
}
|
||||
th, td {
|
||||
padding: 0.15rem;
|
||||
border: none;
|
||||
}
|
||||
tr {
|
||||
padding: 0.15rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
tr a {
|
||||
text-decoration: none;
|
||||
}
|
||||
th {
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
th.table-sticky {
|
||||
position: sticky;
|
||||
@ -304,4 +313,17 @@ ul.list {
|
||||
margin: 0;
|
||||
}
|
||||
ul.list li { display: inline-block; margin-left: 10px; } /* FIXME: flex or grid */
|
||||
ul.list li:first-child { margin-left: 0;}
|
||||
ul.list li:first-child { margin-left: 0;}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
summary:before {
|
||||
content: "📁\FE0F +";
|
||||
margin: -5px 5px 0 0;
|
||||
}
|
||||
details[open] summary:before {
|
||||
content: "📂\FE0F −";
|
||||
}
|
||||
|
||||
|
||||
116
render/index.js
116
render/index.js
@ -49,7 +49,6 @@ function makeTable(fields, data, attrs_func) {
|
||||
|
||||
const field_func = f.tags_func ? f.tags_func : fieldFuncDefault;
|
||||
const tags = field_func(value, d);
|
||||
let attrs = null;
|
||||
|
||||
// if (f.good && f.bad) {
|
||||
// const rating = linearStep(value, f.good, f.bad);
|
||||
@ -60,7 +59,7 @@ function makeTable(fields, data, attrs_func) {
|
||||
// };
|
||||
// attrs = {style: `background-color: rgb(${c.r}, ${c.g}, ${c.b})`};
|
||||
// }
|
||||
ret.push(Tag('td', attrs, null, tags));
|
||||
ret.push(Tag('td', null, null, tags));
|
||||
}
|
||||
return ret;
|
||||
})()));
|
||||
@ -72,9 +71,9 @@ function makeTable(fields, data, attrs_func) {
|
||||
function buildTestResultsTable(data) {
|
||||
const fields = [
|
||||
{label: 'Test', field: 'test', tags_func: sectionLink},
|
||||
{label: 'Channel', field: 'channel', tags_func: sectionLink},
|
||||
{label: 'Δ, %', field: 'diff_pct'},
|
||||
{label: 'Failed', field: 'fail'},
|
||||
{label: 'Channel', field: 'channel', },
|
||||
{label: 'Δ, %', field: 'diff_pct', },
|
||||
{label: 'Failed', field: 'fail', },
|
||||
];
|
||||
|
||||
return [makeTable(fields, data, rowAttribs)];
|
||||
@ -120,12 +119,46 @@ function buildData(table, images, data, sort) {
|
||||
}
|
||||
table.replaceChildren(...buildTestResultsTable(data));
|
||||
images.replaceChildren(...buildTestResultImages(data));
|
||||
|
||||
for (let block of images.querySelectorAll(".image-container")) {
|
||||
block.addEventListener("click", function() {
|
||||
let diffElement = this.querySelector(".block-diff");
|
||||
diffElement.classList.toggle("show_diff");
|
||||
});
|
||||
};
|
||||
|
||||
for (let tr of document.querySelectorAll("table tr")) {
|
||||
tr.addEventListener("click", function() {
|
||||
this.querySelector("a").click();
|
||||
});
|
||||
}
|
||||
|
||||
saveToLocalStorage("rendertest_tablesort", sort);
|
||||
}
|
||||
|
||||
const saveToLocalStorage = debounce((key, value) => {
|
||||
localStorage.setItem(key, value);
|
||||
});
|
||||
const loadFromLocalStorage = (key) => {
|
||||
const value = localStorage.getItem(key);
|
||||
if (isNaN(value)) {
|
||||
switch(value) { // ugly textual localStorage
|
||||
case "true":
|
||||
return true;
|
||||
case "false":
|
||||
return false;
|
||||
case "null":
|
||||
return null;
|
||||
default:
|
||||
return value;
|
||||
}
|
||||
}
|
||||
return parseFloat(value); // fix !!"0" = true
|
||||
}
|
||||
|
||||
|
||||
window.onload = () => {
|
||||
const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]');
|
||||
const themeOptionsDiv = document.querySelector(".theme-options");
|
||||
|
||||
function updateLinkRel(linkElements, id) {
|
||||
for (const link of linkElements) {
|
||||
const themeName = link.getAttribute("data-theme");
|
||||
@ -135,7 +168,6 @@ window.onload = () => {
|
||||
: link.rel + " alternate";
|
||||
}
|
||||
}
|
||||
// themes
|
||||
let themes = [];
|
||||
for (const linkElement of linkElements) {
|
||||
const themeName = linkElement.getAttribute("data-theme");
|
||||
@ -152,15 +184,10 @@ window.onload = () => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
function changeAnimationDuration(newDuration) {
|
||||
document.documentElement.style.setProperty('--animation-duration', newDuration + 'ms');
|
||||
}
|
||||
const saveToLocalStorage = debounce((key, value) => {
|
||||
localStorage.setItem(key, value);
|
||||
});
|
||||
const loadFromLocalStorage = localStorage.getItem;
|
||||
|
||||
|
||||
function syncSliderValues(event) {
|
||||
changeAnimationDuration(event.target.value);
|
||||
const value = event.target.value;
|
||||
@ -169,10 +196,18 @@ window.onload = () => {
|
||||
otherInput.value = value;
|
||||
saveToLocalStorage("rendertest_switchfrequency", value);
|
||||
}
|
||||
|
||||
|
||||
let isPaused = false;
|
||||
let gridContainer, sidebarOptions, numberInput, rangeInput, table, images;
|
||||
|
||||
const tableSort = !!loadFromLocalStorage("rendertest_tablesort");
|
||||
const sidebarPos = loadFromLocalStorage("rendertest_sidebarpos");
|
||||
|
||||
function uglyChecked(value) { // fast hack
|
||||
return value ? {"checked": "checked"} : {};
|
||||
}
|
||||
|
||||
// TODO: simplification and bindings
|
||||
gridContainer = Tag("div", {"class": "grid-container"}, null, [
|
||||
Tag("div", {"class": "sidebar"}, null, [
|
||||
sidebarOptions = Tag("div", {"class": "panel", "id": "options"}, null, [
|
||||
@ -230,6 +265,12 @@ window.onload = () => {
|
||||
isPaused = !isPaused;
|
||||
})
|
||||
]),
|
||||
/* future
|
||||
Tag("details", null, null, [
|
||||
Tag("summary", null, "Advanced options"),
|
||||
|
||||
]),
|
||||
*/
|
||||
Tag("div", null, null, [
|
||||
Tag("b", null, null, [
|
||||
Tag("span", {"class": "emoji"}, "🧻"),
|
||||
@ -252,16 +293,16 @@ window.onload = () => {
|
||||
Tag("span", {"class": "emoji"}, "🧲"),
|
||||
Text(" position"),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "left", "checked": "checked"}, null, null, "input", (e) => {
|
||||
console.log(e);
|
||||
Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "left", ...uglyChecked(sidebarPos == "left")}, null, null, "input", (e) => {
|
||||
gridContainer.classList.toggle("reversed");
|
||||
saveToLocalStorage("rendertest_sidebarpos", e.target.value);
|
||||
}),
|
||||
Text(" left")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "right"}, null, null, "input", (e) => {
|
||||
console.log(e);
|
||||
Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "right", ...uglyChecked(sidebarPos == "right")}, null, null, "input", (e) => {
|
||||
gridContainer.classList.toggle("reversed");
|
||||
saveToLocalStorage("rendertest_sidebarpos", e.target.value);
|
||||
}),
|
||||
Text(" right")
|
||||
]),
|
||||
@ -282,7 +323,6 @@ window.onload = () => {
|
||||
Text(" mini")
|
||||
])
|
||||
]),
|
||||
|
||||
]),
|
||||
]),
|
||||
Tag("div", null, null, [
|
||||
@ -296,12 +336,12 @@ window.onload = () => {
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "image_position", "value": "center", "checked": "checked"}),
|
||||
Text(" center")
|
||||
Text(" center ")
|
||||
]),
|
||||
Tag("b", null, null, [
|
||||
Tag("span", {"class": "emoji"}, "🖼"),
|
||||
Tag("label", null, null, [
|
||||
Text(" Image padding"),
|
||||
Text(" vertical padding"),
|
||||
Tag("input", {"type": "checkbox", "name": "all_diff", "checked": "checked"}, null, null, "input", (e) => {
|
||||
images.classList.toggle("padding");
|
||||
})
|
||||
@ -323,13 +363,13 @@ window.onload = () => {
|
||||
Text(" Sort table by Failed")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "sort_table", "value": "yes", "checked": "checked"}, null, null, "input", (e) => {
|
||||
Tag("input", {"type": "radio", "name": "sort_table", "value": "yes", ...uglyChecked(tableSort)}, null, null, "input", (e) => {
|
||||
buildData(table, images, data, true);
|
||||
}),
|
||||
Text(" yes")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "sort_table", "value": "no"}, null, null, "input", (e) => {
|
||||
Tag("input", {"type": "radio", "name": "sort_table", "value": "no", ...uglyChecked(!tableSort)}, null, null, "input", (e) => {
|
||||
buildData(table, images, data, false);
|
||||
}),
|
||||
Text(" no")
|
||||
@ -350,33 +390,13 @@ window.onload = () => {
|
||||
])
|
||||
])
|
||||
document.body.appendChild(gridContainer);
|
||||
|
||||
buildData(table, images, data, true);
|
||||
|
||||
for (let block of document.querySelectorAll(".image-container")) {
|
||||
block.addEventListener("click", function() {
|
||||
let diffElement = this.querySelector(".block-diff");
|
||||
diffElement.classList.toggle('show_diff');
|
||||
});
|
||||
};
|
||||
buildData(table, images, data, tableSort);
|
||||
|
||||
|
||||
|
||||
function handleCheckboxChange(checkboxId, key) {
|
||||
var checkbox = document.getElementById(checkboxId);
|
||||
saveToLocalStorage(key, checkbox.checked);
|
||||
// TODO: remove this
|
||||
if (sidebarPos == "right") {
|
||||
gridContainer.classList.toggle("reversed");
|
||||
}
|
||||
function handleRadioChange(radioGroupId, key) {
|
||||
var radios = document.getElementsByName(radioGroupId);
|
||||
for (var i = 0; i < radios.length; i++) {
|
||||
if (radios[i].checked) {
|
||||
saveToLocalStorage(key, radios[i].value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user