146 lines
5.9 KiB
HTML
146 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-100 p-8">
|
|
<div id="app" class="max-w-2xl mx-auto bg-white p-6 rounded shadow">
|
|
<h1 class="text-xl font-bold mb-4">Label Printer App</h1>
|
|
|
|
<select v-model="selectedLabel" @change="resetForm" class="w-full p-2 border mb-4">
|
|
<option :value="null">-- Kies een label --</option>
|
|
<option v-for="l in labels" :value="l">{{ l.name }}</option>
|
|
</select>
|
|
|
|
<div v-if="selectedLabel" class="space-y-4">
|
|
<div v-for="field in selectedLabel.fields" :key="field">
|
|
<label class="block font-medium">{{ field }}</label>
|
|
|
|
<input
|
|
v-if="field.toLowerCase() === 'datum'"
|
|
type="date"
|
|
v-model="formData[field]"
|
|
@blur="generatePreview"
|
|
class="w-full p-2 border">
|
|
|
|
<input
|
|
v-else
|
|
v-model="formData[field]"
|
|
@blur="generatePreview"
|
|
class="w-full p-2 border">
|
|
</div>
|
|
|
|
<div class="flex items-end gap-4 pt-2">
|
|
<div>
|
|
<label class="block font-medium text-sm mb-1">Aantal kopieën</label>
|
|
<input
|
|
type="number"
|
|
v-model.number="copies"
|
|
min="1"
|
|
max="99"
|
|
class="w-24 p-2 border rounded text-center">
|
|
</div>
|
|
<button @click="printLabel" class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-2 rounded transition">Printen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isLoading" class="flex justify-center items-center h-64">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
<span class="ml-2">Voorbeeld genereren...</span>
|
|
</div>
|
|
|
|
<img v-else-if="pdfUrl" :src="pdfUrl" class="w-full h-auto mt-6 border">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp } = Vue;
|
|
const hostname = window.location.hostname;
|
|
const port = window.location.port ? `:${window.location.port}` : '';
|
|
const API_BASE = `${window.location.protocol}//${window.location.hostname}${port}/labels`;
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
labels: [],
|
|
selectedLabel: null,
|
|
formData: {},
|
|
pdfUrl: null,
|
|
isLoading: false,
|
|
copies: 1
|
|
};
|
|
},
|
|
async mounted() {
|
|
const res = await fetch(`${API_BASE}/labels`);
|
|
this.labels = await res.json();
|
|
},
|
|
methods: {
|
|
resetForm() {
|
|
this.formData = {};
|
|
this.pdfUrl = null;
|
|
this.copies = 1;
|
|
|
|
// Zet vandaag als standaard voor het veld 'Datum'
|
|
const today = new Date().toISOString().split('T')[0];
|
|
if (this.selectedLabel && this.selectedLabel.fields.includes('Datum')) {
|
|
this.formData['Datum'] = today;
|
|
}
|
|
|
|
this.generatePreview()
|
|
},
|
|
|
|
async generatePreview() {
|
|
this.isLoading = true; // Spinner aanzetten
|
|
this.pdfUrl = null; // Oude PDF verbergen
|
|
let payloadData = { ...this.formData };
|
|
|
|
if (payloadData['Datum']) {
|
|
// Converteer yyyy-mm-dd naar dd-mm-yyyy
|
|
const [y, m, d] = payloadData['Datum'].split('-');
|
|
payloadData['Datum'] = `${d}-${m}-${y}`;
|
|
}
|
|
|
|
const payload = {
|
|
labelName: this.selectedLabel.name,
|
|
headers: Object.keys(payloadData),
|
|
data: [Object.values(payloadData)],
|
|
format: 'png', // Vraag om PNG
|
|
rotate: 270 // Draai 90 graden
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/download`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const blob = await res.blob();
|
|
this.pdfUrl = URL.createObjectURL(blob) + '#view=FitH&zoom=page-rotated-ccw';
|
|
} catch (err) {
|
|
console.error("Fout bij preview:", err);
|
|
} finally {
|
|
this.isLoading = false; // Spinner uitzetten
|
|
}
|
|
},
|
|
async printLabel() {
|
|
const copiesCount = Math.max(1, parseInt(this.copies) || 1);
|
|
const payload = {
|
|
labelName: this.selectedLabel.name,
|
|
headers: Object.keys(this.formData),
|
|
data: [Object.values(this.formData)],
|
|
copies: copiesCount
|
|
};
|
|
await fetch(`${API_BASE}/print`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
alert(`Opdracht (${copiesCount}x) verzonden naar printer!`);
|
|
}
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html> |