113 lines
No EOL
5 KiB
Text
113 lines
No EOL
5 KiB
Text
{% extends "./master.njk" %}
|
|
|
|
{% block content %}
|
|
{# Input Section #}
|
|
<div class="container">
|
|
|
|
<div class="row row-cols-2 g-4">
|
|
{# Header #}
|
|
<div class="col-12 d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-4 mb-3 border-bottom">
|
|
<h1 class="h2 m-0">
|
|
<i class="ti ti-stack-2 me-5"></i>Queue: {{ queueData.name }}
|
|
</h1>
|
|
<div class="btn-toolbar mb-2 mb-md-0 d-flex gap-2">
|
|
<a class="btn btn-outline-primary" @click="">
|
|
<i class="me-2 ti ti-printer"></i>Print Next
|
|
</a>
|
|
<a class="btn btn-outline-primary" @click="">
|
|
<i class="me-2 ti ti-printer"></i>Print All
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
{# Settings #}
|
|
<div class="card shadow w-100 mb-4">
|
|
<div class="card-header py-3">
|
|
<p class="text-primary m-0 fw-bold">Settings</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex flex-column gap-3">
|
|
<div class="col-12">
|
|
<label for="selectTemplate" class="form-label">Template</label>
|
|
<select class="form-select" id="selectTemplate" v-model="CurrentTemplate">
|
|
<option v-for="template in templates" :value="template.id">{% raw %}{{ template.name }}{% endraw %}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="selectPrinter" class="form-label">Printer</label>
|
|
<select class="form-select" id="selectPrinter" v-model="queueData.printerId">
|
|
<option v-for="printer in printers" :value="printer.id">{% raw %}{{ printer.name }}{% endraw %}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12 mt-1">
|
|
<a :class="['w-100', 'btn', Settings.AutoPrint ? 'btn-outline-success' : 'btn-outline-danger']" @click="ToggleAutoPrint()">
|
|
<i :class="['ti', 'me-2', Settings.AutoPrint ? 'ti-check' : 'ti-x']"></i>Auto. Print
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# Input #}
|
|
<div class="card shadow w-100 mt-4">
|
|
<div class="card-header py-3">
|
|
<p class="text-primary m-0 fw-bold">Input</p>
|
|
</div>
|
|
<div class="card-body px-2 py-3 d-flex flex-column" style="gap: 1rem">
|
|
<div class="col-12 px-2" v-for="FieldName in Object.keys(LabelData)">
|
|
<label for="printerDPIInput" class="form-label">{% raw %}{{ FieldName }}{% endraw %}</label>
|
|
<input type="text" class="form-control label-input" :placeholder="FieldName" v-model="LabelData[FieldName]" @keyup.enter="ContinueFieldInput()">
|
|
</div>
|
|
<div class="col-12 px-2 d-flex" style="gap: 1rem">
|
|
<a class="btn btn-outline-primary">
|
|
<i class="me-2 ti ti-device-floppy"></i>Save
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# Label Queue #}
|
|
<div class="col-8">
|
|
<div class="row row-cols-1 row-cols-md-2 g-4">
|
|
<div class="col" v-for="Label, LabelIndex in LabelQueue">
|
|
<div class="col card border-primary shadow">
|
|
<div class="card-body px-0">
|
|
<table class="table my-0" id="dataTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="ps-4">Variable</th>
|
|
<th class="ps-0">Wert</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr v-for="Field in Object.entries(Label.Fields)">
|
|
<td class="ps-4 py-2">{% raw %}{{ Field[0] }}{% endraw %}</td>
|
|
<td class="ps-0 py-2">{% raw %}{{ Field[1] }}{% endraw %}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
<div class="d-flex pt-3 px-4" style="gap: 0.6rem">
|
|
<a class="btn btn-outline-primary">
|
|
<i class="ti ti-printer me-2"></i>Print
|
|
</a>
|
|
<a class="btn btn-outline-danger" @click="DeleteLabel(LabelIndex)">
|
|
<i class="ti ti-trash me-2"></i>Delete
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var queueData = {{ queueData | dump }}
|
|
var printers = {{ printers | dump }}
|
|
var templates = {{ templates | dump }}
|
|
|
|
</script>
|
|
<script src="/api.js"></script>
|
|
<script src="/app.queue.js"></script>
|
|
{% endblock %} |