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

16
js/pluslife.js
View File

@ -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 = {
@ -63,7 +63,7 @@ var config = {
display: true,
title: {
display: true,
text: "Test Time [min:sec]"
text: "Zeit [min:sec]"
}
},
y: {

49
js/plweb.js
View File

@ -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 += `<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){
$("#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);

2
templates/base.html.twig
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<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/styles.css"> -->
<link rel="stylesheet" type="text/css" href="css/plweb.css">
<title>{% block title %}{% endblock %}</title>
</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;">
<canvas id="data"></canvas>
</div>
<div class="row text-center">
<div class="col">
<div class="row">
<div class="col">
<strong>Datum: </strong><span id="testdate"></span><br />
<strong>Ergebnis: </strong><span id="testresult"></span><br />
</div>
</div>
<div class="row">
<div class="col justify-content-center" id="testresult_channels"></div>
</div>
</div>
</div>
<table class="mx-auto w-auto ergebnistabelle">
<tbody>
<tr><th scope="row">Teststart:</th><td><span id="testdate"></span></tr>
<tr><th scope="row">Ergebnis:</th><td><span id="testresult" class="gesamtergebnis"></span></tr>
<tr><th scope="row">Kanäle:</th><td><div class="col justify-content-center" id="testresult_channels"></div></td></tr>
</tbody>
</table>
</div>
<div class="row text-center">
<div class="col">