feat: config files, settings screen, hardware check
- Add config.py with multi-source config (YAML, .env, env vars) - Add .env.example and config.yaml.example - Add settings API endpoints (GET/POST /api/v1/settings) - Add status endpoint (GET /api/v1/status) with hardware subsystem check - Add settings screen to web client (protected by API token) - Add localization strings for settings UI - Add tests for config module and new endpoints - Update README with config documentation
This commit is contained in:
Imrayya
+177
-10
@@ -4,18 +4,92 @@
|
||||
* Connects to the PaperDash server via WebSocket.
|
||||
* Uses vanilla JS with direct DOM manipulation (element.textContent)
|
||||
* to minimize E-Ink refresh flashing.
|
||||
*
|
||||
* Strings are loaded from Android resources via the JavaScript interface.
|
||||
*/
|
||||
|
||||
(() => {
|
||||
const SERVER_WS = `ws://${window.location.host}/ws`;
|
||||
const SERVER_API = `http://${window.location.host}`;
|
||||
const PIN_INPUT = document.getElementById("pin-input");
|
||||
const CONNECT_BTN = document.getElementById("connect-btn");
|
||||
const LOGIN_ERROR = document.getElementById("login-error");
|
||||
const LOGIN_SCREEN = document.getElementById("login-screen");
|
||||
const DASHBOARD_SCREEN = document.getElementById("dashboard-screen");
|
||||
const SETTINGS_SCREEN = document.getElementById("settings-screen");
|
||||
const SETTINGS_TOKEN_INPUT = document.getElementById("settings-token-input");
|
||||
const SETTINGS_ACCESS_BTN = document.getElementById("settings-access-btn");
|
||||
const SETTINGS_ERROR = document.getElementById("settings-error");
|
||||
const SETTINGS_CONTENT = document.getElementById("settings-content");
|
||||
const SETTINGS_PIN = document.getElementById("settings-pin");
|
||||
const SETTINGS_TOKEN = document.getElementById("settings-token");
|
||||
const SETTINGS_SAVE_BTN = document.getElementById("settings-save-btn");
|
||||
const SETTINGS_BACK_BTN = document.getElementById("settings-back-btn");
|
||||
const SETTINGS_STATUS = document.getElementById("settings-status");
|
||||
const BTN_SETTINGS = document.getElementById("btn-settings");
|
||||
|
||||
let ws = null;
|
||||
let reconnectTimer = null;
|
||||
let currentApiToken = "";
|
||||
const strings = {};
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Localization
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
function loadStrings() {
|
||||
if (window.Android && window.Android.getString) {
|
||||
const keys = [
|
||||
"login_error_enter_pin",
|
||||
"connecting",
|
||||
"login_error_disconnected",
|
||||
"no_playback",
|
||||
"mute",
|
||||
"muted",
|
||||
"no_notifications",
|
||||
"eta_prefix",
|
||||
"settings_title",
|
||||
"settings_subtitle",
|
||||
"access",
|
||||
"dashboard_pin_label",
|
||||
"api_token_label",
|
||||
"save",
|
||||
"back",
|
||||
"settings_error_invalid_token",
|
||||
"settings_saved",
|
||||
"settings_error_save_failed",
|
||||
];
|
||||
keys.forEach((key) => {
|
||||
strings[key] = window.Android.getString(key);
|
||||
});
|
||||
}
|
||||
applyStrings();
|
||||
}
|
||||
|
||||
function applyStrings() {
|
||||
// Apply data-i18n attributes
|
||||
document.querySelectorAll("[data-i18n]").forEach((el) => {
|
||||
const key = el.getAttribute("data-i18n");
|
||||
if (strings[key]) {
|
||||
el.textContent = strings[key];
|
||||
}
|
||||
});
|
||||
|
||||
// Apply data-i18n-placeholder attributes
|
||||
document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
|
||||
const key = el.getAttribute("data-i18n-placeholder");
|
||||
if (strings[key]) {
|
||||
el.placeholder = strings[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Load strings when DOM is ready
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", loadStrings);
|
||||
} else {
|
||||
loadStrings();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// PIN Login
|
||||
@@ -24,13 +98,13 @@
|
||||
function connect() {
|
||||
const pin = PIN_INPUT.value.trim();
|
||||
if (!pin) {
|
||||
LOGIN_ERROR.textContent = "Enter a PIN";
|
||||
LOGIN_ERROR.textContent = strings.login_error_enter_pin || "Enter a PIN";
|
||||
return;
|
||||
}
|
||||
|
||||
LOGIN_ERROR.textContent = "";
|
||||
CONNECT_BTN.disabled = true;
|
||||
CONNECT_BTN.textContent = "Connecting...";
|
||||
CONNECT_BTN.textContent = strings.connecting || "Connecting...";
|
||||
|
||||
ws = new WebSocket(`${SERVER_WS}?pin=${encodeURIComponent(pin)}`);
|
||||
|
||||
@@ -38,7 +112,7 @@
|
||||
LOGIN_SCREEN.classList.remove("active");
|
||||
DASHBOARD_SCREEN.classList.add("active");
|
||||
CONNECT_BTN.disabled = false;
|
||||
CONNECT_BTN.textContent = "Connect";
|
||||
CONNECT_BTN.textContent = strings.login_button || "Connect";
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
@@ -53,9 +127,10 @@
|
||||
ws.onclose = () => {
|
||||
DASHBOARD_SCREEN.classList.remove("active");
|
||||
LOGIN_SCREEN.classList.add("active");
|
||||
LOGIN_ERROR.textContent = "Disconnected. Re-enter PIN.";
|
||||
LOGIN_ERROR.textContent =
|
||||
strings.login_error_disconnected || "Disconnected. Re-enter PIN.";
|
||||
CONNECT_BTN.disabled = false;
|
||||
CONNECT_BTN.textContent = "Connect";
|
||||
CONNECT_BTN.textContent = strings.login_button || "Connect";
|
||||
|
||||
// Auto-reconnect after 5 seconds
|
||||
clearTimeout(reconnectTimer);
|
||||
@@ -91,7 +166,7 @@
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
function updateMedia(media) {
|
||||
setText("track-title", media.title || "No playback");
|
||||
setText("track-title", media.title || strings.no_playback || "No playback");
|
||||
setText("track-artist", media.artist || "");
|
||||
setText("track-album", media.album || "");
|
||||
|
||||
@@ -127,10 +202,10 @@
|
||||
const muteBtn = document.getElementById("btn-mute");
|
||||
if (audio.master_muted) {
|
||||
muteBtn.classList.add("muted");
|
||||
muteBtn.textContent = "MUTED";
|
||||
muteBtn.textContent = strings.muted || "MUTED";
|
||||
} else {
|
||||
muteBtn.classList.remove("muted");
|
||||
muteBtn.textContent = "MUTE";
|
||||
muteBtn.textContent = strings.mute || "MUTE";
|
||||
}
|
||||
|
||||
// Channels — use DOM API
|
||||
@@ -211,7 +286,7 @@
|
||||
if (!notifications || notifications.length === 0) {
|
||||
const p = document.createElement("p");
|
||||
p.style.color = "#888";
|
||||
p.textContent = "No notifications";
|
||||
p.textContent = strings.no_notifications || "No notifications";
|
||||
container.appendChild(p);
|
||||
return;
|
||||
}
|
||||
@@ -244,7 +319,7 @@
|
||||
if (n.eta) {
|
||||
const etaDiv = document.createElement("div");
|
||||
etaDiv.className = "notification-eta";
|
||||
etaDiv.textContent = "ETA: " + n.eta;
|
||||
etaDiv.textContent = (strings.eta_prefix || "ETA:") + " " + n.eta;
|
||||
div.appendChild(etaDiv);
|
||||
}
|
||||
|
||||
@@ -365,4 +440,96 @@
|
||||
const s = Math.floor(seconds % 60);
|
||||
return m + ":" + (s < 10 ? "0" : "") + s;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Settings
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
function showSettings() {
|
||||
DASHBOARD_SCREEN.classList.remove("active");
|
||||
SETTINGS_SCREEN.classList.add("active");
|
||||
SETTINGS_ERROR.textContent = "";
|
||||
SETTINGS_STATUS.textContent = "";
|
||||
SETTINGS_TOKEN_INPUT.value = "";
|
||||
SETTINGS_CONTENT.style.display = "none";
|
||||
}
|
||||
|
||||
function hideSettings() {
|
||||
SETTINGS_SCREEN.classList.remove("active");
|
||||
DASHBOARD_SCREEN.classList.add("active");
|
||||
}
|
||||
|
||||
async function accessSettings() {
|
||||
const token = SETTINGS_TOKEN_INPUT.value.trim();
|
||||
if (!token) {
|
||||
SETTINGS_ERROR.textContent =
|
||||
strings.settings_error_invalid_token || "Invalid token";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${SERVER_API}/api/v1/settings`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
SETTINGS_ERROR.textContent =
|
||||
strings.settings_error_invalid_token || "Invalid token";
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
currentApiToken = token;
|
||||
SETTINGS_ERROR.textContent = "";
|
||||
SETTINGS_PIN.value = data.dashboard_pin || "";
|
||||
SETTINGS_TOKEN.value = data.api_token || "";
|
||||
SETTINGS_CONTENT.style.display = "block";
|
||||
} catch (err) {
|
||||
SETTINGS_ERROR.textContent =
|
||||
strings.settings_error_invalid_token || "Invalid token";
|
||||
}
|
||||
}
|
||||
|
||||
async function saveSettings() {
|
||||
const pin = SETTINGS_PIN.value.trim();
|
||||
const token = SETTINGS_TOKEN.value.trim();
|
||||
|
||||
try {
|
||||
const response = await fetch(`${SERVER_API}/api/v1/settings`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${currentApiToken}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
dashboard_pin: pin,
|
||||
api_token: token,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
SETTINGS_STATUS.textContent =
|
||||
strings.settings_error_save_failed || "Failed to save settings";
|
||||
return;
|
||||
}
|
||||
|
||||
SETTINGS_STATUS.textContent =
|
||||
strings.settings_saved || "Settings saved";
|
||||
currentApiToken = token;
|
||||
} catch (err) {
|
||||
SETTINGS_STATUS.textContent =
|
||||
strings.settings_error_save_failed || "Failed to save settings";
|
||||
}
|
||||
}
|
||||
|
||||
// Settings event listeners
|
||||
BTN_SETTINGS.addEventListener("click", showSettings);
|
||||
SETTINGS_ACCESS_BTN.addEventListener("click", accessSettings);
|
||||
SETTINGS_SAVE_BTN.addEventListener("click", saveSettings);
|
||||
SETTINGS_BACK_BTN.addEventListener("click", hideSettings);
|
||||
SETTINGS_TOKEN_INPUT.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") accessSettings();
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user