Skip to content

Commit

Permalink
Merge pull request #674 from colinpeddle/darkmode
Browse files Browse the repository at this point in the history
Darkmode
  • Loading branch information
visualapproach authored Mar 1, 2024
2 parents 9400ba6 + fa0fbaf commit d3cef1b
Show file tree
Hide file tree
Showing 19 changed files with 1,133 additions and 702 deletions.
17 changes: 13 additions & 4 deletions Code/data/calib.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,25 @@
<head>
<title>Lay-Z-Spa Module | SPA Manual calibration</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<link rel="icon" type="image/png" sizes="180x180" href="favicon.png">
<meta name="theme-color" content="#0f4677">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<meta name="theme-color" content="#0066BF">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<script src="function.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>

<body>
<div id="site">
<header>
<span>SPA Manual calibration</span>
<form id="darkModeForm">
<label class="switch">
<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
<span class="slider round"></span>
</label>
</form>
<a href="./"><div id="header"><span>SPA Manual calibration</span><span>Lay-Z-Spa Module</span></div></a>
<a href="javascript:void(0);" class="topnavicon" onclick="topNav()"></a>
</header>

Expand Down Expand Up @@ -81,5 +88,7 @@
}

</script>
<script src="darkmode.js" type="text/javascript"></script>

</body>
</html>
17 changes: 13 additions & 4 deletions Code/data/config.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,25 @@
<head>
<title>Lay-Z-Spa Module | SPA Config</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<link rel="icon" type="image/png" sizes="180x180" href="favicon.png">
<meta name="theme-color" content="#0f4677">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<meta name="theme-color" content="#0066BF">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<script src="function.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>

<body>
<div id="site">
<header>
<span>SPA Config</span>
<form id="darkModeForm">
<label class="switch">
<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
<span class="slider round"></span>
</label>
</form>
<a href="./"><div id="header"><span>SPA Config</span><span>Lay-Z-Spa Module</span></div></a>
<a href="javascript:void(0);" class="topnavicon" onclick="topNav()"></a>
</header>

Expand Down Expand Up @@ -415,5 +422,7 @@ <h2>Command queue</h2>
if(obj.checked) obj.checked = false;
}
</script>
<script src="darkmode.js" type="text/javascript"></script>

</body>
</html>
40 changes: 40 additions & 0 deletions Code/data/darkmode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
// will create a dark mode and store status in local storage

// Check if the dark mode status is stored in localStorage
var darkModeToggle = document.getElementById("darkModeToggle");

if (localStorage.getItem("darkModeStatus")) {
// Update the dark mode toggle switch and status text
darkModeToggle.checked = localStorage.getItem("darkModeStatus") === "On";

// Set dark mode immediately based on stored status
toggleDarkMode();
}

function toggleDarkMode() {
var sliderElement = darkModeForm.querySelector(".slider");
if (darkModeToggle.checked) {
// Dark Mode is On
document.documentElement.classList.add("darkmode");
localStorage.setItem("darkModeStatus", "On");
sliderElement.classList.remove("moon");
sliderElement.classList.add("sun");
} else {
// Dark Mode is Off
document.documentElement.classList.remove("darkmode");
localStorage.setItem("darkModeStatus", "Off");
sliderElement.classList.remove("sun");
sliderElement.classList.add("moon");
}
}

// move to admin or elsewhere afterward
document.addEventListener("DOMContentLoaded", function () {
const topNavIcon = document.querySelector(".topnavicon");

topNavIcon.addEventListener("click", function () {
topNavIcon.classList.toggle("show-before");
const afterIcon = topNavIcon.nextElementSibling;
afterIcon.style.display = afterIcon.style.display === "none" ? "inline" : "none";
});
});
Binary file modified Code/data/favicon.ico
Binary file not shown.
Binary file modified Code/data/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 56 additions & 45 deletions Code/data/function.js
Original file line number Diff line number Diff line change
@@ -1,63 +1,74 @@

