723 lines
43 KiB
HTML
723 lines
43 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calcolatore di Risparmio Fotovoltaico (Completo)</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.card-shadow {
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.action-btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
.action-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.lang-btn {
|
|
opacity: 0.6;
|
|
}
|
|
.lang-btn.active {
|
|
opacity: 1;
|
|
font-weight: 800;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
|
|
|
|
<div class="w-full max-w-3xl bg-white rounded-2xl card-shadow overflow-hidden">
|
|
<div class="p-6 md:p-8">
|
|
<div class="flex justify-end gap-3 text-sm mb-4">
|
|
<button id="lang-it" class="lang-btn">IT</button>
|
|
<button id="lang-en" class="lang-btn">EN</button>
|
|
</div>
|
|
|
|
<h1 class="text-2xl md:text-3xl font-bold text-gray-800 text-center mb-2" data-translate-key="mainTitle">Calcolatore Economico Fotovoltaico</h1>
|
|
<p class="text-gray-600 text-center mb-6 md:mb-8" data-translate-key="mainSubtitle">Analizza costi, risparmi e guadagni del tuo impianto solare.</p>
|
|
|
|
<!-- Sezione Input Principali -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
<div>
|
|
<label for="consumoTotale" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="totalConsumptionLabel">Consumo Totale Casa (kWh)</label>
|
|
<input type="number" id="consumoTotale" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="totalConsumptionPlaceholder">
|
|
</div>
|
|
<div>
|
|
<label for="consumoRete" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="gridConsumptionLabel">Consumo dalla Rete (kWh)</label>
|
|
<input type="number" id="consumoRete" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="gridConsumptionPlaceholder">
|
|
</div>
|
|
<div>
|
|
<label for="energiaImmessa" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="feedInEnergyLabel">Energia Immessa in Rete (kWh)</label>
|
|
<input type="number" id="energiaImmessa" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="feedInEnergyPlaceholder">
|
|
</div>
|
|
<div>
|
|
<label for="costoKwh" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="purchasePriceLabel">Costo Acquisto kWh (€)</label>
|
|
<input type="number" id="costoKwh" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="purchasePricePlaceholder">
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label for="prezzoVendita" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="sellPriceLabel">Prezzo Vendita kWh (€)</label>
|
|
<input type="number" id="prezzoVendita" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="sellPricePlaceholder">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sezione Gestione Gruppi -->
|
|
<div class="border-t pt-6 mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4 text-center" data-translate-key="groupManagementTitle">Gestione Gruppi di Utenze</h3>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-end">
|
|
<div>
|
|
<label for="groupNameInput" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="newGroupNameLabel">Nome Nuovo Gruppo</label>
|
|
<input type="text" id="groupNameInput" class="w-full px-3 py-2 border border-gray-300 rounded-lg" data-translate-key-placeholder="newGroupNamePlaceholder">
|
|
</div>
|
|
<button id="saveGroupBtn" class="w-full bg-teal-600 text-white font-semibold py-2 px-4 rounded-lg action-btn transition-colors" data-translate-key="saveGroupBtn">Salva Lista Corrente come Gruppo</button>
|
|
</div>
|
|
<div class="border-t my-4"></div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
|
|
<div class="md:col-span-2">
|
|
<label for="groupSelect" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="savedGroupsLabel">Gruppi Salvati</label>
|
|
<select id="groupSelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white"></select>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button id="loadGroupBtn" class="w-full bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg action-btn transition-colors" data-translate-key="loadBtn">Carica</button>
|
|
<button id="deleteGroupBtn" class="w-full bg-red-500 text-white font-semibold py-2 px-4 rounded-lg action-btn transition-colors" data-translate-key="deleteBtn">Elimina</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sezione Utenze Specifiche -->
|
|
<div class="border-t pt-6">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4 text-center" data-translate-key="specificUtilitiesTitle">Aggiungi Utenze Specifiche (Opzionale)</h3>
|
|
<div class="flex flex-col md:flex-row gap-4 items-end mb-4">
|
|
<div class="flex-grow w-full">
|
|
<label for="nomeUtenza" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="utilityNameLabel">Nome Utenza</label>
|
|
<input type="text" id="nomeUtenza" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" data-translate-key-placeholder="utilityNamePlaceholder">
|
|
</div>
|
|
<div class="flex-grow w-full md:w-auto">
|
|
<label for="consumoUtenza" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="consumptionLabel">Consumo (kWh)</label>
|
|
<input type="number" id="consumoUtenza" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" data-translate-key-placeholder="consumptionPlaceholder">
|
|
</div>
|
|
<button id="addUtenzaBtn" class="w-full md:w-auto bg-gray-700 text-white font-semibold py-2 px-6 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 transition-all" data-translate-key="addBtn">Aggiungi</button>
|
|
</div>
|
|
<div id="listaUtenze" class="space-y-2">
|
|
<!-- Le utenze aggiunte verranno mostrate qui -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pulsante di Calcolo -->
|
|
<div class="text-center mt-8">
|
|
<button id="calcolaBtn" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-300 transform hover:scale-105" data-translate-key="calculateBtn">
|
|
Calcola Bilancio
|
|
</button>
|
|
</div>
|
|
<!-- Messaggio di Errore -->
|
|
<div id="error-message" class="hidden mt-4 text-center text-red-600 font-medium p-3 bg-red-100 rounded-lg"></div>
|
|
</div>
|
|
|
|
<!-- Sezione Risultati -->
|
|
<div id="risultati" class="hidden bg-gray-50 p-6 md:p-8 border-t border-gray-200">
|
|
|
|
<!-- Riepilogo Economico -->
|
|
<div class="mb-8">
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-800 text-center mb-6" data-translate-key="economicSummaryTitle">Riepilogo Economico</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-center">
|
|
<div class="bg-white p-4 rounded-lg border border-red-200">
|
|
<p class="text-sm text-gray-500" data-translate-key="costFromGridLabel">Costo dalla Rete</p>
|
|
<p id="costoRete" class="text-2xl font-bold text-red-600">-</p>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-lg border border-green-200">
|
|
<p class="text-sm text-gray-500" data-translate-key="savingsFromSelfConsumptionLabel">Risparmio Autoconsumo</p>
|
|
<p id="risparmioFV" class="text-2xl font-bold text-green-600">-</p>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-lg border border-yellow-400">
|
|
<p class="text-sm text-gray-500" data-translate-key="feedInRevenueLabel">Guadagno Immissione</p>
|
|
<p id="guadagnoImmissione" class="text-2xl font-bold text-yellow-600">-</p>
|
|
</div>
|
|
<div id="bilancioCard" class="bg-white p-4 rounded-lg border-2">
|
|
<p class="text-sm font-semibold" data-translate-key="finalBalanceLabel">Bilancio Finale</p>
|
|
<p id="bilancioFinale" class="text-2xl font-bold">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Riepilogo Energetico -->
|
|
<div class="mb-8 pt-6 border-t">
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-800 text-center mb-6" data-translate-key="energySummaryTitle">Riepilogo Energetico (kWh)</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-center">
|
|
<div class="bg-white p-4 rounded-lg border">
|
|
<p class="text-sm text-gray-500" data-translate-key="selfConsumedEnergyLabel">Energia Autoconsumata</p>
|
|
<p id="energiaFV" class="text-2xl font-bold text-blue-600">-</p>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-lg border">
|
|
<p class="text-sm text-gray-500" data-translate-key="energyFromGridLabel">Energia da Rete</p>
|
|
<p id="energiaRete" class="text-2xl font-bold text-red-600">-</p>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-lg border">
|
|
<p class="text-sm text-gray-500" data-translate-key="fedInEnergySummaryLabel">Energia Immessa</p>
|
|
<p id="energiaImmessaOut" class="text-2xl font-bold text-yellow-600">-</p>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-lg border">
|
|
<p class="text-sm text-gray-500" data-translate-key="totalPVProductionLabel">Totale Prodotto da FV</p>
|
|
<p id="energiaProdotta" class="text-2xl font-bold text-green-600">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analisi Costi Utenze Specifiche -->
|
|
<div id="analisi-costi-specifica" class="hidden mb-8 pt-6 border-t">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-4 text-center" data-translate-key="specificUtilitiesCostAnalysisTitle">Analisi Costi Utenze Specifiche</h3>
|
|
<div id="lista-costi-utenze" class="space-y-3">
|
|
<!-- I costi delle utenze verranno mostrati qui -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grafico Ripartizione Fonti -->
|
|
<div class="pt-6 border-t">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-3 text-center" data-translate-key="energySourcesBreakdownTitle">Ripartizione Fonti Energetiche (Consumo Casa)</h3>
|
|
<div class="w-full bg-gray-200 rounded-full h-8 overflow-hidden flex">
|
|
<div id="barraRete" class="bg-red-500 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500" style="width: 0%;"></div>
|
|
<div id="barraFV" class="bg-green-500 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500" style="width: 0%;"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-2 text-sm">
|
|
<div class="flex items-center">
|
|
<span class="w-3 h-3 bg-red-500 rounded-full mr-2"></span>
|
|
<span id="percentualeRete">Dalla Rete: -%</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
|
|
<span id="percentualeFV">Da Fotovoltaico: -%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grafico Incidenza Consumi -->
|
|
<div id="grafico-specifica" class="hidden mt-8 pt-6 border-t">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-3 text-center" data-translate-key="utilitiesImpactTitle">Incidenza Utenze sui Consumi Totali</h3>
|
|
<div class="w-full bg-gray-200 rounded-full h-8 overflow-hidden flex">
|
|
<div id="barraSpecifica" class="bg-purple-600 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500" style="width: 0%;"></div>
|
|
<div id="barraAltri" class="bg-gray-400 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500" style="width: 0%;"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-2 text-sm">
|
|
<div class="flex items-center">
|
|
<span class="w-3 h-3 bg-purple-600 rounded-full mr-2"></span>
|
|
<span id="percentualeSpecifica">Totale Utenze Specifiche: -%</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-3 h-3 bg-gray-400 rounded-full mr-2"></span>
|
|
<span id="percentualeAltri">Altri Consumi: -%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// --- STATE MANAGEMENT ---
|
|
let specificUtilities = [];
|
|
let utilityGroups = [];
|
|
let currentLanguage = 'it';
|
|
let lastCalculationData = null;
|
|
|
|
// --- TRANSLATIONS ---
|
|
const translations = {
|
|
mainTitle: { it: 'Calcolatore Economico Fotovoltaico', en: 'Economic Photovoltaic Calculator' },
|
|
mainSubtitle: { it: 'Analizza costi, risparmi e guadagni del tuo impianto solare.', en: 'Analyze costs, savings, and earnings of your solar system.' },
|
|
totalConsumptionLabel: { it: 'Consumo Totale Casa (kWh)', en: 'Total Home Consumption (kWh)' },
|
|
totalConsumptionPlaceholder: { it: 'Es. 450', en: 'E.g. 450' },
|
|
gridConsumptionLabel: { it: 'Consumo dalla Rete (kWh)', en: 'Consumption from Grid (kWh)' },
|
|
gridConsumptionPlaceholder: { it: 'Es. 150', en: 'E.g. 150' },
|
|
feedInEnergyLabel: { it: 'Energia Immessa in Rete (kWh)', en: 'Energy Fed into Grid (kWh)' },
|
|
feedInEnergyPlaceholder: { it: 'Es. 100', en: 'E.g. 100' },
|
|
purchasePriceLabel: { it: 'Costo Acquisto kWh (€)', en: 'Purchase Price per kWh (€)' },
|
|
purchasePricePlaceholder: { it: 'Es. 0.25', en: 'E.g. 0.25' },
|
|
sellPriceLabel: { it: 'Prezzo Vendita kWh (€)', en: 'Selling Price per kWh (€)' },
|
|
sellPricePlaceholder: { it: 'Es. 0.10', en: 'E.g. 0.10' },
|
|
groupManagementTitle: { it: 'Gestione Gruppi di Utenze', en: 'Utility Groups Management' },
|
|
newGroupNameLabel: { it: 'Nome Nuovo Gruppo', en: 'New Group Name' },
|
|
newGroupNamePlaceholder: { it: 'Es. Utenze Notturne', en: 'E.g. Night Utilities' },
|
|
saveGroupBtn: { it: 'Salva Lista Corrente come Gruppo', en: 'Save Current List as Group' },
|
|
savedGroupsLabel: { it: 'Gruppi Salvati', en: 'Saved Groups' },
|
|
loadBtn: { it: 'Carica', en: 'Load' },
|
|
deleteBtn: { it: 'Elimina', en: 'Delete' },
|
|
specificUtilitiesTitle: { it: 'Aggiungi Utenze Specifiche (Opzionale)', en: 'Add Specific Utilities (Optional)' },
|
|
utilityNameLabel: { it: 'Nome Utenza', en: 'Utility Name' },
|
|
utilityNamePlaceholder: { it: 'Es. Auto Elettrica', en: 'E.g. Electric Car' },
|
|
consumptionLabel: { it: 'Consumo (kWh)', en: 'Consumption (kWh)' },
|
|
consumptionPlaceholder: { it: '100', en: '100' },
|
|
addBtn: { it: 'Aggiungi', en: 'Add' },
|
|
calculateBtn: { it: 'Calcola Bilancio', en: 'Calculate Balance' },
|
|
economicSummaryTitle: { it: 'Riepilogo Economico', en: 'Economic Summary' },
|
|
costFromGridLabel: { it: 'Costo dalla Rete', en: 'Cost from Grid' },
|
|
savingsFromSelfConsumptionLabel: { it: 'Risparmio Autoconsumo', en: 'Self-Consumption Savings' },
|
|
feedInRevenueLabel: { it: 'Guadagno Immissione', en: 'Feed-in Revenue' },
|
|
finalBalanceLabel: { it: 'Bilancio Finale', en: 'Final Balance' },
|
|
energySummaryTitle: { it: 'Riepilogo Energetico (kWh)', en: 'Energy Summary (kWh)' },
|
|
selfConsumedEnergyLabel: { it: 'Energia Autoconsumata', en: 'Self-Consumed Energy' },
|
|
energyFromGridLabel: { it: 'Energia da Rete', en: 'Energy from Grid' },
|
|
fedInEnergySummaryLabel: { it: 'Energia Immessa', en: 'Fed-in Energy' },
|
|
totalPVProductionLabel: { it: 'Totale Prodotto da FV', en: 'Total PV Production' },
|
|
specificUtilitiesCostAnalysisTitle: { it: 'Analisi Costi Utenze Specifiche', en: 'Specific Utilities Cost Analysis' },
|
|
energySourcesBreakdownTitle: { it: 'Ripartizione Fonti Energetiche (Consumo Casa)', en: 'Energy Sources Breakdown (Home Consumption)' },
|
|
utilitiesImpactTitle: { it: 'Incidenza Utenze sui Consumi Totali', en: 'Utilities Impact on Total Consumption' },
|
|
noUtilitiesAdded: { it: 'Nessuna utenza specifica aggiunta.', en: 'No specific utilities added.' },
|
|
utilityNamePlaceholderEdit: { it: 'Nome Utenza', en: 'Utility Name' },
|
|
saveBtn: { it: 'Salva', en: 'Save' },
|
|
cancelBtn: { it: 'Annulla', en: 'Cancel' },
|
|
editBtn: { it: 'Modifica', en: 'Edit' },
|
|
removeBtn: { it: 'Rimuovi', en: 'Remove' },
|
|
fromGridLabel: { it: 'Dalla Rete', en: 'From Grid' },
|
|
fromPVLabel: { it: 'Da Fotovoltaico', en: 'From PV' },
|
|
totalSpecificUtilitiesLabel: { it: 'Totale Utenze Specifiche', en: 'Total Specific Utilities' },
|
|
otherConsumptionsLabel: { it: 'Altri Consumi', en: 'Other Consumptions' },
|
|
totalUtilitiesCostLabel: { it: 'Costo Totale Utenze', en: 'Total Utilities Cost' },
|
|
selectGroupOption: { it: '-- Seleziona un gruppo --', en: '-- Select a group --' },
|
|
};
|
|
|
|
// --- DOM REFERENCES ---
|
|
const allDomRefs = {
|
|
consumoTotaleInput: document.getElementById('consumoTotale'),
|
|
consumoReteInput: document.getElementById('consumoRete'),
|
|
energiaImmessaInput: document.getElementById('energiaImmessa'),
|
|
costoKwhInput: document.getElementById('costoKwh'),
|
|
prezzoVenditaInput: document.getElementById('prezzoVendita'),
|
|
nomeUtenzaInput: document.getElementById('nomeUtenza'),
|
|
consumoUtenzaInput: document.getElementById('consumoUtenza'),
|
|
addUtenzaBtn: document.getElementById('addUtenzaBtn'),
|
|
listaUtenzeDiv: document.getElementById('listaUtenze'),
|
|
groupNameInput: document.getElementById('groupNameInput'),
|
|
saveGroupBtn: document.getElementById('saveGroupBtn'),
|
|
groupSelect: document.getElementById('groupSelect'),
|
|
loadGroupBtn: document.getElementById('loadGroupBtn'),
|
|
deleteGroupBtn: document.getElementById('deleteGroupBtn'),
|
|
calcolaBtn: document.getElementById('calcolaBtn'),
|
|
risultatiDiv: document.getElementById('risultati'),
|
|
errorMessageDiv: document.getElementById('error-message'),
|
|
costoReteEl: document.getElementById('costoRete'),
|
|
risparmioFVEl: document.getElementById('risparmioFV'),
|
|
guadagnoImmissioneEl: document.getElementById('guadagnoImmissione'),
|
|
bilancioFinaleEl: document.getElementById('bilancioFinale'),
|
|
bilancioCardEl: document.getElementById('bilancioCard'),
|
|
energiaFVEl: document.getElementById('energiaFV'),
|
|
energiaReteEl: document.getElementById('energiaRete'),
|
|
energiaImmessaOutEl: document.getElementById('energiaImmessaOut'),
|
|
energiaProdottaEl: document.getElementById('energiaProdotta'),
|
|
analisiCostiSpecificaDiv: document.getElementById('analisi-costi-specifica'),
|
|
listaCostiUtenzeDiv: document.getElementById('lista-costi-utenze'),
|
|
barraReteEl: document.getElementById('barraRete'),
|
|
barraFVEl: document.getElementById('barraFV'),
|
|
percentualeReteEl: document.getElementById('percentualeRete'),
|
|
percentualeFVEl: document.getElementById('percentualeFV'),
|
|
graficoSpecificaDiv: document.getElementById('grafico-specifica'),
|
|
barraSpecificaEl: document.getElementById('barraSpecifica'),
|
|
barraAltriEl: document.getElementById('barraAltri'),
|
|
percentualeSpecificaEl: document.getElementById('percentualeSpecifica'),
|
|
percentualeAltriEl: document.getElementById('percentualeAltri'),
|
|
langItBtn: document.getElementById('lang-it'),
|
|
langEnBtn: document.getElementById('lang-en'),
|
|
};
|
|
|
|
// --- FUNCTIONS ---
|
|
const setLanguage = (lang) => {
|
|
if (lang !== 'it' && lang !== 'en') {
|
|
lang = 'en'; // Default to English
|
|
}
|
|
currentLanguage = lang;
|
|
localStorage.setItem('photovoltaicCalculator_language', lang);
|
|
|
|
document.documentElement.lang = lang;
|
|
allDomRefs.langItBtn.classList.toggle('active', lang === 'it');
|
|
allDomRefs.langEnBtn.classList.toggle('active', lang === 'en');
|
|
|
|
document.querySelectorAll('[data-translate-key]').forEach(el => {
|
|
const key = el.dataset.translateKey;
|
|
if (translations[key] && translations[key][lang]) {
|
|
el.textContent = translations[key][lang];
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('[data-translate-key-placeholder]').forEach(el => {
|
|
const key = el.dataset.translateKeyPlaceholder;
|
|
if (translations[key] && translations[key][lang]) {
|
|
el.placeholder = translations[key][lang];
|
|
}
|
|
});
|
|
|
|
renderUtilitiesList();
|
|
populateGroupSelect();
|
|
if (allDomRefs.risultatiDiv.classList.contains('hidden') === false && lastCalculationData) {
|
|
renderResults(lastCalculationData);
|
|
}
|
|
};
|
|
|
|
const renderUtilitiesList = () => {
|
|
const { listaUtenzeDiv } = allDomRefs;
|
|
listaUtenzeDiv.innerHTML = '';
|
|
if (specificUtilities.length === 0) {
|
|
listaUtenzeDiv.innerHTML = `<p class="text-center text-gray-500 text-sm">${translations.noUtilitiesAdded[currentLanguage]}</p>`;
|
|
return;
|
|
}
|
|
|
|
specificUtilities.forEach((utenza, index) => {
|
|
const utenzaEl = document.createElement('div');
|
|
utenzaEl.className = 'bg-gray-100 p-3 rounded-lg';
|
|
|
|
if (utenza.isEditing) {
|
|
utenzaEl.innerHTML = `
|
|
<div class="flex flex-col sm:flex-row gap-2">
|
|
<input type="text" value="${utenza.name}" data-type="name" data-index="${index}" class="edit-input-name w-full px-2 py-1 border border-gray-300 rounded-md" placeholder="${translations.utilityNamePlaceholderEdit[currentLanguage]}">
|
|
<input type="number" value="${utenza.consumption}" data-type="consumption" data-index="${index}" class="edit-input-consumption w-full sm:w-32 px-2 py-1 border border-gray-300 rounded-md" placeholder="kWh">
|
|
<div class="flex gap-2 justify-end">
|
|
<button data-index="${index}" class="save-btn action-btn bg-green-500 text-white text-xs font-bold py-1 px-3 rounded-md transition-colors">${translations.saveBtn[currentLanguage]}</button>
|
|
<button data-index="${index}" class="cancel-btn action-btn bg-gray-400 text-white text-xs font-bold py-1 px-3 rounded-md transition-colors">${translations.cancelBtn[currentLanguage]}</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else {
|
|
utenzaEl.innerHTML = `
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<span class="font-semibold text-gray-800">${utenza.name}</span>:
|
|
<span class="text-gray-600">${utenza.consumption} kWh</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button data-index="${index}" class="edit-btn action-btn bg-blue-500 text-white text-xs font-bold py-1 px-3 rounded-md transition-colors">${translations.editBtn[currentLanguage]}</button>
|
|
<button data-index="${index}" class="remove-btn action-btn bg-red-500 text-white text-xs font-bold py-1 px-3 rounded-md transition-colors">${translations.removeBtn[currentLanguage]}</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
listaUtenzeDiv.appendChild(utenzaEl);
|
|
});
|
|
};
|
|
|
|
const addUtenza = () => {
|
|
const { nomeUtenzaInput, consumoUtenzaInput } = allDomRefs;
|
|
const name = nomeUtenzaInput.value.trim();
|
|
const consumption = parseFloat(consumoUtenzaInput.value);
|
|
|
|
if (!name || isNaN(consumption) || consumption <= 0) {
|
|
alert('Per favore, inserisci un nome valido e un consumo positivo per l\'utenza.');
|
|
return;
|
|
}
|
|
|
|
specificUtilities.push({ name, consumption, isEditing: false });
|
|
nomeUtenzaInput.value = '';
|
|
consumoUtenzaInput.value = '';
|
|
nomeUtenzaInput.focus();
|
|
renderUtilitiesList();
|
|
};
|
|
|
|
const mostraErrore = (messaggio) => {
|
|
allDomRefs.errorMessageDiv.textContent = messaggio;
|
|
allDomRefs.errorMessageDiv.classList.remove('hidden');
|
|
allDomRefs.risultatiDiv.classList.add('hidden');
|
|
};
|
|
|
|
const nascondiErrore = () => {
|
|
allDomRefs.errorMessageDiv.classList.add('hidden');
|
|
};
|
|
|
|
// --- STORAGE FUNCTIONS ---
|
|
const savePricesToStorage = () => {
|
|
localStorage.setItem('photovoltaicCalculator_costoKwh', allDomRefs.costoKwhInput.value);
|
|
localStorage.setItem('photovoltaicCalculator_prezzoVendita', allDomRefs.prezzoVenditaInput.value);
|
|
};
|
|
|
|
const loadPricesFromStorage = () => {
|
|
const storedCosto = localStorage.getItem('photovoltaicCalculator_costoKwh');
|
|
const storedPrezzo = localStorage.getItem('photovoltaicCalculator_prezzoVendita');
|
|
if (storedCosto) {
|
|
allDomRefs.costoKwhInput.value = storedCosto;
|
|
}
|
|
if (storedPrezzo) {
|
|
allDomRefs.prezzoVenditaInput.value = storedPrezzo;
|
|
}
|
|
};
|
|
|
|
const saveGroupsToStorage = () => {
|
|
localStorage.setItem('photovoltaicCalculatorGroups', JSON.stringify(utilityGroups));
|
|
};
|
|
|
|
const populateGroupSelect = () => {
|
|
const { groupSelect } = allDomRefs;
|
|
groupSelect.innerHTML = `<option value="">${translations.selectGroupOption[currentLanguage]}</option>`;
|
|
utilityGroups.forEach(group => {
|
|
const option = document.createElement('option');
|
|
option.value = group.groupName;
|
|
option.textContent = group.groupName;
|
|
groupSelect.appendChild(option);
|
|
});
|
|
};
|
|
|
|
const loadGroupsFromStorage = () => {
|
|
try {
|
|
const storedGroups = localStorage.getItem('photovoltaicCalculatorGroups');
|
|
if (storedGroups) {
|
|
utilityGroups = JSON.parse(storedGroups);
|
|
}
|
|
} catch (error) {
|
|
console.error("Errore nel caricamento dei gruppi dal localStorage:", error);
|
|
utilityGroups = [];
|
|
}
|
|
};
|
|
|
|
const renderResults = (data) => {
|
|
const {
|
|
costoReteEl, risparmioFVEl, guadagnoImmissioneEl, bilancioFinaleEl, bilancioCardEl,
|
|
energiaFVEl, energiaReteEl, energiaImmessaOutEl, energiaProdottaEl,
|
|
listaCostiUtenzeDiv, analisiCostiSpecificaDiv,
|
|
barraReteEl, barraFVEl, percentualeReteEl, percentualeFVEl,
|
|
graficoSpecificaDiv, barraSpecificaEl, barraAltriEl, percentualeSpecificaEl, percentualeAltriEl
|
|
} = allDomRefs;
|
|
|
|
const {
|
|
costoDaRete, risparmioDaFV, guadagnoDaImmissione, bilancioFinale,
|
|
energiaAutoconsumata, consumoRete, energiaImmessa, energiaProdottaTotale,
|
|
costoMedioKwhConsumato, totalSpecificConsumption, altriConsumi
|
|
} = data;
|
|
|
|
const locale = currentLanguage === 'it' ? 'it-IT' : 'en-US';
|
|
|
|
costoReteEl.textContent = `${costoDaRete.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}`;
|
|
risparmioFVEl.textContent = `${risparmioDaFV.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}`;
|
|
guadagnoImmissioneEl.textContent = `${guadagnoDaImmissione.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}`;
|
|
bilancioFinaleEl.textContent = `${bilancioFinale.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}`;
|
|
|
|
bilancioCardEl.classList.toggle('border-green-400', bilancioFinale >= 0);
|
|
bilancioCardEl.classList.toggle('border-red-400', bilancioFinale < 0);
|
|
bilancioFinaleEl.classList.toggle('text-green-600', bilancioFinale >= 0);
|
|
bilancioFinaleEl.classList.toggle('text-red-600', bilancioFinale < 0);
|
|
|
|
energiaFVEl.textContent = `${energiaAutoconsumata.toFixed(2)} kWh`;
|
|
energiaReteEl.textContent = `${consumoRete.toFixed(2)} kWh`;
|
|
energiaImmessaOutEl.textContent = `${energiaImmessa.toFixed(2)} kWh`;
|
|
energiaProdottaEl.textContent = `${energiaProdottaTotale.toFixed(2)} kWh`;
|
|
|
|
if (specificUtilities.length > 0) {
|
|
listaCostiUtenzeDiv.innerHTML = '';
|
|
let costoTotaleUtenzeSpecifiche = 0;
|
|
|
|
specificUtilities.forEach(utenza => {
|
|
const costoUtenza = utenza.consumption * costoMedioKwhConsumato;
|
|
costoTotaleUtenzeSpecifiche += costoUtenza;
|
|
const costoEl = document.createElement('div');
|
|
costoEl.className = 'flex justify-between items-center bg-white p-3 rounded-lg border';
|
|
costoEl.innerHTML = `
|
|
<span class="font-medium text-gray-800">${utenza.name}</span>
|
|
<span class="font-bold text-purple-700">${costoUtenza.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}</span>
|
|
`;
|
|
listaCostiUtenzeDiv.appendChild(costoEl);
|
|
});
|
|
|
|
const totaleCostoEl = document.createElement('div');
|
|
totaleCostoEl.className = 'flex justify-between items-center bg-gray-200 p-3 rounded-lg border-t-2 border-gray-300 mt-3';
|
|
totaleCostoEl.innerHTML = `
|
|
<span class="font-bold text-gray-800">${translations.totalUtilitiesCostLabel[currentLanguage]}</span>
|
|
<span class="font-extrabold text-purple-800">${costoTotaleUtenzeSpecifiche.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}</span>
|
|
`;
|
|
listaCostiUtenzeDiv.appendChild(totaleCostoEl);
|
|
|
|
analisiCostiSpecificaDiv.classList.remove('hidden');
|
|
} else {
|
|
analisiCostiSpecificaDiv.classList.add('hidden');
|
|
}
|
|
|
|
const percRete = data.consumoTotale > 0 ? (consumoRete / data.consumoTotale) * 100 : 0;
|
|
const percFV = data.consumoTotale > 0 ? (energiaAutoconsumata / data.consumoTotale) * 100 : 0;
|
|
barraReteEl.style.width = `${percRete}%`;
|
|
barraFVEl.style.width = `${percFV}%`;
|
|
barraReteEl.textContent = percRete > 10 ? `${percRete.toFixed(1)}%` : '';
|
|
barraFVEl.textContent = percFV > 10 ? `${percFV.toFixed(1)}%` : '';
|
|
percentualeReteEl.textContent = `${translations.fromGridLabel[currentLanguage]}: ${percRete.toFixed(1)}%`;
|
|
percentualeFVEl.textContent = `${translations.fromPVLabel[currentLanguage]}: ${percFV.toFixed(1)}%`;
|
|
|
|
if (totalSpecificConsumption > 0) {
|
|
graficoSpecificaDiv.classList.remove('hidden');
|
|
const percSpecifica = (totalSpecificConsumption / data.consumoTotale) * 100;
|
|
const percAltri = (altriConsumi / data.consumoTotale) * 100;
|
|
|
|
barraSpecificaEl.style.width = `${percSpecifica}%`;
|
|
barraAltriEl.style.width = `${percAltri}%`;
|
|
barraSpecificaEl.textContent = percSpecifica > 10 ? `${percSpecifica.toFixed(1)}%` : '';
|
|
barraAltriEl.textContent = percAltri > 10 ? `${percAltri.toFixed(1)}%` : '';
|
|
percentualeSpecificaEl.textContent = `${translations.totalSpecificUtilitiesLabel[currentLanguage]}: ${percSpecifica.toFixed(1)}% (${totalSpecificConsumption.toFixed(1)} kWh)`;
|
|
percentualeAltriEl.textContent = `${translations.otherConsumptionsLabel[currentLanguage]}: ${percAltri.toFixed(1)}% (${altriConsumi.toFixed(1)} kWh)`;
|
|
} else {
|
|
graficoSpecificaDiv.classList.add('hidden');
|
|
}
|
|
};
|
|
|
|
// --- EVENT LISTENERS ---
|
|
allDomRefs.addUtenzaBtn.addEventListener('click', addUtenza);
|
|
allDomRefs.costoKwhInput.addEventListener('input', savePricesToStorage);
|
|
allDomRefs.prezzoVenditaInput.addEventListener('input', savePricesToStorage);
|
|
allDomRefs.langItBtn.addEventListener('click', () => setLanguage('it'));
|
|
allDomRefs.langEnBtn.addEventListener('click', () => setLanguage('en'));
|
|
|
|
allDomRefs.listaUtenzeDiv.addEventListener('click', (e) => {
|
|
const button = e.target.closest('button');
|
|
if (!button) return;
|
|
|
|
const index = parseInt(button.dataset.index, 10);
|
|
|
|
if (button.classList.contains('remove-btn')) {
|
|
specificUtilities.splice(index, 1);
|
|
} else if (button.classList.contains('edit-btn')) {
|
|
specificUtilities.forEach((u, i) => u.isEditing = (i === index));
|
|
} else if (button.classList.contains('cancel-btn')) {
|
|
specificUtilities[index].isEditing = false;
|
|
} else if (button.classList.contains('save-btn')) {
|
|
const parentDiv = button.closest('.flex-col, .flex-row');
|
|
const newName = parentDiv.querySelector('.edit-input-name').value.trim();
|
|
const newConsumption = parseFloat(parentDiv.querySelector('.edit-input-consumption').value);
|
|
|
|
if (newName && !isNaN(newConsumption) && newConsumption > 0) {
|
|
specificUtilities[index].name = newName;
|
|
specificUtilities[index].consumption = newConsumption;
|
|
specificUtilities[index].isEditing = false;
|
|
} else {
|
|
alert('Per favore, inserisci dati validi prima di salvare.');
|
|
}
|
|
}
|
|
renderUtilitiesList();
|
|
});
|
|
|
|
// Group Event Listeners
|
|
allDomRefs.saveGroupBtn.addEventListener('click', () => {
|
|
const groupName = allDomRefs.groupNameInput.value.trim();
|
|
if (!groupName) {
|
|
alert('Per favore, inserisci un nome per il gruppo.');
|
|
return;
|
|
}
|
|
if (specificUtilities.length === 0) {
|
|
alert('Aggiungi almeno un\'utenza alla lista prima di salvare un gruppo.');
|
|
return;
|
|
}
|
|
|
|
const existingGroupIndex = utilityGroups.findIndex(g => g.groupName === groupName);
|
|
if (existingGroupIndex !== -1) {
|
|
if (!confirm(`Un gruppo con nome "${groupName}" esiste già. Vuoi sovrascriverlo?`)) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const cleanUtilities = specificUtilities.map(({ name, consumption }) => ({ name, consumption }));
|
|
const newGroup = { groupName, utilities: cleanUtilities };
|
|
|
|
if (existingGroupIndex !== -1) {
|
|
utilityGroups[existingGroupIndex] = newGroup;
|
|
} else {
|
|
utilityGroups.push(newGroup);
|
|
}
|
|
|
|
saveGroupsToStorage();
|
|
populateGroupSelect();
|
|
allDomRefs.groupSelect.value = groupName;
|
|
allDomRefs.groupNameInput.value = '';
|
|
alert(`Gruppo "${groupName}" salvato con successo!`);
|
|
});
|
|
|
|
allDomRefs.loadGroupBtn.addEventListener('click', () => {
|
|
const selectedGroupName = allDomRefs.groupSelect.value;
|
|
if (!selectedGroupName) {
|
|
alert('Per favore, seleziona un gruppo da caricare.');
|
|
return;
|
|
}
|
|
|
|
const groupToLoad = utilityGroups.find(g => g.groupName === selectedGroupName);
|
|
if (groupToLoad) {
|
|
specificUtilities = groupToLoad.utilities.map(u => ({ ...u, isEditing: false }));
|
|
renderUtilitiesList();
|
|
}
|
|
});
|
|
|
|
allDomRefs.deleteGroupBtn.addEventListener('click', () => {
|
|
const selectedGroupName = allDomRefs.groupSelect.value;
|
|
if (!selectedGroupName) {
|
|
alert('Per favore, seleziona un gruppo da eliminare.');
|
|
return;
|
|
}
|
|
|
|
if (confirm(`Sei sicuro di voler eliminare il gruppo "${selectedGroupName}"?`)) {
|
|
utilityGroups = utilityGroups.filter(g => g.groupName !== selectedGroupName);
|
|
saveGroupsToStorage();
|
|
populateGroupSelect();
|
|
}
|
|
});
|
|
|
|
|
|
allDomRefs.calcolaBtn.addEventListener('click', () => {
|
|
// 1. Read and Validate Inputs
|
|
const consumoTotale = parseFloat(allDomRefs.consumoTotaleInput.value);
|
|
const consumoRete = parseFloat(allDomRefs.consumoReteInput.value);
|
|
const energiaImmessa = parseFloat(allDomRefs.energiaImmessaInput.value);
|
|
const costoKwh = parseFloat(allDomRefs.costoKwhInput.value);
|
|
const prezzoVendita = parseFloat(allDomRefs.prezzoVenditaInput.value);
|
|
|
|
if ([consumoTotale, consumoRete, energiaImmessa, costoKwh, prezzoVendita].some(isNaN) || consumoTotale <= 0 || costoKwh < 0 || prezzoVendita < 0) {
|
|
mostraErrore("Inserire valori validi. I consumi totali devono essere > 0. I prezzi non possono essere negativi.");
|
|
return;
|
|
}
|
|
if (consumoRete < 0 || energiaImmessa < 0) {
|
|
mostraErrore("I valori di consumo/immissione non possono essere negativi.");
|
|
return;
|
|
}
|
|
if (consumoRete > consumoTotale) {
|
|
mostraErrore("Il consumo dalla rete non può superare il consumo totale della casa.");
|
|
return;
|
|
}
|
|
const totalSpecificConsumption = specificUtilities.reduce((sum, u) => sum + u.consumption, 0);
|
|
if (totalSpecificConsumption > consumoTotale) {
|
|
mostraErrore("La somma dei consumi delle utenze specifiche non può superare il consumo totale della casa.");
|
|
return;
|
|
}
|
|
|
|
nascondiErrore();
|
|
|
|
// 2. Core Calculations
|
|
const energiaAutoconsumata = consumoTotale - consumoRete;
|
|
const energiaProdottaTotale = energiaAutoconsumata + energiaImmessa;
|
|
const costoDaRete = consumoRete * costoKwh;
|
|
const risparmioDaFV = energiaAutoconsumata * costoKwh;
|
|
const guadagnoDaImmissione = energiaImmessa * prezzoVendita;
|
|
const bilancioFinale = risparmioDaFV + guadagnoDaImmissione - costoDaRete;
|
|
const costoMedioKwhConsumato = consumoTotale > 0 ? costoDaRete / consumoTotale : 0;
|
|
const altriConsumi = consumoTotale - totalSpecificConsumption;
|
|
|
|
lastCalculationData = {
|
|
consumoTotale, consumoRete, energiaImmessa, costoKwh, prezzoVendita,
|
|
energiaAutoconsumata, energiaProdottaTotale, costoDaRete, risparmioDaFV,
|
|
guadagnoDaImmissione, bilancioFinale, costoMedioKwhConsumato,
|
|
totalSpecificConsumption, altriConsumi
|
|
};
|
|
|
|
// 3. Render Results
|
|
renderResults(lastCalculationData);
|
|
allDomRefs.risultatiDiv.classList.remove('hidden');
|
|
});
|
|
|
|
// --- INITIAL RENDER ---
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadGroupsFromStorage();
|
|
loadPricesFromStorage();
|
|
|
|
const savedLang = localStorage.getItem('photovoltaicCalculator_language');
|
|
const browserLang = navigator.language.split('-')[0];
|
|
setLanguage(savedLang || browserLang);
|
|
|
|
renderUtilitiesList();
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|