initial upload
This commit is contained in:
parent
ac114da487
commit
7c1cfdff51
63 changed files with 6883 additions and 0 deletions
410
ui/settings.template.njk
Normal file
410
ui/settings.template.njk
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
{% extends "./master.njk" %}
|
||||
|
||||
{% block content %}
|
||||
{# Input Section #}
|
||||
<script type="text/javascript">
|
||||
|
||||
var template = {{ template | dump }}
|
||||
|
||||
</script>
|
||||
<div class="container">
|
||||
|
||||
<div class="row gx-4 gy-2">
|
||||
<div class="col-12">
|
||||
<div class="card shadow w-100 mb-4">
|
||||
<div class="card-header py-3">
|
||||
<p class="text-primary m-0 fw-bold">Label Settings</p>
|
||||
</div>
|
||||
<div class="card-body p-3 row gx-4 gy-3">
|
||||
<div class="col-lg-6 col-12">
|
||||
<label class="form-label">Label Name</label>
|
||||
<input type="text" class="form-control label-input" placeholder="Label Name" v-model="template.name">
|
||||
</div>
|
||||
<div class="col-lg-3 col-6">
|
||||
<label class="form-label">Label Width</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="text" class="form-control" placeholder="0" v-model="template.width">
|
||||
<span class="input-group-text">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6">
|
||||
<label class="form-label">Label Height</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="text" class="form-control" placeholder="22" v-model="template.height">
|
||||
<span class="input-group-text">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-12 d-flex justify-content-end">
|
||||
<a class="btn btn-primary" @click="SaveTemplate()">
|
||||
<i class="me-2 ti ti-device-floppy"></i>Save
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Template Variables #}
|
||||
<div class="col-12 col-lg-4">
|
||||
{# Variables 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">Variables</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<a class="btn btn-outline-primary" @click="AddVariable()">
|
||||
<i class="me-2 ti ti-playlist-add"></i>Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{# Variables #}
|
||||
<div class="row gy-3">
|
||||
<div :class="['col-12','gy-3', variable.id == null ? 'd-none': '']" v-for="(variable, index) in template.variables">
|
||||
<div class="card shadow w-100">
|
||||
<div class="card-header py-3">
|
||||
<p class="text-primary m-0 fw-bold">{% raw %}{{ variable.name }}{% endraw %}</p>
|
||||
</div>
|
||||
<div class="card-body px-3 py-3">
|
||||
<div class="row gy-3">
|
||||
<div class="col-12">
|
||||
<kbd>{% raw %}{{ variable.regex }}{% endraw %}</kbd>
|
||||
</div>
|
||||
{# Actions #}
|
||||
<div class="col-12 d-flex justify-content-end">
|
||||
<a class="btn btn-outline-danger me-2" @click="DeleteVariable(index)">
|
||||
<i class="ti ti-trash me-2"></i>Delete
|
||||
</a>
|
||||
<a class="btn btn-outline-primary" @click="EditVariable(index)">
|
||||
<i class="ti ti-pencil me-2"></i>Edit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Template Elements #}
|
||||
<div class="col-12 col-lg-8">
|
||||
{# <div class="row"> #}
|
||||
<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">Elements</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Add
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" href="#" @click="AddElement('text')">Text</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#" @click="AddElement('box')">Box</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="AddElement('ellipse')">Ellipse</a></li>
|
||||
{# <li><a class="dropdown-item" href="#" @click="AddElement('line')">Line</a></li> #}
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#" @click="AddElement('code39')">Code 39</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="AddElement('code128')">Code 128</a></li>
|
||||
<li><a class="dropdown-item" href="#" @click="AddElement('codeQR')">QRCode</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Element List #}
|
||||
<div class="col-12">
|
||||
<div class="row row-cols-1 row-cols-lg-2 g-4">
|
||||
<div :class="['col', element.id == null ? 'd-none': '']" v-for="(element, elementIndex) in template.elements">
|
||||
<div class="col card border-primary shadow">
|
||||
<div class="card-header px-3 py-3">
|
||||
<p class="text-primary m-0 fw-bold">{% raw %}{{ element.name }}{% endraw %}</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-middle table-borderless my-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-2" title="Number of Columns">
|
||||
<i class="ti ti-augmented-reality me-2"></i>Type:
|
||||
</td>
|
||||
<td class="py-2" title="Number of Columns">
|
||||
{% raw %}{{ GetElementTypeName(element.type) }}{% endraw %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2" title="Number of Columns">
|
||||
<i class="ti ti-layout-align-left me-2"></i>Position X:
|
||||
</td>
|
||||
<td class="py-2" title="Number of Columns">
|
||||
{% raw %}{{ element.config.originX }}{% endraw %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2" title="Number of Columns">
|
||||
<i class="ti ti-layout-align-top me-2"></i>Position Y:
|
||||
</td>
|
||||
<td class="py-2" title="Number of Columns">
|
||||
{% raw %}{{ element.config.originY }}{% endraw %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer text-body-secondary">
|
||||
<div class="d-flex justify-content-end" style="gap: 0.6rem">
|
||||
<a class="btn btn-outline-primary" @click="EditElement(elementIndex)">
|
||||
<i class="ti ti-printer me-2"></i>Edit
|
||||
</a>
|
||||
<a class="btn btn-outline-danger" @click="DeleteElement(elementIndex)">
|
||||
<i class="ti ti-trash me-2"></i>Delete
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Variable Settings Modal #}
|
||||
<div class="modal fade" id="VariableSettingsModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content" v-if="variableIndex != null">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" v-if="template.variables[variableIndex].id == null">Create Variable</h1>
|
||||
<h1 class="modal-title fs-5" v-if="template.variables[variableIndex].id != null">Edit Variable</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body mx-2">
|
||||
<div class="mb-3" title="the internal name of the variable">
|
||||
<label for="VariableNameInput" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="VariableNameInput" placeholder="Variable Name" v-model="template.variables[variableIndex].name">
|
||||
</div>
|
||||
<div class="mb-3" title="a label for the variable that is displayed on dialogs">
|
||||
<label for="VariableLabelInput" class="form-label">Label</label>
|
||||
<input type="text" class="form-control" id="VariableLabelInput" placeholder="Variable Name" v-model="template.variables[variableIndex].label">
|
||||
</div>
|
||||
<div class="mb-3" title="regex to check if input is valid">
|
||||
<label for="VariableRegexInput" class="form-label">Check Value Regex</label>
|
||||
<input type="text" class="form-control" id="VariableRegexInput" placeholder="Regex like ^.*$" v-model="template.variables[variableIndex].regex">
|
||||
</div>
|
||||
<div class="mb-3" title="an example for the input that is displayed on dialogs">
|
||||
<label for="VariableExampleInput" class="form-label">Value Example</label>
|
||||
<input type="text" class="form-control" id="VariableExampleInput" placeholder="just a example" v-model="template.variables[variableIndex].example">
|
||||
</div>
|
||||
<div class="mb-3" title="a default value for the input that is used on dialogs">
|
||||
<label for="VariableDefaultInput" class="form-label">Default Value</label>
|
||||
<input type="text" class="form-control" id="VariableDefaultInput" placeholder="default value" v-model="template.variables[variableIndex].default">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn btn-outline-primary" @click="SaveVariable(variableIndex)" title="Save Variable">
|
||||
<i class="me-2 ti ti-device-floppy"></i>Save
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Variable delete Confirmation Modal #}
|
||||
<div class="modal fade" id="DeleteVariableModal" data-bs-backdrop="static" aria-hidden="true" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content" v-if="variableIndex != null">
|
||||
<div class="modal-body mx-2 d-flex flex-column" style="gap: 1rem">
|
||||
<h5 class="mb-0">Delete Variable</h5>
|
||||
<p class="mb-0">Are you sure you want to delete Variable {% raw %}{{ template.variables[variableIndex].name }}{% endraw %}?</p>
|
||||
</div>
|
||||
<div class="modal-footer flex-nowrap p-0">
|
||||
<a class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-end" @click="DeleteVariable(variableIndex, true)">
|
||||
<strong>Delete</strong>
|
||||
</a>
|
||||
<a class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Element Settings Modal #}
|
||||
<div class="modal fade" id="ElementSettingsModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content" v-if="elementIndex != null">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" v-if="template.elements[elementIndex].id == null">Create Element</h1>
|
||||
<h1 class="modal-title fs-5" v-if="template.elements[elementIndex].id != null">Edit Element</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body mx-2">
|
||||
{# Default Element Settings #}
|
||||
<div class="mb-3">
|
||||
<label for="ElementTypeInput" class="form-label">Element Type</label>
|
||||
<input type="text" class="form-control" id="ElementTypeInput" placeholder="Element Type" v-model="template.elements[elementIndex].name">
|
||||
</div>
|
||||
{# <div class="mb-3">
|
||||
<label for="ElementTypeInput" class="form-label">Element Type</label>
|
||||
<input type="text" class="form-control" id="ElementTypeInput" placeholder="Element Type" v-model="template.elements[elementIndex].type" disabled readonly>
|
||||
</div> #}
|
||||
<div class="row mb-3">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Position X</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="text" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.originX">
|
||||
<span class="input-group-text">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Position Y</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="text" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.originY">
|
||||
<span class="input-group-text">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Alignment</label>
|
||||
<select class="form-select" v-model="template.elements[elementIndex].config.originAlign">
|
||||
<option value="0">Align Left</option>
|
||||
<option value="1">Align Right</option>
|
||||
<option value="2">Align Auto</option>
|
||||
</select>
|
||||
</div>
|
||||
{# Text Element Settings #}
|
||||
<div class="mb-3" v-if="template.elements[elementIndex].type == 'text'">
|
||||
<label class="form-label">Text Content</label>
|
||||
<input type="text" class="form-control" v-model="template.elements[elementIndex].config.content">
|
||||
</div>
|
||||
<div class="row mb-3" v-if="template.elements[elementIndex].type == 'text'">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Font Type</label>
|
||||
<input type="text" class="form-control" v-model="template.elements[elementIndex].config.fontType">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Font Height</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="text" class="form-control" v-model="template.elements[elementIndex].config.fontHeight">
|
||||
<span class="input-group-text">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Box / Ellipse Element Settings #}
|
||||
<div class="row mb-3" v-if="template.elements[elementIndex].type == 'box' || template.elements[elementIndex].type == 'ellipse'">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Width</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="text" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.width">
|
||||
<span class="input-group-text">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Height</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="text" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.height">
|
||||
<span class="input-group-text">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Box Element Settings #}
|
||||
<div class="row mb-3" v-if="template.elements[elementIndex].type == 'box' || template.elements[elementIndex].type == 'ellipse'">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Border With</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="text" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.borderWidth">
|
||||
<span class="input-group-text">dots</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Border Color</label>
|
||||
<select class="form-select" v-model="template.elements[elementIndex].config.borderColor">
|
||||
<option value="B">Black</option>
|
||||
<option value="W">White</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3" v-if="template.elements[elementIndex].type == 'box'">
|
||||
<label class="form-label">Boder Radius</label>
|
||||
<select class="form-select" v-model="template.elements[elementIndex].config.borderRadius">
|
||||
<option value="0">No Rounding</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">Heavy Rounding</option>
|
||||
</select>
|
||||
</div>
|
||||
{# Code 39 & Code 128 #}
|
||||
<div class="row mb-3" v-if="template.elements[elementIndex].type == 'code39' || template.elements[elementIndex].type == 'code128'">
|
||||
<div class="col-12">
|
||||
<label class="form-label">Content</label>
|
||||
<input type="text" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.content">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3" v-if="template.elements[elementIndex].type == 'code39' || template.elements[elementIndex].type == 'code128'">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Line Width</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="number" step="1" min="1" max="100" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.codeWidth">
|
||||
<span class="input-group-text">dots</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Width Ratio</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="number" step="0.1" min="2.0" max="3.0" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.widthRatio">
|
||||
<span class="input-group-text">x</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3" v-if="template.elements[elementIndex].type == 'code39' || template.elements[elementIndex].type == 'code128'">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Code Height</label>
|
||||
<div class="col-6 input-group">
|
||||
<input type="number" step="1" min="1" max="10000" class="form-control" placeholder="0" v-model="template.elements[elementIndex].config.codeHeight">
|
||||
<span class="input-group-text">dots</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn btn-outline-primary" @click="SaveElement(elementIndex)" title="Save Element">
|
||||
<i class="me-2 ti ti-device-floppy"></i>Save
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Element delete Confirmation Modal #}
|
||||
<div class="modal fade" id="DeleteElementModal" data-bs-backdrop="static" aria-hidden="true" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content" v-if="elementIndex != null">
|
||||
<div class="modal-body mx-2 d-flex flex-column" style="gap: 1rem">
|
||||
<h5 class="mb-0">Delete Element</h5>
|
||||
<p class="mb-0">Are you sure you want to delete Element {% raw %}{{ template.elements[elementIndex].name }}{% endraw %}?</p>
|
||||
</div>
|
||||
<div class="modal-footer flex-nowrap p-0">
|
||||
<a class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-end" @click="DeleteElement(elementIndex, true)">
|
||||
<strong>Delete</strong>
|
||||
</a>
|
||||
<a class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="toast-template-saved" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
template saved
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/api.js"></script>
|
||||
<script src="/app.template.js"></script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue