yetangitu/Battery-Emulator
1
0
Fork 0
mirror of https://github.com/dalathegreat/Battery-Emulator.git synced 2025-10-04 02:09:30 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fix formatting for events table

Browse source
This commit is contained in:
Daniel 2024-02-11 22:27:18 +02:00
parent e13dd0d363
commit 5502851253
2 changed files with 87 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

77
Software/src/devboard/webserver/events_html.cpp
View file

@ -8,19 +8,69 @@ const char EVENTS_HTML_START[] = R"=====(
.event { display: flex; flex-wrap: wrap; border: 1px solid white; padding: 10px; }
.event > div { flex: 1; min-width: 100px; max-width: 90%; word-break: break-word; }
</style>
<div style='background-color: #303E47; padding: 10px; margin-bottom: 10px;border-radius: 50px'>
<div style='background-color: #303E47; padding: 10px; margin-bottom: 10px;border-radius: 25px'>
<div class="event-log">
<div class="event">
<div>Event Type</div><div>Severity</div><div>Last Event</div><div>Count</div><div>Data</div><div>Message</div>
<div class="event" style="background-color: #1E2C33; font-weight: bold;">
<div>Event Type</div>
<div>Severity</div>
<div>Last Event</div>
<div>Count</div>
<div>Data</div>
<div>Message</div>
</div>
)=====";
const char EVENTS_HTML_END[] = R"=====(
</div></div>
<button onclick='goToMainPage()'>Back to main page</button>
<script>function displayEventLog(){document.querySelector(".event-log");var i=(new Date).getTime()/1e3;document.querySelectorAll(".event").forEach(function(e){var n=e.querySelector(".last-event-seconds-ago"),t=e.querySelector(".timestamp");if(n&&t){var o=parseInt(n.innerText,10),a=parseFloat(t.innerText),r=new Date(1e3*(i-a+o)).toLocaleString();n.innerText=r}})}function goToMainPage(){window.location.href="/"}window.onload=function(){displayEventLog()}</script>
<style> // This section makes each element alternate betweeen two colors
.event:nth-child(even) { background-color: #455A64; }
.event:nth-child(odd) { background-color: #394B52; }
</style>
<script>
function displayEventLog() {
var eventLogElement = document.querySelector('.event-log');
// Get the current time on the client side
var currentTime = new Date().getTime() / 1000; // Convert milliseconds to seconds
// Loop through the events and update the "Last Event" column
var events = document.querySelectorAll('.event');
events.forEach(function(event) {
var secondsAgoElement = event.querySelector('.last-event-seconds-ago');
var timestampElement = event.querySelector('.timestamp');
if (secondsAgoElement && timestampElement) {
var secondsAgo = parseInt(secondsAgoElement.innerText, 10);
var uptimeTimestamp = parseFloat(timestampElement.innerText); // Parse as float to handle seconds with decimal parts
// Calculate the actual system time based on the client-side current time
var actualTime = new Date((currentTime - uptimeTimestamp + secondsAgo) * 1000);
// Format the date and time
var formattedTime = actualTime.toLocaleString();
// Update the "Last Event" column with the formatted time
secondsAgoElement.innerText = formattedTime;
}
});
}
// Call the displayEventLog function when the page is loaded
window.onload = function() {
displayEventLog();
};
function goToMainPage() {
window.location.href = '/';
}
</script>
)=====";
/* The above <script> section is minified to save storage and increase performance, here is the full function:
<style>
.event:nth-child(even) { background-color: #455A64; }
.event:nth-child(odd) { background-color: #394B52; }
</style>
<script>
function displayEventLog() {
var eventLogElement = document.querySelector('.event-log');
@ -72,16 +122,15 @@ String events_processor(const String& var) {
" count: " + String(entries[i].occurences) + " seconds: " + String(entries[i].timestamp) +
" data: " + String(entries[i].data));
if (entries[i].occurences > 0) {
content.concat("<div class='event'>");
content.concat("<div>" + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
content.concat("<div>" + String(get_led_color_display_text(entries[i].led_color)) + "</div>");
content.concat("<div class='last-event-seconds-ago'>" + String((millis() / 1000) - entries[i].timestamp) +
"</div>");
content.concat("<div>" + String(entries[i].occurences) + "</div>");
content.concat("<div>" + String(entries[i].data) + "</div>");
content.concat("<div>" + String(get_event_message(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
content.concat("<div class='timestamp'>" + String(entries[i].timestamp) + "</div>");
content.concat("</div>"); // End of event row
content.concat("<div class='event'>");
content.concat("<div>" + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
content.concat("<div>" + String(get_led_color_display_text(entries[i].led_color)) + "</div>");
content.concat("<div class='last-event-seconds-ago'>" + String((millis() / 1000) - entries[i].timestamp) + "</div>");
content.concat("<div>" + String(entries[i].occurences) + "</div>");
content.concat("<div>" + String(entries[i].data) + "</div>");
content.concat("<div>" + String(get_event_message(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
content.concat("<div class='timestamp' style='display:none;'>" + String(entries[i].timestamp) + "</div>");
content.concat("</div>"); // End of event row
}
}
content.concat(FPSTR(EVENTS_HTML_END));