improved ui of Workorder PWA

This commit is contained in:
Luca Haid
2025-09-08 20:13:38 +00:00
parent 6189a3d527
commit d2f395dc37

View File

@@ -200,7 +200,7 @@
if (!selectedWorkorder.value) return '#';
const { street, hausnummer, plz, city } = selectedWorkorder.value;
const address = encodeURIComponent(`${street} ${hausnummer}, ${plz} ${city}`);
return `https://www.google.com/maps/search/?api=1&query=${address}`;
return `https://maps.google.com/maps?q=${address}`;
});
const checklist = computed(() => {
@@ -470,8 +470,8 @@
<header class="bg-white dark:bg-slate-800 shadow dark:shadow-md p-4 flex-shrink-0 z-10">
<div class="grid grid-cols-3 items-center">
<div class="justify-self-start">
<button @click="fetchWorkorders" class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
<button @click="fetchWorkorders" class="p-2 rounded-full text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 active:bg-slate-200 dark:active:bg-slate-600 focus:outline-none focus:ring-0">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
</button>
</div>
<div class="justify-self-center">
@@ -479,8 +479,9 @@
<img src="/assets/images/xinon-full-transparent-white.png" alt="Logo" class="h-8 w-auto hidden dark:block">
</div>
<div class="justify-self-end">
<button @click="isSettingsOpen = true" class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg> </button>
<button @click="isSettingsOpen = true" class="p-2 rounded-full text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 active:bg-slate-200 dark:active:bg-slate-600 focus:outline-none focus:ring-0">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5-38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
</button>
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
@@ -497,14 +498,15 @@
<div v-if="isLoading" class="space-y-3 p-2 animate-pulse">
<div v-for="i in 4" :key="i" class="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-md">
<div class="flex justify-between items-start">
<div class="flex-grow pr-2 min-w-0 space-y-2">
<div class="h-5 bg-slate-200 dark:bg-slate-700 rounded w-3/4"></div>
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-full"></div>
<div class="pt-2">
<div class="flex-grow pr-2 min-w-0">
<div class="h-5 bg-slate-200 dark:bg-slate-700 rounded w-3/4 mb-1.5"></div>
<div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-full mb-2"></div>
<div class="space-y-1.5">
<div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-1/2"></div>
<div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-2/3"></div>
</div>
</div>
<div class="flex-shrink-0 ml-2 text-right space-y-2">
<div class="flex-shrink-0 ml-2 text-right space-y-1">
<div class="h-5 w-24 bg-slate-200 dark:bg-slate-700 rounded-full ml-auto"></div>
<div class="h-4 w-28 bg-slate-200 dark:bg-slate-700 rounded ml-auto"></div>
<div class="h-3 w-20 bg-slate-200 dark:bg-slate-700 rounded ml-auto"></div>
@@ -698,9 +700,9 @@
<ul class="flex-grow overflow-y-auto -mr-2 pr-2">
<li v-for="option in filteredFcpOptions" :key="option.value" @click="selectFcp(option.value)"
class="flex justify-between items-center p-3 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer text-sm font-medium"
:class="{'bg-secondary/20 text-secondary': selectedFcp === option.value}">
:class="{'bg-primary/10 text-primary dark:bg-secondary/20 dark:text-secondary': selectedFcp === option.value}">
<span>{{ option.text }}</span>
<svg v-if="selectedFcp === option.value" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary" viewBox="0 0 20 20" fill="currentColor">
<svg v-if="selectedFcp === option.value" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary dark:text-secondary" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</li>
@@ -868,4 +870,4 @@
</script>
<script src="/js/pages/WorkorderBase/WorkorderServiceWorker.js"></script>
</body>
</html>
</html>