From 3d9fde6ade4116bfdaf0589ab2fbb7ab799dee35 Mon Sep 17 00:00:00 2001
From: ASoldo <soldo.andrej@gmail.com>
Date: Mon, 8 Jan 2024 17:05:45 +0100
Subject: [PATCH] Update

---
 app.vue            |   2 +-
 components/PWA.vue | 153 ++++++++++++++++++++++++---------------------
 pages/index.vue    |   4 +-
 3 files changed, 85 insertions(+), 74 deletions(-)

diff --git a/app.vue b/app.vue
index 04187d9..5f6727d 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed top-16 right-2 z-[10000]">
+  <div class="fixed top-16 right-2">
     <ToastWrapper />
   </div>
   <div class="flex flex-col h-screen">
diff --git a/components/PWA.vue b/components/PWA.vue
index ad438a1..58834ce 100644
--- a/components/PWA.vue
+++ b/components/PWA.vue
@@ -1,82 +1,13 @@
-<!-- <template> -->
-<!--   <VitePwaManifest /> -->
-<!--   <ClientOnly> -->
-<!--     <div v-if="$pwa?.offlineReady || $pwa?.needRefresh" -->
-<!--       class="bg-red-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50" -->
-<!--       role="alert"> -->
-<!--       <div class="flex"> -->
-<!--         <div class="py-1"> -->
-<!--           <span v-if="$pwa.offlineReady"> Aplikacija spremna za izvanmrežni rad.</span> -->
-<!--           <span v-else> -->
-<!--             Novi sadržaj dostupan, kliknite na gumb za ponovno učitavanje kako biste ažurirali. -->
-<!--           </span> -->
-<!--         </div> -->
-<!--         <div class="pl-4 flex items-center"> -->
-<!--           <button v-if="$pwa.needRefresh" @click="$pwa.updateServiceWorker()" -->
-<!--             class="font-bold text-blue-500 hover:text-blue-800"> -->
-<!--             Ponovno učitavanje -->
-<!--           </button> -->
-<!--           <button @click="$pwa.cancelPrompt()" class="font-bold text-blue-500 hover:text-blue-800 ml-4"> -->
-<!--             Zatvori -->
-<!--           </button> -->
-<!--         </div> -->
-<!--       </div> -->
-<!--     </div> -->
-<!--     <div v-if=" -->
-<!--             $pwa?.showInstallPrompt && !$pwa?.offlineReady && !$pwa?.needRefresh -->
-<!--           " class="bg-blue-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50" -->
-<!--       role="alert"> -->
-<!--       <div class="flex items-center"> -->
-<!--         <div class="py-1"> -->
-<!--           <span> Instaliraj PWA za lakše igranje i potpuni doživljaj. </span> -->
-<!--         </div> -->
-<!--         <div class="pl-4 flex"> -->
-<!--           <button @click="$pwa.install()" class="font-bold text-blue-500 hover:text-blue-800"> -->
-<!--             Instaliraj -->
-<!--           </button> -->
-<!--           <button @click="$pwa.cancelInstall()" class="font-bold text-blue-500 hover:text-blue-800 ml-4"> -->
-<!--             Odustani -->
-<!--           </button> -->
-<!--         </div> -->
-<!--       </div> -->
-<!--     </div> -->
-<!--   </ClientOnly> -->
-<!-- </template> -->
-
-<script setup>
-// If you want to use it in setup, import from the nuxtApp.
-const { $pwa } = useNuxtApp();
-
-// const toast = useToast();
-
-onMounted(() => {
-  if ($pwa.offlineReady) {
-    // toast.success("App ready to work offline");
-    console.log("App ready to work offline");
-  }
-});
-</script>
-
 <template>
   <VitePwaManifest />
-  <!-- <NuxtPwaManifest /> -->
   <ClientOnly>
-    <!-- You can use $pwa directly in templates! -->
-    <!-- <div v-show="$pwa.needRefresh" -->
-    <!--   class="bg-red-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50"> -->
-    <!--   <span> New content available, click on reload button to update. </span> -->
-    <!---->
-    <!--   <button class="font-bold text-blue-500 hover:text-blue-800 ml-4" @click="$pwa.updateServiceWorker()"> -->
-    <!--     Reload now -->
-    <!--   </button> -->
-    <!-- </div> -->
     <div v-if="$pwa?.offlineReady || $pwa?.needRefresh"
-      class="bg-blue-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50"
+      class="bg-red-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50"
       role="alert">
       <div class="flex">
         <div class="py-1">
           <span v-if="$pwa.offlineReady">