function topNav() {
var x = document.getElementById("topnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
var x = document.getElementById("topnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

function togglePlainText(id) {
var x = document.getElementById(id);
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
var x = document.getElementById(id);
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}

function validatePassword(id) {
var x = document.getElementById(id);
if (x.value == "<enter password>") {
alert("Please enter a password to continue.");
return false;
}
return true;
var x = document.getElementById(id);
if (x.value == "<enter password>") {
alert("Please enter a password to continue.");
return false;
}
return true;
}

// Function to update the displayed number
function updateNumber(opt, parent) {
var parentElement = parent.parentElement;
var numDisplay = parentElement.querySelector(".numDisplay");
var number = parseInt(numDisplay.textContent);
if (opt == "up") number += 1;
if (opt == "dn") number -= 1;
numDisplay.textContent = number;
}

function increaseNumber(id) {
var x = document.getElementById(id);
var val = Number(x.value);
var max = x.max;
if (max > val) {
val += 1;
x.value = val;
}
var x = document.getElementById(id);
var val = Number(x.value);
var max = x.max;
if (max > val) {
val += 1;
x.value = val;
}
var opt = "up";
updateNumber(opt, x);
}

function decreaseNumber(id) {
var x = document.getElementById(id);
var val = Number(x.value);
var min = x.min;
if (min < val) {
val -= 1;
x.value = val;
}
var x = document.getElementById(id);
var val = Number(x.value);
var min = x.min;
if (min < val) {
val -= 1;
x.value = val;
}
var opt = "dn";
updateNumber(opt, x);
}

function buttonConfirm(elem, text='', timeout=3, reset=true)
{
var originalText = elem.innerHTML;
function buttonConfirm(elem, text = "", timeout = 3, reset = true) {
var originalText = elem.innerHTML;

elem.innerHTML = (text == '' ? '&check;' : text);
elem.disabled = true;
elem.innerHTML = text == "" ? "&check;" : text;
elem.disabled = true;

if (reset)
{
setTimeout(function(){
elem.innerHTML = originalText;
elem.disabled = false;
}, timeout*1000);
}
if (reset) {
setTimeout(function () {
elem.innerHTML = originalText;
elem.disabled = false;
}, timeout * 1000);
}
}
21 changes: 16 additions & 5 deletions Code/data/hwconfig.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,26 @@
<head>
<title>Lay-Z-Spa Module | Hardware Config</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<link rel="icon" type="image/png" sizes="180x180" href="favicon.png">
<meta name="theme-color" content="#0f4677">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<meta name="theme-color" content="#0066BF">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<script src="function.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>

<body>
<div id="site">
<header>
<span>Hardware Config</span>

<form id="darkModeForm">
<label class="switch">
<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
<span class="slider round"></span>
</label>
</form>
<a href="./"><div id="header"><span>Hardware Config</span><span>Lay-Z-Spa Module</span></div></a>
<a href="javascript:void(0);" class="topnavicon" onclick="topNav()"></a>
</header>

Expand Down Expand Up @@ -68,7 +76,7 @@ <h2>Hardware:</h2>

<section onclick="setPins()">
<p>Select your DSP (display) model:
<span data-text="In theory we should be able to combine any CIO with any DSP. Not tested but really cool if it actually works :-)" class="tooltip">?</span></p>
<span data-text="In theory we should be able to combine any CIO with any DSP. Not tested but really cool if it actually works :-)" class="tooltip left">?</span></p>
<input type="radio" id="dsp_0" name="dsp_model" value="0" checked="checked">
<label for="dsp_pre2021">6 wire, pre 2021 (air)</label><br>
<input type="radio" id="dsp_1" name="dsp_model" value="1">
Expand Down Expand Up @@ -349,5 +357,8 @@ <h2>Hardware:</h2>
}

</script>

<script src="darkmode.js" type="text/javascript"></script>

</body>
</html>
17 changes: 13 additions & 4 deletions Code/data/hwtestinfo.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,25 @@
<head>
<title>Lay-Z-Spa Module | Hardware test</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<link rel="icon" type="image/png" sizes="180x180" href="favicon.png">
<meta name="theme-color" content="#0f4677">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<meta name="theme-color" content="#0066BF">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<script src="function.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>

<body>
<div id="site">
<header>
<span>Hardware test</span>
<form id="darkModeForm">
<label class="switch">
<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
<span class="slider round"></span>
</label>
</form>
<a href="./"><div id="header"><span>Hardware test</span><span>Lay-Z-Spa Module</span></div></a>
<a href="javascript:void(0);" class="topnavicon" onclick="topNav()"></a>
</header>

Expand Down Expand Up @@ -44,6 +51,8 @@

</section>
</div>

<script src="darkmode.js" type="text/javascript"></script>

</body>
</html>
Loading

0 comments on commit d3cef1b

Please sign in to comment.