393 lines
29 KiB
HTML
393 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
|
<meta name="theme-color" content="#003082">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="Duimstok">
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<link rel="apple-touch-icon" href="icons/icon.svg">
|
|
<title>Duimstok-inspecties Bovenbouw</title>
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<link rel="stylesheet" href="css/overview.css">
|
|
<link rel="stylesheet" href="css/form.css">
|
|
<link rel="stylesheet" href="css/modals.css">
|
|
<link rel="stylesheet" href="css/install.css">
|
|
<link rel="stylesheet" href="css/responsive.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="screen active" id="screen-overview">
|
|
|
|
<div class="overview-toolbar">
|
|
<h1>Duimstok-inspecties Bovenbouw</h1>
|
|
<button id="btnOpenInstall" title="Installeren als app">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12"/><polyline points="7 10 12 15 17 10"/><rect x="3" y="17" width="18" height="4" rx="1"/></svg>
|
|
Installeren
|
|
</button>
|
|
<label>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
CSV laden
|
|
<input type="file" id="csvFileInput" accept=".csv,.txt">
|
|
</label>
|
|
</div>
|
|
|
|
<div class="overview-body">
|
|
|
|
<div class="summary-row" id="summaryCards"></div>
|
|
|
|
<div class="progress-section">
|
|
<div class="progress-bar-bg"><div class="progress-bar-fill" id="progressFill"></div></div>
|
|
<div class="progress-text" id="progressText"></div>
|
|
</div>
|
|
|
|
<div class="order-table-wrap">
|
|
<div class="order-table-header">
|
|
<h2>Orders</h2>
|
|
<div class="filter-btns">
|
|
<button class="filter-btn active" data-filter="alle">Alle</button>
|
|
<button class="filter-btn" data-filter="Wissel">Wissels</button>
|
|
<button class="filter-btn" data-filter="Overwegbevloering">Overwegen</button>
|
|
<button class="filter-btn" data-filter="Spoor">Spoor</button>
|
|
<button class="filter-btn" data-filter="open">Nog open</button>
|
|
</div>
|
|
</div>
|
|
<div class="order-table-scroll">
|
|
<table class="order-table" id="orderTable">
|
|
<colgroup>
|
|
<col class="col-order"><col class="col-type"><col class="col-omschr">
|
|
<col class="col-hoevh"><col class="col-status">
|
|
</colgroup>
|
|
<thead>
|
|
<tr class="label-row">
|
|
<th><span class="th-content">Order</span><div class="col-resize" data-col="0"></div></th>
|
|
<th><span class="th-content">Type</span><div class="col-resize" data-col="1"></div></th>
|
|
<th><span class="th-content">Omschrijving</span><div class="col-resize" data-col="2"></div></th>
|
|
<th><span class="th-content">Hoeveelheid</span><div class="col-resize" data-col="3"></div></th>
|
|
<th><span class="th-content">Status</span></th>
|
|
</tr>
|
|
<tr class="filter-row">
|
|
<th><input class="col-filter" type="text" data-col="order" placeholder="Filter..."></th>
|
|
<th><input class="col-filter" type="text" data-col="type" placeholder="Filter..."></th>
|
|
<th><input class="col-filter" type="text" data-col="omschrijving" placeholder="Filter..."></th>
|
|
<th><input class="col-filter" type="text" data-col="hoeveelheid" placeholder="Filter..."></th>
|
|
<th><input class="col-filter" type="text" data-col="status" placeholder="Filter..."></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="orderTableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screen" id="screen-form">
|
|
|
|
<div class="form-toolbar">
|
|
<button class="btn-back" id="btnBack">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
|
Overzicht
|
|
</button>
|
|
<span class="title" id="formToolbarTitle">ProRail Duimstok-inspectie</span>
|
|
<label>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
XML laden
|
|
<input type="file" id="xmlFileInput" accept=".xml">
|
|
</label>
|
|
<button id="btnExport">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
|
|
Opslaan
|
|
</button>
|
|
<button id="btnPrint">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
|
Afdrukken
|
|
</button>
|
|
<button class="btn-opname-gereed" id="btnOpnameGereed">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Opname gereed
|
|
</button>
|
|
</div>
|
|
|
|
<div class="tab-bar">
|
|
<button class="tab-btn active" data-tab="inspectie">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
Inspectie
|
|
</button>
|
|
<button class="tab-btn" data-tab="overzicht">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
|
Overzicht
|
|
<span class="tab-badge" id="tabBadgeOvz">0</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="tab-panel active" id="panel-inspectie">
|
|
<div class="form-container" id="formContainer">
|
|
<div class="form-title" id="formTitle">Duimstokformulier</div>
|
|
<div class="header-grid">
|
|
<div class="cell label">Geocode</div><div class="cell value" id="hdr_geo"></div>
|
|
<div class="cell label">Geocode omschrijving</div><div class="cell value" id="hdr_geotxt"></div>
|
|
<div class="cell label">Equipmentnummer</div><div class="cell value" id="hdr_equnr"></div>
|
|
<div class="cell label">Objectsoort</div><div class="cell value" id="hdr_eqart"></div>
|
|
<div class="cell label">Startpunt</div><div class="cell value" id="hdr_startpoint"></div>
|
|
<div class="cell label">Eindpunt</div><div class="cell value" id="hdr_endpoint"></div>
|
|
<div class="cell label">Omschrijving</div><div class="cell value" id="hdr_omschrijving"></div>
|
|
<div class="cell label">Order-operatie</div><div class="cell value" id="hdr_orderoperatie"></div>
|
|
<div class="cell label">Afschrijvingsgroep</div><div class="cell value" id="hdr_afschr"></div>
|
|
<div class="cell label">Plaatsingsdatum</div><div class="cell value" id="hdr_plaatsingsdatum"></div>
|
|
<div class="cell label">Hoofdspoor/Zijspoor</div><div class="cell value" id="hdr_spoor"></div>
|
|
</div>
|
|
<div class="header-grid wissel-only">
|
|
<div class="cell label">Wisselnummer</div><div class="cell value" id="hdr_wisselnr"></div>
|
|
<div class="cell label">Wisselsoort</div><div class="cell value" id="hdr_soort"></div>
|
|
<div class="cell label">Hoekverhouding</div><div class="cell value" id="hdr_hoekverhouding"></div>
|
|
<div class="cell label">Profiel</div><div class="cell value" id="hdr_profiel"></div>
|
|
<div class="cell label">Wisselligger soort</div><div class="cell value" id="hdr_dwarsligger"></div>
|
|
<div class="cell label">Achterkant afwijking</div><div class="cell value" id="hdr_afwijking"></div>
|
|
<div class="cell label">Hergebruikt object?</div><div class="cell value" id="hdr_hergebruikt"></div>
|
|
<div class="cell label">Aangesloten wisselverwarming</div><div class="cell value" id="hdr_wisselverw"></div>
|
|
<div class="cell label">Generatie</div><div class="cell value" id="hdr_generatie"></div>
|
|
<div class="cell label">Mee-/tegengebogen wissel</div><div class="cell value" id="hdr_meetegengebogen"></div>
|
|
<div class="cell label">Wissel classificatie</div><div class="cell value" id="hdr_classificatie"></div>
|
|
<div class="cell label">Voegloos</div><div class="cell value" id="hdr_voegloos"></div>
|
|
<div class="cell label">Aanschafdatum</div><div class="cell value" id="hdr_aanschafdatum"></div>
|
|
</div>
|
|
<div class="header-grid overweg-only">
|
|
<div class="cell label">Type bevloering</div><div class="cell value" id="hdr_overwegtype"></div>
|
|
<div class="cell label">Bovenliggende overweg</div><div class="cell value" id="hdr_overwegbasis"></div>
|
|
</div>
|
|
<div class="header-grid spoor-only">
|
|
<div class="cell label">Type spoor</div><div class="cell value" id="hdr_spoortype"></div>
|
|
<div class="cell label">BVS Code</div><div class="cell value" id="hdr_bvscode"></div>
|
|
</div>
|
|
<div class="task-section">
|
|
<div class="label">Taak omschrijving</div><div class="value" id="hdr_taakomschrijving"></div>
|
|
</div>
|
|
<div class="task-section">
|
|
<div class="label">Aanleiding probleem</div><div class="value" id="hdr_aanleiding"></div>
|
|
</div>
|
|
<div class="inspecteur-grid">
|
|
<div class="cell label">Inspecteur</div>
|
|
<div class="cell editable"><input type="text" id="inp_inspecteur" placeholder="Naam inspecteur"></div>
|
|
<div class="cell label">Techn. verv. jaar</div>
|
|
<div class="cell editable"><input type="text" id="inp_techjaar" placeholder=""></div>
|
|
</div>
|
|
<div class="inspecteur-grid">
|
|
<div class="cell label">Inspectiedatum</div>
|
|
<div class="cell editable"><input type="date" id="inp_inspectiedatum"></div>
|
|
<div class="cell label">(Nieuw) Inspectiejaar</div>
|
|
<div class="cell editable"><input type="text" id="inp_inspjaar" placeholder=""></div>
|
|
</div>
|
|
<div class="warning">Zowel de naam van de inspecteur als de inspectiedatum dienen ingevuld te worden!</div>
|
|
<div class="totaal-grid">
|
|
<div class="cell label">Totaalscore</div><div class="cell score-cell" id="totaalscore">-</div>
|
|
<div class="cell label">Fotonummers</div><div class="cell fotonummers-cell" id="totaal_fotonummers"></div>
|
|
</div>
|
|
<table class="assessment-table" id="assessmentTable">
|
|
<thead id="assessmentHead"><tr>
|
|
<th class="nr-col">Nr</th><th class="loc-col">Locatie in wissel</th>
|
|
<th class="score-col">DWL Score</th><th class="score-col">BAL Score</th>
|
|
<th class="foto-col">Foto's</th><th class="opm-col">Opmerkingen / bijzonderheden</th>
|
|
</tr></thead>
|
|
<tbody id="assessmentBody"></tbody>
|
|
</table>
|
|
<div class="opmerkingen-section">
|
|
<div class="section-label">Overige opmerkingen (Enter voor nieuwe regel)</div>
|
|
<textarea id="inp_opmerkingen" placeholder="Opmerkingen hier invoeren..."></textarea>
|
|
</div>
|
|
<div class="status-bar">
|
|
<span id="statusOrder">Geen order geladen</span>
|
|
<span id="statusFotos">Foto's: 0</span>
|
|
<span id="statusSaved"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-panel" id="panel-overzicht">
|
|
<div class="overview-container">
|
|
<div class="overview-title" id="overzichtTitle">Gewoon of Symmetrisch wissel</div>
|
|
<div class="instruction-box wissel-only">
|
|
<strong>Instructie:</strong> Eerste foto bevat het bordje met het wisselnummer.
|
|
Daarna dienen de foto's buitenom of rechtsom in volgorde te worden gemaakt.
|
|
Foto's met bijzonderheden dienen in het opmerkingen-veld begeleid te worden
|
|
in combinatie met het fotonummer.
|
|
</div>
|
|
<div class="instruction-box overweg-only">
|
|
<strong>Instructie:</strong> Maak overzichtsfoto's vanuit beide richtingen.
|
|
Maak per beoordelingslocatie minimaal een foto van de situatie.
|
|
Foto's met bijzonderheden dienen in het opmerkingen-veld begeleid te worden
|
|
in combinatie met het fotonummer.
|
|
</div>
|
|
<div class="instruction-box spoor-only">
|
|
<strong>Instructie:</strong> Maak overzichtsfoto's vanuit beide richtingen van het spoorvak.
|
|
Maak per beoordeeld segment minimaal een foto via de beoordelingstabel.
|
|
Foto's met bijzonderheden dienen in het opmerkingen-veld begeleid te worden
|
|
in combinatie met het fotonummer.
|
|
</div>
|
|
<div class="wissel-overview">
|
|
<div class="ovz-row">
|
|
<label class="capture-label" data-pos="ovz_tl">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_ovz_tl"></span></div>
|
|
<span class="cap-text">Overzichtsfoto</span><span class="cap-arrow lg">↘</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="ovz_tl">
|
|
</label>
|
|
<div class="flex-spacer"></div>
|
|
<label class="capture-label" data-pos="ovz_tr">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_ovz_tr"></span></div>
|
|
<span class="cap-text">Overzichtsfoto</span><span class="cap-arrow lg">↙</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="ovz_tr">
|
|
</label>
|
|
</div>
|
|
<div class="side-labels left"><label class="capture-label" data-pos="foto_s3_l"><div class="cap-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_s3_l"></span></div><span class="cap-text">Foto</span><span class="cap-arrow"></span><input type="file" accept="image/*" capture="environment" data-pos="foto_s3_l"></label></div>
|
|
<div class="section-strip puntstuk">
|
|
<svg class="track-overlay" viewBox="0 0 200 140" preserveAspectRatio="none"><line x1="90" y1="0" x2="90" y2="140" stroke="#555" stroke-width="2.5"/><line x1="110" y1="0" x2="110" y2="140" stroke="#555" stroke-width="2.5"/><line x1="110" y1="140" x2="155" y2="0" stroke="#555" stroke-width="2.5"/><line x1="115" y1="140" x2="165" y2="0" stroke="#555" stroke-width="2.5"/><line x1="70" y1="20" x2="140" y2="20" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="45" x2="148" y2="45" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="70" x2="152" y2="70" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="95" x2="155" y2="95" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="120" x2="158" y2="120" stroke="#8B7355" stroke-width="3" opacity="0.5"/></svg>
|
|
<div class="section-name">Puntstuk</div><div class="section-sub">gedeelte</div>
|
|
<div class="section-sub sm">Sectie 3</div>
|
|
</div>
|
|
<div class="side-labels right"><label class="capture-label" data-pos="foto_s3_r"><div class="cap-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_s3_r"></span></div><span class="cap-text">Foto</span><span class="cap-arrow"></span><input type="file" accept="image/*" capture="environment" data-pos="foto_s3_r"></label></div>
|
|
<div class="side-labels left"><label class="capture-label" data-pos="foto_s2_l"><div class="cap-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_s2_l"></span></div><span class="cap-text">Foto</span><span class="cap-arrow"></span><input type="file" accept="image/*" capture="environment" data-pos="foto_s2_l"></label></div>
|
|
<div class="section-strip midden">
|
|
<svg class="track-overlay" viewBox="0 0 200 140" preserveAspectRatio="none"><line x1="90" y1="0" x2="90" y2="140" stroke="#555" stroke-width="2.5"/><line x1="110" y1="0" x2="110" y2="140" stroke="#555" stroke-width="2.5"/><line x1="130" y1="0" x2="115" y2="140" stroke="#555" stroke-width="2.5"/><line x1="140" y1="0" x2="120" y2="140" stroke="#555" stroke-width="2.5"/><line x1="70" y1="25" x2="148" y2="25" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="55" x2="143" y2="55" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="85" x2="138" y2="85" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="115" x2="133" y2="115" stroke="#8B7355" stroke-width="3" opacity="0.5"/></svg>
|
|
<div class="section-name">Midden-</div><div class="section-name">gedeelte</div>
|
|
<div class="section-sub sm">Sectie 2</div>
|
|
</div>
|
|
<div class="side-labels right"><label class="capture-label" data-pos="foto_s2_r"><div class="cap-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_s2_r"></span></div><span class="cap-text">Foto</span><span class="cap-arrow"></span><input type="file" accept="image/*" capture="environment" data-pos="foto_s2_r"></label></div>
|
|
<div class="side-labels left"><label class="capture-label" data-pos="foto_s1_l"><div class="cap-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_s1_l"></span></div><span class="cap-text">Foto</span><span class="cap-arrow"></span><input type="file" accept="image/*" capture="environment" data-pos="foto_s1_l"></label></div>
|
|
<div class="section-strip tong">
|
|
<svg class="track-overlay" viewBox="0 0 200 140" preserveAspectRatio="none"><line x1="90" y1="0" x2="90" y2="140" stroke="#555" stroke-width="2.5"/><line x1="110" y1="0" x2="110" y2="140" stroke="#555" stroke-width="2.5"/><line x1="113" y1="0" x2="110" y2="90" stroke="#555" stroke-width="2"/><line x1="117" y1="0" x2="114" y2="80" stroke="#555" stroke-width="2"/><circle cx="112" cy="95" r="3" fill="#c00"/><line x1="70" y1="15" x2="130" y2="15" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="45" x2="130" y2="45" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="75" x2="130" y2="75" stroke="#8B7355" stroke-width="3" opacity="0.5"/><line x1="70" y1="105" x2="130" y2="105" stroke="#8B7355" stroke-width="3" opacity="0.5"/><rect x="85" y="125" width="4" height="12" fill="#ffc000"/><rect x="111" y="125" width="4" height="12" fill="#ffc000"/></svg>
|
|
<div class="section-name">Tong-</div><div class="section-name">beweging</div>
|
|
<div class="section-sub sm">Sectie 1</div>
|
|
</div>
|
|
<div class="side-labels right"><label class="capture-label" data-pos="foto_s1_r"><div class="cap-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_s1_r"></span></div><span class="cap-text">Foto</span><span class="cap-arrow"></span><input type="file" accept="image/*" capture="environment" data-pos="foto_s1_r"></label></div>
|
|
<div class="ovz-row">
|
|
<label class="capture-label" data-pos="ovz_bl">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_ovz_bl"></span></div>
|
|
<span class="cap-text">Overzichtsfoto</span><span class="cap-arrow lg">↗</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="ovz_bl">
|
|
</label>
|
|
<div class="flex-spacer"></div>
|
|
<label class="capture-label" data-pos="ovz_br">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_ovz_br"></span></div>
|
|
<span class="cap-text">Overzichtsfoto</span><span class="cap-arrow lg">↖</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="ovz_br">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="overweg-overview">
|
|
<div class="ov-photo-grid">
|
|
<label class="capture-label" data-pos="ovz_ow_1">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_ovz_ow_1"></span></div>
|
|
<span class="cap-text">Overzichtsfoto 1</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="ovz_ow_1">
|
|
</label>
|
|
<label class="capture-label" data-pos="ovz_ow_2">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_ovz_ow_2"></span></div>
|
|
<span class="cap-text">Overzichtsfoto 2</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="ovz_ow_2">
|
|
</label>
|
|
<label class="capture-label" data-pos="foto_ligging_spoor">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_ligging_spoor"></span></div>
|
|
<span class="cap-text">Ligging spoor</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="foto_ligging_spoor">
|
|
</label>
|
|
<label class="capture-label" data-pos="foto_ligging_bevl">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_ligging_bevl"></span></div>
|
|
<span class="cap-text">Ligging bevloering</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="foto_ligging_bevl">
|
|
</label>
|
|
<label class="capture-label" data-pos="foto_constr_kwal">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_constr_kwal"></span></div>
|
|
<span class="cap-text">Constructieve kwaliteit</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="foto_constr_kwal">
|
|
</label>
|
|
<label class="capture-label" data-pos="foto_wegverharding">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_foto_wegverharding"></span></div>
|
|
<span class="cap-text">Wegverharding</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="foto_wegverharding">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="spoor-overview">
|
|
<div class="ov-photo-grid">
|
|
<label class="capture-label" data-pos="ovz_sp_1">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_ovz_sp_1"></span></div>
|
|
<span class="cap-text">Overzichtsfoto begin</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="ovz_sp_1">
|
|
</label>
|
|
<label class="capture-label" data-pos="ovz_sp_2">
|
|
<div class="cap-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><span class="cap-badge" id="cbadge_ovz_sp_2"></span></div>
|
|
<span class="cap-text">Overzichtsfoto einde</span>
|
|
<input type="file" accept="image/*" capture="environment" data-pos="ovz_sp_2">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="overview-thumbs" id="overviewThumbs">
|
|
<h4>Vastgelegde foto's</h4>
|
|
<div class="thumb-grid" id="overviewThumbGrid">
|
|
<div class="no-photos">Nog geen foto's gemaakt. Tik op een Foto- of Overzichtsfoto-knop hierboven.</div>
|
|
</div>
|
|
</div>
|
|
<div class="svg-link-row">
|
|
<button class="svg-link-btn" id="btnOpenSvg">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
|
Technische tekening openen (SVG)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screen" id="screen-install">
|
|
<div class="install-toolbar">
|
|
<button class="btn-back" id="btnInstallBack">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
|
Terug
|
|
</button>
|
|
<h1>App installeren</h1>
|
|
</div>
|
|
<div class="install-body" id="installBody"></div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="photoModal">
|
|
<div class="modal">
|
|
<button class="modal-close" id="photoModalClose">×</button>
|
|
<h3 id="photoModalTitle">Foto's</h3>
|
|
<div class="modal-actions">
|
|
<label><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>Foto maken<input type="file" accept="image/*" capture="environment" id="cameraInput"></label>
|
|
<label><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>Uit galerij<input type="file" accept="image/*" multiple id="galleryInput"></label>
|
|
</div>
|
|
<div class="photo-grid" id="photoGrid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lightbox" id="lightbox">
|
|
<img id="lightboxImg" src="" alt="Foto">
|
|
</div>
|
|
|
|
<script src="js/namespace.js"></script>
|
|
<script src="../src/Domain/sectionMap.js"></script>
|
|
<script src="../src/Domain/scoring.js"></script>
|
|
<script src="../src/Domain/inspectionTypes.js"></script>
|
|
<script src="../src/Domain/orderParser.js"></script>
|
|
<script src="../src/Infrastructure/utils.js"></script>
|
|
<script src="../src/Infrastructure/geolocation.js"></script>
|
|
<script src="../src/Infrastructure/db.js"></script>
|
|
<script src="../src/Infrastructure/persistentStorage.js"></script>
|
|
<script src="../src/Infrastructure/seedOrders.js"></script>
|
|
<script src="../src/Infrastructure/csvLoader.js"></script>
|
|
<script src="../src/Application/state.js"></script>
|
|
<script src="../src/Application/persistence.js"></script>
|
|
<script src="../src/Application/screens.js"></script>
|
|
<script src="../src/Application/photoService.js"></script>
|
|
<script src="../src/Application/inspectionForm.js"></script>
|
|
<script src="../src/Application/orderOverview.js"></script>
|
|
<script src="../src/Application/xmlImport.js"></script>
|
|
<script src="../src/Application/exportService.js"></script>
|
|
<script src="../src/Application/pwa.js"></script>
|
|
<script src="../src/Application/installScreen.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|