Cahnges

2024-07-30 12:01:07 +02:00
parent c776100ed0
commit baa06b60fb
6 changed files with 282 additions and 13 deletions
--- a/pages/settings/labels/[mode]/[[id]].vue
+++ b/pages/settings/labels/[mode]/[[id]].vue
@@ -0,0 +1,126 @@
+
+
+<template>
+    <UDashboardNavbar >
+      <template #left>
+        <UButton
+            icon="i-heroicons-chevron-left"
+            variant="outline"
+            @click="router.push(`/settings/labels`)"
+        >
+          Labels
+        </UButton>
+      </template>
+      <template #center>
+        <h1
+            v-if="itemInfo"
+            class="text-xl font-medium"
+        >{{itemInfo.name ? `Label: ${itemInfo.name}` : (mode === 'create' ? 'Label erstellen' : 'Label bearbeiten')}}</h1>
+      </template>
+    </UDashboardNavbar>
+
+    <UTabs
+      :items="[{label: 'Informationen'}]"
+      v-if="mode === 'show' && itemInfo"
+      class="p-5"
+      v-model="openTab"
+    >
+      <template #item="{item}">
+        <UCard class="mt-5">
+          <div
+              v-if="item.label === 'Informationen'"
+              class="flex flex-row"
+          >
+            <div class="w-1/2 mr-5">
+              <UDivider>Allgemeines</UDivider>
+              <Toolbar>
+                <UButton @click="usePrintLabel('0dbe30f3-3008-4cde-8a7c-e785b1c22bfc','ZD411',useGenerateZPL(itemInfo.handlebarsZPL,{barcode:'XXX'}))">Test Druck</UButton>
+
+              </Toolbar>
+              <p>Name: {{itemInfo.name}}</p>
+              <p>Breite in Zoll: {{itemInfo.widthInch}}"</p>
+              <p>Höhe in Zoll: {{itemInfo.heightInch}}"</p>
+              <p>ZPL:</p>
+              <pre>{{itemInfo.handlebarsZPL}}</pre>
+
+            </div>
+            <div class="w-1/2">
+              <UDivider>Vorschau</UDivider>
+              <img
+                  class="mx-auto mt-5"
+                  v-if="demoZPL"
+                  :src="`https://api.labelary.com/v1/printers/8dpmm/labels/${itemInfo.widthInch}x${itemInfo.heightInch}/0/${demoZPL}`"
+              />
+            </div>
+          </div>
+
+        </UCard>
+      </template>
+    </UTabs>
+
+
+
+
+
+
+
+</template>
+
+<script setup>
+
+defineShortcuts({
+  'backspace': () => {
+    router.push("/settings/labels")
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
+const router = useRouter()
+const supabase = useSupabaseClient()
+const dataStore = useDataStore()
+const mode = useRoute().params.mode
+const openTab = ref(0)
+
+const itemInfo = ref({})
+
+const setupPage = async () => {
+  itemInfo.value = await useSupabaseSelectSingle("printLabels",useRoute().params.id,'*')
+  renderDemoZPL()
+}
+
+const demoZPL = ref("")
+const renderDemoZPL = () => {
+  let template = Handlebars.compile(itemInfo.value.handlebarsZPL)
+
+  demoZPL.value = template({barcode: "XXX"})
+}
+
+const printLabel = async () => {
+  await supabase.from("printJobs").insert({
+    tenant: dataStore.currentTenant,
+    rawContent: useGenerateZPL(itemInfo.value.handlebarsZPL,{barcode:"XXX"}),
+    printerName: "ZD411",
+    printServer: "0dbe30f3-3008-4cde-8a7c-e785b1c22bfc"
+  })
+}
+
+
+setupPage()
+
+
+</script>
+
+<style scoped>
+img {
+  border: 1px solid black
+}
+</style>