Skip to content

Commit

Permalink
Quick save
Browse files Browse the repository at this point in the history
  • Loading branch information
@mawoka-myblock
mawoka-myblock committed Feb 13, 2025
1 parent 343dbbd commit 674ca47
Showing 1 changed file with 56 additions and 66 deletions.
122 changes: 56 additions & 66 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
.fallback-btn {
display: none;
}

.action-btn {
margin: 10px auto;
padding: 10px 20px;
Expand All @@ -72,6 +73,11 @@
border-radius: 5px;
cursor: pointer;
}
.action-btn:disabled {
pointer-events: none;
opacity: 0.3;
}

.average-btn {
display: block;
}
Expand All @@ -87,8 +93,10 @@
<h1>Td-Free</h1>
<div id="status" class="status">Connecting...</div>
<p id="content"></p>
<button id="fallback-btn" class="action-btn fallback-btn" onclick="enableFallback()">Enable Fallback Mode</button>
<button id="averaged-btn" class="action-btn average-btn" onclick="toggleAveragedData()">Show averaged data</button>
<button id="fallback-btn" class="action-btn fallback-btn" onclick="enableFallback()">Enable Fallback
Mode</button>
<button id="averaged-btn" class="action-btn average-btn" onclick="toggleAveragedData()">Show averaged
data</button>
<div style="display: flex; flex-direction: column; margin-top: auto;">
<a href="/wifi" class="wifi-link" onclick="wifi_cfg">Wifi Config</a>
<p class="wifi-link" style="color: gray; font-size: smaller;">Version {{VERSION}}</p>
Expand All @@ -101,7 +109,7 @@ <h1>Td-Free</h1>
let intervalId;
let fallbackInterval;
let fallbackEnabled = false;
let showing_averaged = false
let showing_averaged = false;

function connectWebSocket() {
socket = new WebSocket(`ws://${window.location.hostname}/ws`);
Expand All @@ -110,96 +118,81 @@ <h1>Td-Free</h1>
socket.addEventListener("open", () => {
statusContainer.textContent = "Connected to WebSocket server";
statusContainer.classList.add("connected");
document.getElementById("fallback-btn").style.display = "none";
if (intervalId) clearInterval(intervalId);
intervalId = setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send("p");
}
}, 1000);
fallbackEnabled = false;
clearInterval(fallbackInterval);
if (!showing_averaged) {
intervalId = setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send("p");
}
}, 1000);
}
});

socket.addEventListener("message", (event) => {
if (event.data === 'p') return;
updateContent(event.data);
});

socket.addEventListener("close", () => {
statusContainer.textContent = "Disconnected from WebSocket server";
statusContainer.classList.remove("connected");
clearInterval(intervalId);
if (showing_averaged) return
document.getElementById("fallback-btn").style.display = "block";
if (!showing_averaged) updateContent(event.data);
});

socket.addEventListener("error", () => {
statusContainer.textContent = "Error connecting to WebSocket server";
statusContainer.classList.remove("connected");
clearInterval(intervalId);
if (showing_averaged) return
document.getElementById("fallback-btn").style.display = "block";
});

window.addEventListener("beforeunload", () => {
socket.close();
});
socket.addEventListener("close", startFallback);
socket.addEventListener("error", startFallback);
window.addEventListener("beforeunload", () => socket.close());
}

function enableFallback() {
function startFallback() {
if (fallbackEnabled || showing_averaged) return;
fallbackEnabled = true;
document.getElementById("status").textContent = "Fallback mode enabled";
document.getElementById("fallback-btn").style.display = "none";
clearInterval(intervalId);
fallbackInterval = setInterval(fetchFallbackData, 1000);
attemptReconnect();
}

function attemptReconnect() {
if (showing_averaged) return;
setTimeout(() => {
if (fallbackEnabled && !showing_averaged) connectWebSocket();
}, 5000);
}

function fetchFallbackData() {
document.getElementById("status").textContent = "Loading fallback data";
if (showing_averaged) return;
fetch("/fallback")
.then(response => response.text())
.then(data => updateContent(data))
.catch(() => {
document.getElementById("status").textContent = "Error fetching fallback data";
});
document.getElementById("status").textContent = "Showing fallback data";
.catch(() => document.getElementById("status").textContent = "Error fetching fallback data");
}

function toggleAveragedData() {
const averagedBtn = document.getElementById("averaged-btn");
if (averagedBtn.textContent === "Show averaged data") {
statusContainer.classList.add("connected");
showing_averaged = true;
stopConnections();
setTimeout(fetchAveragedData, 800)
averagedBtn.textContent = "Go back to live mode";
} else {
if (showing_averaged) {
showing_averaged = false;
averagedBtn.textContent = "Show averaged data";
connectWebSocket();
} else {
document.getElementById("status").textContent = "Fetching averaged data..."
averagedBtn.disabled = true
showing_averaged = true;
stopConnections();
setTimeout(() => {
fetchAveragedData();
averagedBtn.textContent = "Go back to live mode";
averagedBtn.disabled = false
}, 850)
}
}

function stopConnections() {
if (socket) {
socket.close();
}
if (intervalId) {
clearInterval(intervalId);
}
if (fallbackInterval) {
clearInterval(fallbackInterval);
}
if (socket) socket.close();
clearInterval(intervalId);
clearInterval(fallbackInterval);
}

function fetchAveragedData() {
document.getElementById("status").textContent = "Loading averaged data";
fetch("/averaged")
.then(response => response.text())
.then(data => {
updateContent(data);
document.getElementById("status").textContent = "Showing averaged data";
})
.catch(() => {
document.getElementById("status").textContent = "Error fetching averaged data";
});
.then(data => { updateContent(data); document.getElementById("status").textContent = "Showing averaged data" })
.catch(() => document.getElementById("status").textContent = "Error fetching averaged data");
}

function updateContent(data) {
Expand All @@ -208,15 +201,12 @@ <h1>Td-Free</h1>
el.innerText = "No filament inserted! Insert some";
} else {
const num = parseFloat(data);
if (isNaN(num)) {
el.innerText = "An error occurred!";
return;
}
el.innerText = num.toFixed(2);
el.innerText = isNaN(num) ? "An error occurred!" : num.toFixed(2);
}
}

connectWebSocket();

</script>
</body>

Expand Down

0 comments on commit 674ca47

Please sign in to comment.