Files
Pivot/templates/qr_code.html

108 lines
4.8 KiB
HTML

{% extends "base.html" %}
{% block title %}QR-generator{% endblock %}
{% block page_title %}QR-codegenerator{% endblock %}
{% block main_class %}narrow{% endblock %}
{% block extra_css %}
<style>
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps > li { position: relative; padding-left: 44px; padding-bottom: 22px; }
.steps > li::before {
counter-increment: step; content: counter(step);
position: absolute; left: 0; top: 0;
width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
background: var(--primary-light); color: var(--primary-color); font-weight: 700;
}
.steps h3 { margin: 3px 0 10px; }
.options-box { padding: 6px 14px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); margin: 14px 0 18px; }
.options-box .check { padding: 8px 0; }
</style>
{% endblock %}
{% block content %}
<div class="card">
<div class="page-head">
<div>
<h2>💡 QR-codes maken</h2>
<p class="muted" style="margin:0">Maak eenvoudig QR-codes aan vanuit een Excel-bestand{{ ' of uit de database (hieronder)' if db_toegang }}.</p>
</div>
</div>
<ol class="steps">
<li>
<h3>Download het sjabloon</h3>
<a href="{{ url_for('qr_generator.download_template') }}" class="btn btn-light">📥 Sjabloon (.xlsx)</a>
</li>
<li>
<h3>Upload je ingevulde bestand</h3>
<form action="{{ url_for('qr_generator.upload_file') }}" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept=".xlsx, .xls" required>
<div class="options-box">
<label class="check"><input type="checkbox" id="show_top" name="show_top" checked> Toon tekst boven QR-code</label>
<label class="check"><input type="checkbox" id="show_bottom" name="show_bottom" checked> Toon tekst onder QR-code</label>
</div>
<button type="submit" class="btn-block btn-lg">🚀 Genereer QR-codes (ZIP)</button>
</form>
</li>
</ol>
</div>
{% if db_toegang %}
<div class="card">
<div class="page-head">
<div>
<h2>🗄️ QR-codes uit de database</h2>
<p class="muted" style="margin:0">Maak QR-codes van de toestellen in PIVOT: één PNG per toestel, samen in een ZIP.</p>
</div>
</div>
<form action="{{ url_for('qr_generator.database_qr') }}" method="post">
<div class="field">
<label for="qr_veld">In de QR-code</label>
<select id="qr_veld" name="qr_veld" required>
{% for v in qr_velden %}<option value="{{ v }}">{{ db_velden[v][0] }}</option>{% endfor %}
</select>
<div class="field-hint">Toestellen zonder deze waarde worden overgeslagen.</div>
</div>
<div class="options-box">
<div class="field">
<label for="boven">Tekst boven de QR-code</label>
<select id="boven" name="boven">
<option value="">Geen</option>
{% for k, v in db_velden.items() %}<option value="{{ k }}">{{ v[0] }}</option>{% endfor %}
</select>
</div>
<div class="field">
<label for="onder">Tekst onder de QR-code</label>
<select id="onder" name="onder">
<option value="">Geen</option>
{% for k, v in db_velden.items() %}<option value="{{ k }}" {{ 'selected' if k == 'toestelnummer' }}>{{ v[0] }}</option>{% endfor %}
</select>
</div>
</div>
<div class="field">
<label for="status">Status</label>
<select id="status" name="status">
<option value="">Alle toestellen</option>
{% for s in statussen %}<option value="{{ s }}">{{ s }}</option>{% endfor %}
</select>
</div>
<div class="field">
<label for="zoek">Zoeken (optioneel)</label>
<input type="text" id="zoek" name="zoek" placeholder="bv. CB-01 of Lenovo">
<div class="field-hint">Enkel toestellen waarvan het toestelnummer, serienummer, SPB-nummer of type deze tekst bevat.</div>
</div>
<div class="field">
<label for="nummers">Enkel deze nummers (optioneel)</label>
<textarea id="nummers" name="nummers" rows="4" placeholder="Eén per regel, of gescheiden door komma's"></textarea>
<div class="field-hint">Nummers van het gekozen soort (zie "In de QR-code"). Leeg = alle toestellen. Max. {{ max_db_codes }} per keer.</div>
</div>
<button type="submit" class="btn-block btn-lg">🚀 Genereer QR-codes (ZIP)</button>
</form>
</div>
{% endif %}
{% endblock %}