acn/plweb
acn/plweb
1
0
Fork 0
Code

Designanpassungen

Browse Source
This commit is contained in:
Anna Christina Naß 2025-07-12 12:16:28 +02:00
parent 10dafd2bdb
commit 217b157bee
5 changed files with 81 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/plweb.css Normal file
View File

@ -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;
}

18
js/pluslife.js
View File

@ -1,12 +1,12 @@
var chart; var chart;
var channel_colors = { var channel_colors = {
"0": {"color": "#a6cee3", "name": "Channel 1"}, "0": {"color": "#a6cee3", "name": "Kanal 1"},
"1": {"color": "#1f78b4", "name": "Channel 2"}, "1": {"color": "#1f78b4", "name": "Kanal 2"},
"2": {"color": "#b2df8a", "name": "Channel 3"}, "2": {"color": "#b2df8a", "name": "Kanal 3"},
"3": {"color": "#33a02c", "name": "Control Channel (4)"}, "3": {"color": "#33a02c", "name": "Kontrolle (4)"},
"4": {"color": "#fb9a99", "name": "Channel 5"}, "4": {"color": "#fb9a99", "name": "Kanal 5"},
"5": {"color": "#e31a1c", "name": "Channel 6"}, "5": {"color": "#e31a1c", "name": "Kanal 6"},
"6": {"color": "#fdbf6f", "name": "Channel 7"} "6": {"color": "#fdbf6f", "name": "Kanal 7"}
}; };
var channel_time_data = { var channel_time_data = {
@ -30,7 +30,7 @@ for (const [channel, time_values] of Object.entries(channel_time_data)) {
tension: 0.4, tension: 0.4,
channel: channel, channel: channel,
data: [] data: []
} }
//TODO: gaps? //TODO: gaps?
for (const [time, value] of time_values.entries()) { for (const [time, value] of time_values.entries()) {
if (! labels.includes(time)) labels.push(time); if (! labels.includes(time)) labels.push(time);
@ -63,7 +63,7 @@ var config = {
display: true, display: true,
title: { title: {
display: true, display: true,
text: "Test Time [min:sec]" text: "Zeit [min:sec]"
} }
}, },
y: { y: {

49
js/plweb.js
View File

@ -4,22 +4,37 @@ function get_human_readable_time(time){
return `${minutes}:${seconds}`; return `${minutes}:${seconds}`;
} }
// liefert einen Result-Text entweder für eine Zahl oder einen Text zurück
function result_text(result) { function result_text(result) {
const result_enum = {1: 'Negative', 2: 'Positive', 3: 'Invalid'}; const result_enum = {1: 'Negativ', 2: 'Positiv', 3: 'Ungültig'};
if (Number.isInteger(result)) return result_enum[Number(result)]; if (Number.isInteger(result))
else return result.toLowerCase().replace(/\b\w/g, s => s.toUpperCase()); 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) { function result_color(result) {
const result_color = {1: 'success', 2: 'danger', 3: 'dark'}; const result_color = {1: 'success', 2: 'danger', 3: 'dark'};
if (Number.isInteger(result)) return result_color[Number(result)]; if (Number.isInteger(result)) return result_color[Number(result)];
else { else {
switch (result.toLowerCase()) { switch (result.toLowerCase()) {
case "negative": case "negativ":
return result_color[1]; return result_color[1];
break; break;
case "positive": case "positiv":
return result_color[2]; return result_color[2];
break; break;
default: // includes invalid default: // includes invalid
@ -30,15 +45,19 @@ function result_color(result) {
} }
function parse_and_show_pluslife_result(overall_result, channel_results){ 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 = ''; channel_results_html = '';
for (const [channel, data] of Object.entries(channel_colors)) { for (const [channel, data] of Object.entries(channel_colors)) {
var result = result_text(channel_results[Number(channel)]); var result = result_text(channel_results[Number(channel)]);
var color = result_color(channel_results[Number(channel)]); var color = result_color(result);
if (channel == "3"){ if (channel == "3"){
result = (result == "Positive") ? "Detected" : "Not Detected"; result = (result == "Positiv") ? "OK" : "NOK";
color = (result == "Detected") ? "primary" : color; color = (result == "OK") ? "primary" : color;
} }
channel_results_html += `<span class="badge rounded-pill text-bg-${color} me-1">${channel}: ${result.slice(0,3)}</span>`; channel_results_html += `<span class="badge rounded-pill text-bg-${color} me-1">${channel}: ${result.slice(0,3)}</span>`;
@ -47,7 +66,17 @@ function parse_and_show_pluslife_result(overall_result, channel_results){
} }
function update_chart(timestamp, overall_result, result_channels, sampledata){ 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) if (overall_result || result_channels)
parse_and_show_pluslife_result(overall_result, result_channels); parse_and_show_pluslife_result(overall_result, result_channels);

2
templates/base.html.twig
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="css/styles.css"> --> <link rel="stylesheet" type="text/css" href="css/plweb.css">
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %}</title>
</head> </head>

20
templates/test.html.twig
View File

@ -16,19 +16,13 @@ var json = {{ test|raw }};
<div class="row justify-content-center chart-container" style="position: relative; min-height: 400px; max-height:600px;"> <div class="row justify-content-center chart-container" style="position: relative; min-height: 400px; max-height:600px;">
<canvas id="data"></canvas> <canvas id="data"></canvas>
</div> </div>
<div class="row text-center"> <table class="mx-auto w-auto ergebnistabelle">
<div class="col"> <tbody>
<div class="row"> <tr><th scope="row">Teststart:</th><td><span id="testdate"></span></tr>
<div class="col"> <tr><th scope="row">Ergebnis:</th><td><span id="testresult" class="gesamtergebnis"></span></tr>
<strong>Datum: </strong><span id="testdate"></span><br /> <tr><th scope="row">Kanäle:</th><td><div class="col justify-content-center" id="testresult_channels"></div></td></tr>
<strong>Ergebnis: </strong><span id="testresult"></span><br /> </tbody>
</div> </table>
</div>
<div class="row">
<div class="col justify-content-center" id="testresult_channels"></div>
</div>
</div>
</div>
</div> </div>
<div class="row text-center"> <div class="row text-center">
<div class="col"> <div class="col">