render
/
spoc-bot-vr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a select

main
bel 2024-04-14 10:22:43 -06:00
parent 39ed9280e1
commit 60017a8d3a
1 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
report.tmpl
View File

@ -20,19 +20,20 @@
allMessages.map((message) => { allMessages.map((message) => {
Object.keys(fieldsToOptions).map((field) => {fieldsToOptions[field][message[field]] = true}); Object.keys(fieldsToOptions).map((field) => {fieldsToOptions[field][message[field]] = true});
}); });
Object.keys(fieldsToOptions).map((field) => {fieldsToOptions[field] = Object.keys(fieldsToOptions[field])}); Object.keys(fieldsToOptions).map((field) => {fieldsToOptions[field] = Object.keys(fieldsToOptions[field]); fieldsToOptions[field].sort();});
document.getElementById("form").innerHTML = Object.keys(fieldsToOptions).map((field) => { document.getElementById("form").innerHTML = Object.keys(fieldsToOptions).map((field) => {
}).join(""); return `
<label for="${field}">${field}</label>
console.log(fieldsToOptions); <select name="${field}" multiple ${fieldsToOptions[field].length > 10 ? "size=10" : `size=${fieldsToOptions[field].length}`}>
` ${fieldsToOptions[field].map((option) => `
<select name="filter1" multiple> <option selected>${option}</option>
<option selected>a</option> `)}
<option selected>b</option> </select>
</select> `
` }).join("\n");
} }
function drawAll() { function drawAll() {
const messages = filterMessages(allMessages) const messages = filterMessages(allMessages)
drawEventVolumeByName(messages) drawEventVolumeByName(messages)
@ -40,11 +41,20 @@
drawEventVolumeByHour(messages) drawEventVolumeByHour(messages)
drawEventVolumeByAsset(messages) drawEventVolumeByAsset(messages)
} }
function filterMessages(messages) { function filterMessages(messages) {
const filters = document.getElementById("form");
console.log(filters);
return messages.map(() => {
});
} }
function drawEventVolumeByName() {} function drawEventVolumeByName() {}
function drawEventVolumeByWeekday() {} function drawEventVolumeByWeekday() {}
function drawEventVolumeByHour() {} function drawEventVolumeByHour() {}
function drawEventVolumeByAsset() {} function drawEventVolumeByAsset() {}
</script> </script>
<style> <style>
@ -61,10 +71,14 @@
rows, columns { border: 1px solid red; } rows, columns { border: 1px solid red; }
</style> </style>
</head> </head>
<body onload="fillForm()"> <body onload="fillForm(); drawAll();">
<h1>Report</h1> <h1>Report</h1>
<columns> <columns>
<form id="form" style="width: 10em; flex-shrink: 0;" onchange="drawAll()"> <form style="width: 16em; flex-shrink: 0;" onsubmit="drawAll(); return false;">
<columns>
<button type="submit">Apply</button>
</columns>
<rows id="form"></rows>
</form> </form>
<rows> <rows>
<rows> <rows>