409 lines
13 KiB
JavaScript
409 lines
13 KiB
JavaScript
const BASE_URL = "http://localhost:8080";
|
|
const ACTION_WRITE = "write";
|
|
|
|
const state = {
|
|
token: localStorage.getItem("lambdaiot.token") || "",
|
|
devices: [],
|
|
sensors: [],
|
|
actors: [],
|
|
selectedDeviceId: null,
|
|
readingsLimit: 50,
|
|
deviceRefreshIntervalId: null,
|
|
};
|
|
|
|
const elements = {
|
|
authStatus: document.getElementById("authStatus"),
|
|
authMessage: document.getElementById("authMessage"),
|
|
loginForm: document.getElementById("loginForm"),
|
|
authBlock: document.getElementById("authBlock"),
|
|
authActions: document.getElementById("authActions"),
|
|
logoutButton: document.getElementById("logoutButton"),
|
|
deviceList: document.getElementById("deviceList"),
|
|
deviceMeta: document.getElementById("deviceMeta"),
|
|
sensorList: document.getElementById("sensorList"),
|
|
actorList: document.getElementById("actorList"),
|
|
sensorNote: document.getElementById("sensorNote"),
|
|
actorNote: document.getElementById("actorNote"),
|
|
refreshDevices: document.getElementById("refreshDevices"),
|
|
};
|
|
|
|
const templates = {
|
|
sensorCard: document.getElementById("sensorCardTemplate"),
|
|
actorCard: document.getElementById("actorCardTemplate"),
|
|
readingRow: document.getElementById("readingRowTemplate"),
|
|
};
|
|
|
|
function setAuthStatus(message) {
|
|
elements.authStatus.textContent = message;
|
|
}
|
|
|
|
function setAuthMessage(message, isError = false) {
|
|
elements.authMessage.textContent = message;
|
|
elements.authMessage.style.color = isError ? "#b0412e" : "var(--muted)";
|
|
}
|
|
|
|
function setDeviceRefreshInterval(enabled) {
|
|
if (state.deviceRefreshIntervalId) {
|
|
clearInterval(state.deviceRefreshIntervalId);
|
|
state.deviceRefreshIntervalId = null;
|
|
}
|
|
|
|
if (enabled) {
|
|
state.deviceRefreshIntervalId = setInterval(loadDevices, 15000);
|
|
}
|
|
}
|
|
|
|
function updateAuthUI() {
|
|
if (state.token) {
|
|
setAuthStatus("Signed in");
|
|
setAuthMessage("Token stored locally.");
|
|
elements.authBlock.classList.add("is-hidden");
|
|
elements.loginForm.classList.add("is-hidden");
|
|
elements.authActions.classList.remove("is-hidden");
|
|
setDeviceRefreshInterval(false);
|
|
} else {
|
|
setAuthStatus("Not signed in");
|
|
setAuthMessage("Login required for sensors, actors, and readings.");
|
|
elements.authBlock.classList.remove("is-hidden");
|
|
elements.loginForm.classList.remove("is-hidden");
|
|
elements.authActions.classList.add("is-hidden");
|
|
setDeviceRefreshInterval(true);
|
|
}
|
|
}
|
|
|
|
async function apiFetch(path, options = {}, authRequired = true) {
|
|
const headers = new Headers(options.headers || {});
|
|
if (authRequired) {
|
|
if (!state.token) {
|
|
throw new Error("Missing JWT token.");
|
|
}
|
|
headers.set("Authorization", `Bearer ${state.token}`);
|
|
}
|
|
if (options.body && !headers.has("Content-Type")) {
|
|
headers.set("Content-Type", "application/json");
|
|
}
|
|
|
|
const response = await fetch(`${BASE_URL}${path}`, {
|
|
...options,
|
|
headers,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const text = await response.text();
|
|
throw new Error(text || `Request failed with status ${response.status}`);
|
|
}
|
|
|
|
if (response.status === 204) {
|
|
return null;
|
|
}
|
|
|
|
return response.json();
|
|
}
|
|
|
|
async function loadDevices() {
|
|
elements.deviceList.innerHTML = "";
|
|
try {
|
|
const data = await apiFetch("/devices", {}, false);
|
|
state.devices = Array.isArray(data) ? data : [];
|
|
renderDeviceList();
|
|
} catch (error) {
|
|
const errorItem = document.createElement("li");
|
|
errorItem.className = "device-error";
|
|
errorItem.textContent = `Failed to load devices: ${error.message}`;
|
|
elements.deviceList.prepend(errorItem);
|
|
}
|
|
}
|
|
|
|
async function refreshAll() {
|
|
await loadDevices();
|
|
|
|
if (!state.token || !state.selectedDeviceId) {
|
|
return;
|
|
}
|
|
|
|
const selectedDevice = state.devices.find(
|
|
(device) => device.id === state.selectedDeviceId
|
|
);
|
|
|
|
if (selectedDevice) {
|
|
selectDevice(selectedDevice);
|
|
} else {
|
|
state.selectedDeviceId = null;
|
|
elements.deviceMeta.textContent = "Select a device";
|
|
elements.sensorList.innerHTML = "";
|
|
elements.actorList.innerHTML = "";
|
|
elements.sensorNote.textContent = "No device selected.";
|
|
elements.actorNote.textContent = "No device selected.";
|
|
}
|
|
}
|
|
|
|
function renderDeviceList() {
|
|
elements.deviceList.innerHTML = "";
|
|
if (state.devices.length === 0) {
|
|
elements.deviceList.innerHTML = "<li>No devices found.</li>";
|
|
return;
|
|
}
|
|
|
|
state.devices.forEach((device) => {
|
|
const item = document.createElement("li");
|
|
const statusLabel =
|
|
device.status_id === 2 ? "Pending" : device.status_id === 3 ? "Lost" : "";
|
|
const statusClass =
|
|
device.status_id === 2 ? "pending" : device.status_id === 3 ? "lost" : "";
|
|
const statusMarkup = statusLabel
|
|
? `<span class="device-status device-status--${statusClass}">${statusLabel}</span>`
|
|
: "";
|
|
|
|
item.classList.toggle("active", device.id === state.selectedDeviceId);
|
|
item.innerHTML = `
|
|
<div class="device-header">
|
|
<div class="device-name">${device.name}</div>
|
|
${statusMarkup}
|
|
</div>
|
|
<div class="device-location">${device.location || "No location"}</div>
|
|
`;
|
|
item.addEventListener("click", () => selectDevice(device));
|
|
elements.deviceList.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function selectDevice(device) {
|
|
state.selectedDeviceId = device.id;
|
|
renderDeviceList();
|
|
elements.deviceMeta.textContent = `${device.name} • ${device.description || "No description"}`;
|
|
loadDeviceDetails(device.id);
|
|
}
|
|
|
|
async function loadDeviceDetails(deviceId) {
|
|
elements.sensorList.innerHTML = "";
|
|
elements.actorList.innerHTML = "";
|
|
elements.sensorNote.textContent = "Loading sensors...";
|
|
elements.actorNote.textContent = "Loading actors...";
|
|
|
|
if (!state.token) {
|
|
elements.sensorNote.textContent = "Login required to view sensors.";
|
|
elements.actorNote.textContent = "Login required to view actors.";
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const [sensors, actors] = await Promise.all([
|
|
apiFetch("/sensors"),
|
|
apiFetch("/actors"),
|
|
]);
|
|
|
|
state.sensors = (sensors || []).filter((sensor) => sensor.device_id === deviceId);
|
|
state.actors = (actors || []).filter((actor) => actor.device_id === deviceId);
|
|
|
|
await renderSensors();
|
|
renderActors();
|
|
} catch (error) {
|
|
elements.sensorNote.textContent = `Failed to load sensors: ${error.message}`;
|
|
elements.actorNote.textContent = `Failed to load actors: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
async function renderSensors() {
|
|
elements.sensorList.innerHTML = "";
|
|
if (state.sensors.length === 0) {
|
|
elements.sensorNote.textContent = "No sensors for this device.";
|
|
return;
|
|
}
|
|
elements.sensorNote.textContent = `${state.sensors.length} sensor(s)`;
|
|
|
|
const readingsPromises = state.sensors.map(async (sensor) => {
|
|
try {
|
|
const readings = await apiFetch(
|
|
`/sensor-readings?sensor_id=${sensor.id}&limit=${state.readingsLimit}&page=0`
|
|
);
|
|
return { sensorId: sensor.id, readings: readings || [] };
|
|
} catch (error) {
|
|
return { sensorId: sensor.id, readings: [], error: error.message };
|
|
}
|
|
});
|
|
|
|
const readingsResults = await Promise.all(readingsPromises);
|
|
const readingsMap = new Map(readingsResults.map((entry) => [entry.sensorId, entry]));
|
|
|
|
state.sensors.forEach((sensor) => {
|
|
const card = templates.sensorCard.content.cloneNode(true);
|
|
const title = card.querySelector(".card-title");
|
|
const subtitle = card.querySelector(".card-subtitle");
|
|
const pill = card.querySelector(".pill");
|
|
const list = card.querySelector(".readings-list");
|
|
|
|
title.textContent = sensor.name;
|
|
subtitle.textContent = `${sensor.type} • ${sensor.id}`;
|
|
pill.textContent = sensor.data_type_id === 1 ? "bool" : "float";
|
|
|
|
const readingsEntry = readingsMap.get(sensor.id);
|
|
if (!readingsEntry || readingsEntry.readings.length === 0) {
|
|
list.textContent = readingsEntry?.error
|
|
? `Error: ${readingsEntry.error}`
|
|
: "No readings yet.";
|
|
} else {
|
|
readingsEntry.readings.forEach((reading) => {
|
|
const row = templates.readingRow.content.cloneNode(true);
|
|
row.querySelector(".reading-value").textContent = reading.value;
|
|
row.querySelector(".reading-time").textContent = new Date(
|
|
reading.value_at
|
|
).toLocaleString();
|
|
list.appendChild(row);
|
|
});
|
|
}
|
|
|
|
elements.sensorList.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function renderActors() {
|
|
elements.actorList.innerHTML = "";
|
|
if (state.actors.length === 0) {
|
|
elements.actorNote.textContent = "No actors for this device.";
|
|
return;
|
|
}
|
|
elements.actorNote.textContent = `${state.actors.length} actor(s)`;
|
|
|
|
state.actors.forEach((actor) => {
|
|
const card = templates.actorCard.content.cloneNode(true);
|
|
const cardRoot = card.querySelector(".card");
|
|
const title = card.querySelector(".card-title");
|
|
const subtitle = card.querySelector(".card-subtitle");
|
|
const pill = card.querySelector(".pill");
|
|
const body = card.querySelector(".card-body");
|
|
|
|
if (cardRoot) {
|
|
cardRoot.dataset.actorId = actor.id;
|
|
}
|
|
|
|
title.textContent = actor.name;
|
|
subtitle.textContent = `${actor.type} • ${actor.id}`;
|
|
pill.textContent = actor.data_type_id === 1 ? "bool" : "float";
|
|
|
|
const controls = document.createElement("div");
|
|
controls.className = "actor-controls";
|
|
|
|
if (actor.data_type_id === 1) {
|
|
const onButton = document.createElement("button");
|
|
onButton.textContent = "On";
|
|
onButton.addEventListener("click", () => writeActor(actor, 1));
|
|
|
|
const offButton = document.createElement("button");
|
|
offButton.className = "secondary";
|
|
offButton.textContent = "Off";
|
|
offButton.addEventListener("click", () => writeActor(actor, 0));
|
|
|
|
controls.appendChild(onButton);
|
|
controls.appendChild(offButton);
|
|
} else {
|
|
const input = document.createElement("input");
|
|
input.type = "number";
|
|
input.step = "any";
|
|
input.placeholder = "Value";
|
|
|
|
const setButton = document.createElement("button");
|
|
setButton.textContent = "Set";
|
|
setButton.addEventListener("click", () => {
|
|
const value = Number(input.value);
|
|
if (Number.isNaN(value)) {
|
|
showActorResponse(body, "Enter a numeric value.", true);
|
|
return;
|
|
}
|
|
writeActor(actor, value);
|
|
});
|
|
|
|
controls.appendChild(input);
|
|
controls.appendChild(setButton);
|
|
}
|
|
|
|
body.appendChild(controls);
|
|
|
|
const response = document.createElement("div");
|
|
response.className = "actor-response";
|
|
body.appendChild(response);
|
|
|
|
elements.actorList.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function showActorResponse(container, message, isError = false) {
|
|
if (!container) return;
|
|
const response = container.querySelector(".actor-response");
|
|
if (!response) return;
|
|
response.textContent = message;
|
|
response.style.color = isError ? "#b0412e" : "var(--muted)";
|
|
}
|
|
|
|
async function writeActor(actor, value) {
|
|
try {
|
|
const payload = { action: ACTION_WRITE, value };
|
|
await apiFetch(`/actors/${actor.id}/write`, {
|
|
method: "POST",
|
|
body: JSON.stringify(payload),
|
|
});
|
|
const card = findActorCard(actor.id);
|
|
showActorResponse(card, "Command published.");
|
|
} catch (error) {
|
|
const card = findActorCard(actor.id);
|
|
showActorResponse(card, `Error: ${error.message}`, true);
|
|
}
|
|
}
|
|
|
|
function findActorCard(actorId) {
|
|
const cards = Array.from(elements.actorList.querySelectorAll(".card"));
|
|
return cards.find((card) => card.dataset.actorId === actorId);
|
|
}
|
|
|
|
async function handleLogin(event) {
|
|
event.preventDefault();
|
|
const username = document.getElementById("username").value.trim();
|
|
const password = document.getElementById("password").value.trim();
|
|
|
|
if (!username || !password) {
|
|
setAuthMessage("Enter both username and password.", true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await apiFetch(
|
|
"/login",
|
|
{
|
|
method: "POST",
|
|
body: JSON.stringify({ username, password }),
|
|
},
|
|
false
|
|
);
|
|
|
|
state.token = result.token || "";
|
|
localStorage.setItem("lambdaiot.token", state.token);
|
|
updateAuthUI();
|
|
setAuthMessage("Login successful.");
|
|
refreshAll();
|
|
|
|
if (state.selectedDeviceId) {
|
|
loadDeviceDetails(state.selectedDeviceId);
|
|
}
|
|
} catch (error) {
|
|
setAuthMessage(`Login failed: ${error.message}`, true);
|
|
}
|
|
}
|
|
|
|
function handleLogout() {
|
|
state.token = "";
|
|
localStorage.removeItem("lambdaiot.token");
|
|
updateAuthUI();
|
|
setAuthMessage("Logged out.");
|
|
refreshAll();
|
|
elements.sensorList.innerHTML = "";
|
|
elements.actorList.innerHTML = "";
|
|
elements.sensorNote.textContent = "Login required to view sensors.";
|
|
elements.actorNote.textContent = "Login required to view actors.";
|
|
}
|
|
|
|
elements.loginForm.addEventListener("submit", handleLogin);
|
|
elements.logoutButton.addEventListener("click", handleLogout);
|
|
elements.refreshDevices.addEventListener("click", refreshAll);
|
|
|
|
updateAuthUI();
|
|
refreshAll();
|