-            Aplikacija spremna za izvanmrežni rad!</span>
+            Aplikacija spremna za izvanmrežni rad.</span>
           <span v-else>
             Novi sadržaj dostupan, kliknite na gumb za ponovno učitavanje kako
             biste ažurirali.
@@ -112,3 +43,83 @@ onMounted(() => {
     </div>
   </ClientOnly>
 </template>
+
+<!-- <script setup> -->
+<!-- // If you want to use it in setup, import from the nuxtApp. -->
+<!-- const { $pwa } = useNuxtApp(); -->
+<!---->
+<!-- // const toast = useToast(); -->
+<!---->
+<!-- onMounted(() => { -->
+<!--   if ($pwa.offlineReady) { -->
+<!--     // toast.success("App ready to work offline"); -->
+<!--     console.log("App ready to work offline"); -->
+<!--   } -->
+<!-- }); -->
+<!-- </script> -->
+<!---->
+<!-- <template> -->
+<!--   <!-- <NuxtPwaManifest /> -->
+-->
+<!--   <ClientOnly> -->
+<!--     <VitePwaManifest /> -->
+<!--     <!-- You can use $pwa directly in templates! -->
+-->
+<!--     <!-- <div v-show="$pwa.needRefresh" -->
+-->
+<!--     <!--   class="bg-red-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50"> -->
+-->
+<!--     <!--   <span> New content available, click on reload button to update. </span> -->
+-->
+<!--     <!---->
+-->
+<!--     <!--   <button class="font-bold text-blue-500 hover:text-blue-800 ml-4" @click="$pwa.updateServiceWorker()"> -->
+-->
+<!--     <!--     Reload now -->
+-->
+<!--     <!--   </button> -->
+-->
+<!--     <!-- </div> -->
+-->
+<!--     <div v-if="$pwa?.offlineReady || $pwa?.needRefresh" -->
+<!--       class="bg-blue-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50" -->
+<!--       role="alert"> -->
+<!--       <div class="flex"> -->
+<!--         <div class="py-1"> -->
+<!--           <span v-if="$pwa.offlineReady"> -->
+<!--             Aplikacija spremna za izvanmrežni rad!</span> -->
+<!--           <span v-else> -->
+<!--             Novi sadržaj dostupan, kliknite na gumb za ponovno učitavanje kako -->
+<!--             biste ažurirali. -->
+<!--           </span> -->
+<!--         </div> -->
+<!--         <div class="pl-4 flex items-center"> -->
+<!--           <button v-if="$pwa.needRefresh" @click="$pwa.updateServiceWorker()" -->
+<!--             class="font-bold text-blue-500 hover:text-blue-800"> -->
+<!--             Ponovno učitavanje -->
+<!--           </button> -->
+<!--           <button @click="$pwa.cancelPrompt()" class="font-bold text-blue-500 hover:text-blue-800 ml-4"> -->
+<!--             Zatvori -->
+<!--           </button> -->
+<!--         </div> -->
+<!--       </div> -->
+<!--     </div> -->
+<!--     <div v-if="$pwa?.showInstallPrompt && !$pwa?.offlineReady && !$pwa?.needRefresh -->
+<!--       " class="bg-blue-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50" -->
+<!--       role="alert"> -->
+<!--       <div class="flex items-center"> -->
+<!--         <div class="py-1"> -->
+<!--           <span> Instaliraj PWA za lakše igranje i potpuni doživljaj. </span> -->
+<!--         </div> -->
+<!--         <div class="pl-4 flex"> -->
+<!--           <button @click="$pwa.install()" class="font-bold text-blue-500 hover:text-blue-800"> -->
+<!--             Instaliraj -->
+<!--           </button> -->
+<!--           <button @click="$pwa.cancelInstall()" class="font-bold text-blue-500 hover:text-blue-800 ml-4"> -->
+<!--             Odustani -->
+<!--           </button> -->
+<!--         </div> -->
+<!--       </div> -->
+<!--     </div> -->
+<!--   </ClientOnly> -->
+<!-- </template> -->
diff --git a/pages/index.vue b/pages/index.vue
index e72468a..d46f3e9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -49,7 +49,8 @@
       </div>
       <Products />
       <Impressum />
-      <CookieControl locale="hr" class="z-50">
+      <PWA class="w-full h-full" />
+      <CookieControl locale="hr">
         <template #bar>
           <div class="flex flex-col">
             <h3>
@@ -65,7 +66,6 @@
           <h3>Kolačići</h3>
         </template>
       </CookieControl>
-      <PWA class="w-full h-full" />
     </div>
   </div>
 </template>