236 lines
12 KiB
HTML
236 lines
12 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Herstellingen{% endblock %}
|
||
{% block page_title %}Herstellingen & Signpost{% endblock %}
|
||
{% block loader_text %}Signpost data ophalen... even geduld.{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="page-head">
|
||
<div class="tabs">
|
||
<button class="tab-link {{ 'active' if active_tab != 'signpost-tab' else '' }}" onclick="openTab(event, 'herstellingen-tab')">🛠️ Herstellingen</button>
|
||
<button class="tab-link {{ 'active' if active_tab == 'signpost-tab' else '' }}" onclick="openTab(event, 'signpost-tab')">🚩 Signpost</button>
|
||
</div>
|
||
<div class="actions">
|
||
{% if active_tab == 'signpost-tab' %}
|
||
<button type="button" class="add-btn" id="mainAddBtn" onclick="openSignpostModal()">🚩 Signpost-herstelling toevoegen</button>
|
||
{% else %}
|
||
<button type="button" class="add-btn" id="mainAddBtn" onclick="openAddModal()">➕ Herstelling toevoegen</button>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<section id="herstellingen-tab" class="tab-content card {{ 'active' if active_tab != 'signpost-tab' else '' }}" style="display: {{ 'none' if active_tab == 'signpost-tab' else 'block' }};">
|
||
<h2>🛠️ Overzicht herstellingen</h2>
|
||
<form class="search-bar" method="POST" action="{{ url_for('repairs.herstellingen') }}">
|
||
<input type="text" name="query" placeholder="Zoek op serienummer, incidentnr. of omschrijving..." value="{{ query or '' }}">
|
||
<button type="submit">🔍 Zoeken</button>
|
||
</form>
|
||
|
||
{% if results %}
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Incident nr</th>
|
||
<th>Serienummer</th>
|
||
<th>Soort herstelling</th>
|
||
<th>Status</th>
|
||
<th>Datum</th>
|
||
<th class="actions">Acties</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for row in results %}
|
||
<tr>
|
||
<td><strong>{{ row['Incident_nr'] or '' }}</strong></td>
|
||
<td>{{ row['KAMXM_nummer'] }}</td>
|
||
<td>{{ row['Soort_herstelling'] or '' }}</td>
|
||
<td>
|
||
{% if row['Status'] == 'In afwachting' %}<span class="badge badge-warning">⏳ In afwachting</span>
|
||
{% elif row['Status'] == 'In herstelling' %}<span class="badge badge-info">🔧 In herstelling</span>
|
||
{% elif row['Status'] == 'Voltooid' %}<span class="badge badge-success">✅ Voltooid</span>
|
||
{% else %}<span class="badge">{{ row['Status'] }}</span>
|
||
{% endif %}
|
||
</td>
|
||
<td class="nowrap">{{ row['Datum'] or '' }}</td>
|
||
<td class="actions">
|
||
<button type="button" class="btn-sm" onclick="openStatusModal('{{ row['KAMXM_nummer'] }}', '{{ row['Incident_nr'] or '' }}')">Status</button>
|
||
<button type="button" class="btn-bewerk btn-sm"
|
||
data-kamxm="{{ row['KAMXM_nummer'] }}"
|
||
data-incident="{{ row['Incident_nr'] or '' }}"
|
||
data-soort="{{ row['Soort_herstelling'] or '' }}"
|
||
data-datum="{{ row['Datum'] or '' }}"
|
||
onclick="openEditModal(this)">✏️ Bewerk</button>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{% elif query %}
|
||
<p class="muted">Geen herstellingen gevonden voor "{{ query }}".</p>
|
||
{% endif %}
|
||
</section>
|
||
|
||
<section id="signpost-tab" class="tab-content card {{ 'active' if active_tab == 'signpost-tab' else '' }}" style="display: {{ 'block' if active_tab == 'signpost-tab' else 'none' }};">
|
||
<h2>🚩 Signpost schademeldingen</h2>
|
||
<form id="signpostSearchForm" class="search-bar" method="POST" action="{{ url_for('repairs.signpost_search') }}">
|
||
<input type="text" name="serial_number" placeholder="Zoek op serienummer..." value="{{ searched_serial or '' }}">
|
||
<button type="submit">🔍 Zoek in Signpost</button>
|
||
</form>
|
||
|
||
{% if signpost_results %}
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Referentie</th>
|
||
<th>Status</th>
|
||
<th>Omschrijving</th>
|
||
<th>Datum</th>
|
||
<th class="text-right">Prijs</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for case in signpost_results %}
|
||
<tr>
|
||
<td><strong>{{ case.get('ourReference', 'N/A') }}</strong></td>
|
||
<td><span class="badge">{{ case.get('status', 'Onbekend') }}</span></td>
|
||
<td>{{ case.get('description', 'Geen omschrijving') }}</td>
|
||
<td class="nowrap">{{ case.get('createdAt', '')[:10] }}</td>
|
||
<td class="text-right nowrap">€ {{ case.get('totalPrice', '0.00') }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{% endif %}
|
||
</section>
|
||
{% endblock %}
|
||
|
||
{% block modals %}
|
||
<div id="addModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('addModal')">×</span>
|
||
<h3>Nieuwe herstelling toevoegen</h3>
|
||
<form method="POST" action="{{ url_for('repairs.add_herstelling') }}">
|
||
<div class="field"><label>Incident nr</label><input type="text" name="incident_nr" placeholder="Optioneel"></div>
|
||
<div class="field"><label>Serienummer</label><input type="text" name="kamxm_nummer" required placeholder="Bijv. 12345"></div>
|
||
<div class="field"><label>Soort herstelling</label><input type="text" name="soort_herstelling" required placeholder="Omschrijving..."></div>
|
||
<button type="submit" class="btn-block btn-success">➕ Toevoegen</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="editModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('editModal')">×</span>
|
||
<h3>Herstelling bewerken</h3>
|
||
<form method="POST" action="{{ url_for('repairs.bewerk_herstelling') }}">
|
||
<input type="hidden" name="kamxm_nummer_original" id="edit_kamxm_orig">
|
||
<div class="field"><label>Incident nr</label><input type="text" name="incident_nr" id="edit_incident"></div>
|
||
<div class="field"><label>Serienummer</label><input type="text" name="kamxm_nummer" id="edit_kamxm"></div>
|
||
<div class="field"><label>Soort herstelling</label><input type="text" name="soort_herstelling" id="edit_soort"></div>
|
||
<div class="field"><label>Datum</label><input type="date" name="datum" id="edit_datum"></div>
|
||
<button type="submit" class="btn-block">💾 Opslaan</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="statusModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('statusModal')">×</span>
|
||
<h3>Wijzig status: <span id="display_kamxm"></span></h3>
|
||
<form id="statusForm" method="POST" action="{{ url_for('repairs.wijzig_status_herstelling') }}">
|
||
<input type="hidden" name="kamxm_nummer" id="input_status_kamxm">
|
||
<input type="hidden" name="incident_nr" id="input_status_incident">
|
||
<input type="hidden" name="new_status" id="input_status_value">
|
||
<button type="button" class="status-button status-warning" id="btn-wacht" onclick="submitStatus('In afwachting')">⏳ In afwachting</button>
|
||
<button type="button" class="status-button status-info" id="btn-bezig" onclick="submitStatus('In herstelling')">🔧 In herstelling</button>
|
||
<button type="button" class="status-button status-success" id="btn-klaar" onclick="submitStatus('Voltooid')">✅ Voltooid</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="signpostModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('signpostModal')">×</span>
|
||
<h3>🚩 Signpost-schade melden</h3>
|
||
<form id="signpostSubmitForm" action="#" method="POST">
|
||
<div class="field"><label>Serienummer</label><input type="text" name="serial" id="sp_serial_input" required placeholder="Voer serienummer in"></div>
|
||
<div class="field"><label>Omschrijving</label><textarea name="omschrijving" placeholder="Wat is er defect?"></textarea></div>
|
||
|
||
<div class="switch-row"><span>💧 Waterschade</span><label class="switch"><input type="checkbox" name="water"><span class="slider"></span></label></div>
|
||
<div class="switch-row"><span>🔨 Valschade</span><label class="switch"><input type="checkbox" name="val"><span class="slider"></span></label></div>
|
||
<div class="switch-row"><span>💻 Cosmetische schade onderkant</span><label class="switch"><input type="checkbox" name="cosm_onder"><span class="slider"></span></label></div>
|
||
<div class="switch-row"><span>⌨️ Cosmetische schade toetsenbord</span><label class="switch"><input type="checkbox" name="cosm_kb"><span class="slider"></span></label></div>
|
||
<div class="switch-row"><span>📱 Cosmetische schade bovenkant</span><label class="switch"><input type="checkbox" name="cosm_boven"><span class="slider"></span></label></div>
|
||
|
||
<button type="submit" class="btn-block btn-success" style="margin-top:16px">Verstuur naar Signpost</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
function openTab(evt, tabName) {
|
||
document.querySelectorAll('.tab-content').forEach(t => { t.style.display = 'none'; t.classList.remove('active'); });
|
||
document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
|
||
document.getElementById(tabName).style.display = 'block';
|
||
document.getElementById(tabName).classList.add('active');
|
||
evt.currentTarget.classList.add('active');
|
||
|
||
const addBtn = document.getElementById('mainAddBtn');
|
||
if (tabName === 'signpost-tab') {
|
||
addBtn.innerHTML = "🚩 Signpost-herstelling toevoegen";
|
||
addBtn.onclick = openSignpostModal;
|
||
} else {
|
||
addBtn.innerHTML = "➕ Herstelling toevoegen";
|
||
addBtn.onclick = openAddModal;
|
||
}
|
||
}
|
||
|
||
// Laadscherm bij zoeken in en melden aan Signpost
|
||
['signpostSearchForm', 'signpostSubmitForm'].forEach(id => {
|
||
const f = document.getElementById(id);
|
||
if (f) f.addEventListener('submit', () => showLoader());
|
||
});
|
||
|
||
function openAddModal() { document.getElementById('addModal').style.display = 'block'; }
|
||
|
||
function openSignpostModal() {
|
||
document.getElementById('signpostModal').style.display = 'block';
|
||
const currentSearch = document.getElementsByName('serial_number')[0].value;
|
||
if (currentSearch) document.getElementById('sp_serial_input').value = currentSearch;
|
||
}
|
||
|
||
function openEditModal(btn) {
|
||
document.getElementById('edit_kamxm_orig').value = btn.getAttribute('data-kamxm');
|
||
document.getElementById('edit_incident').value = btn.getAttribute('data-incident');
|
||
document.getElementById('edit_kamxm').value = btn.getAttribute('data-kamxm');
|
||
document.getElementById('edit_soort').value = btn.getAttribute('data-soort');
|
||
document.getElementById('edit_datum').value = btn.getAttribute('data-datum');
|
||
document.getElementById('editModal').style.display = 'block';
|
||
}
|
||
|
||
function openStatusModal(kamxm, incident) {
|
||
document.getElementById('display_kamxm').textContent = kamxm;
|
||
document.getElementById('input_status_kamxm').value = kamxm;
|
||
document.getElementById('input_status_incident').value = incident;
|
||
document.getElementById('statusModal').style.display = 'block';
|
||
}
|
||
|
||
function submitStatus(waarde) {
|
||
document.getElementById('input_status_value').value = waarde;
|
||
document.getElementById('statusForm').submit();
|
||
}
|
||
|
||
function closeModal(id) { document.getElementById(id).style.display = 'none'; }
|
||
|
||
window.onclick = function (event) {
|
||
if (event.target.classList.contains('modal')) event.target.style.display = 'none';
|
||
};
|
||
</script>
|
||
{% endblock %}
|