<![CDATA[
<!DOCTYPE html>
<html lang="hu">
<script src="chart.umd.js" onerror="this.remove();var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/chart.js';document.head.appendChild(s);"></script>
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.js"></script>
<style>
:root {
--bg-color: #f4f6f9; --sidebar-color: #2c3e50; --text-light: #ffffff;
--primary: #3498db; --success: #2ecc71; --danger: #e74c3c; --warning: #f1c40f;
--border-color: #ddd; --section-title: #7f8c8d;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }
body { display: flex; background-color: var(--bg-color); height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar { width: 280px; background-color: var(--sidebar-color); color: var(--text-light); display: flex; flex-direction: column; padding-top: 15px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); }
.sidebar h2 { text-align: center; margin-bottom: 5px; font-size: 18px; letter-spacing: 1px; }
.version-tag { text-align: center; font-size: 11px; color: #95a5a6; margin-bottom: 10px; }
#sidebar-close-btn { display: none; align-self: flex-end; margin: 0 10px 5px 10px; background: none; border: none; color: #bdc3c7; font-size: 22px; cursor: pointer; }
.sidebar-menu-wrapper { flex: 1 1 auto; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.sidebar-spacer { flex: 1; }
.undo-container { padding: 0 15px 10px 15px; }
.btn-undo { background-color: #e67e22; color: white; border: none; padding: 8px; border-radius: 4px; cursor: pointer; font-size: 12px; width: 100%; font-weight: bold; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 5px; }
.btn-undo:hover { background-color: #d35400; }
.btn-undo:disabled { background-color: #7f8c8d; opacity: 0.4; cursor: not-allowed; }
.theme-btn { background: none; border: 1px solid rgba(255,255,255,0.25); color: var(--text-light); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; align-self: center; margin: 5px 15px 10px 15px; width: calc(100% - 30px); }
.theme-btn:hover { background: rgba(255,255,255,0.08); }
.menu-section-title { font-size: 12px; font-weight: bold; text-transform: uppercase; color: #95a5a6; padding: 12px 20px 5px 20px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 5px; }
.sidebar button.menu-btn { background: none; border: none; color: #bdc3c7; padding: 8px 25px; text-align: left; font-size: 14px; cursor: pointer; transition: all 0.2s; width: 100%; }
.sidebar button.menu-btn:hover, .sidebar button.menu-btn.active { color: var(--text-light); background-color: rgba(255,255,255,0.08); border-left: 4px solid var(--primary); padding-left: 21px; }
.main-content { flex: 1; padding: 20px; padding-bottom: 34px; overflow-y: auto; height: 100vh; height: 100dvh; }
.version-footer {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
background-color: var(--sidebar-color); color: #95a5a6;
font-size: 11px; text-align: center; padding: 4px 8px;
box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
}
body.dark .version-footer { background-color: #111; color: #777; }
@media print { .version-footer { display: none; } }
.page { display: none; }
.page.active { display: block; }
.sys-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 15px; }
.sys-tab-btn { background: var(--sidebar-color); color: var(--text-light); border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.sys-tab-btn:hover { background: #1f3a52; }
.sys-tab-btn.active { background: var(--primary); }
.sys-section { display: none; padding: 5px; }
.sys-section.active { display: block; }
.property-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; border-bottom: 2px solid #ddd; padding-bottom: 10px; }
.property-title { font-size: 26px; color: #2c3e50; font-weight: bold; }
.utility-badge { background-color: var(--primary); color: white; padding: 4px 10px; border-radius: 4px; font-size: 14px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-bottom: 20px; }
.dashboard-section-title { font-size: 13px; font-weight: bold; color: #7f8c8d; text-transform: uppercase; letter-spacing: 0.5px; margin: 18px 0 8px 0; }
.dashboard-section-title:first-of-type { margin-top: 5px; }
.card h3 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.info-btn { background: none; border: 1px solid #bbb; color: #888; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-btn:hover, .info-btn:active { background: #eee; }
body.dark .info-btn { border-color: #666; color: #aaa; }
body.dark .info-btn:hover, body.dark .info-btn:active { background: #444; }
.card-info-text { font-size: 12px; color: #7f8c8d; margin: 4px 0 6px 0; line-height: 1.4; }
.card { background: #fff; padding: 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); text-align: center; }
.card h3 { font-size: 12px; color: #7f8c8d; margin-bottom: 8px; text-transform: uppercase; }
.card .value { font-size: 18px; font-weight: bold; display: block; margin-bottom: 5px; }
.card .sub { font-size: 11px; color: #888; }
.card.puffer-ok { border-bottom: 5px solid var(--success); }
.card.puffer-warning { border-bottom: 5px solid var(--danger); }
.card.cost-alert { background-color: #fdf2f2; border-bottom: 5px solid var(--danger); color: var(--danger); }
.card.cost-normal { border-bottom: 5px solid var(--primary); }
.card.info-card { border-bottom: 5px solid #95a5a6; }
.progress-bar-container { width: 100%; height: 10px; background: #e0e0e0; border-radius: 5px; margin-top: 3px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 5px; transition: width 0.3s; }
.progress-percent { display: block; font-size: 10px; color: #777; margin-top: 2px; text-align: center; }
.content-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 950px) { .content-layout { grid-template-columns: 1fr; } }
.panel { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
.form-group input:not([type="radio"]):not([type="checkbox"]), .form-group select { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; }
.form-group input[type="radio"], .form-group input[type="checkbox"] { width: auto; flex-shrink: 0; }
button.btn { background-color: var(--primary); color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; width: 100%; }
button.btn:hover { background-color: #2980b9; }
.btn-anniversary { background-color: #9b59b6 !important; font-weight: bold; margin-bottom: 15px; }
.btn-anniversary:hover { background-color: #8e44ad !important; }
.btn-danger-action { background-color: var(--danger) !important; }
.btn-danger-action:hover { background-color: #c0392b !important; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 13px; }
th { background-color: #f8f9fa; font-weight: bold; cursor: pointer; }
th.sort-asc::after { content: ' ▲'; }
th.sort-desc::after { content: ' ▼'; }
.actions button { padding: 4px 8px; margin-right: 3px; border: none; border-radius: 3px; cursor: pointer; font-size: 11px; color: white; }
.actions .btn-edit { background-color: var(--warning); color: #333; }
.actions .btn-delete { background-color: var(--danger); }
.sync-box { border: 1px dashed var(--primary); padding: 20px; border-radius: 8px; background-color: #ecf0f1; margin-bottom: 20px; }
.chart-container { position: relative; height: 300px; width: 100%; }
.changelog-box { background: #fff; padding: 15px; border-radius: 8px; border-left: 4px solid var(--primary); font-size: 13px; color: #555; line-height: 1.5; margin-top: 15px; }
.changelog-box h4 { margin-bottom: 5px; color: #2c3e50; }
.changelog-box ul { padding-left: 20px; }
.mobile-topbar { display: none; }
.sidebar-overlay { display: none; }
.payer-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; padding: 4px 12px; margin: 3px 5px 3px 0; font-size: 13px; }
.payer-tag button { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.payer-summary-cards { display: flex; gap: 15px; flex-wrap: wrap; }
.print-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
.print-modal-content { background: #fff; border-radius: 12px; padding: 25px; max-width: 500px; max-height: 80vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.print-modal-content h2 { margin-bottom: 10px; }
.print-selection-group { margin-bottom: 10px; }
.print-selection-group h3 { font-size: 14px; color: #555; margin: 5px 0; }
.print-selection-group label { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; font-size: 13px; }
.print-selection-group label:hover { background-color: #f0f0f0; }
.print-modal-buttons { display: flex; gap: 10px; margin-top: 15px; }
@media print {
body * { visibility: hidden; }
#print-area, #print-area * { visibility: visible; }
#print-area { position: absolute; left: 0; top: 0; width: 100%; padding: 20px; }
.print-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.print-table th, .print-table td { border: 1px solid #999; padding: 6px 10px; text-align: left; }
.print-table th { background-color: #e0e0e0; }
.print-header { text-align: center; font-size: 20px; margin-bottom: 10px; }
}
@media (max-width: 850px) {
body { overflow: visible; height: auto; min-height: 100vh; flex-direction: column; }
.mobile-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; flex: none; box-sizing: border-box; background-color: var(--sidebar-color); color: var(--text-light); padding: 8px 10px; position: sticky; top: 0; z-index: 1100; box-shadow: 0 2px 5px rgba(0,0,0,0.15); }
.mobile-topbar .topbar-left { display: flex; align-items: center; gap: 10px; }
.mobile-topbar .hamburger-btn, .mobile-topbar .settings-btn { background: none; border: none; color: var(--text-light); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.mobile-topbar .mobile-title { font-size: 15px; font-weight: bold; }
.sidebar { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: 260px; max-width: 80vw; z-index: 1200; transform: translateX(-100%); transition: transform 0.25s ease; display: flex; flex-direction: column; }
.sidebar.open { transform: translateX(0); box-shadow: 4px 0 15px rgba(0,0,0,0.3); }
#sidebar-close-btn { display: block; }
.sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1150; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.sidebar-overlay.active { opacity: 1; pointer-events: auto; }
.main-content { width: 100%; flex: 1; height: auto; overflow-y: visible; padding: 15px; padding-bottom: 34px; }
.dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.card h3 { font-size: 12px; }
.info-btn { width: 16px; height: 16px; min-width: 16px; font-size: 10px; }
.card .value { font-size: 16px; }
.property-title { font-size: 20px; }
.sys-tabs { gap: 4px; }
.sys-tab-btn { font-size: 12px; padding: 7px 10px; }
}
@media (max-width: 400px) {
.dashboard-grid { grid-template-columns: 1fr; }
}
body.dark {
--bg-color: #121212; --sidebar-color: #1a1a1a; --text-light: #e0e0e0;
--border-color: #444; --section-title: #888;
}
body.dark .card, body.dark .panel, body.dark .changelog-box, body.dark .print-modal-content { background: #1e1e1e; color: #dcdcdc; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }
body.dark .card h3, body.dark .changelog-box h4 { color: #aaa; }
body.dark .property-title { color: #dcdcdc; }
body.dark .property-header { border-bottom-color: #444; }
body.dark .form-group label { color: #bbb; }
body.dark .form-group input, body.dark .form-group select,
body.dark #fixedcosts-table input, body.dark #fixedcosts-table select,
body.dark #settings-table-body input, body.dark #json-preview {
background: #2a2a2a; color: #e0e0e0; border-color: #555;
}
body.dark th { background-color: #2a2a2a; color: #ccc; }
body.dark td { border-bottom-color: #444; }
body.dark .sync-box { background-color: #222; }
body.dark .card.cost-alert { background-color: #3a2020; }
body.dark #json-preview { background: #1a1a1a; color: #9ad; }
body.dark button.btn:hover { background-color: #21618c; }
body.dark .menu-section-title { color: #7f8c8d; }
body.dark .actions .btn-edit { color: #222; }
body.dark .sys-tab-btn { background: #1a1a1a; color: #bbb; }
body.dark .sys-tab-btn.active { background: #3498db; }
body.dark .progress-bar-container { background: #333; }
body.dark .print-selection-group label:hover { background-color: #333; }
body.dark h1, body.dark h2 { color: #dcdcdc; }
</style>
<body>
<div class="mobile-topbar">
<div class="topbar-left">
<button class="hamburger-btn" onclick="toggleSidebar()" aria-label="Menü">☰</button>
<span class="mobile-title" style="display: flex; align-items: center; gap: 8px;">
<img src="kozmu.png" alt="Logo" style="height: 24px; width: auto; border-radius: 4px;" onerror="this.style.display='none'">
Rezsi Tracker
</span>
</div>
<div style="display: flex; align-items: center; gap: 5px;">
<button class="settings-btn" onclick="toggleTheme()" aria-label="Sötét mód" style="font-size: 16px;">🌓</button>
<button class="settings-btn" onclick="switchPage('system','management')" aria-label="Beállítások">⚙️</button>
</div>
</div>
<div class="sidebar-overlay" id="sidebar-overlay" onclick="closeSidebar()"></div>
<nav class="sidebar" id="main-sidebar">
<button class="hamburger-btn" onclick="closeSidebar()" aria-label="Bezárás" id="sidebar-close-btn">✕</button>
<div style="text-align: center; margin-bottom: 5px;">
<img src="kozmu.png" alt="Rezsi Tracker Logo" style="max-width: 60px; height: auto; border-radius: 8px;" onerror="this.style.display='none'">
</div>
<h2>Rezsi Tracker</h2>
<div class="version-tag">v260908b - Számítási Javítások</div>
<div class="undo-container">
<button id="undo-btn" class="btn-undo" onclick="triggerUndo()" disabled>
↩️ Visszavonás (<span id="undo-count">0</span>)
</button>
</div>
<button class="theme-btn" id="theme-toggle-btn" onclick="toggleTheme()">🌙 Sötét mód</button>
<div class="sidebar-menu-wrapper" id="dynamic-sidebar-menu"></div>
<div class="menu-section-title">💰 Háztartás</div>
<button onclick="switchPage('fixedcosts', 'fixedcosts')" id="nav-fixedcosts" class="menu-btn" style="margin-bottom: 5px;">Fix Költségek</button>
<div class="menu-section-title">⚙️ Rendszer</div>
<button onclick="switchPage('system', 'management')" id="nav-system-management" class="menu-btn" style="margin-bottom: 5px;">Beállítások</button>
<div class="menu-section-title">🖨️</div>
<button onclick="openPrintModal()" class="menu-btn" style="margin-bottom: 15px;">🖨️ Nyomtatás</button>
<div class="sidebar-spacer"></div>
</nav>
<main class="main-content">
<!-- FIX KÖLTSÉGEK -->
<div id="page-fixedcosts" class="page">
<h1>Fix Költségek</h1>
<p style="font-size: 13px; color: #666; margin-bottom: 15px;">Rendszeres kiadások. Kattints a fejlécre a rendezéshez. Az "Aktív" pipával ki/be kapcsolod a beszámítást. A checkboxok VAGY módban: egy tétel = egy felhasználó.</p>
<div class="panel">
<table id="fixedcosts-table" style="font-size: 13px;">
<thead id="fixedcosts-thead"></thead>
<tbody id="fixedcosts-table-body"></tbody>
</table>
<button class="btn" style="width: auto; margin-top: 15px;" onclick="addFixedCost()">+ Új tétel</button>
</div>
<div class="panel">
<h2>Összesítés kifizető szerint</h2>
<p style="font-size: 13px; color: #666; margin-bottom: 10px;">Csak az <strong>aktív</strong> tételek számítanak bele.</p>
<div class="payer-summary-cards" id="payer-summary-cards"></div>
<p id="sum-unassigned-note" style="font-size: 13px; color: #e67e22; margin-top: 12px; display: none;"></p>
</div>
</div>
<!-- KÖZMŰ OLDAL -->
<div id="utility-page" class="page active">
<div class="property-header">
<div class="property-title" id="dyn-property-title">Ingatlan 1</div>
<div class="utility-badge" id="dyn-utility-badge">Villany (kWh)</div>
</div>
<div class="btn-anniversary" id="dyn-subvol-warning" style="display:none; background-color: var(--danger); cursor: default; text-align: left; padding: 12px 16px; margin-bottom: 10px;"></div>
<button class="btn btn-anniversary" onclick="triggerAnniversary()">🔄 ÉVFORDULÓ: Év Lezárása & Új Év Indítása</button>
<div class="dashboard-section-title">📏 Mérőállások</div>
<div class="dashboard-grid">
<div class="card info-card">
<h3>Előző éves leolvasás (bázis) <button class="info-btn" onclick="toggleCardInfo(this)">ⓘ</button></h3>
<div class="card-info-text" style="display:none;">A legutóbbi elszámolt számla óraállása — innen indul a keret-számítás.</div>
<span class="value" id="dyn-base">-</span>
</div>
<div class="card info-card">
<h3>Utolsó leolvasás <button class="info-btn" onclick="toggleCardInfo(this)">ⓘ</button></h3>
<div class="card-info-text" style="display:none;">A legutóbb rögzített leolvasásod (saját vagy szolgáltatói).</div>
<span class="value" id="dyn-current">-</span>
</div>
<div class="card info-card">
<h3>Felhasznált keret (bázis óta) <button class="info-btn" onclick="toggleCardInfo(this)">ⓘ</button></h3>
<div class="card-info-text" style="display:none;">A ténylegesen elfogyasztott mennyiség a bázis óta, és hogy ez a keretnek hány százaléka.</div>
<span class="value" id="dyn-fact-consumed">-</span>
<span class="sub" id="dyn-fact-consumed-percent"></span>
<span class="sub" id="dyn-fact-consumed-billed" style="display:none;"></span>
</div>
</div>
<div class="dashboard-section-title">🎯 Kedvezményes keret</div>
<div class="dashboard-grid">
<div class="card info-card" id="dyn-limit-card-wrapper">
<h3>Kedvezményes keret határa <button class="info-btn" onclick="toggleCardInfo(this)">ⓘ</button></h3>
<div class="card-info-text" style="display:none;">Eddig az óraállásig fogyaszthatsz kedvezményes áron - efölött piaci ár lép életbe.</div>
<span class="value" id="dyn-limit-calc" style="color: #e67e22;">-</span>
</div>
<div class="card puffer-ok" id="dyn-puffer-card">
<h3>Felhasználható kedvezményes keret <button class="info-btn" onclick="toggleCardInfo(this)">ⓘ</button></h3>
<div class="card-info-text" style="display:none;">Mennyit fogyaszthatsz még kedvezményes áron, mielőtt átlépnéd a keretet.</div>
<span class="value" id="dyn-puffer">-</span>
<div class="progress-bar-container" id="dyn-puffer-progress" style="display:none;">
<div class="progress-bar" id="dyn-puffer-progress-fill"></div>
</div>
<span class="progress-percent" id="dyn-puffer-progress-percent"></span>
</div>
</div>
<div class="dashboard-section-title">💰 Fizetendő / Elszámolás</div>
<div class="dashboard-grid">
<div class="card cost-normal" id="dyn-cost-card">
<h3><span class="card-title-text">Keret Ft-értéke</span> <button class="info-btn" onclick="toggleCardInfo(this)">ⓘ</button></h3>
<div class="card-info-text" style="display:none;">A hátralévő keret Ft-értéke, vagy a túllépés piaci ára - az alapdíj nélkül.</div>
<span class="value" id="dyn-cost">- Ft</span>
<span class="sub" id="dyn-alapdij-note" style="display:none;"></span>
</div>
<div class="card info-card" id="dyn-sub-card">
<h3 id="dyn-sub-card-title">Amit a szolgáltató kiszámlázott <button class="info-btn" onclick="toggleCardInfo(this)">ⓘ</button></h3>
<div class="card-info-text" style="display:none;">A szolgáltató által a bázis óta kiszámlázott mennyiség (amit alább adtál meg).</div>
<span class="value" id="dyn-sub-total" style="color: #9b59b6;">-</span>
</div>
<div class="card info-card" id="dyn-balance-card">
<h3><span class="card-title-text">Egyenleg: számlázott vs. tényleges</span> <button class="info-btn" onclick="toggleCardInfo(this)">ⓘ</button></h3>
<div class="card-info-text" style="display:none;">A szolgáltató által kiszámlázott és a te tényleges fogyasztásod közötti különbség Ft-ban.</div>
<span class="value" id="dyn-balance">-</span>
</div>
<div class="card info-card">
<h3>Köv. éves leolvasás várható <button class="info-btn" onclick="toggleCardInfo(this)">ⓘ</button></h3>
<div class="card-info-text" style="display:none;">A számládon feltüntetett, várható jövőbeli leolvasási időszak.</div>
<span class="value" id="dyn-next-reading" style="color: #16a085; font-size: 15px;">-</span>
</div>
</div>
<div class="content-layout">
<div>
<div class="panel" id="sub-volume-panel">
<h2 id="sub-volume-panel-title">Mennyit számlázott ki eddig a szolgáltató?</h2>
<div class="form-group" style="margin-top: 5px;">
<label style="font-size: 13px; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; cursor: pointer;">
<input type="radio" name="subvol-mode" id="subvol-mode-delta" value="delta" checked onchange="onSubVolModeChange()">
Összesített mennyiség (részszámlák összege, bázis óta)
</label>
<label style="font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer;">
<input type="radio" name="subvol-mode" id="subvol-mode-reading" value="reading" onchange="onSubVolModeChange()">
Szolgáltatói becsült záró óraállás
</label>
</div>
<div class="form-group" style="margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<input type="number" id="sub-volume-input" step="any" min="0" style="flex: 1; min-width: 120px;">
<button type="button" class="btn" style="width: auto; background-color: #9b59b6;" onclick="saveSubVolume()">Frissítés</button>
<button type="button" class="btn" id="add-from-bill-btn" style="width: auto; background-color: #27ae60;" onclick="addSubVolumeFromBill()">+ Számla hozzáadása</button>
</div>
<small id="sub-volume-panel-help" style="color: #7f8c8d;">A "Frissítés" felülírja a teljes értéket. A "+ Számla hozzáadása" az elszámolt mennyiséget hozzáadja az eddigihez (gáz esetén MJ-ban is megadható).</small>
</div>
<div class="panel" id="next-reading-panel">
<h2>Következő éves leolvasás várható időpontja</h2>
<div class="form-group" style="margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<input type="date" id="next-reading-from" style="flex: 1; min-width: 120px;" onchange="autofillNextReadingTo()">
<span style="color:#7f8c8d;">–</span>
<input type="date" id="next-reading-to" style="flex: 1; min-width: 120px;">
<button type="button" class="btn" style="width: auto; background-color: #16a085;" onclick="saveNextReading()">Mentés</button>
<button type="button" class="btn" style="width: auto; background-color: #16a085;" onclick="fillNextReadingFromClipboard()">📋 Számláról</button>
</div>
<small style="color: #7f8c8d;">A "Számláról" gomb beillesztett szövegből kinyeri a dátum-intervallumot (pl. "2026.11.02 - 2026.11.19").</small>
</div>
<div class="panel">
<h2 id="dyn-form-title">Új leolvasás rögzítése</h2>
<form id="dynamic-form" onsubmit="return saveEntry(event)">
<input type="hidden" id="dyn-edit-index" value="">
<div class="form-group"><label>Dátum (mikor olvastad le)</label><input type="date" id="dyn-date" required></div>
<div class="form-group">
<label>Milyen típusú leolvasás ez?</label>
<select id="dyn-type">
<option value="jelen">Új, friss leolvasás</option>
<option value="mult">Előző éves leolvasás (bázis)</option>
</select>
</div>
<div class="form-group">
<label>Leolvasás forrása</label>
<select id="dyn-source">
<option value="sajat">Saját leolvasás</option>
<option value="szolgaltato_leol">Szolgáltatói leolvasás</option>
<option value="szolgaltato_becs">Szolgáltatói becslés</option>
</select>
</div>
<div class="form-group"><label id="dyn-input-label">Mérőóra állása</label><input type="number" id="dyn-value" step="any" min="0" required></div>
<button type="submit" class="btn" id="dyn-submit-btn">Mentés</button>
<button type="button" class="btn" style="background-color:#7f8c8d; margin-top:5px; display:none;" id="dyn-cancel-btn" onclick="cancelEdit()">Mégse</button>
</form>
</div>
<div class="panel">
<h2>Mentett bejegyzések</h2>
<div style="overflow-x:auto;">
<table>
<thead><tr><th>Dátum</th><th>Típus</th><th>Érték</th><th>Δ (előzőhöz)</th><th>Műveletek</th></tr></thead>
<tbody id="dyn-table-body"></tbody>
</table>
</div>
</div>
</div>
<div class="panel"><h2>Fogyasztási Trend</h2><div class="chart-container"><canvas id="dyn-chart"></canvas></div></div>
</div>
</div>
<!-- RENDSZER OLDAL -->
<div id="page-system" class="page">
<h1>Beállítások</h1>
<div class="sys-tabs">
<button class="sys-tab-btn active" data-systab="properties" onclick="switchSystemTab('properties')">🏠 Ingatlanok</button>
<button class="sys-tab-btn" data-systab="settings" onclick="switchSystemTab('settings')">⚙️ Keretek</button>
<button class="sys-tab-btn" data-systab="sync" onclick="switchSystemTab('sync')">📁 Export/Import</button>
<button class="sys-tab-btn" data-systab="payers" onclick="switchSystemTab('payers')">👥 Kifizetők</button>
<button class="sys-tab-btn" data-systab="changelog" onclick="switchSystemTab('changelog')">📋 Changelog</button>
</div>
<div id="sys-section-properties" class="sys-section active">
<div class="panel">
<h2>Új ingatlan hozzáadása</h2>
<div class="form-group" style="margin-top: 10px; display: flex; gap: 10px;">
<input type="text" id="new-property-name" placeholder="Pl: Nyaraló...">
<button class="btn" style="width: auto; background-color: var(--success);" onclick="addProperty()">Hozzáadás</button>
</div>
</div>
<div class="panel">
<h2>Létező ingatlanok & kategóriák kezelése</h2>
<p style="font-size: 13px; color: #666; margin-bottom: 10px;">Itt adhatod meg ingatlanonként, hogy mely közművek / kategóriák legyenek aktívak.</p>
<p style="font-size: 12px; color: #9b59b6; margin-bottom: 10px;">💡 A "H tarifa" és "Napelem" opcionális kiegészítő mérők: nem kapnak önálló rezsihatár-számítást.</p>
<div style="overflow-x:auto;">
<table>
<thead><tr><th>Ingatlan neve</th><th>Aktív kategóriák</th><th>Műveletek</th></tr></thead>
<tbody id="management-table-body"></tbody>
</table>
</div>
</div>
</div>
<div id="sys-section-settings" class="sys-section">
<div class="panel">
<h2>Árak és Kedvezményes Keretek Beállítása</h2>
<p style="font-size: 12px; color: #666; margin-bottom: 10px;">Gáz árnál: ha a számlán Ft/MJ-t látsz, szorozd meg a fűtőértékkel (alapértelmezett: 35,42 MJ/m³). A víz- és alapdíj szolgáltatónként változó.</p>
<div style="overflow-x:auto;">
<table>
<thead><tr><th>Paraméter</th><th>Érték</th></tr></thead>
<tbody id="settings-table-body"></tbody>
</table>
</div>
<button class="btn" style="background-color: var(--primary); margin-top: 15px;" onclick="saveGlobalSettings()">Tarifák mentése</button>
</div>
</div>
<div id="sys-section-sync" class="sys-section">
<div class="panel sync-box">
<h3>Adatok mentése és visszatöltése</h3>
<p style="margin: 10px 0; color: #555; font-size: 14px;">Mentsd le a teljes konfigurációt JSON fájlba.<br><strong style="font-size:12px;">💡 Importáláskor választhatsz "Összefésülés" vagy "Teljes felülírás". Az app minden nap automatikus mentést készít (7 napig).</strong></p>
<div style="margin: 15px 0; display: flex; gap: 10px;">
<button class="btn" style="background-color: var(--success);" onclick="exportToLocalFile()">EXPORTÁLÁS (JSON)</button>
<label class="btn" style="background-color: var(--primary); display: inline-block; text-align: center; line-height: 20px; cursor: pointer;">
IMPORTÁLÁS
<input type="file" id="file-input" accept=".json" style="display: none;" onchange="importFromLocalFile(event)">
</label>
</div>
<div style="margin: 10px 0; display: flex; gap: 10px;">
<button class="btn" style="background-color: #9b59b6;" onclick="openPrintModal()">🖨️ Nyomtatási nézet</button>
</div>
<hr style="border: 0; border-top: 1px solid #ccc; margin: 20px 0;">
<h3>☁️ Felhő Szinkron (saját tárhely)</h3>
<p style="margin: 5px 0 15px 0; color: #666; font-size: 13px;">
A mellékelt <code>sync.php</code> fájlt töltsd fel ugyanabba a mappába, mint ezt a HTML-t (pl. a <code>rezsi.van.hu</code> gyökerébe).
Az adat a te szervereden tárolódik, <strong>titkosítva</strong> - sem a szerver, sem bárki más nem tudja elolvasni jelszó nélkül.
</p>
<div class="form-group"><label style="font-size:13px;">Végpont URL</label><input type="text" id="sync-url" placeholder="https://rezsi.van.hu/sync.php" onchange="saveSyncConfig()"></div>
<div class="form-group"><label style="font-size:13px;">Szinkron azonosító (te választod, jegyezd meg)</label><input type="text" id="sync-id" placeholder="pl. norbi-otthon-2026" onchange="saveSyncConfig()"></div>
<div class="form-group"><label style="font-size:13px;">Titkos kulcs (egyezzen a sync.php-ban beállítottal)</label><input type="password" id="sync-secret" onchange="saveSyncConfig()"></div>
<div class="form-group"><label style="font-size:13px;">Jelszó (csak titkosításhoz - sehol nincs elmentve)</label><input type="password" id="sync-password" placeholder="Add meg minden feltöltés/letöltés előtt"></div>
<div style="display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;">
<button class="btn" style="width:auto; background-color:#16a085;" onclick="cloudUpload()">☁️⬆️ Feltöltés a szerverre</button>
<button class="btn" style="width:auto; background-color:#2980b9;" onclick="cloudDownload()">☁️⬇️ Letöltés a szerverről</button>
</div>
<p id="sync-status" style="font-size:13px; margin-top:10px; color:#666; white-space:pre-line;"></p>
<hr style="border: 0; border-top: 1px solid #ccc; margin: 20px 0;">
<h3 style="color: var(--danger);">⚠️ Rendszer ürítése</h3>
<p style="margin: 5px 0 15px 0; color: #666; font-size: 13px;">Kitöröl minden adatot. (7 napig visszaállítható a konzolból: `restoreDailyBackup()`.)</p>
<button class="btn btn-danger-action" onclick="wipeDatabase()">ADATBÁZIS ALAPHELYZETBE ÁLLÍTÁSA</button>
<div class="form-group" style="text-align:left; margin-top:25px;">
<label style="font-size: 13px;">Nyers JSON adatstruktúra:</label>
<textarea id="json-preview" style="width:100%; height:120px; font-family:monospace; padding:8px; border-radius:4px; border:1px solid #ccc; font-size:12px;" readonly></textarea>
</div>
</div>
</div>
<div id="sys-section-payers" class="sys-section">
<div class="panel">
<h2>Felhasználók (kifizetők) kezelése</h2>
<p style="font-size: 13px; color: #666; margin-bottom: 10px;">Felhasználó hozzáadás/törlés. A törölt felhasználó tételei "Nincs megadva" státuszba kerülnek.</p>
<div class="form-group" style="display: flex; gap: 10px; margin-bottom: 10px;">
<input type="text" id="new-payer-name" placeholder="Új felhasználó neve" style="flex: 1;">
<button class="btn" style="width: auto; background-color: var(--success);" onclick="addPayer()">+ Hozzáadás</button>
</div>
<div id="payer-list"></div>
</div>
</div>
<div id="sys-section-changelog" class="sys-section">
<div class="changelog-box">
<h4>ℹ️ Névjegy & Changelog (v260908b)</h4>
<ul>
<li><strong>v260908b (hibajavítás):</strong> A changelog lista hónapokon át felhalmozódott, hibásan egymásba ágyazott listaelemek miatt egyre beljebb csúszva, lépcsőzetesen jelent meg. Kijavítva: mostantól egy lapos, egyenletes lista, bejegyzésenkénti sortávolsággal.</li>
<li><strong>v260908a:</strong> A villany/gáz/víz kártyák 3 szakaszra bontva ("📏 Mérőállások", "🎯 Kedvezményes keret", "💰 Fizetendő / Elszámolás"), hogy áttekinthetőbb legyen a felület. A hover-alapú tooltipek helyett minden kártyán koppintható ⓘ gomb nyitja/csukja a magyarázó szöveget - mobilon is megbízhatóan működik.</li>
<li><strong>v260908a (hibajavítás):</strong> A "Mennyit számlázott ki" rádiógombjai torzan, szétcsúszva jelentek meg - egy általános CSS-szabály véletlenül a rádiógombokra is ráhúzta a szöveges mezők 100%-os szélességét. Kijavítva.</li>
<li><strong>v260908a:</strong> A "Mennyit számlázott ki eddig a szolgáltató?" mezőnél most választható a bemenet típusa: "Összesített mennyiség" (a korábbi, delta-alapú mód) vagy "Szolgáltatói becsült záró óraállás" (abszolút mérőállás, amiből az app automatikusan kivonja a bázist). Gáznál alapból az utóbbi az alapértelmezett, villanynál/víznél az előbbi - de bármikor átválthatod.</li>
<li><strong>v260908a:</strong> A feltöltés/letöltés szabványos űrlap-formátumú (form-urlencoded) kéréseket küld a nyers JSON body helyett, mert egyes tárhelyek tűzfala (WAF) ezt gyanúsnak ítélheti. Emellett hibaüzenetnél most a nyers szerver-válasz eleje is megjelenik, hogy könnyebb legyen diagnosztizálni, ha a szerver nem JSON-t ad vissza.</li>
<li><strong>v260908a (hibajavítás):</strong> A böngésző beépített titkosítója (Web Crypto API) csak HTTPS-en működik, sok ingyenes tárhelyen viszont nincs SSL. Lecserélve egy tisztán JavaScript-es titkosító könyvtárra (CryptoJS), ami sima http://-n keresztül is működik - nem kell hozzá SSL-tanúsítvány.</li>
<li><strong>v260908a:</strong> Új "☁️ Felhő Szinkron (saját tárhely)" funkció a Rendszer > Export/Import fülön. AES-256-GCM titkosítással (Web Crypto API), a hozzá tartozó `sync.php` végponttal, ami a saját tárhelyedre menti a (titkosított) adatot - nincs harmadik fél szolgáltatás, nincs API-kulcs kockázat.</li>
<li><strong>v260908a (hibajavítás):</strong> A mobil oldalsó menü nem volt görgethető, ezért a tárhelyszolgáltató (rezsi.van.hu) tetején lévő banner miatt kilógó alsó menüpontok (pl. "Nyomtatás") elérhetetlenek voltak. Javítva: a menü belső listája most valóban görgethető, és a magasság-számítás a tényleges látható területhez igazodik (nem a böngésző maximális lehetséges méretéhez), mobil böngészőkön és beágyazott/iframe-es tárhelyeken is.</li>
<li><strong>v260908a (hibajavítás):</strong> A szokatlan "Kiszámlázott mennyiség" figyelmeztetés eddig csak mentéskor futott le - egy korábban (régebbi verzióban) már elmentett hibás érték így észrevétlen maradt. Most egy állandó, piros figyelmeztető sáv jelenik meg a közmű-oldal tetején, minden megjelenítéskor, amíg a gyanús érték javításra nem kerül.</li>
<li><strong>v260908a (hibajavítás):</strong> A v260905b-ben az alapdíj tévesen a "Fennmaradó keret értéke"/"TÖBBLET KÖLTSÉG" (jövőbeli/potenciális) számba lett belekeverve egy eddig-elköltött-jellegű tétellel. Visszaállítva: ez a kártya most újra tisztán, alapdíj nélkül mutatja a keret Ft-értékét; az alapdíj külön, egyértelműen jelölt "ezen felül" sorban jelenik meg, a helyes kártyához (Keret Ft-értéke) csatolva.</li>
<li><strong>v260908a (hibajavítás):</strong> Az egyenleg (számlázott vs. tényleges) Ft-értéke most egy tisztább, mindkét irányban helyesen működő sávos (kedvezményes+piaci) számítással készül - korábban csak az egyik irányban vette figyelembe a keret-határt.</li>
<li><strong>v260908a:</strong> Szokatlan-érték figyelmeztetés a "Kiszámlázott mennyiség" mezőnél (kézi bevitel és "+ Számla hozzáadása" is) - ha a beírt szám gyanúsan egy abszolút óraállásnak tűnik egy "bázis óta" delta helyett, az app rákérdez mentés előtt.</li>
<li><strong>v260905b:</strong> Verziószám-formátum átállítva ÉÉHHNN+betű sémára (pl. "260905b"), és a verzió mostantól egy állandó lábléc-sávban is látszik a lap alján, minden oldalon.</li>
<li><strong>v260905b:</strong> A villany egyenleg-számítás is megkapta a gáznál már bevezetett, kedvezményes/piaci ár-határt figyelembe vevő, pontosabb logikát (a v260908a-ben tovább pontosítva).</li>
<li><strong>v260905b:</strong> Új "Kéthavonta" gyakoriság a Fix Költségeknél, plusz új tételek: Pesti villany/gáz/kuka/víz/lakásbiztosítás valós összeggel, Babaváró, Pesti jelzálog.</li>
<li><strong>v2026.09.05.a:</strong> Számla hozzáadása gomb (a kiszámlázott mennyiség hozzáadódik, nem felülír; gáz MJ-ban is megadható).</li>
<li><strong>v2026.09.05.a:</strong> Következő leolvasás kitöltése számláról (dátum-intervallum kinyerése beillesztett szövegből).</li>
<li><strong>v2026.09.05.a:</strong> Leolvasás forrása (saját / szolgáltatói leolvasás / szolgáltatói becslés) — a táblázatban jelezve.</li>
<li><strong>v2026.09.05.a:</strong> "Felhasznált keret" kártyán megjelenik a számlázott mennyiség is (eltérés azonnal látható).</li>
<li><strong>v2026.09.05.a:</strong> Gáz fűtőérték beállítható (G_FUTOERTEK), tipp az Ft/MJ átváltáshoz.</li>
<li><strong>v2026.09.05.a:</strong> Villany egyenleg bug javítva (számlázott vs. tényleges fogyasztás).</li>
<li><strong>v2026.09.05.a:</strong> Rendezhető Fix Költségek táblázat (név, összeg, gyakoriság, ki fizeti, aktív).</li>
<li><strong>v2026.09.05.a:</strong> Progress bar + százalék a keret kártyán; sötét mód h1/h2 javítás; "Beállítások" menüpont.</li>
<li><strong>v5.4:</strong> Nyomtatási nézet kiválasztható elemekkel.</li>
<li><strong>v5.3:</strong> Rendszer al-oldalak.</li>
<li><strong>v5.2:</strong> Dinamikus felhasználók, Aktív pipa, Δ oszlop, napi auto-mentés.</li>
<li><strong>v5.1:</strong> Sötét mód, Chart.js lokális, Okos Import.</li>
</ul>
</div>
</div>
</div>
</main>
<!-- NYOMTATÁSI MODAL -->
<div id="print-modal" class="print-modal-overlay">
<div class="print-modal-content">
<h2>🖨️ Nyomtatási nézet</h2>
<p style="font-size: 13px; color: #666; margin-bottom: 10px;">Kiválaszd, mit szeretnéd nyomtatni:</p>
<div class="print-selection-group" id="print-selection-properties"></div>
<div class="print-selection-group" id="print-selection-fixed">
<label><input type="checkbox" id="print-fixedcosts" checked> 💰 Fix Költségek</label>
</div>
<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;">
<button class="btn" style="width:auto; background-color:#95a5a6;" onclick="selectAllPrint()">Minden</button>
<button class="btn" style="width:auto; background-color:#95a5a6;" onclick="deselectAllPrint()">Egyikkel sem</button>
</div>
<div class="print-modal-buttons">
<button class="btn" style="width:auto; background-color: var(--success);" onclick="generatePrintView()">🖨️ Nyomtatás</button>
<button class="btn" style="width:auto; background-color:#7f8c8d;" onclick="closePrintModal()">Mégse</button>
</div>
</div>
</div>
<div id="print-area"></div>
<script>
const CURRENT_VERSION = "260908b";
let currentProperty = '';
let currentUtility = 'villany';
let currentChart = null;
let undoHistory = [];
const MAX_HISTORY_STEPS = 20;
let fixedSortColumn = '';
let fixedSortAsc = true;
const AVAILABLE_CATEGORIES = [
{ id: 'villany', name: 'Villany (kWh)' },
{ id: 'gaz', name: 'Gáz (m³)' },
{ id: 'viz', name: 'Víz (m³)' },
{ id: 'villany_h', name: 'Villany - H tarifa (kWh)' },
{ id: 'napelem', name: 'Napelem - Termelés (kWh)' }
];
const DEFAULT_SETTINGS = {
V_NORMAL_AR: 35.9918, V_PIACI_AR: 70.10, V_KERET: 2523,
G_NORMAL_AR: 101.49, G_PIACI_AR: 547.00, G_KERET: 1797,
W_VIZ_DIJ: 423.00, W_CSATORNA_DIJ: 507.50, W_ALAPDIJ: 343.00,
V_ALAPDIJ: 120.50, G_ALAPDIJ: 766.00, G_FUTOERTEK: 35.42
};
const huFmt = new Intl.NumberFormat('hu-HU');
function ft(n) { return huFmt.format(Math.round(n || 0)) + ' Ft'; }
function num(n) { return huFmt.format(Math.round(n || 0)); }
function escapeHtml(str) { return String(str || '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); }
const DEFAULT_BLANK_DATA = {
version: CURRENT_VERSION,
payers: ['Norbi', 'Melinda'],
properties: {
"Ingatlan 1": {
categories: ['villany', 'gaz', 'viz'],
data: { villany: [], gaz: [], viz: [] }
}
},
subVolumes: { "Ingatlan 1": { villany: 0, gaz: 0, viz: 0 } },
settings: { ...DEFAULT_SETTINGS },
nextReadings: { "Ingatlan 1": { villany: {from:'', to:''}, gaz: {from:'', to:''}, viz: {from:'', to:''} } },
fixedCosts: []
};
const DEFAULT_FIXED_COSTS = [
{ name: 'Villany Palánk', periodicity: 'monthly', amount: 6000, payer: '', active: true },
{ name: 'Gáz Palánk', periodicity: 'monthly', amount: 16000, payer: '', active: true },
{ name: 'Víz Palánk', periodicity: 'monthly', amount: 3000, payer: '', active: true },
{ name: 'Kuka Palánk', periodicity: 'monthly', amount: 2000, payer: '', active: true },
{ name: 'Lakásbiztosítás Palánk', periodicity: 'quarterly', amount: 28000, payer: '', active: true },
{ name: 'Autóbiztosítás SFB025', periodicity: 'yearly', amount: 29000, payer: '', active: true },
{ name: 'Utánfutó biztosítás', periodicity: 'yearly', amount: 5000, payer: '', active: true },
{ name: 'Autó műszaki SFB025', periodicity: '2yearly', amount: 45000, payer: '', active: true },
{ name: 'Autóbiztosítás RDK', periodicity: 'yearly', amount: 29000, payer: '', active: true },
{ name: 'Autó műszaki RDK', periodicity: '2yearly', amount: 45000, payer: '', active: true },
{ name: 'Autóbiztosítás RDK (2.)', periodicity: 'yearly', amount: 29000, payer: '', active: true },
{ name: 'Lakásbiztosítás Pest', periodicity: 'quarterly', amount: 28000, payer: '', active: true },
{ name: 'Pesti villany', periodicity: 'monthly', amount: 27000, payer: '', active: true },
{ name: 'Pesti gáz', periodicity: 'monthly', amount: 28000, payer: '', active: true },
{ name: 'Pesti kuka', periodicity: 'monthly', amount: 6000, payer: '', active: true },
{ name: 'Pesti víz', periodicity: 'bimonthly', amount: 18000, payer: '', active: true },
{ name: 'Pesti lakásbiztosítás', periodicity: 'monthly', amount: 24000, payer: '', active: true },
{ name: 'Babaváró', periodicity: 'monthly', amount: 46000, payer: '', active: true },
{ name: 'Pesti jelzálog', periodicity: 'monthly', amount: 59000, payer: '', active: true },
{ name: 'Telekom mobil + telefon törlesztő', periodicity: 'monthly', amount: 26000, payer: '', active: true },
{ name: 'Telekom otthoni számla', periodicity: 'monthly', amount: 25000, payer: '', active: true }
];
let appData = JSON.parse(JSON.stringify(DEFAULT_BLANK_DATA));
function getUnitFor(util) { return (util === 'villany' || util === 'villany_h' || util === 'napelem') ? 'kWh' : 'm³'; }
function getUnit() { return getUnitFor(currentUtility); }
function computeStats(property, utility) {
const s = { ...DEFAULT_SETTINGS, ...(appData.settings || {}) };
const propObj = appData.properties[property];
if (!propObj || !propObj.data) return null;
let list = (propObj.data[utility] || []).slice().sort((a,b) => new Date(a.date) - new Date(b.date));
const unit = getUnitFor(utility);
const baseEntry = list.find(e => e.type === 'mult');
const currentEntries = list.filter(e => e.type === 'jelen');
const latestCurrent = currentEntries.length > 0 ? currentEntries[currentEntries.length - 1] : null;
const result = {
unit, baseEntry, latestCurrent, list,
factConsumed: null, daysSinceBase: null,
dynamicLimit: null, pufferValue: null,
costLabel: null, costValue: null
};
if (baseEntry && latestCurrent) {
result.factConsumed = latestCurrent.value - baseEntry.value;
result.daysSinceBase = Math.max(0, (new Date(latestCurrent.date) - new Date(baseEntry.date)) / (1000 * 60 * 60 * 24));
}
const currentSubVol = (appData.subVolumes[property] && appData.subVolumes[property][utility]) ? appData.subVolumes[property][utility] : 0;
result.currentSubVol = currentSubVol;
if (utility === 'viz') {
const wAlapdij = s.W_ALAPDIJ || DEFAULT_SETTINGS.W_ALAPDIJ;
const W_COMBINED_AR = ((s.W_VIZ_DIJ || DEFAULT_SETTINGS.W_VIZ_DIJ) + (s.W_CSATORNA_DIJ || DEFAULT_SETTINGS.W_CSATORNA_DIJ));
result.type = 'viz';
result.W_COMBINED_AR = W_COMBINED_AR;
result.wAlapdij = wAlapdij;
if (result.factConsumed !== null) {
const monthsSinceBase = result.daysSinceBase / 30;
result.alapdijKoltseg = monthsSinceBase * wAlapdij;
result.costLabel = "Eddigi fogyasztás értéke (alapdíjjal)";
result.costValue = Math.round(result.factConsumed * W_COMBINED_AR + result.alapdijKoltseg);
const balanceValue = currentSubVol - result.factConsumed;
result.balance = balanceValue;
result.balanceFt = Math.round(balanceValue * W_COMBINED_AR);
}
} else if (utility === 'villany_h' || utility === 'napelem') {
result.type = 'special';
result.limitText = (utility === 'villany_h') ? 'Ugyanabba a keretbe számít, mint a "Villany"' : 'Nincs önálló rezsihatár';
} else {
result.type = 'standard';
const limitKeret = (utility === 'gaz') ? s.G_KERET : s.V_KERET;
const alapdij = (utility === 'gaz') ? (s.G_ALAPDIJ || DEFAULT_SETTINGS.G_ALAPDIJ) : (s.V_ALAPDIJ || DEFAULT_SETTINGS.V_ALAPDIJ);
result.limitKeret = limitKeret;
result.alapdij = alapdij;
if (baseEntry) result.dynamicLimit = baseEntry.value + limitKeret;
if (result.dynamicLimit && latestCurrent) {
result.pufferValue = result.dynamicLimit - latestCurrent.value;
const normalPrice = (utility === 'villany') ? s.V_NORMAL_AR : s.G_NORMAL_AR;
const marketPrice = (utility === 'villany') ? s.V_PIACI_AR : s.G_PIACI_AR;
result.normalPrice = normalPrice;
result.marketPrice = marketPrice;
// JAVÍTÁS (260905c): az alapdíj NEM kerül bele a "Fennmaradó keret értéke" /
// "TÖBBLET KÖLTSÉG" számba - ez a szám kizárólag a keret-alapú Ft-értéket mutatja.
// Az alapdíjat külön, egyértelműen jelölt sorban jelenítjük meg (lásd refreshUI),
// hogy ne keveredjen egy "eddig elköltött" jellegű tétel egy "jövőbeli/potenciális
// keret-érték" jellegű tétellel.
const monthsSinceBase = (result.daysSinceBase || 0) / 30;
result.alapdijKoltseg = monthsSinceBase * alapdij;
if (result.pufferValue >= 0) {
result.costLabel = "Fennmaradó keret értéke";
result.costValue = Math.round(result.pufferValue * normalPrice);
} else {
result.costLabel = "TÖBBLET KÖLTSÉG (Piaci)";
result.costValue = Math.round(Math.abs(result.pufferValue) * marketPrice);
}
// JAVÍTÁS (260905c): az egyenleg Ft-értékét most már úgy számoljuk, hogy külön-külön
// kiszámoljuk a "számlázott mennyiség" és a "tényleges fogyasztás" sávos (kedvezményes+
// piaci) költségét ugyanazzal a keret-határral, majd vesszük a kettő különbségét. Ez
// automatikusan helyesen kezel minden esetet (akár a kereten belül, akár túllépve van
// az egyik vagy mindkét mennyiség), nincs szükség külön esetszétválasztásra.
const tieredCost = (qty) => {
if (qty <= limitKeret) return qty * normalPrice;
return limitKeret * normalPrice + (qty - limitKeret) * marketPrice;
};
const balanceValue = currentSubVol - result.factConsumed;
const balanceFt = Math.round(tieredCost(currentSubVol) - tieredCost(result.factConsumed));
result.balance = balanceValue;
result.balanceFt = balanceFt;
}
}
return result;
}
function computeDelta(list, entry, idx, unit) {
if (entry.type !== 'jelen') return '—';
const earlierOnes = list.filter(e => e.type === 'jelen' && new Date(e.date) < new Date(entry.date)).sort((a,b) => new Date(b.date) - new Date(a.date));
if (earlierOnes.length > 0) {
const d = entry.value - earlierOnes[0].value;
return (d >= 0 ? '+' : '') + num(d) + ' ' + unit;
}
const base = list.find(e => e.type === 'mult');
if (base && new Date(base.date) < new Date(entry.date)) {
return '+' + num(entry.value - base.value) + ' ' + unit;
}
return '-';
}
const sourceLabels = {
sajat: 'saját',
szolgaltato_leol: 'szolg. leolvasás',
szolgaltato_becs: 'szolg. becslés'
};
window.onload = function() {
if (localStorage.getItem('rezsi_theme') === 'dark') {
document.body.classList.add('dark');
const btn = document.getElementById('theme-toggle-btn');
if (btn) btn.textContent = '☀️ Világos mód';
}
const metaTheme = document.querySelector('meta[name="theme-color"]');
if (metaTheme) metaTheme.setAttribute('content', document.body.classList.contains('dark') ? '#1a1a1a' : '#2c3e50');
if(localStorage.getItem('dynamic_utility_tracker_data')) {
try {
let parsed = JSON.parse(localStorage.getItem('dynamic_utility_tracker_data'));
if(parsed && parsed.properties) appData = migrateData(parsed);
} catch(e) { console.error("Adatbetöltési hiba", e); }
}
if(localStorage.getItem('utility_tracker_undo_history')) {
try {
undoHistory = JSON.parse(localStorage.getItem('utility_tracker_undo_history'));
if(undoHistory.length > 1) undoHistory = [undoHistory[undoHistory.length - 1]];
} catch(e) { undoHistory = []; }
}
if(!appData.properties || Object.keys(appData.properties).length === 0) {
appData = JSON.parse(JSON.stringify(DEFAULT_BLANK_DATA));
}
makeDailyBackup();
currentProperty = Object.keys(appData.properties)[0];
const firstPropObj = appData.properties[currentProperty];
if(firstPropObj && firstPropObj.categories && firstPropObj.categories.length > 0) currentUtility = firstPropObj.categories[0];
buildSidebarMenu();
updateUndoButtonUI();
refreshUI();
};
function makeDailyBackup() {
try {
const today = new Date().toISOString().split('T')[0];
localStorage.setItem(`rezsi_autobackup_${today}`, JSON.stringify(appData));
Object.keys(localStorage).filter(k => k.startsWith('rezsi_autobackup_')).sort().slice(0, -7).forEach(k => localStorage.removeItem(k));
} catch (e) { console.warn("Napi mentés sikertelen:", e); }
}
function restoreDailyBackup(dateStr) {
const keys = Object.keys(localStorage).filter(k => k.startsWith('rezsi_autobackup_')).sort().reverse();
const key = dateStr ? `rezsi_autobackup_${dateStr}` : keys[0];
if (!key || !localStorage.getItem(key)) { alert("Nincs ilyen napi mentés."); return; }
if (!confirm(`Biztosan visszaállítod a(z) ${key.replace('rezsi_autobackup_','')} napi mentést?`)) return;
appData = migrateData(JSON.parse(localStorage.getItem(key)));
currentProperty = Object.keys(appData.properties)[0];
currentUtility = appData.properties[currentProperty].categories[0] || 'villany';
saveToLocalStorage(); buildSidebarMenu(); refreshUI();
alert("Napi mentés visszaállítva!");
}
function migrateData(data) {
if (!data.version) data.version = "5.1";
if (!Array.isArray(data.payers) || data.payers.length === 0) data.payers = ['Norbi', 'Melinda'];
Object.keys(data.properties).forEach(propKey => {
let p = data.properties[propKey];
if (!p.categories || !p.data) {
let oldData = { ...p };
let cats = Object.keys(oldData).filter(k => Array.isArray(oldData[k]));
if(cats.length === 0) cats = ['villany', 'gaz', 'viz'];
data.properties[propKey] = { categories: cats, data: oldData };
}
const prop = data.properties[propKey];
if (!Array.isArray(prop.categories)) prop.categories = ['villany', 'gaz', 'viz'];
if (!prop.data || typeof prop.data !== 'object') prop.data = {};
prop.categories.forEach(cat => {
if (!Array.isArray(prop.data[cat])) prop.data[cat] = [];
prop.data[cat] = prop.data[cat].filter(e => e && e.date && e.type && e.value !== undefined && e.value !== null && !isNaN(parseFloat(e.value)));
prop.data[cat].forEach(e => { if (!e.source) e.source = 'sajat'; });
});
if (!data.subVolumes) data.subVolumes = {};
if (!data.subVolumes[propKey]) data.subVolumes[propKey] = {};
['villany', 'gaz', 'viz'].forEach(k => { if (data.subVolumes[propKey][k] === undefined) data.subVolumes[propKey][k] = 0; });
if (!data.nextReadings) data.nextReadings = {};
if (!data.nextReadings[propKey]) data.nextReadings[propKey] = {};
['villany', 'gaz', 'viz'].forEach(k => { if (!data.nextReadings[propKey][k]) data.nextReadings[propKey][k] = { from: '', to: '' }; });
});
if(!data.subVolumes) data.subVolumes = {};
if(!data.settings) data.settings = { ...DEFAULT_SETTINGS };
else {
Object.keys(DEFAULT_SETTINGS).forEach(k => { if (data.settings[k] === undefined) data.settings[k] = DEFAULT_SETTINGS[k]; });
}
if(!data.fixedCosts || !Array.isArray(data.fixedCosts)) data.fixedCosts = JSON.parse(JSON.stringify(DEFAULT_FIXED_COSTS));
data.fixedCosts.forEach(c => { if (c.payer === undefined) c.payer = ''; if (c.active === undefined) c.active = true; });
// EGYSZERI JAVÍTÁS (260905b): a korábban 0 Ft-os "Pesti" placeholder tételek valós összeggel
// frissítve, plusz két új tétel (Babaváró, Pesti jelzálog) hozzáadva. Csak egyszer fut le
// (data._patch_260905b flag), és csak akkor nyúl egy tételhez, ha az még a régi placeholder
// állapotban van - így nem írja felül, ha közben te már kézzel átírtad valamelyiket.
if (!data._patch_260905b) {
const patchMap = {
'Pesti villany': { amount: 27000 },
'Pesti gáz': { amount: 28000 },
'Pesti kuka': { amount: 6000 },
'Pesti víz': { amount: 18000, periodicity: 'bimonthly' },
'Pesti biztosítás': { name: 'Pesti lakásbiztosítás', amount: 24000 }
};
data.fixedCosts.forEach(item => {
const patch = patchMap[item.name];
if (patch && item.amount === 0) {
if (patch.amount !== undefined) item.amount = patch.amount;
if (patch.periodicity) item.periodicity = patch.periodicity;
if (patch.name) item.name = patch.name;
}
});
const existingNames = data.fixedCosts.map(c => c.name);
if (!existingNames.includes('Babaváró')) {
data.fixedCosts.push({ name: 'Babaváró', periodicity: 'monthly', amount: 46000, payer: '', active: true });
}
if (!existingNames.includes('Pesti jelzálog')) {
data.fixedCosts.push({ name: 'Pesti jelzálog', periodicity: 'monthly', amount: 59000, payer: '', active: true });
}
data._patch_260905b = true;
}
data.version = CURRENT_VERSION;
return data;
}
function smartMerge(local, imported) {
Object.keys(imported.properties).forEach(propName => {
const impProp = imported.properties[propName];
if (!local.properties[propName]) {
local.properties[propName] = impProp;
if (imported.subVolumes && imported.subVolumes[propName]) local.subVolumes[propName] = imported.subVolumes[propName];
if (imported.nextReadings && imported.nextReadings[propName]) local.nextReadings[propName] = imported.nextReadings[propName];
return;
}
const allCats = new Set([...local.properties[propName].categories, ...impProp.categories, ...Object.keys(impProp.data || {})]);
allCats.forEach(cat => {
if (!local.properties[propName].categories.includes(cat)) local.properties[propName].categories.push(cat);
if (!local.properties[propName].data[cat]) local.properties[propName].data[cat] = [];
const impReadings = (impProp.data && impProp.data[cat]) || [];
impReadings.forEach(impRead => {
const exists = local.properties[propName].data[cat].some(r => r.date === impRead.date && r.type === impRead.type);
if (!exists) local.properties[propName].data[cat].push(impRead);
});
local.properties[propName].data[cat].sort((a, b) => new Date(a.date) - new Date(b.date));
});
if (imported.subVolumes && imported.subVolumes[propName]) {
Object.keys(imported.subVolumes[propName]).forEach(k => {
const impVal = imported.subVolumes[propName][k] || 0;
const locVal = (local.subVolumes[propName] && local.subVolumes[propName][k]) || 0;
if (!local.subVolumes[propName]) local.subVolumes[propName] = {};
if (impVal > locVal) local.subVolumes[propName][k] = impVal;
});
}
});
if (imported.fixedCosts && imported.fixedCosts.length > 0) {
if (!local.fixedCosts) local.fixedCosts = [];
imported.fixedCosts.forEach(impCost => {
const exists = local.fixedCosts.some(c => c.name === impCost.name && c.periodicity === impCost.periodicity && c.amount === impCost.amount);
if (!exists) local.fixedCosts.push(impCost);
});
}
return local;
}
function saveToHistory() {
undoHistory.push(JSON.stringify(appData));
if (undoHistory.length > MAX_HISTORY_STEPS) undoHistory.shift();
localStorage.setItem('utility_tracker_undo_history', JSON.stringify(undoHistory));
updateUndoButtonUI();
}
function triggerUndo() {
if (undoHistory.length === 0) return;
appData = JSON.parse(undoHistory.pop());
localStorage.setItem('utility_tracker_undo_history', JSON.stringify(undoHistory));
if (!appData.properties[currentProperty]) currentProperty = Object.keys(appData.properties)[0];
let propObj = appData.properties[currentProperty];
if(!propObj.categories.includes(currentUtility)) currentUtility = propObj.categories[0] || 'villany';
saveToLocalStorage(); buildSidebarMenu(); updateUndoButtonUI();
if(document.getElementById('page-system').classList.contains('active')) { renderManagementTable(); renderSettingsTable(); }
else refreshUI();
}
function updateUndoButtonUI() {
const undoBtn = document.getElementById('undo-btn');
document.getElementById('undo-count').textContent = undoHistory.length;
undoBtn.disabled = undoHistory.length === 0;
}
function saveToLocalStorage() {
localStorage.setItem('dynamic_utility_tracker_data', JSON.stringify(appData));
}
function buildSidebarMenu() {
const menuWrapper = document.getElementById('dynamic-sidebar-menu');
menuWrapper.innerHTML = '';
Object.keys(appData.properties).forEach(propName => {
const propObj = appData.properties[propName];
const sectionTitle = document.createElement('div');
sectionTitle.className = 'menu-section-title';
sectionTitle.textContent = `📍 ${propName}`;
menuWrapper.appendChild(sectionTitle);
propObj.categories.forEach(util => {
const btn = document.createElement('button');
btn.className = 'menu-btn';
btn.id = `nav-${sanitizeId(propName)}-${util}`;
const catObj = AVAILABLE_CATEGORIES.find(c => c.id === util);
btn.textContent = catObj ? catObj.name : util;
btn.onclick = function() { switchPage(propName, util); };
menuWrapper.appendChild(btn);
});
});
}
function sanitizeId(name) { return name.replace(/[^a-zA-Z0-9]/g, '_'); }
function switchPage(property, utility) {
document.querySelectorAll('.sidebar button.menu-btn').forEach(b => b.classList.remove('active'));
document.getElementById('nav-system-management').classList.remove('active');
document.getElementById('nav-fixedcosts').classList.remove('active');
if (property === 'system') {
document.getElementById('utility-page').classList.remove('active');
document.getElementById('page-fixedcosts').classList.remove('active');
document.getElementById('page-system').classList.add('active');
document.getElementById('nav-system-management').classList.add('active');
document.getElementById('json-preview').value = JSON.stringify(appData, null, 2);
switchSystemTab('properties');
} else if (property === 'fixedcosts') {
document.getElementById('utility-page').classList.remove('active');
document.getElementById('page-system').classList.remove('active');
document.getElementById('page-fixedcosts').classList.add('active');
document.getElementById('nav-fixedcosts').classList.add('active');
renderFixedCostsTable();
} else {
document.getElementById('page-system').classList.remove('active');
document.getElementById('page-fixedcosts').classList.remove('active');
document.getElementById('utility-page').classList.add('active');
currentProperty = property; currentUtility = utility;
const activeBtn = document.getElementById(`nav-${sanitizeId(property)}-${utility}`);
if(activeBtn) activeBtn.classList.add('active');
cancelEdit(); refreshUI();
}
closeSidebar();
}
function switchSystemTab(tabId) {
document.querySelectorAll('#page-system .sys-tab-btn').forEach(b => b.classList.remove('active'));
const btn = document.querySelector(`#page-system .sys-tab-btn[data-systab="${tabId}"]`);
if (btn) btn.classList.add('active');
document.querySelectorAll('#page-system .sys-section').forEach(s => s.classList.remove('active'));
const section = document.getElementById(`sys-section-${tabId}`);
if (section) section.classList.add('active');
if (tabId === 'properties') renderManagementTable();
if (tabId === 'settings') renderSettingsTable();
if (tabId === 'sync') { document.getElementById('json-preview').value = JSON.stringify(appData, null, 2); loadSyncConfig(); }
if (tabId === 'payers') renderPayerList();
}
function toggleSidebar() { document.getElementById('main-sidebar').classList.toggle('open'); document.getElementById('sidebar-overlay').classList.toggle('active'); }
function closeSidebar() { document.getElementById('main-sidebar').classList.remove('open'); document.getElementById('sidebar-overlay').classList.remove('active'); }
function addProperty() {
const nameInput = document.getElementById('new-property-name');
const name = nameInput.value.trim();
if(!name) { alert("Kérlek adj meg egy nevet!"); return; }
if(appData.properties[name]) { alert("Ilyen nevű ingatlan már létezik!"); return; }
saveToHistory();
appData.properties[name] = { categories: ['villany', 'gaz', 'viz'], data: { villany: [], gaz: [], viz: [] } };
appData.subVolumes[name] = { villany: 0, gaz: 0, viz: 0 };
appData.nextReadings[name] = { villany: {from:'', to:''}, gaz: {from:'', to:''}, viz: {from:'', to:''} };
nameInput.value = '';
saveToLocalStorage(); buildSidebarMenu(); renderManagementTable();
}
function renameProperty(oldName) {
const newName = prompt(`Add meg a(z) "${oldName}" új nevét:`, oldName);
if(newName === null) return;
const cleanNewName = newName.trim();
if(!cleanNewName || cleanNewName === oldName) return;
if(appData.properties[cleanNewName]) { alert("Ez a név már foglalt!"); return; }
saveToHistory();
appData.properties[cleanNewName] = appData.properties[oldName];
appData.subVolumes[cleanNewName] = appData.subVolumes[oldName];
appData.nextReadings[cleanNewName] = appData.nextReadings[oldName] || { villany: {from:'', to:''}, gaz: {from:'', to:''}, viz: {from:'', to:''} };
delete appData.properties[oldName]; delete appData.subVolumes[oldName]; delete appData.nextReadings[oldName];
if(currentProperty === oldName) currentProperty = cleanNewName;
saveToLocalStorage(); buildSidebarMenu(); renderManagementTable();
}
function deleteProperty(name) {
if(Object.keys(appData.properties).length <= 1) { alert("Legalább egy ingatlannak maradnia kell!"); return; }
if(!confirm(`BIZTOSAN TÖRÖLNI SZERETNÉD a(z) "${name}" ingatlant?`)) return;
saveToHistory();
delete appData.properties[name]; delete appData.subVolumes[name]; delete appData.nextReadings[name];
if(currentProperty === name) currentProperty = Object.keys(appData.properties)[0];
saveToLocalStorage(); buildSidebarMenu(); renderManagementTable();
}
function toggleCategoryForProperty(propName, catId) {
saveToHistory();
let propObj = appData.properties[propName];
let idx = propObj.categories.indexOf(catId);
if(idx > -1) {
if(propObj.categories.length <= 1) { alert("Legalább egy kategóriának aktívnak kell lennie!"); return; }
propObj.categories.splice(idx, 1);
} else {
propObj.categories.push(catId);
if(!propObj.data[catId]) propObj.data[catId] = [];
}
saveToLocalStorage(); buildSidebarMenu(); renderManagementTable();
if(currentProperty === propName && !propObj.categories.includes(currentUtility)) { currentUtility = propObj.categories[0]; refreshUI(); }
}
function renderManagementTable() {
const tbody = document.getElementById('management-table-body');
tbody.innerHTML = '';
Object.keys(appData.properties).forEach(propName => {
const propObj = appData.properties[propName];
const tr = document.createElement('tr');
const tdName = document.createElement('td');
const strong = document.createElement('strong'); strong.textContent = propName;
tdName.appendChild(strong);
const tdCats = document.createElement('td');
AVAILABLE_CATEGORIES.forEach(cat => {
const label = document.createElement('label');
label.style.marginRight = '12px'; label.style.display = 'inline-block'; label.style.cursor = 'pointer';
const checkbox = document.createElement('input');
checkbox.type = 'checkbox'; checkbox.checked = propObj.categories.includes(cat.id);
checkbox.onchange = () => toggleCategoryForProperty(propName, cat.id);
checkbox.style.marginRight = '4px';
label.appendChild(checkbox); label.appendChild(document.createTextNode(cat.name));
tdCats.appendChild(label);
});
const tdActions = document.createElement('td'); tdActions.className = 'actions';
const btnEdit = document.createElement('button'); btnEdit.className = 'btn-edit'; btnEdit.textContent = 'Átnevezés';
btnEdit.onclick = () => renameProperty(propName);
const btnDel = document.createElement('button'); btnDel.className = 'btn-delete'; btnDel.textContent = 'Törlés';
btnDel.onclick = () => deleteProperty(propName);
tdActions.appendChild(btnEdit); tdActions.appendChild(btnDel);
tr.appendChild(tdName); tr.appendChild(tdCats); tr.appendChild(tdActions);
tbody.appendChild(tr);
});
document.getElementById('json-preview').value = JSON.stringify(appData, null, 2);
}
function calcFixedCostEquivalents(item) {
const amt = parseFloat(item.amount) || 0;
switch(item.periodicity) {
case 'monthly': return { monthly: amt, yearly: amt * 12, twoYearly: amt * 24 };
case 'bimonthly': return { monthly: amt / 2, yearly: amt * 6, twoYearly: amt * 12 };
case 'quarterly': return { monthly: amt / 3, yearly: amt * 4, twoYearly: amt * 8 };
case 'yearly': return { monthly: amt / 12, yearly: amt, twoYearly: amt * 2 };
case '2yearly': return { monthly: amt / 24, yearly: amt / 2, twoYearly: amt };
default: return { monthly: 0, yearly: 0, twoYearly: 0 };
}
}
function renderPayerList() {
const container = document.getElementById('payer-list');
container.innerHTML = '';
(appData.payers || []).forEach((payer, idx) => {
const tag = document.createElement('span');
tag.className = 'payer-tag';
tag.textContent = payer + ' ';
const delBtn = document.createElement('button');
delBtn.textContent = '✕'; delBtn.title = `${payer} eltávolítása`;
delBtn.onclick = () => deletePayer(idx);
tag.appendChild(delBtn);
container.appendChild(tag);
});
}
function addPayer() {
const input = document.getElementById('new-payer-name');
const name = input.value.trim();
if (!name) { alert("Adj meg egy nevet!"); return; }
if ((appData.payers || []).some(p => p.toLowerCase() === name.toLowerCase())) { alert("Ez a felhasználó már létezik!"); return; }
saveToHistory();
if (!appData.payers) appData.payers = [];
appData.payers.push(name);
input.value = '';
saveToLocalStorage(); renderPayerList(); renderFixedCostsTable();
}
function deletePayer(idx) {
const name = appData.payers[idx];
if (!confirm(`Biztosan törlöd a(z) "${name}" felhasználót?`)) return;
saveToHistory();
appData.payers.splice(idx, 1);
appData.fixedCosts.forEach(c => { if (c.payer === name) c.payer = ''; });
saveToLocalStorage(); renderPayerList(); renderFixedCostsTable();
}
function sortFixedCosts(colKey) {
if (fixedSortColumn === colKey) fixedSortAsc = !fixedSortAsc;
else { fixedSortColumn = colKey; fixedSortAsc = true; }
appData.fixedCosts.sort((a, b) => {
let valA, valB;
switch (colKey) {
case 'active': valA = (a.active !== false) ? 1 : 0; valB = (b.active !== false) ? 1 : 0; break;
case 'name': valA = (a.name || '').toLowerCase(); valB = (b.name || '').toLowerCase(); break;
case 'periodicity': valA = a.periodicity || ''; valB = b.periodicity || ''; break;
case 'amount': valA = a.amount || 0; valB = b.amount || 0; break;
case 'monthly': valA = calcFixedCostEquivalents(a).monthly; valB = calcFixedCostEquivalents(b).monthly; break;
case 'yearly': valA = calcFixedCostEquivalents(a).yearly; valB = calcFixedCostEquivalents(b).yearly; break;
case 'twoYearly': valA = calcFixedCostEquivalents(a).twoYearly; valB = calcFixedCostEquivalents(b).twoYearly; break;
case 'payer': valA = (a.payer || '').toLowerCase(); valB = (b.payer || '').toLowerCase(); break;
default: return 0;
}
if (typeof valA === 'string') {
return fixedSortAsc ? valA.localeCompare(valB) : String(valB).localeCompare(String(valA));
}
return fixedSortAsc ? (valA > valB ? 1 : valA < valB ? -1 : 0) : (valB > valA ? 1 : valB < valA ? -1 : 0);
});
saveToLocalStorage();
renderFixedCostsTable();
}
function renderFixedCostsTable() {
if(!appData.fixedCosts) appData.fixedCosts = [];
if(!appData.payers || !Array.isArray(appData.payers)) appData.payers = ['Norbi', 'Melinda'];
const payers = appData.payers;
const tbody = document.getElementById('fixedcosts-table-body');
const thead = document.getElementById('fixedcosts-thead');
tbody.innerHTML = '';
thead.innerHTML = '';
const periodicityLabels = { monthly: 'Havonta', bimonthly: 'Kéthavonta', quarterly: 'Negyedévente', yearly: 'Évente', '2yearly': 'Kétévente' };
const headRow = document.createElement('tr');
const sortCols = [
{ key: 'active', label: 'Aktív' },
{ key: 'name', label: 'Költségelem' },
{ key: 'periodicity', label: 'Gyakoriság' },
{ key: 'amount', label: 'Összeg' },
{ key: 'monthly', label: 'Havi' },
{ key: 'yearly', label: 'Éves' },
{ key: 'twoYearly', label: 'Kétéves' }
];
sortCols.forEach(col => {
const th = document.createElement('th');
th.textContent = col.label;
th.style.cursor = 'pointer';
th.onclick = () => sortFixedCosts(col.key);
if (fixedSortColumn === col.key) th.textContent += (fixedSortAsc ? ' ▲' : ' ▼');
headRow.appendChild(th);
});
payers.forEach(p => {
const th = document.createElement('th');
th.textContent = p;
th.style.cursor = 'pointer';
th.onclick = () => sortFixedCosts('payer');
if (fixedSortColumn === 'payer') th.textContent += (fixedSortAsc ? ' ▲' : ' ▼');
headRow.appendChild(th);
});
const thActions = document.createElement('th');
headRow.appendChild(thActions);
thead.appendChild(headRow);
let totalMonthly = 0, totalYearly = 0, totalTwoYearly = 0;
const payerTotals = {};
appData.fixedCosts.forEach((item, i) => {
const eq = calcFixedCostEquivalents(item);
if (item.active !== false) {
totalMonthly += eq.monthly; totalYearly += eq.yearly; totalTwoYearly += eq.twoYearly;
const payerKey = (item.payer || '').trim() || 'Nincs megadva';
if(!payerTotals[payerKey]) payerTotals[payerKey] = { monthly: 0, yearly: 0, twoYearly: 0 };
payerTotals[payerKey].monthly += eq.monthly;
payerTotals[payerKey].yearly += eq.yearly;
payerTotals[payerKey].twoYearly += eq.twoYearly;
}
const tr = document.createElement('tr');
if (item.active === false) tr.style.opacity = '0.45';
const tdActive = document.createElement('td');
const activeCheck = document.createElement('input');
activeCheck.type = 'checkbox'; activeCheck.checked = (item.active !== false);
activeCheck.onchange = () => updateFixedCost(i, 'active', activeCheck.checked);
tdActive.appendChild(activeCheck);
const tdName = document.createElement('td');
const nameInput = document.createElement('input');
nameInput.type = 'text'; nameInput.value = item.name || '';
nameInput.style.minWidth = '120px';
nameInput.onchange = (e) => updateFixedCost(i, 'name', e.target.value);
tdName.appendChild(nameInput);
const tdFreq = document.createElement('td');
const freqSelect = document.createElement('select');
Object.keys(periodicityLabels).forEach(key => {
const opt = document.createElement('option');
opt.value = key; opt.textContent = periodicityLabels[key];
if(item.periodicity === key) opt.selected = true;
freqSelect.appendChild(opt);
});
freqSelect.onchange = (e) => updateFixedCost(i, 'periodicity', e.target.value);
tdFreq.appendChild(freqSelect);
const tdAmount = document.createElement('td');
const amountInput = document.createElement('input');
amountInput.type = 'number'; amountInput.step = 'any'; amountInput.min = '0';
amountInput.value = item.amount || 0; amountInput.style.width = '90px';
amountInput.onchange = (e) => updateFixedCost(i, 'amount', e.target.value);
tdAmount.appendChild(amountInput);
const tdMonthly = document.createElement('td'); tdMonthly.textContent = ft(eq.monthly);
const tdYearly = document.createElement('td'); tdYearly.textContent = ft(eq.yearly);
const tdTwoYearly = document.createElement('td'); tdTwoYearly.textContent = ft(eq.twoYearly);
const payerTds = [];
payers.forEach(p => {
const tdP = document.createElement('td');
const check = document.createElement('input');
check.type = 'checkbox'; check.checked = (item.payer === p); check.dataset.payer = p;
check.onchange = () => {
if (check.checked) {
tr.querySelectorAll('input[data-payer]').forEach(el => { if (el !== check) el.checked = false; });
updateFixedCost(i, 'payer', p);
} else {
updateFixedCost(i, 'payer', '');
}
};
tdP.appendChild(check);
payerTds.push(tdP);
});
const tdDel = document.createElement('td'); tdDel.className = 'actions';
const delBtn = document.createElement('button'); delBtn.className = 'btn-delete'; delBtn.textContent = 'Törlés';
delBtn.onclick = () => deleteFixedCost(i);
tdDel.appendChild(delBtn);
tr.appendChild(tdActive); tr.appendChild(tdName); tr.appendChild(tdFreq); tr.appendChild(tdAmount);
tr.appendChild(tdMonthly); tr.appendChild(tdYearly); tr.appendChild(tdTwoYearly);
payerTds.forEach(td => tr.appendChild(td));
tr.appendChild(tdDel);
tbody.appendChild(tr);
});
if(appData.fixedCosts.length > 0) {
const totalRow = document.createElement('tr');
totalRow.style.fontWeight = 'bold'; totalRow.style.borderTop = '2px solid #333';
const tdTotalLabel = document.createElement('td');
tdTotalLabel.textContent = 'ÖSSZESEN (aktív)'; tdTotalLabel.colSpan = 4;
const tdTotalMonthly = document.createElement('td'); tdTotalMonthly.textContent = ft(totalMonthly);
const tdTotalYearly = document.createElement('td'); tdTotalYearly.textContent = ft(totalYearly);
const tdTotalTwoYearly = document.createElement('td'); tdTotalTwoYearly.textContent = ft(totalTwoYearly);
totalRow.appendChild(tdTotalLabel); totalRow.appendChild(tdTotalMonthly);
totalRow.appendChild(tdTotalYearly); totalRow.appendChild(tdTotalTwoYearly);
for (let k = 0; k < payers.length + 1; k++) totalRow.appendChild(document.createElement('td'));
tbody.appendChild(totalRow);
}
renderPayerSummaryCards(payers, payerTotals);
const unassigned = payerTotals['Nincs megadva'];
const noteEl = document.getElementById('sum-unassigned-note');
if (unassigned && (unassigned.monthly > 0 || appData.fixedCosts.some(it => it.active !== false && !it.payer))) {
const unassignedCount = appData.fixedCosts.filter(it => it.active !== false && !it.payer).length;
noteEl.style.display = 'block';
noteEl.textContent = `⚠️ ${unassignedCount} tételnél még nincs bejelölve, ki fizeti (${ft(unassigned.monthly)}/hó nincs beszámítva).`;
} else noteEl.style.display = 'none';
}
function renderPayerSummaryCards(payers, payerTotals) {
const container = document.getElementById('payer-summary-cards');
container.innerHTML = '';
payers.forEach(p => {
const totals = payerTotals[p] || { monthly: 0, yearly: 0, twoYearly: 0 };
const card = document.createElement('div');
card.className = 'card info-card';
card.style.cssText = 'flex: 1; min-width: 200px;';
const h3 = document.createElement('h3'); h3.textContent = `${p} fizet`;
const body = document.createElement('div');
body.style.cssText = 'font-size: 13px; color: #555; margin-top: 8px; line-height: 1.8;';
body.innerHTML = `Havonta: <strong>${ft(totals.monthly)}</strong><br>Évente: <strong>${ft(totals.yearly)}</strong><br>Kétévente: <strong>${ft(totals.twoYearly)}</strong>`;
card.appendChild(h3); card.appendChild(body);
container.appendChild(card);
});
}
function addFixedCost() {
saveToHistory();
if(!appData.fixedCosts) appData.fixedCosts = [];
appData.fixedCosts.push({ name: 'Új tétel', periodicity: 'monthly', amount: 0, payer: '', active: true });
saveToLocalStorage(); renderFixedCostsTable();
}
function updateFixedCost(index, field, value) {
saveToHistory();
if(field === 'amount') value = parseFloat(value) || 0;
if(!appData.fixedCosts[index]) return;
appData.fixedCosts[index][field] = value;
saveToLocalStorage(); renderFixedCostsTable();
}
function deleteFixedCost(index) {
if(confirm('Biztosan törlöd ezt a tételt?')) {
saveToHistory();
appData.fixedCosts.splice(index, 1);
saveToLocalStorage(); renderFixedCostsTable();
}
}
function renderSettingsTable() {
const tbody = document.getElementById('settings-table-body');
tbody.innerHTML = '';
const s = appData.settings || DEFAULT_SETTINGS;
const labels = {
V_NORMAL_AR: "Villany - Rezsicsökkentett ár (Ft/kWh)",
V_PIACI_AR: "Villany - Piaci ár (Ft/kWh)",
V_KERET: "Villany - Éves keret (kWh)",
G_NORMAL_AR: "Gáz - Rezsicsökkentett ár (Ft/m³) — ha Ft/MJ-t látsz, szorozd meg 35,42-vel",
G_PIACI_AR: "Gáz - Piaci ár (Ft/m³)",
G_KERET: "Gáz - Éves keret (m³)",
G_FUTOERTEK: "Gáz - Fűtőérték (MJ/m³)",
W_VIZ_DIJ: "Víz - Fogyasztási díj (Ft/m³)",
W_CSATORNA_DIJ: "Víz - Szennyvíz díj (Ft/m³)",
W_ALAPDIJ: "Víz - Alapdíj (Ft/hó)",
V_ALAPDIJ: "Villany - Elosztói alapdíj (Ft/hó)",
G_ALAPDIJ: "Gáz - Háztartási alapdíj (Ft/hó)"
};
Object.keys(DEFAULT_SETTINGS).forEach(key => {
const tr = document.createElement('tr');
const tdLabel = document.createElement('td'); tdLabel.textContent = labels[key] || key;
const tdInput = document.createElement('td');
const input = document.createElement('input');
input.type = 'number'; input.step = 'any'; input.min = '0';
input.id = `setting-input-${key}`;
input.value = s[key] !== undefined ? s[key] : DEFAULT_SETTINGS[key];
input.style.padding = '5px'; input.style.width = '100%';
tdInput.appendChild(input);
tr.appendChild(tdLabel); tr.appendChild(tdInput);
tbody.appendChild(tr);
});
}
function saveGlobalSettings() {
saveToHistory();
if(!appData.settings) appData.settings = {};
Object.keys(DEFAULT_SETTINGS).forEach(key => {
const inputEl = document.getElementById(`setting-input-${key}`);
if(inputEl) {
let val = parseFloat(inputEl.value);
appData.settings[key] = isNaN(val) ? DEFAULT_SETTINGS[key] : Math.max(0, val);
}
});
saveToLocalStorage(); alert("✔ Tarifák mentve");
renderSettingsTable();
document.getElementById('json-preview').value = JSON.stringify(appData, null, 2);
}
function wipeDatabase() {
if (confirm("BIZTOSAN TÖRÖLNI SZERETNÉL MINDENT? (7 napig visszaállítható.)")) {
saveToHistory();
appData = JSON.parse(JSON.stringify(DEFAULT_BLANK_DATA));
currentProperty = Object.keys(appData.properties)[0];
currentUtility = 'villany';
saveToLocalStorage(); buildSidebarMenu();
if(document.getElementById('page-system').classList.contains('active')) { renderManagementTable(); renderSettingsTable(); }
else refreshUI();
switchPage(currentProperty, currentUtility);
}
}
function getSubVolMode() {
return document.getElementById('subvol-mode-reading').checked ? 'reading' : 'delta';
}
function onSubVolModeChange() {
const mode = getSubVolMode();
const addBtn = document.getElementById('add-from-bill-btn');
const helpEl = document.getElementById('sub-volume-panel-help');
const input = document.getElementById('sub-volume-input');
addBtn.style.display = (mode === 'reading') ? 'none' : '';
const stats = computeStats(currentProperty, currentUtility);
if (mode === 'reading') {
helpEl.textContent = 'Írd be a számládon szereplő "záró mérőállást" (a szolgáltató becslése vagy leolvasása) - az app automatikusan kivonja belőle a bázisállást.';
if (stats && stats.baseEntry) input.value = stats.baseEntry.value + (stats.currentSubVol || 0);
} else {
helpEl.textContent = 'A "Frissítés" felülírja a teljes értéket. A "+ Számla hozzáadása" az elszámolt mennyiséget hozzáadja az eddigihez (gáz esetén MJ-ban is megadható).';
if (stats) input.value = stats.currentSubVol || 0;
}
}
function saveSubVolume() {
const mode = getSubVolMode();
let rawVal = parseFloat(document.getElementById('sub-volume-input').value);
rawVal = isNaN(rawVal) ? 0 : Math.max(0, rawVal);
const stats = computeStats(currentProperty, currentUtility);
let val; // ez a ténylegesen elmentendő "bázis óta" delta érték
if (mode === 'reading') {
// ÚJ (260907a): "Szolgáltatói becsült záró óraállás" mód - a bemenet egy abszolút
// mérőállás, amiből az app maga vonja ki a bázisállást, hogy megkapja a deltát.
if (!stats || !stats.baseEntry) {
alert('Előbb rögzíts egy bázisállást ehhez a közműhöz, utána tudod megadni a becsült záró óraállást.');
return;
}
if (rawVal < stats.baseEntry.value) {
alert(`Hiba: a megadott óraállás (${rawVal.toLocaleString()} ${getUnit()}) nem lehet kisebb, mint a bázisállás (${stats.baseEntry.value.toLocaleString()} ${getUnit()})!`);
return;
}
val = rawVal - stats.baseEntry.value;
} else {
// "Összesített mennyiség" mód - a bemenet már maga a "bázis óta" delta.
val = rawVal;
// Szokatlan-érték figyelmeztetés: ha a beírt szám eléri/meghaladja magát az
// óraállást, vagy sokszorosa a tényleges fogyasztásnak, az erősen arra utal, hogy
// valaki véletlenül egy abszolút óraállást írt be ide delta helyett.
if (stats && val > 0) {
const factConsumed = stats.factConsumed || 0;
const looksLikeAbsoluteReading = stats.latestCurrent && val >= stats.latestCurrent.value;
const looksImplausiblyLarge = factConsumed > 0 && val > factConsumed * 5;
if (looksLikeAbsoluteReading || looksImplausiblyLarge) {
const ok = confirm(
`Figyelem! A megadott érték (${val.toLocaleString()} ${getUnit()}) szokatlanul nagy a tényleges fogyasztásodhoz (${factConsumed.toLocaleString()} ${getUnit()}) képest.\n\n` +
`Ebbe a mezőbe azt kell beírni, hogy a BÁZIS óta összesen mennyit számlázott ki a szolgáltató - tehát egy hasonló nagyságrendű számot, mint a tényleges fogyasztás, NEM egy abszolút óraállást.\n\n` +
`Ha inkább egy abszolút záró óraállásod van, válaszd fent a "Szolgáltatói becsült záró óraállás" opciót.\n\n` +
`Biztosan ezt az értéket szeretnéd elmenteni?`
);
if (!ok) return;
}
}
}
saveToHistory();
if(!appData.subVolumes[currentProperty]) appData.subVolumes[currentProperty] = { villany: 0, gaz: 0, viz: 0 };
appData.subVolumes[currentProperty][currentUtility] = val;
refreshUI();
}
function addSubVolumeFromBill() {
const isGas = currentUtility === 'gaz';
let useMJ = false;
if (isGas) {
useMJ = confirm("Gázszámla: MJ-ban vagy m³-ben adod meg?\n\nOK = MJ\nMégse = m³");
}
const unitLabel = useMJ ? 'MJ' : getUnit();
const input = prompt(`Add meg a számlán szereplő elszámolt mennyiséget (${unitLabel}):`);
if (input === null || input.trim() === '') return;
let val = parseFloat(input.replace(',', '.'));
if (isNaN(val) || val < 0) { alert("Hibás érték!"); return; }
if (useMJ) {
const futo = parseFloat(appData.settings.G_FUTOERTEK) || 35.42;
val = val / futo;
}
const newTotal = (appData.subVolumes[currentProperty] && appData.subVolumes[currentProperty][currentUtility] || 0) + val;
const stats = computeStats(currentProperty, currentUtility);
if (stats) {
const factConsumed = stats.factConsumed || 0;
const looksLikeAbsoluteReading = stats.latestCurrent && newTotal >= stats.latestCurrent.value;
const looksImplausiblyLarge = factConsumed > 0 && newTotal > factConsumed * 5;
if (looksLikeAbsoluteReading || looksImplausiblyLarge) {
const ok = confirm(
`Figyelem! A hozzáadás után az összesített "kiszámlázott mennyiség" (${newTotal.toLocaleString()} ${getUnit()}) szokatlanul nagy lenne a tényleges fogyasztásodhoz (${factConsumed.toLocaleString()} ${getUnit()}) képest.\n\n` +
`Ellenőrizd, hogy jó mértékegységet/számot adtál-e meg. Biztosan hozzáadod?`
);
if (!ok) return;
}
}
saveToHistory();
if (!appData.subVolumes[currentProperty]) appData.subVolumes[currentProperty] = {};
if (!appData.subVolumes[currentProperty][currentUtility]) appData.subVolumes[currentProperty][currentUtility] = 0;
appData.subVolumes[currentProperty][currentUtility] = parseFloat((appData.subVolumes[currentProperty][currentUtility] + val).toFixed(3));
refreshUI();
alert(`✔ Számla hozzáadva: ${num(val)} ${getUnit()}. Új összesen: ${num(appData.subVolumes[currentProperty][currentUtility])} ${getUnit()}.`);
}
function saveNextReading() {
saveToHistory();
if(!appData.nextReadings) appData.nextReadings = {};
if(!appData.nextReadings[currentProperty]) appData.nextReadings[currentProperty] = { villany: {from:'', to:''}, gaz: {from:'', to:''}, viz: {from:'', to:''} };
const from = document.getElementById('next-reading-from').value;
const to = document.getElementById('next-reading-to').value;
appData.nextReadings[currentProperty][currentUtility] = { from, to };
refreshUI();
}
function fillNextReadingFromClipboard() {
const text = prompt("Illeszd be a számlán szereplő szöveget (pl. 'Következő leolvasás várható időpontja: 2026.11.02 - 2026.11.19 között'):");
if (!text) return;
const dates = text.match(/\d{4}\.\d{2}\.\d{2}/g);
if (!dates || dates.length === 0) { alert("Nem találtam dátumot a beillesztett szövegben!"); return; }
document.getElementById('next-reading-from').value = dates[0].replace(/\./g, '-');
document.getElementById('next-reading-to').value = dates.length > 1 ? dates[dates.length-1].replace(/\./g, '-') : dates[0].replace(/\./g, '-');
alert("Dátumok kitöltve! Nyomd meg a Mentés gombot.");
}
function autofillNextReadingTo() {
const toInput = document.getElementById('next-reading-to');
if (!toInput.value) toInput.value = document.getElementById('next-reading-from').value;
}
function saveEntry(event) {
if(event) event.preventDefault();
const indexVal = document.getElementById('dyn-edit-index').value;
const date = document.getElementById('dyn-date').value;
const type = document.getElementById('dyn-type').value;
const value = parseFloat(document.getElementById('dyn-value').value);
const source = document.getElementById('dyn-source') ? document.getElementById('dyn-source').value : 'sajat';
if(isNaN(value)) return false;
let propObj = appData.properties[currentProperty];
if(!propObj.data[currentUtility]) propObj.data[currentUtility] = [];
let list = propObj.data[currentUtility];
const baseEntry = list.find(e => e.type === 'mult');
if (baseEntry) {
if (new Date(date) < new Date(baseEntry.date) && type === 'jelen') {
alert(`Hiba: A leolvasás dátuma (${date}) nem lehet korábbi, mint a bázis (${baseEntry.date})!`);
return false;
}
if (type === 'jelen' && value < baseEntry.value) {
alert(`Hiba: A jelenlegi óraállás (${value}) nem lehet kisebb, mint a bázis (${baseEntry.value})!`);
return false;
}
}
if (type === 'mult') {
const earlierCurrent = list.find(e => e.type === 'jelen' && new Date(e.date) < new Date(date));
if (earlierCurrent) {
alert(`Hiba: A bázis dátuma (${date}) nem lehet későbbi, mint egy leolvasás (${earlierCurrent.date})!`);
return false;
}
}
const sameDayIdx = list.findIndex(e => e.date === date && e.type === type);
if (sameDayIdx !== -1 && indexVal === "") {
alert(`Figyelem: Ezen a napon (${date}) már van egy "${type === 'mult' ? 'bázis' : 'leolvasás'}"!`);
return false;
}
if (type === 'jelen') {
const currentEntriesOnly = list.filter(e => e.type === 'jelen').sort((a,b) => new Date(a.date) - new Date(b.date));
if (currentEntriesOnly.length > 0) {
const latestJelen = currentEntriesOnly[currentEntriesOnly.length - 1];
if (indexVal === "" && value < latestJelen.value) {
alert(`Hiba: Az óraállás (${value}) nem lehet kisebb, mint az előző leolvasás (${num(latestJelen.value)} ${getUnit()})!`);
return false;
}
const jump = value - latestJelen.value;
const jumpThreshold = (currentUtility === 'villany' ? 5000 : (currentUtility === 'gaz' ? 3000 : 500));
if (jump > jumpThreshold) {
if (!confirm(`Figyelem! Ez ${num(jump)} ${getUnit()} ugrás. Biztosan jó?`)) return false;
}
}
}
saveToHistory();
const newEntry = { date, type, value, source };
if(indexVal === "") {
if(type === 'mult') {
const idx = list.findIndex(e => e.type === type);
if(idx !== -1) list[idx] = newEntry; else list.push(newEntry);
} else list.push(newEntry);
} else list[parseInt(indexVal)] = newEntry;
cancelEdit(); refreshUI(); return false;
}
function deleteEntry(index) {
let list = appData.properties[currentProperty].data[currentUtility] || [];
if (!list[index]) return;
if(confirm("Biztosan törlöd?")) {
saveToHistory();
appData.properties[currentProperty].data[currentUtility].splice(index, 1);
refreshUI();
}
}
function triggerAnniversary() {
let propObj = appData.properties[currentProperty];
const list = propObj.data[currentUtility] || [];
const currentEntries = list.filter(e => e.type === 'jelen');
if (currentEntries.length === 0) return;
currentEntries.sort((a,b) => new Date(a.date) - new Date(b.date));
const latestCurrent = currentEntries[currentEntries.length - 1];
if (!confirm(`Biztosan lezárod az évet a(z) "${currentProperty}" fülön?`)) return;
saveToHistory();
exportToLocalFile(`rezsi_archiv_${sanitizeId(currentProperty)}_${currentUtility}`);
propObj.data[currentUtility] = [{ date: new Date().toISOString().split('T')[0], type: 'mult', value: latestCurrent.value, source: 'sajat' }];
if(!appData.subVolumes[currentProperty]) appData.subVolumes[currentProperty] = { villany: 0, gaz: 0, viz: 0 };
appData.subVolumes[currentProperty][currentUtility] = 0;
refreshUI();
}
function refreshUI() {
saveToLocalStorage();
document.querySelectorAll('.sidebar button.menu-btn').forEach(b => b.classList.remove('active'));
const activeBtn = document.getElementById(`nav-${sanitizeId(currentProperty)}-${currentUtility}`);
if(activeBtn) activeBtn.classList.add('active');
document.getElementById('dyn-property-title').textContent = `📍 ${currentProperty}`;
const catObj = AVAILABLE_CATEGORIES.find(c => c.id === currentUtility);
document.getElementById('dyn-utility-badge').textContent = catObj ? catObj.name : currentUtility.toUpperCase();
document.getElementById('dyn-input-label').textContent = `Mérőóra állása (${getUnit()})`;
const stats = computeStats(currentProperty, currentUtility);
if (!stats) return;
// ÚJ (260905d): a szokatlan-érték ellenőrzés most már MINDEN megjelenítéskor lefut, nem csak
// mentéskor - így a korábban (akár egy régebbi verzióban) hibásan elmentett "Kiszámlázott
// mennyiség" is elkapásra kerül, nem csak az újonnan beírt.
const warningBox = document.getElementById('dyn-subvol-warning');
if (warningBox) {
const factConsumed = stats.factConsumed || 0;
const currentSubVol = stats.currentSubVol || 0;
const looksLikeAbsoluteReading = stats.latestCurrent && currentSubVol >= stats.latestCurrent.value;
const looksImplausiblyLarge = factConsumed > 0 && currentSubVol > factConsumed * 5;
if (currentSubVol > 0 && (stats.type === 'viz' || stats.type === 'standard') && (looksLikeAbsoluteReading || looksImplausiblyLarge)) {
warningBox.style.display = 'block';
warningBox.innerHTML = `⚠️ <strong>Gyanúsan nagy "Kiszámlázott mennyiség" érték</strong> (${num(currentSubVol)} ${getUnit()}) a tényleges fogyasztáshoz (${num(factConsumed)} ${getUnit()}) képest. Ez torzítja az egyenleg-számítást. Ellenőrizd és javítsd lentebb, a "Mennyit számlázott ki eddig a szolgáltató?" mezőnél.`;
} else {
warningBox.style.display = 'none';
}
}
document.getElementById('dyn-base').textContent = stats.baseEntry ? `${num(stats.baseEntry.value)} ${getUnit()}` : '-';
document.getElementById('dyn-current').textContent = stats.latestCurrent ? `${num(stats.latestCurrent.value)} ${getUnit()}` : '-';
const subHelpUnit = getUnit();
document.getElementById('sub-volume-panel-help').textContent =
`A "Frissítés" felülírja. A "+ Számla hozzáadása" az elszámolt mennyiséget hozzáadja (${subHelpUnit === 'kWh' ? 'kWh' : 'm³'}, gáz esetén MJ is megadható).`;
const nr = (appData.nextReadings && appData.nextReadings[currentProperty] && appData.nextReadings[currentProperty][currentUtility])
? appData.nextReadings[currentProperty][currentUtility] : {from:'', to:''};
document.getElementById('next-reading-from').value = nr.from || '';
document.getElementById('next-reading-to').value = nr.to || '';
const nextReadingCard = document.getElementById('dyn-next-reading');
if (nr.from && nr.to && nr.from !== nr.to) nextReadingCard.textContent = `${nr.from} – ${nr.to}`;
else if (nr.from) nextReadingCard.textContent = nr.from;
else nextReadingCard.textContent = '-';
// ÚJ (260907a): a bemenet-mód (delta vs. abszolút óraállás) okos alapértelmezése
// közmű szerint - gáznál a szolgáltatók jellemzően becsült záró óraállást adnak meg,
// villany/víznél inkább összesített, részszámlánkénti mennyiséget.
const smartDefaultMode = (currentUtility === 'gaz') ? 'reading' : 'delta';
document.getElementById('subvol-mode-delta').checked = (smartDefaultMode === 'delta');
document.getElementById('subvol-mode-reading').checked = (smartDefaultMode === 'reading');
document.getElementById('add-from-bill-btn').style.display = (smartDefaultMode === 'reading') ? 'none' : '';
if (smartDefaultMode === 'reading' && stats.baseEntry) {
document.getElementById('sub-volume-input').value = stats.baseEntry.value + (stats.currentSubVol || 0);
document.getElementById('sub-volume-panel-help').textContent = 'Írd be a számládon szereplő "záró mérőállást" (a szolgáltató becslése vagy leolvasása) - az app automatikusan kivonja belőle a bázisállást.';
} else {
document.getElementById('sub-volume-input').value = stats.currentSubVol;
document.getElementById('sub-volume-panel-help').textContent = 'A "Frissítés" felülírja a teljes értéket. A "+ Számla hozzáadása" az elszámolt mennyiséget hozzáadja az eddigihez (gáz esetén MJ-ban is megadható).';
}
document.getElementById('dyn-sub-total').textContent = stats.currentSubVol ? `${num(stats.currentSubVol)} ${getUnit()}` : '-';
const pufferCard = document.getElementById('dyn-puffer-card');
const costCard = document.getElementById('dyn-cost-card');
const costValueElement = document.getElementById('dyn-cost');
const balanceCard = document.getElementById('dyn-balance-card');
const alapdijNote = document.getElementById('dyn-alapdij-note');
if (stats.type === 'viz') {
document.getElementById('dyn-limit-calc').textContent = `${num(stats.W_COMBINED_AR)} Ft/m³ + ${num(stats.wAlapdij)} Ft/hó`;
if (stats.factConsumed !== null) {
costCard.className = "card cost-normal";
costCard.querySelector('h3 .card-title-text').textContent = "Eddigi fogyasztás értéke";
costValueElement.textContent = ft(stats.costValue);
const balanceValue = stats.balance;
balanceCard.className = balanceValue >= 0 ? "card puffer-ok" : "card cost-alert";
balanceCard.querySelector('h3 .card-title-text').textContent = balanceValue >= 0 ? "Számlázott: TÚLFIZETÉS" : "Számlázott: ELMARADÁS";
document.getElementById('dyn-balance').textContent = balanceValue >= 0 ? `+${num(balanceValue)} m³ (+${ft(stats.balanceFt)})` : `-${num(Math.abs(balanceValue))} m³ (-${ft(Math.abs(stats.balanceFt))})`;
} else {
costValueElement.textContent = '- Ft';
document.getElementById('dyn-balance').textContent = '-';
}
alapdijNote.style.display = 'none';
} else if (stats.type === 'special') {
document.getElementById('dyn-limit-calc').textContent = stats.limitText;
pufferCard.className = "card info-card";
document.getElementById('dyn-puffer').textContent = '—';
costCard.className = "card info-card";
costCard.querySelector('h3 .card-title-text').textContent = (currentUtility === 'villany_h') ? 'H-tarifás fogyasztás' : 'Napelem termelés';
costValueElement.textContent = (stats.factConsumed !== null) ? `${num(stats.factConsumed)} kWh` : '- kWh';
balanceCard.className = "card info-card";
balanceCard.querySelector('h3 .card-title-text').textContent = 'Egyenleg: N/A';
document.getElementById('dyn-balance').textContent = (currentUtility === 'villany_h') ? 'Villany kategóriát lásd' : 'Szaldót a számlán lásd';
alapdijNote.style.display = 'none';
} else {
const s = { ...DEFAULT_SETTINGS, ...(appData.settings || {}) };
document.getElementById('dyn-limit-calc').textContent = stats.dynamicLimit ? `${num(stats.dynamicLimit)} ${getUnit()}` : '-';
const progWrap = document.getElementById('dyn-puffer-progress');
const progFill = document.getElementById('dyn-puffer-progress-fill');
const progPct = document.getElementById('dyn-puffer-progress-percent');
if (stats.dynamicLimit && stats.latestCurrent && stats.baseEntry) {
const percentUsed = Math.min(100, Math.max(0, (stats.latestCurrent.value - stats.baseEntry.value) / stats.limitKeret * 100));
document.getElementById('dyn-puffer').textContent = stats.pufferValue >= 0 ? `${num(stats.pufferValue)} ${getUnit()}` : `Túllépés: ${num(Math.abs(stats.pufferValue))} ${getUnit()}`;
pufferCard.className = stats.pufferValue >= 0 ? "card puffer-ok" : "card puffer-warning";
progWrap.style.display = 'block';
progFill.style.width = percentUsed + '%';
if (percentUsed < 60) progFill.style.backgroundColor = 'var(--success)';
else if (percentUsed < 85) progFill.style.backgroundColor = 'var(--warning)';
else progFill.style.backgroundColor = 'var(--danger)';
progPct.textContent = `Keret ${Math.round(percentUsed)}%-ban használt`;
if (stats.pufferValue >= 0) {
costCard.className = "card cost-normal";
costCard.querySelector('h3 .card-title-text').textContent = stats.costLabel;
costValueElement.textContent = ft(stats.costValue);
} else {
costCard.className = "card cost-alert";
costCard.querySelector('h3 .card-title-text').textContent = stats.costLabel;
costValueElement.textContent = '+' + ft(stats.costValue);
}
if (currentUtility === 'villany') {
const balanceValue = stats.balance;
balanceCard.className = balanceValue >= 0 ? "card puffer-ok" : "card cost-alert";
balanceCard.querySelector('h3 .card-title-text').textContent = balanceValue >= 0 ? "Számlázott: TÚLFIZETÉS" : "Számlázott: ELMARADÁS";
if (balanceValue >= 0) {
document.getElementById('dyn-balance').textContent = `+${num(balanceValue)} kWh (+${ft(stats.balanceFt)})`;
} else {
document.getElementById('dyn-balance').textContent = `-${num(Math.abs(balanceValue))} kWh (-${ft(Math.abs(stats.balanceFt))})`;
}
} else {
const balanceValue = stats.balance;
const balanceFt = stats.balanceFt;
balanceCard.className = balanceValue >= 0 ? "card puffer-ok" : "card cost-alert";
balanceCard.querySelector('h3 .card-title-text').textContent = balanceValue >= 0 ? "Számlázott: TÚLFIZETÉS" : "Számlázott: ELMARADÁS";
document.getElementById('dyn-balance').textContent = balanceValue >= 0 ? `+${num(balanceValue)} m³ (+${ft(balanceFt)})` : `-${num(Math.abs(balanceValue))} m³ (-${ft(Math.abs(balanceFt))})`;
}
if (currentUtility === 'villany') {
alapdijNote.textContent = `+ Ezen felül havi elosztói alapdíj: ${num(s.V_ALAPDIJ || 0)} Ft (nincs a fenti összegbe számítva).`;
alapdijNote.style.display = 'block';
} else if (currentUtility === 'gaz') {
alapdijNote.textContent = `+ Ezen felül havi háztartási alapdíj: ${num(s.G_ALAPDIJ || 0)} Ft (nincs a fenti összegbe számítva).`;
alapdijNote.style.display = 'block';
} else {
alapdijNote.style.display = 'none';
}
} else {
document.getElementById('dyn-puffer').textContent = '-';
progWrap.style.display = 'none';
document.getElementById('dyn-balance').textContent = '-';
costValueElement.textContent = '- Ft';
alapdijNote.style.display = 'none';
}
}
if (stats.factConsumed !== null) {
document.getElementById('dyn-fact-consumed').textContent = `${num(stats.factConsumed)} ${getUnit()}`;
if (stats.type === 'standard' && stats.limitKeret) {
const pct = stats.factConsumed / stats.limitKeret * 100;
document.getElementById('dyn-fact-consumed-percent').textContent = `(keret ${Math.round(pct)}%-ban használt)`;
} else {
document.getElementById('dyn-fact-consumed-percent').textContent = '';
}
const billedSpan = document.getElementById('dyn-fact-consumed-billed');
if (stats.currentSubVol > 0) {
billedSpan.textContent = `Számlázva: ${num(stats.currentSubVol)} ${getUnit()}`;
billedSpan.style.display = 'block';
} else {
billedSpan.style.display = 'none';
}
} else {
document.getElementById('dyn-fact-consumed').textContent = '-';
document.getElementById('dyn-fact-consumed-percent').textContent = '';
document.getElementById('dyn-fact-consumed-billed').style.display = 'none';
}
const tbody = document.getElementById('dyn-table-body');
tbody.innerHTML = '';
stats.list.forEach((entry, index) => {
const tr = document.createElement('tr');
const tdDate = document.createElement('td'); tdDate.textContent = entry.date;
const tdType = document.createElement('td');
let typeText = entry.type === 'mult' ? 'Bázis' : 'Leolvasás';
if (entry.type !== 'mult' && entry.source && entry.source !== 'sajat') {
typeText += ` (${sourceLabels[entry.source] || entry.source})`;
}
tdType.textContent = typeText;
const tdVal = document.createElement('td');
const boldVal = document.createElement('strong'); boldVal.textContent = num(entry.value);
tdVal.appendChild(boldVal);
const tdDelta = document.createElement('td');
tdDelta.textContent = computeDelta(stats.list, entry, index, getUnit());
const tdActions = document.createElement('td'); tdActions.className = 'actions';
const btnEdit = document.createElement('button'); btnEdit.className = 'btn-edit'; btnEdit.textContent = 'Szerk.';
btnEdit.onclick = () => editEntry(index);
const btnDel = document.createElement('button'); btnDel.className = 'btn-delete'; btnDel.textContent = 'X';
btnDel.onclick = () => deleteEntry(index);
tdActions.appendChild(btnEdit); tdActions.appendChild(btnDel);
tr.appendChild(tdDate); tr.appendChild(tdType); tr.appendChild(tdVal); tr.appendChild(tdDelta); tr.appendChild(tdActions);
tbody.appendChild(tr);
});
updateChart();
}
function editEntry(index) {
let list = appData.properties[currentProperty].data[currentUtility] || [];
const entry = list[index];
if (!entry) { alert("A bejegyzés már nem elérhető."); return; }
document.getElementById('dyn-edit-index').value = index;
document.getElementById('dyn-date').value = entry.date;
document.getElementById('dyn-type').value = entry.type;
document.getElementById('dyn-value').value = entry.value;
const sourceSelect = document.getElementById('dyn-source');
if (sourceSelect) sourceSelect.value = entry.source || 'sajat';
document.getElementById('dyn-form-title').textContent = "Bejegyzés módosítása";
document.getElementById('dyn-submit-btn').textContent = "Módosítás";
document.getElementById('dyn-cancel-btn').style.display = "inline-block";
}
function cancelEdit() {
document.getElementById('dyn-edit-index').value = "";
document.getElementById('dyn-form-title').textContent = "Új leolvasás rögzítése";
document.getElementById('dyn-submit-btn').textContent = "Mentés";
document.getElementById('dyn-cancel-btn').style.display = "none";
document.getElementById('dyn-value').value = "";
document.getElementById('dyn-date').value = new Date().toISOString().split('T')[0];
const sourceSelect = document.getElementById('dyn-source');
if (sourceSelect) sourceSelect.value = 'sajat';
}
function updateChart() {
const canvas = document.getElementById('dyn-chart'); if(!canvas) return;
if (typeof Chart === 'undefined') { console.warn("Chart.js nem elérhető."); return; }
const ctx = canvas.getContext('2d');
let propObj = appData.properties[currentProperty];
const list = (propObj && propObj.data) ? (propObj.data[currentUtility] || []) : [];
if(currentChart && typeof currentChart.destroy === 'function') currentChart.destroy();
if (list.length === 0) return;
const isDark = document.body.classList.contains('dark');
const textColor = isDark ? '#dcdcdc' : '#222222';
const gridColor = isDark ? '#444444' : '#dddddd';
currentChart = new Chart(ctx, {
type: 'line',
data: {
labels: list.map(e => e.date),
datasets: [{
label: `${currentProperty} - ${currentUtility.toUpperCase()}`,
data: list.map(e => e.value),
borderColor: '#3498db', borderWidth: 2, fill: false, tension: 0.1
}]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: { legend: { labels: { color: textColor } } },
scales: {
x: { ticks: { color: textColor }, grid: { color: gridColor } },
y: { ticks: { color: textColor }, grid: { color: gridColor } }
}
}
});
}
async function exportToLocalFile(customName = '') {
const dateToday = new Date().toISOString().split('T')[0];
const filename = customName ? `${customName}_${dateToday}.json` : `rezsi_mentes_v${CURRENT_VERSION}_${dateToday}.json`;
const jsonStr = JSON.stringify(appData, null, 2);
try {
const blob = new Blob([jsonStr], { type: 'application/json' });
const file = new File([blob], filename, { type: 'application/json' });
if (navigator.canShare && navigator.canShare({ files: [file] })) {
await navigator.share({ files: [file], title: filename });
alert("✔ Export megosztva!");
return;
}
} catch (err) {
if (err && err.name === 'AbortError') return;
console.warn('Natív megosztás sikertelen, tartalék:', err);
}
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(jsonStr);
const node = document.createElement('a');
node.setAttribute("href", dataStr);
node.setAttribute("download", filename);
document.body.appendChild(node); node.click(); node.remove();
alert("✔ Export kész!");
}
function importFromLocalFile(event) {
const file = event.target.files[0]; if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
try {
const imported = JSON.parse(e.target.result);
if (!imported || !imported.properties) { alert("Hibás JSON!"); return; }
const mode = confirm("OK = ÖSSZEFÉSÜLÉS\nMÉGSE = Teljes felülírás") ? 'merge' : 'replace';
saveToHistory();
if (mode === 'replace') {
appData = migrateData(imported);
} else {
const localCopy = migrateData(JSON.parse(JSON.stringify(appData)));
const importedCopy = migrateData(JSON.parse(JSON.stringify(imported)));
const payerUnion = [...new Set([...(localCopy.payers || []), ...(importedCopy.payers || [])])];
appData = smartMerge(localCopy, importedCopy);
appData.payers = payerUnion;
appData.version = CURRENT_VERSION;
}
currentProperty = Object.keys(appData.properties)[0];
let firstPropObj = appData.properties[currentProperty];
currentUtility = (firstPropObj.categories && firstPropObj.categories[0]) || 'villany';
buildSidebarMenu(); refreshUI();
if (document.getElementById('page-system').classList.contains('active')) { renderManagementTable(); renderSettingsTable(); }
else if (document.getElementById('page-fixedcosts').classList.contains('active')) { renderFixedCostsTable(); }
alert(`✔ Sikeres import (${mode === 'merge' ? 'összefésülés' : 'felülírás'})! v${CURRENT_VERSION}`);
} catch (err) {
alert("Hiba: " + err.message);
console.error("Import hiba:", err);
}
};
reader.readAsText(file);
event.target.value = '';
}
// ============================================================
// ÚJ (260906a): Felhő Szinkron saját tárhelyre (sync.php), AES-256-GCM
// titkosítással (Web Crypto API - beépített, nincs külső könyvtár).
// ============================================================
function loadSyncConfig() {
try {
const cfg = JSON.parse(localStorage.getItem('rezsi_sync_config') || '{}');
document.getElementById('sync-url').value = cfg.url || '';
document.getElementById('sync-id').value = cfg.id || '';
document.getElementById('sync-secret').value = cfg.secret || '';
} catch(e) { /* nincs még mentett konfiguráció */ }
}
function saveSyncConfig() {
const cfg = {
url: document.getElementById('sync-url').value.trim(),
id: document.getElementById('sync-id').value.trim(),
secret: document.getElementById('sync-secret').value
};
localStorage.setItem('rezsi_sync_config', JSON.stringify(cfg));
}
// JAVÍTÁS (260906c): a natív Web Crypto API (crypto.subtle) csak HTTPS-en működik,
// és nem minden ingyenes tárhelyen elérhető az SSL. A CryptoJS egy tisztán
// JavaScript-ben megírt titkosító könyvtár, ami sima http://-n keresztül is működik.
function encryptText(plaintext, password) {
return CryptoJS.AES.encrypt(plaintext, password).toString();
}
function decryptText(ciphertext, password) {
const bytes = CryptoJS.AES.decrypt(ciphertext, password);
const plaintext = bytes.toString(CryptoJS.enc.Utf8);
if (!plaintext) throw new Error('Rossz jelszó vagy sérült adat.');
return plaintext;
}
async function cloudUpload() {
const url = document.getElementById('sync-url').value.trim();
const id = document.getElementById('sync-id').value.trim();
const secret = document.getElementById('sync-secret').value;
const password = document.getElementById('sync-password').value;
const statusEl = document.getElementById('sync-status');
saveSyncConfig();
if (!url || !id || !secret || !password) {
statusEl.textContent = '⚠️ Töltsd ki mind a négy mezőt (URL, azonosító, titkos kulcs, jelszó).';
return;
}
statusEl.textContent = '⏳ Titkosítás és feltöltés...';
try {
const plaintext = JSON.stringify(appData);
const encrypted = await encryptText(plaintext, password);
const resp = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({ id, secret, data: encrypted }).toString()
});
const respText = await resp.text();
let result;
try { result = JSON.parse(respText); } catch(e) {
statusEl.textContent = '❌ A szerver nem JSON-t adott vissza (valószínűleg tűzfal/hibaoldal). Nyers válasz eleje: ' + respText.substring(0, 150);
return;
}
if (!resp.ok || result.error) {
statusEl.textContent = '❌ Hiba: ' + (result.error || resp.statusText);
return;
}
statusEl.textContent = `✅ Sikeresen feltöltve! (${new Date().toLocaleString('hu-HU')})`;
} catch (err) {
statusEl.textContent = '❌ Hiba a feltöltés közben: ' + err.message + '\n(Ellenőrizd, hogy a sync.php fel van-e töltve, és az URL helyes-e.)';
}
}
async function cloudDownload() {
const url = document.getElementById('sync-url').value.trim();
const id = document.getElementById('sync-id').value.trim();
const secret = document.getElementById('sync-secret').value;
const password = document.getElementById('sync-password').value;
const statusEl = document.getElementById('sync-status');
saveSyncConfig();
if (!url || !id || !secret || !password) {
statusEl.textContent = '⚠️ Töltsd ki mind a négy mezőt (URL, azonosító, titkos kulcs, jelszó).';
return;
}
statusEl.textContent = '⏳ Letöltés és visszafejtés...';
try {
const sep = url.includes('?') ? '&' : '?';
const resp = await fetch(`${url}${sep}id=${encodeURIComponent(id)}&secret=${encodeURIComponent(secret)}`);
const respText = await resp.text();
let result;
try { result = JSON.parse(respText); } catch(e) {
statusEl.textContent = '❌ A szerver nem JSON-t adott vissza (valószínűleg tűzfal/hibaoldal). Nyers válasz eleje: ' + respText.substring(0, 150);
return;
}
if (!resp.ok || result.error) {
statusEl.textContent = '❌ Hiba: ' + (result.error || resp.statusText);
return;
}
let plaintext;
try {
plaintext = await decryptText(result.data, password);
} catch (e) {
statusEl.textContent = '❌ Nem sikerült visszafejteni - rossz jelszó?';
return;
}
const imported = JSON.parse(plaintext);
if (!imported || !imported.properties) { statusEl.textContent = '❌ A letöltött adat érvénytelen.'; return; }
const mode = confirm("OK = ÖSSZEFÉSÜLÉS a jelenlegi adatokkal\nMÉGSE = Teljes felülírás a letöltött adattal") ? 'merge' : 'replace';
saveToHistory();
if (mode === 'replace') {
appData = migrateData(imported);
} else {
const localCopy = migrateData(JSON.parse(JSON.stringify(appData)));
const importedCopy = migrateData(JSON.parse(JSON.stringify(imported)));
const payerUnion = [...new Set([...(localCopy.payers || []), ...(importedCopy.payers || [])])];
appData = smartMerge(localCopy, importedCopy);
appData.payers = payerUnion;
appData.version = CURRENT_VERSION;
}
currentProperty = Object.keys(appData.properties)[0];
let firstPropObj = appData.properties[currentProperty];
currentUtility = (firstPropObj.categories && firstPropObj.categories[0]) || 'villany';
buildSidebarMenu(); refreshUI();
statusEl.textContent = `✅ Sikeres letöltés és ${mode === 'merge' ? 'összefésülés' : 'felülírás'}! (${new Date(result.updated || Date.now()).toLocaleString('hu-HU')}-i mentés)`;
} catch (err) {
statusEl.textContent = '❌ Hiba a letöltés közben: ' + err.message;
}
}
// ÚJ (260908a): mobilon a hover-tooltip nem működik jól, ezért koppintható (i) gomb
// nyitja/csukja a kártya magyarázó szövegét, közvetlenül a kártyán belül.
function toggleCardInfo(btn) {
const h3 = btn.closest('h3');
const infoDiv = h3 ? h3.nextElementSibling : null;
if (infoDiv && infoDiv.classList.contains('card-info-text')) {
infoDiv.style.display = (infoDiv.style.display === 'none' || !infoDiv.style.display) ? 'block' : 'none';
}
}
function toggleTheme() {
const isDark = document.body.classList.toggle('dark');
localStorage.setItem('rezsi_theme', isDark ? 'dark' : 'light');
const btn = document.getElementById('theme-toggle-btn');
if (btn) btn.textContent = isDark ? '☀️ Világos mód' : '🌙 Sötét mód';
const metaTheme = document.querySelector('meta[name="theme-color"]');
if (metaTheme) metaTheme.setAttribute('content', isDark ? '#1a1a1a' : '#2c3e50');
if (currentChart && typeof currentChart.destroy === 'function') {
currentChart.destroy();
currentChart = null;
updateChart();
}
}
function openPrintModal() {
const container = document.getElementById('print-selection-properties');
container.innerHTML = '<h3 style="font-size:14px;color:#555;margin:5px 0;">🏠 Ingatlanok & kategóriák</h3>';
Object.keys(appData.properties).forEach(propName => {
const propObj = appData.properties[propName];
propObj.categories.forEach(util => {
const catObj = AVAILABLE_CATEGORIES.find(c => c.id === util);
const label = document.createElement('label');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.value = `${propName}::${util}`;
checkbox.checked = true;
checkbox.dataset.propUtil = 'true';
label.appendChild(checkbox);
label.appendChild(document.createTextNode(`📍 ${propName} — ${catObj ? catObj.name : util}`));
container.appendChild(label);
});
});
document.getElementById('print-modal').style.display = 'flex';
}
function closePrintModal() { document.getElementById('print-modal').style.display = 'none'; }
function selectAllPrint() { document.querySelectorAll('#print-modal input[type="checkbox"]').forEach(cb => cb.checked = true); }
function deselectAllPrint() { document.querySelectorAll('#print-modal input[type="checkbox"]').forEach(cb => cb.checked = false); }
function buildPrintSection(propName, util) {
const stats = computeStats(propName, util);
if (!stats) return '';
const catObj = AVAILABLE_CATEGORIES.find(c => c.id === util);
const catName = catObj ? catObj.name : util.toUpperCase();
const unit = stats.unit;
let html = `<h2 style="margin:20px 0 10px;">📍 ${escapeHtml(propName)} — ${catName}</h2>`;
html += '<table class="print-table"><tbody>';
if (stats.baseEntry) html += `<tr><td>Előző éves leolvasás (bázis)</td><td><strong>${num(stats.baseEntry.value)} ${unit}</strong></td></tr>`;
else html += `<tr><td>Előző éves leolvasás (bázis)</td><td>—</td></tr>`;
if (stats.latestCurrent) html += `<tr><td>Utolsó leolvasás</td><td><strong>${num(stats.latestCurrent.value)} ${unit}</strong>${stats.latestCurrent.source && stats.latestCurrent.source !== 'sajat' ? ' (' + (sourceLabels[stats.latestCurrent.source] || stats.latestCurrent.source) + ')' : ''}</td></tr>`;
else html += `<tr><td>Utolsó leolvasás</td><td>—</td></tr>`;
if (stats.type === 'standard') {
if (stats.baseEntry && stats.latestCurrent) {
const percentUsed = stats.factConsumed / stats.limitKeret * 100;
html += `<tr><td>Kedvezményes keret határa</td><td>${num(stats.dynamicLimit)} ${unit}</td></tr>`;
html += `<tr><td>Felhasznált keret (bázis óta)</td><td><strong>${num(stats.factConsumed)} ${unit}</strong> (${Math.round(percentUsed)}%)</td></tr>`;
html += `<tr><td>Számlázva a bázis óta</td><td>${num(stats.currentSubVol)} ${unit}</td></tr>`;
html += `<tr><td>Felhasználható kedvezményes keret</td><td><strong>${num(stats.pufferValue)} ${unit}</strong> (${Math.round(100 - percentUsed)}%)</td></tr>`;
html += `<tr><td>${stats.costLabel}</td><td>${stats.pufferValue >= 0 ? ft(stats.costValue) : '+' + ft(stats.costValue)}</td></tr>`;
html += `<tr><td>Számlázott / tényleges egyenleg</td><td>${num(Math.abs(stats.balance))} ${unit} (${ft(Math.abs(stats.balanceFt))})</td></tr>`;
if (util === 'villany') html += `<tr><td>Havi alapdíj (ezen felül, nincs a fenti összegekbe számítva)</td><td>${ft(appData.settings.V_ALAPDIJ || 0)}</td></tr>`;
if (util === 'gaz') html += `<tr><td>Havi alapdíj (ezen felül, nincs a fenti összegekbe számítva)</td><td>${ft(appData.settings.G_ALAPDIJ || 0)}</td></tr>`;
} else {
html += `<tr><td>Kedvezményes keret</td><td>—</td></tr>`;
}
} else if (stats.type === 'viz') {
if (stats.factConsumed !== null) {
html += `<tr><td>Felhasznált (bázis óta)</td><td><strong>${num(stats.factConsumed)} ${unit}</strong></td></tr>`;
html += `<tr><td>Számlázott egyenleg</td><td>${num(Math.abs(stats.balance))} ${unit} (${ft(Math.abs(stats.balanceFt))})</td></tr>`;
}
} else if (stats.type === 'special') {
html += `<tr><td>Típus</td><td>${escapeHtml(stats.limitText)}</td></tr>`;
}
const currentSubVol = stats.currentSubVol;
if (currentSubVol > 0 && stats.type !== 'standard') {
html += `<tr><td>Számlázott a bázis óta</td><td>${num(currentSubVol)} ${unit}</td></tr>`;
}
const nextReading = (appData.nextReadings && appData.nextReadings[propName] && appData.nextReadings[propName][util])
? appData.nextReadings[propName][util] : null;
if (nextReading && nextReading.from) {
html += `<tr><td>Következő leolvasás várható</td><td>${nextReading.from}${nextReading.to && nextReading.to !== nextReading.from ? ' – ' + nextReading.to : ''}</td></tr>`;
}
html += '</tbody></table>';
if (stats.list.length > 0) {
html += '<h3 style="margin:15px 0 5px;">Leolvasások:</h3>';
html += '<table class="print-table"><thead><tr><th>Dátum</th><th>Típus</th><th>Érték</th><th>Δ</th></tr></thead><tbody>';
stats.list.forEach((entry, idx) => {
let typeText = entry.type === 'mult' ? 'Bázis' : 'Leolvasás';
if (entry.type !== 'mult' && entry.source && entry.source !== 'sajat') typeText += ` (${sourceLabels[entry.source] || entry.source})`;
html += `<tr><td>${entry.date}</td><td>${typeText}</td><td><strong>${num(entry.value)} ${unit}</strong></td><td>${computeDelta(stats.list, entry, idx, unit)}</td></tr>`;
});
html += '</tbody></table>';
}
return html;
}
function buildPrintFixedCosts() {
if (!appData.fixedCosts || appData.fixedCosts.length === 0) return '<h2>💰 Fix Költségek</h2><p>Nincs tétel.</p>';
const periodicityLabels = { monthly: 'Havonta', bimonthly: 'Kéthavonta', quarterly: 'Negyedévente', yearly: 'Évente', '2yearly': 'Kétévente' };
let html = '<h2 style="margin:20px 0 10px;">💰 Fix Költségek</h2>';
html += '<table class="print-table"><thead><tr><th>Költségelem</th><th>Gyakoriság</th><th>Összeg</th><th>Havi</th><th>Éves</th><th>Kétéves</th><th>Ki fizeti</th></tr></thead><tbody>';
appData.fixedCosts.forEach(item => {
if (item.active === false) return;
const eq = calcFixedCostEquivalents(item);
const payerKey = (item.payer || '').trim() || 'Nincs megadva';
html += `<tr><td>${escapeHtml(item.name)}</td><td>${periodicityLabels[item.periodicity] || item.periodicity}</td><td>${ft(item.amount)}</td><td>${ft(eq.monthly)}</td><td>${ft(eq.yearly)}</td><td>${ft(eq.twoYearly)}</td><td>${escapeHtml(payerKey)}</td></tr>`;
});
html += '</tbody></table>';
return html;
}
function generatePrintView() {
const checks = document.querySelectorAll('#print-selection-properties input[type="checkbox"]:checked');
const printArea = document.getElementById('print-area');
printArea.innerHTML = '';
let html = '<div class="print-header">Rezsi Tracker — Nyomtatás</div>';
html += `<p style="margin-bottom:10px;">Dátum: ${new Date().toLocaleDateString('hu-HU')}</p>`;
let hasContent = false;
checks.forEach(check => {
if (check.dataset.propUtil) {
const [propName, util] = check.value.split('::');
html += buildPrintSection(propName, util);
hasContent = true;
}
});
const fixedCheck = document.getElementById('print-fixedcosts');
if (fixedCheck && fixedCheck.checked) {
html += buildPrintFixedCosts();
hasContent = true;
}
if (!hasContent) { alert("Kiválaszd legalább egy elemet nyomtatásra!"); return; }
printArea.innerHTML = html;
document.getElementById('print-modal').style.display = 'none';
window.print();
}
</script>
<div class="version-footer">Rezsi Tracker v260908b</div>
</body>
<br>Partneroldalak: <br>
<a href="https://domain.domainshop.hu/domain.html" alt="trhely domainregisztrci">Domain regisztrci tr s szerverszolgltatsok: domain domainnv trhely e-mail, imap, pop3</a><br>
<a href="https://webtar.hu" alt="trhely donainregisztrci">webtar.hu</a><br>
<a href="https://ingyenweb.hu" alt="ingyenweb">ingyenweb.hu</a><br>
<a href="https://videok.hu" alt="Videk">videok.hu</a><br>
<a href="https://xn--fotk-sqa.hu" alt="fotk">fotk.hu</a><br>
<a href="https://randi.hu" alt="Randi">randi.hu</a><br>
<a href="https://licit.hu" alt="Licit">licit.hu</a><br>
<a href="https://napivicc.hu" alt="vicc">napivicc.hu</a><br>
<a href="https://gyertyalang.hu" alt="gyertyagyjts">gyertyalang.hu</a><br>
<a href="https://xn--helyesrs-fza2j.hu" alt="helyesrs.hu">helyesrs.hu</a><br>
<a href="https://domain.webtar.hu/domain.html" alt="Domain regiszrci s trhely">Domain regisztrci</a><br>
]]>