Keith Casko
76 lines
2.6 KiB
JavaScript
76 lines
2.6 KiB
JavaScript
// Get references to the page elements we need to update.
|
|
const form = document.getElementById("uptime-form");
|
|
const urlInput = document.getElementById("url-input");
|
|
const checkButton = document.getElementById("check-button");
|
|
const statusMessage = document.getElementById("status-message");
|
|
const resultPanel = document.getElementById("result-panel");
|
|
|
|
const onlineBadge = document.getElementById("online-badge");
|
|
const statusCode = document.getElementById("status-code");
|
|
const responseTime = document.getElementById("response-time");
|
|
const redirectCount = document.getElementById("redirect-count");
|
|
const checkedAt = document.getElementById("checked-at");
|
|
const finalUrl = document.getElementById("final-url");
|
|
|
|
// Listen for the form submission.
|
|
form.addEventListener("submit", async (event) => {
|
|
// Prevent the browser from reloading the page.
|
|
event.preventDefault();
|
|
|
|
const url = urlInput.value.trim();
|
|
|
|
// Reset the interface before starting a new check.
|
|
statusMessage.textContent = "Checking website...";
|
|
statusMessage.className = "status-message";
|
|
resultPanel.hidden = true;
|
|
checkButton.disabled = true;
|
|
checkButton.textContent = "Checking...";
|
|
|
|
try {
|
|
const response = await fetch("/api/uptime", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ url }),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
// Handle API-level errors.
|
|
if (!response.ok) {
|
|
throw new Error(result.error || "The request failed.");
|
|
}
|
|
|
|
// Handle unreachable or blocked destinations.
|
|
if (!result.online) {
|
|
throw new Error(result.error || "The website could not be reached.");
|
|
}
|
|
|
|
// Fill in the successful result.
|
|
onlineBadge.textContent = "Online";
|
|
onlineBadge.className = "status-badge online";
|
|
|
|
statusCode.textContent = result.statusCode;
|
|
responseTime.textContent = `${result.responseTimeMs} ms`;
|
|
redirectCount.textContent = result.redirectCount;
|
|
checkedAt.textContent = new Date(result.checkedAt).toLocaleString();
|
|
|
|
finalUrl.textContent = result.finalUrl;
|
|
finalUrl.href = result.finalUrl;
|
|
|
|
statusMessage.textContent = "Website check completed.";
|
|
resultPanel.hidden = false;
|
|
} catch (error) {
|
|
// Show a safe, readable message to the user.
|
|
statusMessage.textContent = error.message;
|
|
statusMessage.className = "status-message error";
|
|
|
|
onlineBadge.textContent = "Offline";
|
|
onlineBadge.className = "status-badge offline";
|
|
} finally {
|
|
// Restore the button whether the request succeeded or failed.
|
|
checkButton.disabled = false;
|
|
checkButton.textContent = "Check Website";
|
|
}
|
|
}); |