starred/OpenEPaperLink
1
0
Fork 0
mirror of https://github.com/OpenEPaperLink/OpenEPaperLink.git synced 2026-03-21 08:06:46 +01:00
Code Issues 944 Packages Projects Releases 10 Wiki Activity

Added DarkMode to AP Gui

Browse Source
This commit is contained in:
atc1441
2025-09-12 00:00:44 +02:00
parent 2a5094993c
commit 624bf49ee3
4 changed files with 318 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ESP32_AP-Flasher/wwwroot/edit.html
View File

@@ -777,8 +777,10 @@
if (typeof lang === "undefined") {
lang = getLangFromFilename(file);
}
if (typeof theme === "undefined") theme = "textmate";
if (typeof theme === "undefined") {
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
theme = (currentTheme === 'dark') ? "tomorrow_night" : "textmate";
}
if (typeof type === "undefined") {
type = "text/" + lang;

4
ESP32_AP-Flasher/wwwroot/index.html
View File

@@ -25,11 +25,11 @@
<div class="tablinks material-symbols-outlined" data-target="hometab" title="Dashboard">home</div>
<div class="tablinks material-symbols-outlined" data-target="tagtab" title="Tags">sell</div>
<div class="tablinks material-symbols-outlined" data-target="aptab" title="Access Points">cell_tower</div>
<!--<div class="tablinks material-symbols-outlined" data-target="templatetab" title="Templates">browse
</div>-->
<!--<div class="tablinks material-symbols-outlined" data-target="templatetab" title="Templates">browse</div>-->
<div class="tablinks material-symbols-outlined" data-target="flashtab" title="Tag flasher" style="display:none;">flash_on</div>
<div class="tablinks material-symbols-outlined" data-target="configtab" title="Settings">settings</div>
<div class="tablinks material-symbols-outlined" data-target="logtab" title="Logging">text_snippet</div>
<button id="theme-toggle" class="theme-toggle-btn material-symbols-outlined" title="Toggle Theme">light_mode</button>
</div>
<!-- /tabs -->
<div><span id="runstate"></div>

306
ESP32_AP-Flasher/wwwroot/main.css
View File

@@ -1,3 +1,110 @@
/* CSS Variables for Theming */
:root {
--color-background: #e4e4e0;
--color-text: #000000;
--color-text-light: #444;
--color-text-error: red;
--color-header-bg: #646260;
--color-header-text: #ffffff;
--color-nav-bg: #ffffff;
--color-tab-bg: #f2f2f2;
--color-tab-hover-bg: #ddd;
--color-tab-active-bg: #ccc;
--color-tab-border: #ccc;
--color-card-bg: #ffffff;
--color-card-border: #cccccc;
--color-card-hover-shadow: rgba(0, 0, 0, 0.63);
--color-dialog-bg: #f0e6d3;
--color-button-bg: #ccc;
--color-button-text: black;
--color-button-hover-bg: #aaaaaa;
--color-input-bg: #ffffff;
--color-input-text: #000000;
--color-input-border: #cccccc;
--color-console-bg: black;
--color-console-text: white;
--color-console-mono-bg: #666;
--color-console-mono-text: #ccc;
--color-console-quote-text: white;
--color-tag-pending-anim-bg: #d4d4f5;
--color-tag-group-bg: #6d6e6e;
--color-tag-group-text: white;
--color-tag-group-border: #c0c0c0;
--color-context-menu-bg: white;
--color-context-menu-border: gray;
--color-context-menu-hover-bg: #e0e0e0;
--color-link: #0000ee;
--color-readonly-bg: #ccc;
--color-tag-deepsleep-bg: #e4e4e0;
--color-tag-boot-bg: #b0d0b0;
--color-tag-wakeup-bg: #c8f1bb;
--color-tag-scan-bg: #c0c0d0;
--color-tag-reset-bg: #d0a0a0;
--color-tag-failed-ota-bg: #f0a0a0;
--color-tag-timeout-bg: #e0e0a0;
--color-log-new-bg-start: rgba(255, 255, 204, 1);
--color-log-new-bg-mid: rgba(255, 255, 204, 0.5);
--color-log-new-bg-end: rgba(255, 255, 204, 0);
}
body.dark-mode {
--color-background: #1c1c1e;
--color-text: #f0f0f0;
--color-text-light: #cccccc;
--color-text-error: #ff8a8a;
--color-header-bg: #2a2a2d;
--color-header-text: #f0f0f0;
--color-nav-bg: #1f1f22;
--color-tab-bg: #3a3a3c;
--color-tab-hover-bg: #4a4a4c;
--color-tab-active-bg: #5a5a5c;
--color-tab-border: #5a5a5c;
--color-card-bg: #2c2c2e;
--color-card-border: #444444;
--color-card-hover-shadow: rgba(255, 255, 255, 0.2);
--color-dialog-bg: #3a3a3c;
--color-button-bg: #5a5a5c;
--color-button-text: #f0f0f0;
--color-button-hover-bg: #6a6a6c;
--color-input-bg: #3a3a3c;
--color-input-text: #f0f0f0;
--color-input-border: #555555;
--color-console-bg: #1e1e1e;
--color-console-text: #f0f0f0;
--color-console-mono-bg: #444;
--color-console-mono-text: #ddd;
--color-console-quote-text: #ffffff;
--color-tag-pending-anim-bg: #3c3c5c;
--color-tag-group-bg: #4a4a4c;
--color-tag-group-text: #f0f0f0;
--color-tag-group-border: #555555;
--color-context-menu-bg: #2c2c2e;
--color-context-menu-border: #555;
--color-context-menu-hover-bg: #4a4a4c;
--color-link: #58a6ff;
--color-readonly-bg: #4a4a4c;
--color-tag-deepsleep-bg: #3a3a3c;
--color-tag-boot-bg: #3a5c3a;
--color-tag-wakeup-bg: #4a6c4a;
--color-tag-scan-bg: #4c4c5c;
--color-tag-reset-bg: #6c4c4c;
--color-tag-failed-ota-bg: #7c4c4c;
--color-tag-timeout-bg: #6c6c4c;
--color-log-new-bg-start: rgba(88, 166, 255, 0.3);
--color-log-new-bg-mid: rgba(88, 166, 255, 0.15);
--color-log-new-bg-end: rgba(88, 166, 255, 0);
}
/* Tag State Classes */
.tagcard.state-deepsleep { background-color: var(--color-tag-deepsleep-bg); }
.tagcard.state-boot { background-color: var(--color-tag-boot-bg); }
.tagcard.state-wakeup { background-color: var(--color-tag-wakeup-bg); }
.tagcard.state-scan { background-color: var(--color-tag-scan-bg); }
.tagcard.state-reset { background-color: var(--color-tag-reset-bg); }
.tagcard.state-failed-ota { background-color: var(--color-tag-failed-ota-bg); }
.tagcard.state-timeout { background-color: var(--color-tag-timeout-bg); }
* {
margin: 0;
padding: 0;
@@ -16,11 +123,12 @@ body {
font-size: 12px;
font-family: Helvetica, Arial, Verdana, sans-serif;
line-height: 1.5;
background-color: #e4e4e0;
background-color: var(--color-background);
color: var(--color-text);
}
header {
background-color: #646260;
background-color: var(--color-header-bg);
z-index: 999;
position: sticky;
top: 0px;
@@ -35,7 +143,7 @@ nav>div {
display: flex;
gap: 20px;
padding: 10px;
background-color: white;
background-color: var(--color-nav-bg);
}
nav label {
@@ -50,11 +158,13 @@ footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: white;
background-color: var(--color-nav-bg);
border-top: 1px solid var(--color-card-border);
color: var(--color-text);
}
#sysinfo {
float: right;
}
footer #sysinfo {
float: right;
}
.logo {
@@ -63,12 +173,13 @@ footer {
text-indent: 12px;
overflow: hidden;
font-size: 2.5em;
color: white;
color: var(--color-header-text);
}
h3 {
padding-bottom: 10px;
font-size: 1.5em;
color: var(--color-text);
}
/* tabs */
@@ -79,7 +190,8 @@ h3 {
}
.tablinks {
background-color: #f2f2f2;
background-color: var(--color-tab-bg);
color: var(--color-text);
padding: 5px 10px;
border: none;
cursor: pointer;
@@ -87,12 +199,12 @@ h3 {
transition: all 0.2s ease-in-out;
&:hover {
background-color: #ddd;
background-color: var(--color-tab-hover-bg);
}
}
.tab-container .active {
background-color: #ccc;
background-color: var(--color-tab-active-bg);
margin-top: 10px;
margin-bottom: -10px;
padding-bottom: 0px;
@@ -100,7 +212,7 @@ h3 {
.tabcontent {
display: none;
border-top: 1px solid #ccc;
border-top: 1px solid var(--color-tab-border);
}
@@ -109,11 +221,11 @@ label {
display: inline-block;
vertical-align: top;
padding: 4px 20px;
color: var(--color-text);
}
.container {
padding-bottom: 20px;
;
}
#hometab {
@@ -121,9 +233,10 @@ label {
& table {
margin: 20px;
background: #fff;
background: var(--color-card-bg);
padding: 5px 20px;
border-spacing: 0px;
color: var(--color-text);
}
& td {
@@ -136,7 +249,7 @@ label {
}
& tr:hover {
background-color: #ccc;
background-color: var(--color-tab-active-bg);
cursor: pointer;
}
@@ -167,14 +280,14 @@ label {
}
.tabheader {
background-color: white;
background-color: var(--color-nav-bg);
padding: 5px 10px;
display: flex;
gap: 2em;
}
#filterOptions {
background-color: white;
background-color: var(--color-nav-bg);
max-height: 0;
padding: 0px 10px;
overflow: hidden;
@@ -205,6 +318,9 @@ label {
& p {
padding: 3px;
}
& a {
color: var(--color-link);
}
}
#updatetab, #flashtab {
@@ -226,7 +342,7 @@ label {
margin: 0px 5px;
}
& input:read-only {
background-color: #ccc;
background-color: var(--color-readonly-bg);
}
& .warning {
padding: 5px;
@@ -243,10 +359,15 @@ label {
}
.apcard {
background-color: #fff;
border: 1px solid #ccc;
background-color: var(--color-card-bg);
border: 1px solid var(--color-card-border);
padding: 10px;
width: 300px;
color: var(--color-text);
& .apip a {
color: var(--color-link);
}
& .apalias {
font-size: 1.5em;
@@ -278,15 +399,15 @@ label {
padding: 5px 10px;
margin-bottom: 0px;
margin-top: -1px;
background-color: #ccc;
background-color: var(--color-button-bg);
text-decoration: none;
color: black;
color: var(--color-button-text);
cursor: pointer;
white-space: nowrap;
text-align: center;
&:hover {
background-color: #aaa;
background-color: var(--color-button-hover-bg);
}
}
@@ -296,9 +417,9 @@ label {
#uploadButton,
.wifibutton {
padding: 4px 5px;
background-color: #ccc;
background-color: var(--color-button-bg);
text-decoration: none;
color: black;
color: var(--color-button-text);
cursor: pointer;
white-space: nowrap;
width: 120px;
@@ -307,7 +428,7 @@ label {
text-align: center;
&:hover {
background-color: #aaa;
background-color: var(--color-button-hover-bg);
}
}
@@ -327,10 +448,13 @@ input[type="submit"],
button {
appearance: none;
border-radius: 0;
color: var(--color-input-text);
}
input {
border: solid 1px #cccccc;
input, textarea, select {
border: solid 1px var(--color-input-border);
background-color: var(--color-input-bg);
color: var(--color-input-text);
padding: 4px;
border-radius: 0px;
}
@@ -340,18 +464,21 @@ button {
border: 0px;
padding: 4px 10px;
cursor: pointer;
background-color: #ccc;
background-color: var(--color-button-bg);
color: var(--color-button-text);
}
input[type=button]:hover,
button:hover {
background-color: #aaaaaa;
background-color: var(--color-button-hover-bg);
}
input[type=file] {
padding: 0px;
margin-left: 20px;
width: 200px;
background: none;
border: none;
}
input[type=checkbox] {
@@ -361,7 +488,6 @@ input[type=checkbox] {
select {
padding: 3px 4px;
border-radius: 0px;
border: solid 1px #cccccc;
max-width: 180px;
}
@@ -375,7 +501,7 @@ select {
padding: 15px;
background-color: #f0e6d3;
z-index: 999;
box-shadow: 7px 10px 52px -19px rgba(0, 0, 0, 0.63);
box-shadow: 7px 10px 52px -19px var(--color-card-hover-shadow);
overflow: auto;
max-height: calc(100vh - 75px);
}
@@ -384,11 +510,12 @@ select {
margin: auto;
min-width: 380px;
padding: 15px;
background-color: #f0e6d3;
background-color: var(--color-dialog-bg);
z-index: 999;
box-shadow: 7px 10px 52px -19px rgba(0, 0, 0, 0.63);
box-shadow: 7px 10px 52px -19px var(--color-card-hover-shadow);
overflow: auto;
max-height: calc(100vh - 75px);
color: var(--color-text);
& label {
width: 150px;
@@ -414,7 +541,7 @@ select {
#configbox input,
#apconfigbox input {
border: solid 1px #cccccc;
border: solid 1px var(--color-input-border);
}
#configbox input[type=number] {
@@ -475,7 +602,7 @@ select {
.closebtn,
.closebtn2 {
border: 1px solid black;
border: 1px solid var(--color-text);
float: right;
width: 19px;
height: 20px;
@@ -483,6 +610,7 @@ select {
text-align: center;
margin: 5px;
cursor: pointer;
color: var(--color-text);
}
#logtab {
@@ -523,13 +651,14 @@ select {
min-height: 170px;
margin: 3px;
padding: 4px 5px 5px 8px;
background-color: #ffffff;
border: 1px solid #cccccc;
transition: box-shadow 0.3s ease;
background-color: var(--color-card-bg);
border: 1px solid var(--color-card-border);
transition: box-shadow 0.3s ease, background-color 0.3s ease;
color: var(--color-text);
&:hover {
cursor: pointer;
box-shadow: 7px 10px 52px -19px rgba(0, 0, 0, 0.63);
box-shadow: 7px 10px 52px -19px var(--color-card-hover-shadow);
filter: brightness(1.02);
}
}
@@ -549,10 +678,10 @@ select {
}
.taggroup {
border: 1px solid #c0c0c0;
border: 1px solid var(--color-tag-group-border);
width: 100%;
background-color: #6d6e6e;
color: white;
background-color: var(--color-tag-group-bg);
color: var(--color-tag-group-text);
padding: 5px;
margin: 0px 3px;
}
@@ -564,7 +693,7 @@ select {
.currimg img,
.currimg canvas {
max-width: 50px;
border: 1px solid #c0c0c0;
border: 1px solid var(--color-tag-group-border);
}
.mac {
@@ -621,6 +750,15 @@ select {
display: inline-block;
}
.lastseen {
color: var(--color-text);
}
.lastseen.error {
color: var(--color-text-error);
}
.corner {
position: absolute;
right: 0px;
@@ -667,6 +805,7 @@ ul.messages {
ul.messages li {
position: relative;
color: var(--color-text);
}
ul.messages li.new {
@@ -677,40 +816,41 @@ ul.messages li.new {
}
.error {
color: red;
color: var(--color-text-error);
}
.mono {
font-family: monospace;
word-break: break-all;
background-color: #666;
color: #ccc;
background-color: var(--color-console-mono-bg);
color: var(--color-console-mono-text);
padding: 2px;
}
.quote {
color: white;
color: var(--color-console-quote-text);
}
#georesults {
position: absolute;
background: white;
background: var(--color-nav-bg);
cursor: pointer;
width: 240px;
max-height: 115px;
overflow-y: scroll;
padding: 0px 2px 0px 2px;
border: 1px solid var(--color-card-border);
& div {
display:flex;
}
& div:hover {
background-color: #e0e0e0;
background-color: var(--color-tab-hover-bg);
}
}
#paintbutton {
padding: 1px 3px;
border: 1px solid black;
border: 1px solid var(--color-text);
font-size: 1.3em;
vertical-align: top;
margin-left: 12px;
@@ -719,7 +859,7 @@ ul.messages li.new {
}
#paintbutton:hover {
background-color: #aaaaaa;
background-color: var(--color-button-hover-bg);
}
.drophighlight {
@@ -730,8 +870,8 @@ ul.messages li.new {
#context-menu {
display: none;
position: absolute;
background: white;
border: 1px solid gray;
background: var(--color-context-menu-bg);
border: 1px solid var(--color-context-menu-border);
list-style: none;
z-index: 999;
padding: 2px 5px;
@@ -740,10 +880,11 @@ ul.messages li.new {
#context-menu li {
cursor: pointer;
padding: 1px 5px;
color: var(--color-text);
}
#context-menu li:hover {
background-color: #e0e0e0;
background-color: var(--color-context-menu-hover-bg);
}
/* painter */
@@ -753,7 +894,7 @@ ul.messages li.new {
}
#canvasdiv canvas {
border: 1px solid black;
border: 1px solid var(--color-text);
}
#buttonbar {
@@ -765,8 +906,8 @@ ul.messages li.new {
#buttonbar button,
#layersdiv button {
padding: 1px 2px;
border: 1px solid #cccccc;
background-color: #dddddd;
border: 1px solid var(--color-input-border);
background-color: var(--color-button-bg);
width: 40px;
}
@@ -776,13 +917,13 @@ ul.messages li.new {
}
#buttonbar .active {
background-color: #ffffff;
background-color: var(--color-input-bg);
cursor: pointer;
}
#buttonbar button:hover,
#layersdiv button:hover {
background-color: #cccccc;
background-color: var(--color-button-hover-bg);
cursor: pointer;
}
@@ -806,14 +947,14 @@ ul.messages li.new {
}
#savebar button {
border: solid 1px #666666;
border: solid 1px var(--color-text-light);
}
/* updatescreens */
#easyupdate {
padding: 10px;
background-color: white;
background-color: var(--color-nav-bg);
width: 400px;
margin-bottom: 20px;
}
@@ -845,12 +986,12 @@ h4 {
.releasetable th {
text-align: left;
background-color: #ffffff;
background-color: var(--color-nav-bg);
padding: 1px 5px;
}
.releasetable td {
background-color: #ffffff;
background-color: var(--color-nav-bg);
padding: 1px 5px;
min-width: 70px;
vertical-align: baseline;
@@ -862,11 +1003,11 @@ h4 {
.releasetable button {
padding: 3px 10px;
background-color: #e0e0e0;
background-color: var(--color-button-bg);
}
.releasetable button:hover {
background-color: #a0a0a0;
background-color: var(--color-button-hover-bg);
}
.updateCol1, .flashCol1 {
@@ -875,9 +1016,9 @@ h4 {
.console {
width: 450px;
background-color: black;
background-color: var(--color-console-bg);
font-family: 'lucida console', 'ui-monospace', 'monospace';
color: white;
color: var(--color-console-text);
padding: 5px 10px;
padding-bottom: 25px;
height: calc(100vh - 200px);
@@ -916,15 +1057,15 @@ h4 {
@keyframes new {
0% {
background-color: rgba(255, 255, 204, 1);
background-color: var(--color-log-new-bg-start);
}
50% {
background-color: rgba(255, 255, 204, .5);
background-color: var(--color-log-new-bg-mid);
}
100% {
background-color: rgba(255, 255, 204, 0);
background-color: var(--color-log-new-bg-end);
}
}
@@ -946,14 +1087,13 @@ h4 {
0% {}
50% {
background-color: #d4d4f5;
background-color: var(--color-tag-pending-anim-bg);
}
100% {}
}
@media screen and (max-width: 480px) {
/* styles for mobile devices in portrait mode */
body {
font-size: 13px;
@@ -1008,4 +1148,22 @@ h4 {
padding: 1px 1px;
}
}
.theme-toggle-btn {
background-color: transparent;
border: none;
color: var(--color-header-text);
cursor: pointer;
align-self: center;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
margin-left: auto;
border-left: 1px solid var(--color-tab-border);
padding: 6px 1rem;
border-radius: 4px;
margin-right: 1rem;
}
.theme-toggle-btn:hover {
background-color: var(--color-tab-hover-bg);
}
}

110
ESP32_AP-Flasher/wwwroot/main.js
View File

@@ -83,6 +83,34 @@ window.addEventListener("loadConfig", function () {
});
window.addEventListener("load", function () {
const themeToggle = $('#theme-toggle');
if (themeToggle) {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
const setTheme = (theme) => {
if (theme === 'dark') {
document.body.classList.add('dark-mode');
themeToggle.innerHTML = 'dark_mode';
localStorage.setItem('theme', 'dark');
} else {
document.body.classList.remove('dark-mode');
themeToggle.innerHTML = 'light_mode';
localStorage.setItem('theme', 'light');
}
};
themeToggle.addEventListener('click', () => {
const isDarkMode = document.body.classList.contains('dark-mode');
setTheme(isDarkMode ? 'light' : 'dark');
});
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
} else {
setTheme(prefersDarkScheme.matches ? 'dark' : 'light');
}
}
window.dispatchEvent(loadConfig);
initTabs();
fetch('content_cards.json')
@@ -267,6 +295,17 @@ function convertSize(bytes) {
return bytes;
}
function clearTagStateClasses(tagElement) {
tagElement.classList.remove(
'state-deepsleep',
'state-boot',
'state-wakeup',
'state-scan',
'state-reset',
'state-failed-ota'
);
}
function processTags(tagArray) {
for (const element of tagArray) {
const tagmac = element.mac;
@@ -385,7 +424,7 @@ function processTags(tagArray) {
}
div.style.opacity = '1';
$('#tag' + tagmac + ' .lastseen').style.color = "black";
$('#tag' + tagmac + ' .lastseen').style.color = "";
div.classList.remove("tagpending");
div.dataset.lastseen = element.lastseen;
div.dataset.wakeupreason = element.wakeupReason;
@@ -393,51 +432,56 @@ function processTags(tagArray) {
div.dataset.channel = element.ch;
div.dataset.isexternal = element.isexternal;
$('#tag' + tagmac + ' .warningicon').style.display = 'none';
$('#tag' + tagmac).style.background = "#ffffff";
if (element.contentMode == 12 || element.nextcheckin == 3216153600) $('#tag' + tagmac).style.background = "#e4e4e0";
div.style.background = '';
div.classList.remove('state-timeout');
clearTagStateClasses(div);
let stateClassSet = false;
switch (parseInt(element.wakeupReason)) {
case WAKEUP_REASON_TIMED:
break;
case WAKEUP_REASON_BOOT:
case WAKEUP_REASON_FIRSTBOOT:
$('#tag' + tagmac + ' .nextcheckin').innerHTML = "<font color=yellow>First boot</font>"
$('#tag' + tagmac).style.background = "#b0d0b0";
div.classList.add("state-boot");
stateClassSet = true;
break;
case WAKEUP_REASON_GPIO:
$('#tag' + tagmac + ' .nextcheckin').innerHTML = "GPIO wakeup"
$('#tag' + tagmac).style.background = "#c8f1bb";
break;
case WAKEUP_REASON_BUTTON1:
$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Button 1 pressed"
$('#tag' + tagmac).style.background = "#c8f1bb";
break;
case WAKEUP_REASON_BUTTON2:
$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Button 2 pressed"
$('#tag' + tagmac).style.background = "#c8f1bb";
break;
case WAKEUP_REASON_BUTTON3:
$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Button 3 pressed"
$('#tag' + tagmac).style.background = "#c8f1bb";
break;
case WAKEUP_REASON_NFC:
$('#tag' + tagmac + ' .nextcheckin').innerHTML = "NFC wakeup"
$('#tag' + tagmac).style.background = "#c8f1bb";
let reasonText = {
[WAKEUP_REASON_GPIO]: "GPIO wakeup",
[WAKEUP_REASON_BUTTON1]: "Button 1 pressed",
[WAKEUP_REASON_BUTTON2]: "Button 2 pressed",
[WAKEUP_REASON_BUTTON3]: "Button 3 pressed",
[WAKEUP_REASON_NFC]: "NFC wakeup"
}[parseInt(element.wakeupReason)];
$('#tag' + tagmac + ' .nextcheckin').innerHTML = reasonText;
div.classList.add("state-wakeup");
stateClassSet = true;
break;
case WAKEUP_REASON_NETWORK_SCAN:
$('#tag' + tagmac + ' .nextcheckin').innerHTML = "<font color=yellow>Network scan</font>"
$('#tag' + tagmac).style.background = "#c0c0d0";
div.classList.add("state-scan");
stateClassSet = true;
break;
case WAKEUP_REASON_WDT_RESET:
$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Watchdog reset!"
$('#tag' + tagmac).style.background = "#d0a0a0";
div.classList.add("state-reset");
stateClassSet = true;
break;
case WAKEUP_REASON_FAILED_OTA_FW:
$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Firmware update rejected!"
$('#tag' + tagmac).style.background = "#f0a0a0";
div.classList.add("state-failed-ota");
stateClassSet = true;
break;
}
}
if (!stateClassSet && (element.contentMode == 12 || element.nextcheckin == 3216153600)) {
div.classList.add("state-deepsleep");
}
$('#tag' + tagmac + ' .pendingicon').style.display = (element.pending ? 'inline-block' : 'none');
$('#tag' + tagmac + ' .pendingicon').innerHTML = element.pending;
div.classList.add("tagflash");
@@ -472,18 +516,24 @@ function updatecards() {
if (tagDB[tagmac].batteryMv < 2400 && tagDB[tagmac].batteryMv != 0 && tagDB[tagmac].batteryMv != 1337) lowbattcount++;
if (item.dataset.lastseen && item.dataset.lastseen > (Date.now() / 1000) - servertimediff - 30 * 24 * 3600 * 60) {
let idletime = (Date.now() / 1000) - servertimediff - item.dataset.lastseen;
$('#tag' + tagmac + ' .lastseen').innerHTML = "<span>last seen</span>" + displayTime(Math.floor(idletime)) + " ago";
$('#tag' + tagmac + ' .lastseen').innerHTML = "<span>last seen</span>" + displayTime(Math.floor(idletime)) + " ago";
if ((Date.now() / 1000) - servertimediff - apConfig.maxsleep * 60 - 300 > item.dataset.nextcheckin) {
$('#tag' + tagmac + ' .warningicon').style.display = 'inline-block';
$('#tag' + tagmac).classList.remove("tagpending")
$('#tag' + tagmac).style.background = '#e0e0a0';
item.querySelector('.warningicon').style.display = 'inline-block';
item.classList.remove("tagpending");
item.classList.add('state-timeout');
timeoutcount++;
} else {
item.classList.remove('state-timeout');
if (tagDB[tagmac].pending) pendingcount++;
}
const lastseenEl = item.querySelector('.lastseen');
if (idletime > 24 * 3600) {
$('#tag' + tagmac).style.opacity = '.5';
$('#tag' + tagmac + ' .lastseen').style.color = "red";
item.style.opacity = '.5';
lastseenEl.classList.add('error');
} else {
item.style.opacity = '1';
lastseenEl.classList.remove('error');
}
} else {
if ($('#tag' + tagmac + ' .lastseen')) {