fix the manager
This commit is contained in:
493
manager-solution/dashboard/index.html
Normal file
493
manager-solution/dashboard/index.html
Normal file
@@ -0,0 +1,493 @@
|
||||
<!doctype html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Installazione Fiscality</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f5f1e8;
|
||||
--panel: #fffdf8;
|
||||
--ink: #1f2a2e;
|
||||
--muted: #617076;
|
||||
--line: #d9cfbf;
|
||||
--accent: #0f6d62;
|
||||
--accent-2: #d38b32;
|
||||
--danger: #9f2f2f;
|
||||
--ok: #156c3d;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
color: var(--ink);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(211, 139, 50, 0.18), transparent 24rem),
|
||||
linear-gradient(180deg, #f8f3ea 0%, var(--bg) 100%);
|
||||
}
|
||||
.shell {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem 3rem;
|
||||
}
|
||||
.hero {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1.2fr 0.8fr;
|
||||
align-items: start;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.hero-panel, .panel {
|
||||
background: color-mix(in srgb, var(--panel) 94%, white 6%);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 20px;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 16px 40px rgba(31, 42, 46, 0.06);
|
||||
}
|
||||
h1, h2, h3 { margin: 0 0 0.75rem; }
|
||||
h1 { font-size: clamp(2rem, 4vw, 3.8rem); line-height: 0.95; }
|
||||
h2 { font-size: 1.2rem; }
|
||||
p { margin: 0; color: var(--muted); line-height: 1.5; }
|
||||
.actions, .toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 0.8rem 1.1rem;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
background: var(--ink);
|
||||
}
|
||||
button.secondary { background: var(--accent); }
|
||||
button.ghost {
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
button.danger { background: var(--danger); }
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 0.85rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
textarea { min-height: 7rem; resize: vertical; }
|
||||
.users {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.user-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
.user-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
.status {
|
||||
margin-top: 1rem;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 14px;
|
||||
background: #ece7dd;
|
||||
color: var(--ink);
|
||||
}
|
||||
.status.ok { background: rgba(21, 108, 61, 0.12); color: var(--ok); }
|
||||
.status.error { background: rgba(159, 47, 47, 0.12); color: var(--danger); }
|
||||
.steps {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.step {
|
||||
padding: 0.9rem 1rem;
|
||||
border-radius: 14px;
|
||||
background: #f0e8d9;
|
||||
}
|
||||
code {
|
||||
font-family: "SFMono-Regular", Consolas, monospace;
|
||||
background: rgba(15, 109, 98, 0.08);
|
||||
padding: 0.15rem 0.35rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.hero, .grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="hero">
|
||||
<div class="hero-panel">
|
||||
<p>Configuratore installazione</p>
|
||||
<h1>Configura Fiscality senza modificare il JSON a mano.</h1>
|
||||
<p>Crea gli utenti aziendali, controlla porte e nomi dei container, salva in <code>manager/config.json</code>, poi esegui <code>./install.sh</code>.</p>
|
||||
<div class="actions">
|
||||
<button id="saveButton" class="secondary">Salva configurazione</button>
|
||||
<button id="validateButton">Valida</button>
|
||||
<button id="downloadButton" class="ghost">Scarica JSON</button>
|
||||
<button id="addUserButton" class="ghost">Aggiungi utente</button>
|
||||
</div>
|
||||
<div id="status" class="status">Caricamento configurazione...</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<h2>Procedura consigliata</h2>
|
||||
<div class="steps">
|
||||
<div class="step">1. Apri questa pagina con <code>./configure.sh</code>.</div>
|
||||
<div class="step">2. Aggiungi una voce per ogni dipendente o postazione che deve usare Fiscality.</div>
|
||||
<div class="step">3. Salva la configurazione, poi installa con <code>./install.sh</code>.</div>
|
||||
<div class="step">4. Comunica agli utenti la porta dedicata o l'URL gateway condiviso, se lo abiliti.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Valori predefiniti</h2>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<label for="containerPrefix">Prefisso container</label>
|
||||
<input id="containerPrefix" type="text">
|
||||
</div>
|
||||
<div>
|
||||
<label for="memLimit">Limite memoria</label>
|
||||
<input id="memLimit" type="text" placeholder="3g">
|
||||
</div>
|
||||
<div>
|
||||
<label for="memswapLimit">Limite swap</label>
|
||||
<input id="memswapLimit" type="text" placeholder="5g">
|
||||
</div>
|
||||
<div>
|
||||
<label for="privileged">Privilegiato</label>
|
||||
<input id="privileged" type="text" placeholder="true o false">
|
||||
</div>
|
||||
<div>
|
||||
<label for="defaultEnv">Ambiente predefinito JSON</label>
|
||||
<textarea id="defaultEnv"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="defaultVolumes">Volumi predefiniti JSON</label>
|
||||
<textarea id="defaultVolumes"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="defaultAdvanced">Altre impostazioni predefinite JSON</label>
|
||||
<textarea id="defaultAdvanced"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="toolbar">
|
||||
<h2 style="margin-right:auto">Utenti</h2>
|
||||
</div>
|
||||
<div id="users" class="users"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<template id="userTemplate">
|
||||
<article class="user-card">
|
||||
<div class="user-head">
|
||||
<h3>Utente</h3>
|
||||
<button class="danger remove-user" type="button">Rimuovi</button>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<label>ID utente</label>
|
||||
<input data-field="id" type="text" placeholder="mario">
|
||||
</div>
|
||||
<div>
|
||||
<label>Porta</label>
|
||||
<input data-field="port" type="number" placeholder="3001">
|
||||
</div>
|
||||
<div>
|
||||
<label>Password</label>
|
||||
<input data-field="password" type="text" placeholder="segreta">
|
||||
</div>
|
||||
<div>
|
||||
<label>Nome container personalizzato</label>
|
||||
<input data-field="container_name" type="text" placeholder="opzionale">
|
||||
</div>
|
||||
<div>
|
||||
<label>Ambiente aggiuntivo JSON</label>
|
||||
<textarea data-field="environment"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label>Volumi JSON</label>
|
||||
<textarea data-field="volumes"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label>Altre impostazioni utente JSON</label>
|
||||
<textarea data-field="advanced"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const statusEl = document.getElementById("status");
|
||||
const usersEl = document.getElementById("users");
|
||||
const template = document.getElementById("userTemplate");
|
||||
|
||||
const defaultConfig = {
|
||||
defaults: {
|
||||
container_prefix: "fis-",
|
||||
environment: { PUID: "1000", PGID: "1000" },
|
||||
volumes: { "v-conf-{id}": "/config" },
|
||||
mem_limit: "3g",
|
||||
memswap_limit: "5g",
|
||||
privileged: true
|
||||
},
|
||||
users: []
|
||||
};
|
||||
|
||||
async function readJsonResponse(response) {
|
||||
const contentType = response.headers.get("content-type") || "";
|
||||
const text = await response.text();
|
||||
|
||||
if (!contentType.includes("application/json")) {
|
||||
throw new Error(
|
||||
"Backend del configuratore non disponibile. Apri questa pagina tramite ./configure.sh all'indirizzo http://127.0.0.1:8765, non da un'anteprima dell'IDE."
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(text);
|
||||
} catch (error) {
|
||||
throw new Error("Il backend ha restituito JSON non valido.");
|
||||
}
|
||||
}
|
||||
|
||||
function setStatus(message, kind = "") {
|
||||
statusEl.textContent = translateMessage(message);
|
||||
statusEl.className = `status ${kind}`.trim();
|
||||
}
|
||||
|
||||
function translateMessage(message) {
|
||||
const replacements = [
|
||||
[/^Duplicate user id: (.+)$/, "ID utente duplicato: $1"],
|
||||
[/^Duplicate port: (.+)$/, "Porta duplicata: $1"],
|
||||
[/^Duplicate container_name: (.+)$/, "Nome container duplicato: $1"],
|
||||
[/^User (.+) must define at least one volume$/, "L'utente $1 deve definire almeno un volume"],
|
||||
[/^User (.+) has duplicate volume mount targets$/, "L'utente $1 ha destinazioni di montaggio volume duplicate"],
|
||||
[/^User (.+) must define environment\.PASSWORD$/, "L'utente $1 deve definire environment.PASSWORD"],
|
||||
[/^Configuration must contain at least one user$/, "La configurazione deve contenere almeno un utente"]
|
||||
];
|
||||
|
||||
for (const [pattern, replacement] of replacements) {
|
||||
if (pattern.test(message)) {
|
||||
return message.replace(pattern, replacement);
|
||||
}
|
||||
}
|
||||
|
||||
return message;
|
||||
}
|
||||
|
||||
function stringify(value) {
|
||||
return JSON.stringify(value ?? {}, null, 2);
|
||||
}
|
||||
|
||||
function parseJsonField(value, label) {
|
||||
if (!value.trim()) {
|
||||
return {};
|
||||
}
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch (error) {
|
||||
throw new Error(`${label} deve contenere JSON valido`);
|
||||
}
|
||||
}
|
||||
|
||||
function renderDefaults(config) {
|
||||
const advanced = { ...(config.defaults ?? {}) };
|
||||
delete advanced.container_prefix;
|
||||
delete advanced.mem_limit;
|
||||
delete advanced.memswap_limit;
|
||||
delete advanced.privileged;
|
||||
delete advanced.environment;
|
||||
delete advanced.volumes;
|
||||
|
||||
document.getElementById("containerPrefix").value = config.defaults.container_prefix ?? "fis-";
|
||||
document.getElementById("memLimit").value = config.defaults.mem_limit ?? "";
|
||||
document.getElementById("memswapLimit").value = config.defaults.memswap_limit ?? "";
|
||||
document.getElementById("privileged").value = String(config.defaults.privileged ?? false);
|
||||
document.getElementById("defaultEnv").value = stringify(config.defaults.environment);
|
||||
document.getElementById("defaultVolumes").value = stringify(config.defaults.volumes);
|
||||
document.getElementById("defaultAdvanced").value = stringify(advanced);
|
||||
}
|
||||
|
||||
function addUserCard(user = {}) {
|
||||
const node = template.content.firstElementChild.cloneNode(true);
|
||||
const advanced = { ...user };
|
||||
delete advanced.id;
|
||||
delete advanced.port;
|
||||
delete advanced.container_name;
|
||||
delete advanced.environment;
|
||||
delete advanced.volumes;
|
||||
|
||||
node.querySelector('[data-field="id"]').value = user.id ?? "";
|
||||
node.querySelector('[data-field="port"]').value = user.port ?? "";
|
||||
node.querySelector('[data-field="password"]').value = user.environment?.PASSWORD ?? "";
|
||||
node.querySelector('[data-field="container_name"]').value = user.container_name ?? "";
|
||||
|
||||
const environment = { ...(user.environment ?? {}) };
|
||||
delete environment.PASSWORD;
|
||||
node.querySelector('[data-field="environment"]').value = stringify(environment);
|
||||
node.querySelector('[data-field="volumes"]').value = stringify(user.volumes ?? {});
|
||||
node.querySelector('[data-field="advanced"]').value = stringify(advanced);
|
||||
|
||||
node.querySelector(".remove-user").addEventListener("click", () => {
|
||||
node.remove();
|
||||
});
|
||||
|
||||
usersEl.appendChild(node);
|
||||
}
|
||||
|
||||
function renderUsers(config) {
|
||||
usersEl.innerHTML = "";
|
||||
config.users.forEach(addUserCard);
|
||||
if (config.users.length === 0) {
|
||||
addUserCard({ port: 3001 });
|
||||
}
|
||||
}
|
||||
|
||||
function collectConfig() {
|
||||
const defaultAdvanced = parseJsonField(document.getElementById("defaultAdvanced").value, "Altre impostazioni predefinite");
|
||||
const config = {
|
||||
defaults: {
|
||||
...defaultAdvanced,
|
||||
container_prefix: document.getElementById("containerPrefix").value.trim() || "fis-",
|
||||
mem_limit: document.getElementById("memLimit").value.trim() || null,
|
||||
memswap_limit: document.getElementById("memswapLimit").value.trim() || null,
|
||||
privileged: document.getElementById("privileged").value.trim().toLowerCase() === "true",
|
||||
environment: parseJsonField(document.getElementById("defaultEnv").value, "Ambiente predefinito"),
|
||||
volumes: parseJsonField(document.getElementById("defaultVolumes").value, "Volumi predefiniti")
|
||||
},
|
||||
users: []
|
||||
};
|
||||
|
||||
usersEl.querySelectorAll(".user-card").forEach((card) => {
|
||||
const environment = parseJsonField(card.querySelector('[data-field="environment"]').value, "Ambiente utente");
|
||||
const password = card.querySelector('[data-field="password"]').value.trim();
|
||||
if (password) {
|
||||
environment.PASSWORD = password;
|
||||
}
|
||||
|
||||
const advanced = parseJsonField(card.querySelector('[data-field="advanced"]').value, "Altre impostazioni utente");
|
||||
config.users.push({
|
||||
...advanced,
|
||||
id: card.querySelector('[data-field="id"]').value.trim(),
|
||||
port: Number(card.querySelector('[data-field="port"]').value),
|
||||
container_name: card.querySelector('[data-field="container_name"]').value.trim() || undefined,
|
||||
environment,
|
||||
volumes: parseJsonField(card.querySelector('[data-field="volumes"]').value, "Volumi utente")
|
||||
});
|
||||
});
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const response = await fetch("/api/config");
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
"Backend del configuratore non disponibile. Avvialo con ./configure.sh e apri http://127.0.0.1:8765."
|
||||
);
|
||||
}
|
||||
const config = await readJsonResponse(response);
|
||||
renderDefaults(config);
|
||||
renderUsers(config);
|
||||
setStatus("Configurazione caricata. Controlla i valori e salva quando pronta.");
|
||||
} catch (error) {
|
||||
renderDefaults(defaultConfig);
|
||||
renderUsers(defaultConfig);
|
||||
setStatus(error.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function saveConfig() {
|
||||
try {
|
||||
const payload = collectConfig();
|
||||
const response = await fetch("/api/config", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const result = await readJsonResponse(response);
|
||||
if (!response.ok || !result.ok) {
|
||||
throw new Error(result.error || "Impossibile salvare la configurazione");
|
||||
}
|
||||
renderDefaults(result.config);
|
||||
renderUsers(result.config);
|
||||
setStatus("Configurazione salvata in manager/config.json.", "ok");
|
||||
} catch (error) {
|
||||
setStatus(error.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function validateConfig() {
|
||||
try {
|
||||
const payload = collectConfig();
|
||||
const response = await fetch("/api/config", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const result = await readJsonResponse(response);
|
||||
if (!response.ok || !result.ok) {
|
||||
throw new Error(result.error || "Validazione non riuscita");
|
||||
}
|
||||
setStatus("Validazione completata e configurazione normalizzata salvata.", "ok");
|
||||
renderDefaults(result.config);
|
||||
renderUsers(result.config);
|
||||
} catch (error) {
|
||||
setStatus(error.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
function downloadConfig() {
|
||||
try {
|
||||
const payload = collectConfig();
|
||||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "config.json";
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
setStatus("config.json scaricato. Usalo solo se ti serve una copia esterna.", "ok");
|
||||
} catch (error) {
|
||||
setStatus(error.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("saveButton").addEventListener("click", saveConfig);
|
||||
document.getElementById("validateButton").addEventListener("click", validateConfig);
|
||||
document.getElementById("downloadButton").addEventListener("click", downloadConfig);
|
||||
document.getElementById("addUserButton").addEventListener("click", () => addUserCard({ port: 3001 }));
|
||||
|
||||
loadConfig();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user