213 lines
No EOL
11 KiB
Text
213 lines
No EOL
11 KiB
Text
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Label Print</title>
|
|
<link rel="icon" type="image/x-icon" href="/img/Favicon.ico">
|
|
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="/css/tabler-icons.min.css">
|
|
<script src="/js/jquery-3.6.4.min.js"></script>
|
|
<style>
|
|
body,
|
|
html {
|
|
width: 100svw;
|
|
height: 100svh;
|
|
|
|
user-select: none;
|
|
background: var(--bs-body-bg);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
<div class="navbar navbar-dark bg-dark shadow-sm">
|
|
<div class="container">
|
|
<div class="navbar-brand d-flex align-items-center">
|
|
<img src="/img/AO-Logo.svg" style="height: 2rem; margin-right: 1rem;">
|
|
<strong>Label Print</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="py-5">
|
|
<!-- Settings -->
|
|
<div class="py-2">
|
|
<div class="container" style="max-width: 60rem">
|
|
<div class="card shadow m-4">
|
|
<div class="card-header py-3">
|
|
<p class="text-primary m-0 fw-bold">Settings</p>
|
|
</div>
|
|
<div class="card-body px-2 py-3 d-flex flex-row">
|
|
<div class="col-6 px-2">
|
|
<label for="selectLabel" class="form-label">Label</label>
|
|
<select class="form-select" id="selectLabel">
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-6 px-2">
|
|
<label for="selectPrinter" class="form-label">Printer</label>
|
|
<select class="form-select" id="selectPrinter">
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Printer List -->
|
|
<div class="py-2">
|
|
<div class="container" style="max-width: 60rem">
|
|
<div class="card shadow m-4">
|
|
<div class="card-header py-3">
|
|
<p class="text-primary m-0 fw-bold">Printer</p>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive table mt-2" id="dataTable" role="grid"
|
|
aria-describedby="dataTable_info">
|
|
<table class="table my-0" id="dataTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-9 ps-5">Name</th>
|
|
<th class="pe-5 py-2 d-flex justify-content-end">
|
|
<a class="btn btn-outline-primary" data-bs-toggle="modal"
|
|
@click="CreatePrinter()">
|
|
<i class="ti ti-plus"></i>
|
|
</a>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr v-for="Printer in PrinterList">
|
|
<td class="ps-5 py-2">
|
|
{{ Printer.name }}
|
|
</td>
|
|
<td class="pe-5 py-2 d-flex justify-content-end" style="gap: 0.6rem;">
|
|
<a class="btn btn-outline-primary" @click="" data-bs-toggle="tooltip"
|
|
title="Select Printer">
|
|
<i class="ti ti-printer"></i>
|
|
</a>
|
|
<a class="btn btn-outline-primary" @click="EditPrinter(Printer.uid)"
|
|
data-bs-toggle="tooltip" title="Edit Printer">
|
|
<i class="ti ti-settings"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Label Modal -->
|
|
<div class="modal fade" id="labelModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="labelModalLabel" v-if="LabelEditor.uid == null">Create Label
|
|
</h1>
|
|
<h1 class="modal-title fs-5" id="labelModalLabel" v-if="LabelEditor.uid != null">Label {{
|
|
LabelEditor.uid }}</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">
|
|
<label for="labelNameInput" class="form-label">Label Name</label>
|
|
<input type="text" class="form-control" id="labelNameInput" placeholder="Useful Label 1"
|
|
v-model="LabelEditor.name">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6 mb-3">
|
|
<label for="labelWidth" class="form-label">Label Width</label>
|
|
<input type="text" class="form-control" id="labelWidth" placeholder="10.0.0.1"
|
|
v-model="LabelEditor.size.width">
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<label for="labelHeight" class="form-label">Label Height</label>
|
|
<input type="text" class="form-control" id="labelHeight" placeholder="9100"
|
|
v-model="LabelEditor.size.height">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="templateInput" class="form-label">Template</label>
|
|
<textarea class="form-control" id="templateInput" rows="10"
|
|
v-model="LabelEditor.template"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="btn btn-outline-danger" @click="DeleteLabel()" title="Delete Label">
|
|
<i class="me-2 ti ti-trash"></i>Delete
|
|
</a>
|
|
<a class="btn btn-outline-primary" @click="SaveLabel()" title="Save Label">
|
|
<i class="me-2 ti ti-device-floppy"></i>Save
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Printer Modal -->
|
|
<div class="modal fade" id="printerModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="labelModalLabel" v-if="PrinterEditor.uid == null">Create
|
|
Printer</h1>
|
|
<h1 class="modal-title fs-5" id="labelModalLabel" v-if="PrinterEditor.uid != null">Printer {{
|
|
PrinterEditor.uid }}</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">
|
|
<label for="printerNameInput" class="form-label">Printer Name</label>
|
|
<input type="text" class="form-control" id="printerNameInput" placeholder="Useful Printer 1"
|
|
v-model="PrinterEditor.name">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-8 mb-3">
|
|
<label for="printerDPIInput" class="form-label">Printer IP-Address</label>
|
|
<input type="text" class="form-control" id="printerDPIInput" placeholder="10.0.0.1"
|
|
v-model="PrinterEditor.socketaddr">
|
|
</div>
|
|
<div class="col-4 mb-3">
|
|
<label for="printerDPIInput" class="form-label">Printer Port</label>
|
|
<input type="text" class="form-control" id="printerDPIInput" placeholder="9100"
|
|
v-model="PrinterEditor.socketport">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="printerDPIInput" class="form-label">Printer DPI</label>
|
|
<input type="text" class="form-control" id="printerDPIInput" placeholder="203"
|
|
v-model="PrinterEditor.dpi">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="btn btn-outline-danger" @click="DeletePrinter()" title="Delete Printer">
|
|
<i class="me-2 ti ti-trash"></i>Delete
|
|
</a>
|
|
<a class="btn btn-outline-primary" @click="SavePrinter()" title="Save Printer">
|
|
<i class="me-2 ti ti-device-floppy"></i>Save
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
<script src="/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/js/vue.global.prod.js"></script>
|
|
<script src="/settings.app.js"></script>
|
|
</body>
|
|
|
|
</html> |