v1

2026-10-04 21:47:22 +02:00
commit b4c4f14ca5
44 changed files with 5690 additions and 0 deletions
@@ -0,0 +1,146 @@
+<!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>