<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Kártevőmester Kft. – Digitális Munkalap & Térkép v4.0 Pro</title>
<meta name="theme-color" content="#1e6b34">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
:root {
--primary: #1e6b34;
--primary-dark: #144d24;
--primary-light: #e8f5e9;
--accent: #2e7d32;
--bg: #f3f6f4;
--card-bg: #ffffff;
--text: #2c3e50;
--text-muted: #6c757d;
--border: #dce4df;
--danger: #d32f2f;
--warning: #f57c00;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
font-size: 14px;
}
/* --- V3.0 PRÉMIUM FEJLÉC --- */
.top-header {
background-color: var(--primary);
color: white;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.brand-box {
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo {
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
border: 2px solid #a5d6a7;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.brand-title h1 {
margin: 0;
font-size: 1.15rem;
letter-spacing: 0.5px;
font-weight: 800;
}
.brand-title p {
margin: 2px 0 0 0;
font-size: 0.75rem;
opacity: 0.9;
}
.header-controls {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.template-select {
background: white;
color: #222;
border: none;
padding: 8px 12px;
border-radius: 6px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.status-badge {
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.35);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-weight: 700;
font-size: 0.8rem;
}
/* --- NAVIGÁCIÓS FÜLEK --- */
.nav-tabs {
display: flex;
background: white;
border-bottom: 1px solid var(--border);
padding: 0 10px;
overflow-x: auto;
position: sticky;
top: 0;
z-index: 90;
}
.nav-tab {
flex: 1;
text-align: center;
padding: 13px 14px;
font-weight: 700;
font-size: 0.85rem;
color: #495057;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.2s;
white-space: nowrap;
}
.nav-tab.active {
color: var(--primary);
border-bottom: 3px solid var(--primary);
background: linear-gradient(to top, #eff7f1, white);
}
/* --- TARTALOM ÉS KÁRTYÁK --- */
.main-container {
max-width: 1100px;
margin: 15px auto;
padding: 0 12px 50px 12px;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.card {
background: var(--card-bg);
border-radius: 10px;
border: 1px solid var(--border);
padding: 18px 20px;
margin-bottom: 18px;
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e9ecef;
padding-bottom: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 10px;
}
.card-title {
font-size: 1rem;
font-weight: 700;
color: var(--primary-dark);
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
/* --- GRID RENDSZER --- */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 12px;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 12px;
}
@media (max-width: 780px) {
.grid-3, .grid-2 { grid-template-columns: 1fr; gap: 10px; }
}
.form-group { margin-bottom: 8px; }
.form-group label {
display: block;
font-size: 0.78rem;
font-weight: 700;
color: #495057;
margin-bottom: 4px;
}
input, select, textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ced4da;
border-radius: 6px;
font-size: 16px; /* iOS/Mobil ne nagyítson bele */
color: #212529;
background: #fff;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(30, 107, 52, 0.15);
}
input[readonly] {
background-color: #eff3f0;
color: #1e6b34;
font-weight: 700;
}
/* --- GOMBOK --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 14px;
border-radius: 6px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.15s;
}
.btn-dark { background: #37474f; color: white; }
.btn-primary { background: var(--primary); color: white; }
.btn-outline { background: white; color: var(--primary); border-color: var(--primary); }
.btn-danger { background: #fff5f5; color: var(--danger); border-color: #ffcdd2; }
.btn-warning { background: #fff8e1; color: #e65100; border-color: #ffe082; }
/* --- TÉRKÉP STÚDIÓ --- */
.map-wrapper {
border: 2px dashed #b0bec5;
border-radius: 8px;
background: #f8f9fa;
position: relative;
overflow: hidden;
margin-top: 10px;
}
#mapCanvas {
width: 100%;
height: 360px;
display: block;
touch-action: none;
}
.map-controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
/* --- LÁDA TÁBLÁZAT --- */
.station-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.station-table th, .station-table td {
padding: 9px 10px;
border-bottom: 1px solid #e9ecef;
text-align: left;
}
.station-table th {
background: #f1f5f2;
color: var(--primary-dark);
font-weight: 700;
}
.station-row.checked { background-color: #f4fbf6; }
.badge-ok { background: #d4edda; color: #155724; padding: 3px 8px; border-radius: 12px; font-weight: 700; font-size: 0.75rem; }
.badge-warn { background: #fff3cd; color: #856404; padding: 3px 8px; border-radius: 12px; font-weight: 700; font-size: 0.75rem; }
/* --- ALÁÍRÓ PAD & MUNKALAP ELŐNÉZET --- */
.sig-box {
border: 2px dashed #90a4ae;
border-radius: 8px;
background: #ffffff;
height: 180px;
position: relative;
}
#sigCanvas {
width: 100%;
height: 100%;
display: block;
touch-action: none;
}
.preview-paper {
border: 1px solid #ccc;
background: #fff;
padding: 20px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
.preview-header {
display: flex;
justify-content: space-between;
border-bottom: 2px solid var(--primary);
padding-bottom: 10px;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
}
@media print {
.top-header, .nav-tabs, .no-print { display: none !important; }
.main-container { margin: 0; padding: 0; max-width: 100%; }
.card { border: none; box-shadow: none; padding: 0; }
}
</style>
</head>
<body>
<header class="top-header">
<div class="brand-box">
<div class="brand-logo">🦟</div>
<div class="brand-title">
<h1>KÁRTEVŐMESTER KFT.</h1>
<p>Terepi Ellenőrző & Munkalap App v4.0 Pro</p>
</div>
</div>
<div class="header-controls">
<select id="sablonSelect" class="template-select" onchange="valtsSablont()">
<option value="ipari">📁 Sablon: Ipari / HACCP Partner (16 láda)</option>
<option value="ovoda">📁 Sablon: Önkormányzati Óvoda / Konyha (8 láda)</option>
<option value="magtar">📁 Sablon: Mezőgazdasági Telep / Magtár (24 láda)</option>
<option value="egyedi">📁 Sablon: Egyedi / Eseti Kezelés (0 láda)</option>
</select>
<div class="status-badge" id="ladaStatusBadge">16 / 16 ellenőrizve</div>
</div>
</header>
<nav class="nav-tabs">
<div class="nav-tab active" onclick="openTab(1)">1. Alapadatok & Térkép</div>
<div class="nav-tab" onclick="openTab(2)">2. Terepi Ellenőrző (Ládák)</div>
<div class="nav-tab" onclick="openTab(3)">3. Éves Összesítő & Trend</div>
<div class="nav-tab" onclick="openTab(4)">4. Munkalap, TIG & Küldés ✍️</div>
</nav>
<div class="main-container">
<!-- 1. FÜL -->
<div id="tab1" class="tab-pane active">
<div class="card">
<div class="card-header">
<h2 class="card-title">🏢 1. Megrendelő és Kezelés Alapadatai</h2>
<div style="display:flex; gap:8px; flex-wrap:wrap;">
<button class="btn btn-outline" onclick="betoltFopartner()">🔄 Főpartner választó</button>
<button class="btn btn-dark" onclick="mentesMemoriaba()">💾 Mentés a memóriába</button>
</div>
</div>
<div class="grid-3">
<div class="form-group">
<label>Munkalap Sorszáma (Zárt láncú ID):</label>
<input type="text" id="munkalapSzam" readonly>
</div>
<div class="form-group">
<label>Aktuális Irtási Időszak:</label>
<input type="text" id="aktualisIdoszak" readonly>
</div>
<div class="form-group">
<label>Következő Esedékes Ellenőrzés:</label>
<input type="text" id="kovetkezoIdoszak" readonly>
</div>
</div>
<div class="grid-3">
<div class="form-group">
<label>Megrendelő neve (Főpartner):</label>
<input type="text" id="megrendeloNev" value="Mintám Kft." oninput="frissitElonezet()">
</div>
<div class="form-group">
<label>Munkavégzés helye (Telephely):</label>
<input type="text" id="telephelyCim" value="6800 Hódmezővásárhely, Ipari park 12." oninput="frissitElonezet()">
</div>
<div class="form-group">
<label>Kapcsolattartó / Aláíró neve:</label>
<input type="text" id="kapcsolattarto" value="Kovács Anna minőségirányítási vezető" oninput="frissitElonezet()">
</div>
</div>
<div class="grid-3">
<div class="form-group">
<label>Megrendelő E-mail címe:</label>
<input type="email" id="ugyfelEmail" value="ugyfel@cegnev.hu">
</div>
<div class="form-group">
<label>Kezelés dátuma:</label>
<input type="date" id="kezelesDatum" onchange="szamolIdoszakok(); frissitElonezet()">
</div>
<div class="form-group">
<label>Aktuális hónap:</label>
<select id="aktualisHonap">
<option>Január</option><option>Február</option><option>Március</option>
<option>Április</option><option>Május</option><option>Június</option>
<option>Július</option><option>Augusztus</option><option>Szeptember</option>
<option selected>Október</option><option>November</option><option>December</option>
</select>
</div>
</div>
<div class="grid-3">
<div class="form-group">
<label>Kezelés jellege / Munka mennyisége:</label>
<select id="kezelesJellege" onchange="frissitElonezet()">
<option>Szerződéses karbantartás (HACCP / IPM kontroll)</option>
<option>Negyedéves kötelező rágcsáló- és rovarirtás</option>
<option>Eseti sürgősségi kártevőirtás / Gócpont felszámolás</option>
<option>Termény- és gabonagázosítás (Zárt téri)</option>
<option>Csípőszúnyog-gyérítés (Melegköd / ULV)</option>
</select>
</div>
<div class="form-group">
<label>Irtási gyakoriság:</label>
<select id="gyakorisag" onchange="szamolIdoszakok()">
<option value="1">Havi rendszerességű (+1 hónap)</option>
<option value="3">Negyedéves rendszerességű (+3 hónap)</option>
<option value="6">Féléves rendszerességű (+6 hónap)</option>
</select>
</div>
<div class="form-group">
<label>Végrehajtó szakember:</label>
<input type="text" id="szakember" value="Kalmár Norbert (eü. gázmester, kártevőirtó)" readonly>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">🧪 2. Alkalmazott Irtószerek, Dózisok és IPM Megjegyzések</h2>
</div>
<div class="grid-3">
<div class="form-group">
<label>Rágcsálóirtó szer / Csapda:</label>
<select id="ragcsaloSzer" onchange="frissitHatoanyag(); frissitElonezet()">
<option value="0,005% bromadiolon">Biotoll Ratimor Blokk (0,005% bromadiolon)</option>
<option value="0,005% brodifakum">Vétox / Brodifakum Pép (0,005% brodifakum)</option>
<option value="0,0025% difenakum">Difenakum Paraffinos Blokk (0,0025% difenakum)</option>
<option value="Irtószermentes monitoring">Irtószermentes ragacsos / mechanikus csapda</option>
<option value="Nem történt kihelyezés">Nem volt (----)</option>
</select>
</div>
<div class="form-group">
<label>Rágcsálóirtó hatóanyag:</label>
<input type="text" id="ragcsaloHatoanyag" value="0,005% bromadiolon">
</div>
<div class="form-group">
<label>Alap töltet / szerelvény (g):</label>
<input type="number" id="alapToltet" value="200" step="50">
</div>
</div>
<div class="grid-3">
<div class="form-group">
<label>Csótány- és rovarirtó szer / technológia:</label>
<select id="csotanySzer" onchange="frissitElonezet()">
<option>Maxforce White IC csótányirtó gél (2,15% imidakloprid)</option>
<option>K-Othrine SC 25 (2,5% deltametrin) – Permetezés</option>
<option>Solfac EW 50 (5% ciflutrin) – Permetezés</option>
<option>Monitoring rovarcsapda (attraktáns ragacsos lap)</option>
<option>Nem volt (----)</option>
</select>
</div>
<div class="form-group">
<label>Csótány fertőzöttség és kijuttatott mennyiség:</label>
<select id="csotanyMennyiseg">
<option>Kis mérvű | 5 mm (0,1 g) cseppek (1–2 csepp/m²)</option>
<option>Közepes / Nagy mérvű | 5 mm (0,1 g) cseppek (2–3 csepp/m²)</option>
<option>Permetezés: 50 ml munkaoldat / m² résekbe, szegélyekre</option>
<option>Fertőzöttség nem tapasztalható (Prevenció)</option>
</select>
</div>
<div class="form-group">
<label>Egyéb speciális kártevőirtás / Gázosítás / Eszköz:</label>
<select id="egyebKezeles" onchange="frissitElonezet()">
<option>Nem volt (----)</option>
<option>Darázsirtás porozással (Birchmeier DR 5 porozó)</option>
<option>Csípőszúnyog-gyérítés (Melegködképző / ULV technológia)</option>
<option>Terménygázosítás – Quickphos (56% alumínium-foszfid)</option>
<option>Hangya- / Poloska- / Bolhairtás célzott permetezéssel</option>
</select>
</div>
</div>
<div class="form-group">
<label>Csótányirtás dózis és hatástartam tájékoztató:</label>
<textarea id="dozisTajekoztato" rows="2">A gélt kb. 5 mm (0,1 g) átmérőjű cseppek formájában juttatjuk ki: kis mérvű német csótányfertőzöttség esetén 1 csepp/m² vagy folyóméter; nagy mérvű német csótányfertőzöttség esetén 2 csepp/m²; kis mérvű konyhai csótányfertőzöttség esetén 2 csepp/m²; nagy mérvű konyhai csótányfertőzöttség esetén 3 csepp/m². A hatástartam (megfelelő higiénia mellett) 12 hét. Rágcsálóirtás esetén ellenszer: K1-vitamin (Konakion).</textarea>
</div>
<div class="form-group">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;">
<label style="margin:0;">Szakmai Észrevételek, Higiéniai & Műszaki Javaslatok (IPM):</label>
<button type="button" class="btn btn-outline" style="padding:4px 10px; font-size:0.78rem;" onclick="inditsDiktalast()">🎤 Diktálás</button>
</div>
<textarea id="ipmMegjegyzes" rows="3" oninput="frissitElonezet()">A külső rágcsálóirtó szerelvények épek, a 4-es és 7-es ládában részleges fogyás tapasztalható, a szerelvényeket friss Biotoll Ratimor blokkal feltöltöttük. A raktár hátsó rámpájánál a résmentesítést javasoljuk.</textarea>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">🗺️ 3. Interaktív Szerelvény Térkép Stúdió</h2>
<input type="file" id="mapUploader" accept="image/*" style="width:auto; padding:5px;">
</div>
<div class="map-controls">
<button type="button" class="btn btn-primary" id="modeRagcsalo" onclick="setMapMode('ragcsalo')">🔴 Rágcsáló láda</button>
<button type="button" class="btn btn-outline" id="modeRovar" onclick="setMapMode('rovar')">🔵 Rovarcsapda</button>
<button type="button" class="btn btn-warning" onclick="rajzoljGocpontPoligont()">⚠️ Gócpont poligon</button>
<button type="button" class="btn btn-outline" onclick="visszavonUtolsoPin()">↩️ Utolsó törlése</button>
<button type="button" class="btn btn-danger" onclick="torolTeljesTerkep()">🗑️ Alaphelyzet</button>
<button type="button" class="btn btn-dark" onclick="letoltTerkepKep()">📥 Mentés képként</button>
</div>
<div class="map-wrapper">
<canvas id="mapCanvas"></canvas>
</div>
</div>
</div>
<!-- 2. FÜL -->
<div id="tab2" class="tab-pane">
<div class="card">
<div class="card-header">
<h2 class="card-title">📦 Terepi Szerelvény (Láda) Ellenőrző Napló</h2>
<div style="display:flex; gap:8px; flex-wrap:wrap;">
<button class="btn btn-outline" onclick="nfcSzimulacio()">📲 NFC / QR Beolvasás</button>
<button class="btn btn-primary" onclick="mindentEllenoriz()">✅ Összes láda: Rendben</button>
<button class="btn btn-dark" onclick="ujLadaHozzaadasa()">➕ Új láda</button>
</div>
</div>
<div style="overflow-x:auto;">
<table class="station-table">
<thead>
<tr>
<th>Láda #</th>
<th>Elhelyezés / Zóna</th>
<th>Típus</th>
<th>Fogyás (%)</th>
<th>Állapot</th>
<th>Pótlás (g)</th>
<th>OK</th>
</tr>
</thead>
<tbody id="ladaTableBody"></tbody>
</table>
</div>
</div>
</div>
<!-- 3. FÜL -->
<div id="tab3" class="tab-pane">
<div class="card">
<div class="card-header">
<h2 class="card-title">📊 Éves Fogyási Összesítő és Fertőzöttségi Trend (HACCP / NÉBIH Audit)</h2>
</div>
<div class="grid-3">
<div style="background:#e8f5e9; padding:16px; border-radius:8px; border-left:4px solid #1e6b34;">
<div style="font-size:0.8rem; font-weight:700; color:#1e6b34;">ÖSSZES KIHELYEZETT IRTÓSZER</div>
<div style="font-size:1.6rem; font-weight:800; margin-top:4px;">3 200 g</div>
<div style="font-size:0.75rem; color:#555;">Aktuális ellenőrzési ciklusban</div>
</div>
<div style="background:#fff3cd; padding:16px; border-radius:8px; border-left:4px solid #f57c00;">
<div style="font-size:0.8rem; font-weight:700; color:#856404;">AKTÍV FOGYÁSOS PONTOK</div>
<div style="font-size:1.6rem; font-weight:800; margin-top:4px;">2 db láda</div>
<div style="font-size:0.75rem; color:#555;">Gócpont megfigyelés alatt (Láda #4, #7)</div>
</div>
<div style="background:#e3f2fd; padding:16px; border-radius:8px; border-left:4px solid #1976d2;">
<div style="font-size:0.8rem; font-weight:700; color:#0d47a1;">AUDIT MEGFELELŐSÉG</div>
<div style="font-size:1.6rem; font-weight:800; margin-top:4px;">100% (HACCP)</div>
<div style="font-size:0.75rem; color:#555;">Zárt láncú dokumentáció rendben</div>
</div>
</div>
</div>
</div>
<!-- 4. FÜL -->
<div id="tab4" class="tab-pane">
<div class="card">
<div class="card-header no-print">
<h2 class="card-title">✍️ 4. Hivatalos Munkalap + Pénzügyi TIG Hitelesítés</h2>
<div style="display:flex; gap:8px; flex-wrap:wrap;">
<button class="btn btn-outline" onclick="window.print()">🖨️ Nyomtatás / PDF</button>
<button class="btn btn-primary" onclick="kuldesEsZaras()">🚀 Zárás & E-mail Küldés</button>
</div>
</div>
<div class="preview-paper">
<div class="preview-header">
<div>
<h2 style="margin:0; color:#1e6b34;">KÁRTEVŐMESTER KFT.</h2>
<p style="margin:2px 0; font-size:0.8rem;">6800 Hódmezővásárhely | Kalmár Norbert – egészségügyi gázmester, kártevőirtó</p>
</div>
<div style="text-align:right;">
<div style="font-weight:800; font-size:1rem; color:#1e6b34;" id="prevSorszam">KM-2026-10-104</div>
<div style="font-size:0.8rem; color:#555;">Munkalap & Teljesítésigazolás (TIG)</div>
</div>
</div>
<div class="grid-2" style="font-size:0.88rem; background:#f8faf9; padding:12px; border-radius:6px;">
<div>
<strong>Megrendelő (Főpartner):</strong> <span id="prevMegrendelo"></span><br>
<strong>Munkavégzés helye (Telephely):</strong> <span id="prevTelephely"></span><br>
<strong>Kapcsolattartó:</strong> <span id="prevKapcsolattarto"></span>
</div>
<div>
<strong>Kezelés dátuma:</strong> <span id="prevDatum"></span><br>
<strong>Irtási időszak:</strong> <span id="prevIdoszak"></span><br>
<strong>Következő esedékes ellenőrzés:</strong> <span id="prevKovetkezo"></span>
</div>
</div>
<p style="font-size:0.88rem; margin:12px 0;">
<strong>Elvégzett munka jellege:</strong> <span id="prevJelleg"></span><br>
<strong>Alkalmazott irtószerek és technológia:</strong> <span id="prevSzerek"></span>
</p>
<p style="font-size:0.85rem; background:#fffef0; padding:10px; border-left:3px solid #1e6b34;">
<strong>Szakmai (IPM) megjegyzés:</strong> <span id="prevIpm"></span>
</p>
<p style="font-size:0.78rem; color:#555;">
<strong>Teljesítésigazolási záradék (TIG):</strong> Alulírott a Megrendelő képviseletében igazolom, hogy a Kártevőmester Kft. a fenti munkalapon részletezett egészségügyi kártevőirtási feladatokat szerződésszerűen elvégezte. Jelen dokumentum számlázási alapbizonylatként szolgál.
</p>
</div>
<div class="grid-2 no-print">
<div>
<div style="display:flex; justify-content:space-between; margin-bottom:5px;">
<label style="font-weight:700;">Megrendelő Aláírása (S-Pen / Érintőkijelző):</label>
<a href="#" onclick="torolAlairas(); return false;" style="color:var(--danger); font-size:0.8rem; font-weight:700;">Törlés / Újraírás</a>
</div>
<div class="sig-box">
<canvas id="sigCanvas"></canvas>
</div>
</div>
<div style="display:flex; flex-direction:column; justify-content:space-between; background:#f8faf9; padding:16px; border-radius:8px; border:1px solid var(--border);">
<div>
<strong>Szolgáltatói Hitelesítés (Digitális Bélyegző):</strong>
<p style="font-size:0.85rem; color:#2e7d32; margin:8px 0;">
✔ KÁRTEVŐMESTER KFT. – Kalmár Norbert<br>
Egészségügyi gázmester, kártevőirtó, csípőszúnyogirtó technikus<br>
<em>Digitálisan hitelesítve a rendszer által.</em>
</p>
</div>
<button class="btn btn-primary" style="width:100%; padding:14px; font-size:1rem;" onclick="kuldesEsZaras()">
🧾 MUNKALAP ÉS TIG RÖGZÍTÉSE + E-MAIL KÜLDÉS
</button>
</div>
</div>
</div>
</div>
</div>
<script>
function openTab(index) {
document.querySelectorAll('.nav-tab').forEach((t, i) => t.classList.toggle('active', i === index - 1));
document.querySelectorAll('.tab-pane').forEach((p, i) => p.classList.toggle('active', i === index - 1));
if (index === 1) setTimeout(resizeMapCanvas, 50);
if (index === 4) {
frissitElonezet();
setTimeout(resizeSigCanvas, 50);
}
}
window.addEventListener('DOMContentLoaded', () => {
const ma = new Date();
document.getElementById('kezelesDatum').value = ma.toISOString().split('T')[0];
const ev = ma.getFullYear();
const ho = String(ma.getMonth() + 1).padStart(2, '0');
const sorszam = localStorage.getItem('km_last_seq') ? parseInt(localStorage.getItem('km_last_seq')) + 1 : 104;
document.getElementById('munkalapSzam').value = `KM-${ev}-${ho}-${String(sorszam).padStart(3, '0')}`;
szamolIdoszakok();
generalLadak(16);
setTimeout(() => { resizeMapCanvas(); resizeSigCanvas(); frissitElonezet(); }, 100);
});
function szamolIdoszakok() {
const datumVal = document.getElementById('kezelesDatum').value;
const d = datumVal ? new Date(datumVal) : new Date();
const ev = d.getFullYear();
const ho = d.getMonth() + 1;
const negyedev = Math.ceil(ho / 3);
const romai = ["I.", "II.", "III.", "IV."][negyedev - 1];
document.getElementById('aktualisIdoszak').value = `${ev}. ${romai} negyedév (${String(ho).padStart(2,'0')}. hó)`;
const pluszHo = parseInt(document.getElementById('gyakorisag').value || 1);
const kov = new Date(d.getFullYear(), d.getMonth() + pluszHo, d.getDate());
document.getElementById('kovetkezoIdoszak').value = `${kov.getFullYear()}. ${String(kov.getMonth() + 1).padStart(2, '0')}. hó (${kov.toISOString().split('T')[0]})`;
}
function frissitHatoanyag() {
document.getElementById('ragcsaloHatoanyag').value = document.getElementById('ragcsaloSzer').value;
}
function valtsSablont() {
const sablon = document.getElementById('sablonSelect').value;
if (sablon === 'ipari') {
document.getElementById('megrendeloNev').value = "Mintám Ipari Kft.";
document.getElementById('telephelyCim').value = "6800 Hódmezővásárhely, Ipari park 12.";
generalLadak(16);
} else if (sablon === 'ovoda') {
document.getElementById('megrendeloNev').value = "Hódmezővásárhely MJV Önkormányzata";
document.getElementById('telephelyCim').value = "6800 Hódmezővásárhely, 3. sz. Óvoda és Főzőkonyha";
generalLadak(8);
} else if (sablon === 'magtar') {
document.getElementById('megrendeloNev').value = "Dél-Alföldi Agrár Zrt.";
document.getElementById('telephelyCim').value = "6800 Hódmezővásárhely, Külterületi Sörárpa Magtár";
document.getElementById('egyebKezeles').selectedIndex = 3;
generalLadak(24);
} else {
generalLadak(0);
}
frissitElonezet();
}
function betoltFopartner() {
const valasz = prompt("Válassz Főpartnert:\n1 - Hódmezővásárhely Önkormányzat\n2 - Mintám Ipari Kft.\n3 - Dél-Alföldi Agrár Zrt.", "1");
if (valasz === "1") { document.getElementById('sablonSelect').value = "ovoda"; valtsSablont(); }
else if (valasz === "2") { document.getElementById('sablonSelect').value = "ipari"; valtsSablont(); }
else if (valasz === "3") { document.getElementById('sablonSelect').value = "magtar"; valtsSablont(); }
}
function mentesMemoriaba() {
localStorage.setItem('km_saved_partner', document.getElementById('megrendeloNev').value);
alert("💾 Partner alapadatok elmentve a készülék memóriájába!");
}
let ladaAdatok = [];
function generalLadak(db) {
ladaAdatok = [];
const zonak = ["Külső kerítés - Észak", "Raktár bejárat bal", "Raktár bejárat jobb", "Rámpa alatti sáv", "Hulladéktároló", "Kazánház külső fal", "Konyha gazdasági bejárat", "Szárazáru raktár"];
for (let i = 1; i <= db; i++) {
const fogyas = (i === 4 || i === 7) ? 50 : 0;
ladaAdatok.push({
id: i,
zona: zonak[(i - 1) % zonak.length] + ` (#${i})`,
tipus: "Zárható rágcsálóirtó láda",
fogyas: fogyas,
allapot: fogyas > 0 ? "Részleges fogyás" : "Érintetlen",
potlas: fogyas > 0 ? 100 : 0,
checked: true
});
}
renderLadaTabla();
}
function renderLadaTabla() {
const tbody = document.getElementById('ladaTableBody');
tbody.innerHTML = "";
let ellenorizveDb = 0;
ladaAdatok.forEach((l, idx) => {
if (l.checked) ellenorizveDb++;
const tr = document.createElement('tr');
tr.className = l.checked ? "station-row checked" : "station-row";
tr.innerHTML = `
<td><strong>#${l.id}</strong></td>
<td><input type="text" value="${l.zona}" style="padding:4px 8px; font-size:0.85rem;"></td>
<td>${l.tipus}</td>
<td>
<select onchange="frissitLadaFogyas(${idx}, this.value)" style="padding:4px; font-size:0.85rem;">
<option value="0" ${l.fogyas===0?'selected':''}>0%</option>
<option value="25" ${l.fogyas===25?'selected':''}>25%</option>
<option value="50" ${l.fogyas===50?'selected':''}>50%</option>
<option value="100" ${l.fogyas===100?'selected':''}>100%</option>
</select>
</td>
<td><span class="${l.fogyas > 0 ? 'badge-warn' : 'badge-ok'}">${l.allapot}</span></td>
<td><input type="number" value="${l.potlas}" style="width:70px; padding:4px; font-size:0.85rem;"> g</td>
<td><input type="checkbox" ${l.checked ? 'checked' : ''} onchange="ladaAdatok[${idx}].checked=this.checked; renderLadaTabla();" style="width:20px; height:20px;"></td>
`;
tbody.appendChild(tr);
});
document.getElementById('ladaStatusBadge').innerText = `${ellenorizveDb} / ${ladaAdatok.length} ellenőrizve`;
}
function frissitLadaFogyas(idx, val) {
const v = parseInt(val);
ladaAdatok[idx].fogyas = v;
ladaAdatok[idx].potlas = v > 0 ? (v * 2) : 0;
ladaAdatok[idx].allapot = v > 0 ? "Fogyás – Pótolva" : "Érintetlen";
renderLadaTabla();
}
function mindentEllenoriz() { ladaAdatok.forEach(l => l.checked = true); renderLadaTabla(); }
function ujLadaHozzaadasa() {
const ujId = ladaAdatok.length + 1;
ladaAdatok.push({ id: ujId, zona: `Új szerelvény (#${ujId})`, tipus: "Zárható rágcsálóirtó láda", fogyas: 0, allapot: "Új kihelyezés", potlas: 200, checked: true });
renderLadaTabla();
}
function nfcSzimulacio() { alert("📲 NFC / QR Olvasó aktív!"); }
// Térkép Stúdió
const mapCanvas = document.getElementById('mapCanvas');
const mCtx = mapCanvas.getContext('2d');
let mapImg = new Image();
let mapLoaded = false;
let mapPins = [];
let currentMapMode = 'ragcsalo';
let showPolygon = false;
function setMapMode(mode) {
currentMapMode = mode;
document.getElementById('modeRagcsalo').className = mode === 'ragcsalo' ? 'btn btn-primary' : 'btn btn-outline';
document.getElementById('modeRovar').className = mode === 'rovar' ? 'btn btn-primary' : 'btn btn-outline';
}
function resizeMapCanvas() {
mapCanvas.width = mapCanvas.parentElement.clientWidth || 600;
mapCanvas.height = 360;
drawMapStudio();
}
window.addEventListener('resize', resizeMapCanvas);
document.getElementById('mapUploader').addEventListener('change', function(e) {
if (!e.target.files[0]) return;
const reader = new FileReader();
reader.onload = function(ev) {
mapImg.onload = function() { mapLoaded = true; drawMapStudio(); };
mapImg.src = ev.target.result;
};
reader.readAsDataURL(e.target.files[0]);
});
function handleMapTap(e) {
e.preventDefault();
const rect = mapCanvas.getBoundingClientRect();
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
mapPins.push({ x: clientX - rect.left, y: clientY - rect.top, type: currentMapMode, num: mapPins.length + 1 });
drawMapStudio();
}
mapCanvas.addEventListener('mousedown', handleMapTap);
mapCanvas.addEventListener('touchstart', handleMapTap, { passive: false });
function drawMapStudio() {
mCtx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
if (mapLoaded) {
mCtx.drawImage(mapImg, 0, 0, mapCanvas.width, mapCanvas.height);
} else {
mCtx.fillStyle = "#f1f5f2";
mCtx.fillRect(0, 0, mapCanvas.width, mapCanvas.height);
mCtx.strokeStyle = "#d0ddd3";
for (let x = 0; x < mapCanvas.width; x += 40) { mCtx.beginPath(); mCtx.moveTo(x, 0); mCtx.lineTo(x, mapCanvas.height); mCtx.stroke(); }
for (let y = 0; y < mapCanvas.height; y += 40) { mCtx.beginPath(); mCtx.moveTo(0, y); mCtx.lineTo(mapCanvas.width, y); mCtx.stroke(); }
mCtx.fillStyle = "#6c757d";
mCtx.font = "bold 13px sans-serif";
mCtx.fillText("📐 Bökj ide a szerelvények lerakásához, vagy tölts fel alaprajzot!", 15, 30);
}
if (showPolygon && mapPins.length >= 3) {
mCtx.beginPath();
mCtx.moveTo(mapPins[0].x, mapPins[0].y);
for (let i = 1; i < mapPins.length; i++) mCtx.lineTo(mapPins[i].x, mapPins[i].y);
mCtx.closePath();
mCtx.fillStyle = "rgba(211, 47, 47, 0.22)";
mCtx.fill();
mCtx.strokeStyle = "#d32f2f";
mCtx.lineWidth = 2;
mCtx.stroke();
}
mapPins.forEach(p => {
mCtx.beginPath();
mCtx.arc(p.x, p.y, 13, 0, Math.PI * 2);
mCtx.fillStyle = p.type === 'ragcsalo' ? '#d32f2f' : '#1976d2';
mCtx.fill();
mCtx.lineWidth = 2;
mCtx.strokeStyle = '#ffffff';
mCtx.stroke();
mCtx.fillStyle = '#ffffff';
mCtx.font = 'bold 11px Arial';
mCtx.textAlign = 'center';
mCtx.textBaseline = 'middle';
mCtx.fillText(p.num, p.x, p.y);
});
}
function visszavonUtolsoPin() { mapPins.pop(); drawMapStudio(); }
function torolTeljesTerkep() { mapPins = []; showPolygon = false; drawMapStudio(); }
function rajzoljGocpontPoligont() {
if (mapPins.length < 3) { alert("Legalább 3 pont szükséges a poligonhoz!"); return; }
showPolygon = !showPolygon;
drawMapStudio();
}
function letoltTerkepKep() {
const link = document.createElement('a');
link.download = `Szerelveny_Terkep_${document.getElementById('munkalapSzam').value}.png`;
link.href = mapCanvas.toDataURL();
link.click();
}
function inditsDiktalast() {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) { alert("Használd a billentyűzeten lévő mikrofon ikont!"); return; }
const rec = new SpeechRecognition();
rec.lang = 'hu-HU';
rec.onresult = (e) => {
const mezo = document.getElementById('ipmMegjegyzes');
mezo.value += (mezo.value ? " " : "") + e.results[0][0].transcript + ".";
frissitElonezet();
};
rec.start();
}
// Aláíró pad
const sigCanvas = document.getElementById('sigCanvas');
const sCtx = sigCanvas.getContext('2d');
let isSigDrawing = false;
function resizeSigCanvas() {
sigCanvas.width = sigCanvas.parentElement.clientWidth || 350;
sigCanvas.height = 180;
sCtx.lineWidth = 2.8;
sCtx.lineCap = 'round';
sCtx.strokeStyle = '#0d47a1';
}
function getSigPos(e) {
const r = sigCanvas.getBoundingClientRect();
const cx = e.touches ? e.touches[0].clientX : e.clientX;
const cy = e.touches ? e.touches[0].clientY : e.clientY;
return { x: cx - r.left, y: cy - r.top };
}
sigCanvas.addEventListener('mousedown', (e) => { isSigDrawing = true; const p = getSigPos(e); sCtx.beginPath(); sCtx.moveTo(p.x, p.y); });
sigCanvas.addEventListener('mousemove', (e) => { if (!isSigDrawing) return; const p = getSigPos(e); sCtx.lineTo(p.x, p.y); sCtx.stroke(); });
window.addEventListener('mouseup', () => { isSigDrawing = false; });
sigCanvas.addEventListener('touchstart', (e) => { e.preventDefault(); isSigDrawing = true; const p = getSigPos(e); sCtx.beginPath(); sCtx.moveTo(p.x, p.y); }, { passive: false });
sigCanvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!isSigDrawing) return; const p = getSigPos(e); sCtx.lineTo(p.x, p.y); sCtx.stroke(); }, { passive: false });
sigCanvas.addEventListener('touchend', () => { isSigDrawing = false; });
function torolAlairas() { sCtx.clearRect(0, 0, sigCanvas.width, sigCanvas.height); }
function frissitElonezet() {
document.getElementById('prevSorszam').innerText = document.getElementById('munkalapSzam').value;
document.getElementById('prevMegrendelo').innerText = document.getElementById('megrendeloNev').value;
document.getElementById('prevTelephely').innerText = document.getElementById('telephelyCim').value;
document.getElementById('prevKapcsolattarto').innerText = document.getElementById('kapcsolattarto').value;
document.getElementById('prevDatum').innerText = document.getElementById('kezelesDatum').value;
document.getElementById('prevIdoszak').innerText = document.getElementById('aktualisIdoszak').value;
document.getElementById('prevKovetkezo').innerText = document.getElementById('kovetkezoIdoszak').value;
document.getElementById('prevJelleg').innerText = document.getElementById('kezelesJellege').value;
const rSzer = document.getElementById('ragcsaloSzer').options[document.getElementById('ragcsaloSzer').selectedIndex].text;
const cSzer = document.getElementById('csotanySzer').value;
const eSzer = document.getElementById('egyebKezeles').value;
document.getElementById('prevSzerek').innerText = `${rSzer} | ${cSzer}` + (eSzer !== 'Nem volt (----)' ? ` | ${eSzer}` : '');
document.getElementById('prevIpm').innerText = document.getElementById('ipmMegjegyzes').value;
}
function kuldesEsZaras() {
const id = document.getElementById('munkalapSzam').value;
const partner = document.getElementById('megrendeloNev').value;
const email = document.getElementById('ugyfelEmail').value;
const seq = parseInt(id.split('-')[3]) || 104;
localStorage.setItem('km_last_seq', seq);
alert(`✅ SIKERES RÖGZÍTÉS ÉS KIKÜLDÉS!\n\n• Munkalap sorszám: ${id}\n• Megrendelő: ${partner}\n• E-mail: ${email}\n\nA hitelesített HACCP Munkalap és a Pénzügyi Teljesítésigazolás (TIG) rögzítésre került!`);
}
</script>
</body>
</html>