Update templates/index.html

This commit is contained in:
2026-01-20 09:40:45 +01:00
parent 416c8feff1
commit 673e88d6d3

View File

@@ -6,82 +6,54 @@
<style>
body { font-family: sans-serif; background-color: #f4f7f6; padding: 20px; }
.container { display: flex; max-width: 900px; margin: auto; background: white; padding: 20px; border: 1px solid #ccc; gap: 20px; }
.input-panel { flex: 1; }
.output-panel { flex: 1; border: 1px solid #999; padding: 15px; min-height: 350px; background: #fff; white-space: pre-wrap; }
table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
td { padding: 4px; vertical-align: middle; }
.panel { flex: 1; }
.output { border: 1px solid #999; padding: 15px; min-height: 350px; white-space: pre-wrap; }
input, select { padding: 4px; border: 1px solid #ccc; width: 100%; box-sizing: border-box; }
.btn-calc { margin-top: 15px; padding: 10px; width: 100%; cursor: pointer; background: #eee; border: 1px solid #999; }
.btn-action { padding: 8px; cursor: pointer; background: #f9f9f9; border: 1px solid #ccc; flex: 1; }
hr { border: 0; border-top: 1px solid #ccc; margin: 15px 0; }
.btn-stampa { padding: 10px; cursor: pointer; background: #fff3e0; border: 1px solid #999; flex: 1; }
</style>
</head>
<body>
<div class="container">
<div class="input-panel">
<div class="panel">
<form method="POST">
<table>
<tr><td>Larghezza</td><td><input type="text" name="l" value="{{form.get('l','1')}}"></td><td><select name="ul"><option value="m">m</option></select></td></tr>
<tr><td>Profondità</td><td><input type="text" name="p" value="{{form.get('p','1')}}"></td><td><select name="up"><option value="m">m</option></select></td></tr>
<tr><td>Altezza</td><td><input type="text" name="a" value="{{form.get('a','1')}}"></td><td><select name="ua"><option value="m">m</option></select></td></tr>
<tr><td colspan="3"><hr></td></tr>
<tr><td>P. Cemento</td><td><input type="text" name="p_cem" value="{{form.get('p_cem','1')}}"></td></tr>
<tr><td>P. Sabbia</td><td><input type="text" name="p_sab" value="{{form.get('p_sab','3')}}"></td></tr>
<tr><td>P. Ghiaia</td><td><input type="text" name="p_ghi" value="{{form.get('p_ghi','5')}}"></td></tr>
</table>
<hr>
<table>
<tr><td>Parte Cemento</td><td><input type="text" name="p_cem" value="{{form.get('p_cem','1')}}"></td></tr>
<tr><td>Parte Sabbia</td><td><input type="text" name="p_sab" value="{{form.get('p_sab','3')}}"></td></tr>
<tr><td>Parte Ghiaia</td><td><input type="text" name="p_ghi" value="{{form.get('p_ghi','5')}}"></td></tr>
</table>
<hr>
<table>
<tr><td>Peso Cemento (kg)</td><td><input type="text" name="w_cem" value="{{form.get('w_cem','25')}}"></td></tr>
<tr><td>Peso Sabbia (kg)</td><td><input type="text" name="w_sab" value="{{form.get('w_sab','25')}}"></td></tr>
<tr><td>Peso Ghiaia (kg)</td><td><input type="text" name="w_ghi" value="{{form.get('w_ghi','25')}}"></td></tr>
</table>
<button type="submit" class="btn-calc">Calcola</button>
<button type="submit" style="width:100%; padding:10px;">Calcola</button>
</form>
</div>
<div class="output-panel">
<strong>Risultati del Calcolo:</strong>
<div class="panel output">
<strong>Risultati:</strong>
{% if res %}
--- Dettagli Gettata ---
Volume totale: {{ res.vol }} m3
Peso stimato: {{ res.peso }} kg
--- Totale Materiali ---
Volume: {{ res.vol }} m3 | Peso: {{ res.peso }} kg
Cemento: {{ res.s_cem }} sacchetti
Sabbia: {{ res.s_sab }} sacchetti
Ghiaia: {{ res.s_ghi }} sacchetti
<strong>TOTALE: {{ res.tot_sacc }} sacchetti</strong>
<div style="display:flex; gap:10px; margin-top:20px;">
<form action="/download" method="POST" style="flex:1; display:flex;">
<input type="hidden" name="res_vol" value="{{res.vol}}">
<input type="hidden" name="res_tot_s" value="{{res.tot_sacc}}">
<button type="submit" class="btn-action">Stampa TXT</button>
</form>
<button type="button" onclick="stampaCups()" class="btn-action" style="background:#fff3e0;">Stampa PDF (CUPS)</button>
<button type="button" onclick="stampa()" class="btn-stampa">Stampa PDF (CUPS)</button>
</div>
<div id="status" style="margin-top:10px; font-size:12px; font-weight:bold; text-align:center;"></div>
{% else %}
<p style="color:#999; text-align:center; margin-top:50px;">Premi "Calcola" per i risultati.</p>
<div id="status" style="margin-top:10px; font-weight:bold; text-align:center;"></div>
{% endif %}
</div>
</div>
<script>
function stampaCups() {
function stampa() {
const s = document.getElementById('status');
s.innerText = "Invio alla stampante...";
s.innerText = "Invio...";
const fd = new FormData();
fd.append('res_vol', '{{res.vol if res else ""}}');
fd.append('res_tot_s', '{{res.tot_sacc if res else ""}}');
fd.append('v', '{{res.vol if res else ""}}');
fd.append('p', '{{res.peso if res else ""}}');
fd.append('ts', '{{res.tot_sacc if res else ""}}');
fetch('/stampa_pdf', { method: 'POST', body: fd })
.then(r => r.text()).then(m => {
s.innerText = m;
s.style.color = m.includes("OK") ? "green" : "red";
});
.then(r => r.text()).then(m => { s.innerText = m; s.style.color = m.includes("OK") ? "green" : "red"; });
}
</script>
</body>