From 217b157bee3e030200dc7a985b243e012d529ea7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anna=20Christina=20Na=C3=9F?= Date: Sat, 12 Jul 2025 12:16:28 +0200 Subject: [PATCH] Designanpassungen --- css/plweb.css | 25 ++++++++++++++++++++ js/pluslife.js | 18 +++++++-------- js/plweb.js | 49 ++++++++++++++++++++++++++++++++-------- templates/base.html.twig | 2 +- templates/test.html.twig | 20 ++++++---------- 5 files changed, 81 insertions(+), 33 deletions(-) create mode 100644 css/plweb.css diff --git a/css/plweb.css b/css/plweb.css new file mode 100644 index 0000000..3d937d0 --- /dev/null +++ b/css/plweb.css @@ -0,0 +1,25 @@ +.gesamtergebnis { + display: inline-block; + border-radius: 50rem; + white-space: nowrap; + padding: 0.1em 0.5em; +} + +.negativ { + border: 1px solid green; + background-color: lightgreen; +} + +.positiv { + border: 1px solid maroon; + background-color: red; +} + +.ungueltig { + border: 1px solid gray; + background-color: lightgray; +} +.ergebnistabelle { + border-spacing: 0.5em 3px; + border-collapse: separate; +} diff --git a/js/pluslife.js b/js/pluslife.js index 8e2a161..e2e1cbb 100644 --- a/js/pluslife.js +++ b/js/pluslife.js @@ -1,12 +1,12 @@ var chart; var channel_colors = { - "0": {"color": "#a6cee3", "name": "Channel 1"}, - "1": {"color": "#1f78b4", "name": "Channel 2"}, - "2": {"color": "#b2df8a", "name": "Channel 3"}, - "3": {"color": "#33a02c", "name": "Control Channel (4)"}, - "4": {"color": "#fb9a99", "name": "Channel 5"}, - "5": {"color": "#e31a1c", "name": "Channel 6"}, - "6": {"color": "#fdbf6f", "name": "Channel 7"} + "0": {"color": "#a6cee3", "name": "Kanal 1"}, + "1": {"color": "#1f78b4", "name": "Kanal 2"}, + "2": {"color": "#b2df8a", "name": "Kanal 3"}, + "3": {"color": "#33a02c", "name": "Kontrolle (4)"}, + "4": {"color": "#fb9a99", "name": "Kanal 5"}, + "5": {"color": "#e31a1c", "name": "Kanal 6"}, + "6": {"color": "#fdbf6f", "name": "Kanal 7"} }; var channel_time_data = { @@ -30,7 +30,7 @@ for (const [channel, time_values] of Object.entries(channel_time_data)) { tension: 0.4, channel: channel, data: [] - } + } //TODO: gaps? for (const [time, value] of time_values.entries()) { if (! labels.includes(time)) labels.push(time); @@ -63,7 +63,7 @@ var config = { display: true, title: { display: true, - text: "Test Time [min:sec]" + text: "Zeit [min:sec]" } }, y: { diff --git a/js/plweb.js b/js/plweb.js index 46ef3e2..d397fb2 100644 --- a/js/plweb.js +++ b/js/plweb.js @@ -4,22 +4,37 @@ function get_human_readable_time(time){ return `${minutes}:${seconds}`; } +// liefert einen Result-Text entweder für eine Zahl oder einen Text zurück function result_text(result) { - const result_enum = {1: 'Negative', 2: 'Positive', 3: 'Invalid'}; - if (Number.isInteger(result)) return result_enum[Number(result)]; - else return result.toLowerCase().replace(/\b\w/g, s => s.toUpperCase()); + const result_enum = {1: 'Negativ', 2: 'Positiv', 3: 'Ungültig'}; + if (Number.isInteger(result)) + return result_enum[Number(result)]; + else { + switch (result.toLowerCase()) { + case "negative": + return result_enum[1]; + break; + case "positive": + return result_enum[2]; + break; + default: + return result_enum[3]; + break; + } + } } +// liefert die Bootstrap-Farbcodes für ein Ergebnis function result_color(result) { const result_color = {1: 'success', 2: 'danger', 3: 'dark'}; if (Number.isInteger(result)) return result_color[Number(result)]; else { switch (result.toLowerCase()) { - case "negative": + case "negativ": return result_color[1]; break; - case "positive": + case "positiv": return result_color[2]; break; default: // includes invalid @@ -30,15 +45,19 @@ function result_color(result) { } function parse_and_show_pluslife_result(overall_result, channel_results){ - $("#testresult").append("Pluslife says: " + result_text(overall_result)); + $("#testresult").append(result_text(overall_result)); + if (result_text(overall_result) == "ungueltig") + $("#testresult").addClass("ungueltig"); + else + $("#testresult").addClass(result_text(overall_result).toLowerCase()); channel_results_html = ''; for (const [channel, data] of Object.entries(channel_colors)) { var result = result_text(channel_results[Number(channel)]); - var color = result_color(channel_results[Number(channel)]); + var color = result_color(result); if (channel == "3"){ - result = (result == "Positive") ? "Detected" : "Not Detected"; - color = (result == "Detected") ? "primary" : color; + result = (result == "Positiv") ? "OK" : "NOK"; + color = (result == "OK") ? "primary" : color; } channel_results_html += `${channel}: ${result.slice(0,3)}`; @@ -47,7 +66,17 @@ function parse_and_show_pluslife_result(overall_result, channel_results){ } function update_chart(timestamp, overall_result, result_channels, sampledata){ - $("#testdate").append(new Date(timestamp).toUTCString()); + var dateoptions = { + weekday: "short", + year: "numeric", + month: "long", + day: "numeric", + hour: "numeric", + minute: "2-digit", + timeZoneName: "short", + }; + var datum = new Date(timestamp).toLocaleString("de-DE", dateoptions); + $("#testdate").append(datum); if (overall_result || result_channels) parse_and_show_pluslife_result(overall_result, result_channels); diff --git a/templates/base.html.twig b/templates/base.html.twig index 47a4e6c..b25d732 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -4,7 +4,7 @@ - + {% block title %}{% endblock %} diff --git a/templates/test.html.twig b/templates/test.html.twig index 2303f10..4f5872e 100644 --- a/templates/test.html.twig +++ b/templates/test.html.twig @@ -16,19 +16,13 @@ var json = {{ test|raw }};
-
-
-
-
- Datum:
- Ergebnis:
-
-
-
-
-
-
-
+ + + + + + +
Teststart:
Ergebnis:
Kanäle: