implementing snapshots

dashboard/app.vue

@@ -6,6 +6,8 @@ Lit.init('6643cd08a1854e3b81722ab5');
 
 const debugMode = process.dev;
 
+const { alerts, closeAlert } = useAlert();
+
 const { showDialog, closeDialog, dialogComponent, dialogParams } = useCustomDialog();
 </script>
 
@@ -13,6 +15,25 @@ const { showDialog, closeDialog, dialogComponent, dialogParams } = useCustomDial
 
   <div class="w-dvw h-dvh bg-[#151517] relative">
 
+    <div class="fixed top-4 right-8 z-[999] flex flex-col gap-2" v-if="alerts.length > 0">
+      <div v-for="alert of alerts"
+        class="w-[30vw] min-w-[20rem] relative bg-[#151515] border-solid border-[2px] border-[#262626] rounded-lg p-6 drop-shadow-lg">
+        <div class="flex items-start gap-4">
+          <div> <i :class="alert.icon"></i> </div>
+          <div class="grow">
+            <div class="poppins font-semibold">{{ alert.title }}</div>
+            <div class="poppins">
+              {{ alert.text }}
+            </div>
+          </div>
+          <div>
+            <i @click="closeAlert(alert.id)" class="fas fa-close hover:text-[#CCCCCC] cursor-pointer"></i>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
     <div v-if="debugMode"
       class="absolute bottom-8 left-4 bg-red-400 text-white text-[.9rem] font-bold px-4 py-[.2rem] rounded-lg z-[100]">
       <div class="poppins flex sm:hidden"> XS </div>

dashboard/components/CVerticalNavigation.vue

@@ -59,26 +59,34 @@ const snapshotsItems = computed(() => {
 
             <div class="px-4 w-full flex-col">
 
+                <div class="poppins text-[.8rem] mb-2 px-2"> Snapshots </div>
+
                 <USelectMenu class="w-full" v-model="snapshot" :options="snapshotsItems">
                     <template #label>
                         <div class="flex items-center gap-2">
                             <div :style="'background-color:' + snapshot?.color" class="w-2 h-2 rounded-full">
                             </div>
-                            <div> {{ snapshot?.name }} </div>
+                            <div class="poppins"> {{ snapshot?.name }} </div>
                         </div>
                     </template>
                     <template #option="{ option }">
                         <div class="flex items-center gap-2">
                             <div :style="'background-color:' + option.color" class="w-2 h-2 rounded-full">
                             </div>
-                            <div> {{ option.name }} </div>
+                            <div class="poppins"> {{ option.name }} </div>
                         </div>
                     </template>
                 </USelectMenu>
 
-                <div v-if="snapshot">
-                    <div> {{ new Date(snapshot.from).toLocaleString('it-IT') }} </div>
-                    <div> {{ new Date(snapshot.to).toLocaleString('it-IT') }}</div>
+                <div v-if="snapshot" class="flex flex-col text-[.8rem] mt-2 px-2">
+                    <div class="flex">
+                        <div class="grow poppins"> From:</div>
+                        <div class="poppins"> {{ new Date(snapshot.from).toLocaleString('it-IT') }} </div>
+                    </div>
+                    <div class="flex">
+                        <div class="grow poppins"> To:</div>
+                        <div class="poppins"> {{ new Date(snapshot.to).toLocaleString('it-IT') }}</div>
+                    </div>
                 </div>
             </div>
 

dashboard/components/dashboard/CountCard.vue

@@ -40,32 +40,16 @@ const props = defineProps<{
             </div>
 
         </div>
-        <div class="absolute bottom-0 left-0 w-full h-[50%] flex items-end" v-if="((props.data?.length || 0) > 0) && ready">
+        <div class="absolute bottom-0 left-0 w-full h-[50%] flex items-end"
+            v-if="((props.data?.length || 0) > 0) && ready">
             <DashboardEmbedChartCard v-if="ready" :data="props.data || []" :labels="props.labels || []"
                 :color="props.color">
             </DashboardEmbedChartCard>
         </div>
+        <div v-if="!ready" class="flex justify-center items-center w-full h-full">
+            <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
+        </div>
     </Card>
 
-    <!-- <div class="bg-menu p-4 rounded-xl flex flex-col gap-2 w-full lg:w-[20rem] relative pb-2 lg:pb-4">
-
-        <div class="gap-4 flex flex-row items-center lg:items-start lg:gap-2 lg:flex-col">
-            <div class="w-[2.5rem] h-[2.5rem] lg:w-[3.5rem] lg:h-[3.5rem] flex items-center justify-center rounded-lg"
-                :style="`background: ${props.color}`">
-                <i :class="icon" class="text-[1rem] lg:text-[1.5rem]"></i>
-            </div>
-            <div class="text-[1rem] lg:text-[1.3rem] text-text-sub/90 poppins">
-                {{ title }}
-            </div>
-        </div>
-        <div class="flex gap-2 items-center lg:items-end">
-            <div class="brockmann text-text text-[2rem] lg:text-[2.8rem] grow">
-                {{ text }}
-            </div>
-            <div class="poppins text-text-sub/90 text-[.9rem] lg:text-[1rem]"> {{ sub }} </div>
-        </div>
-
-
-    </div> -->
 
 </template>

dashboard/components/dashboard/TopSection.vue

@@ -6,10 +6,12 @@ onMounted(() => startWatching());
 onUnmounted(() => stopWatching());
 
 
+const { createAlert } = useAlert();
+
 function copyProjectId() {
     if (!navigator.clipboard) alert('NON PUOI COPIARE IN HTTP');
     navigator.clipboard.writeText((activeProject.value?._id || 0).toString());
-    alert('Copiato !');
+    createAlert('Success', 'Project id copied successfully.', 'far fa-circle-check', 5000);
 }
 </script>
 

dashboard/composables/useAlert.ts

@@ -0,0 +1,34 @@
+
+
+export type Alert = {
+    title: string,
+    text: string,
+    icon: string,
+    ms: number,
+    id: number
+}
+
+const alerts = ref<Alert[]>([]);
+
+const idPool = {
+    id: 0,
+    getId() {
+        return idPool.id++;
+    }
+}
+
+function createAlert(title: string, text: string, icon: string, ms: number) {
+    const alert: Alert = { title, text, icon, ms, id: idPool.getId() }
+    alerts.value.push(alert);
+    setTimeout(() => {
+        closeAlert(alert.id);
+    }, ms)
+}
+
+function closeAlert(id: number) {
+    alerts.value = alerts.value.filter(e => e.id != id);
+}
+
+export function useAlert() {
+    return { alerts, createAlert, closeAlert }
+}

dashboard/pages/index.vue

@@ -27,10 +27,13 @@ onMounted(async () => {
 });
 
 
+const { createAlert } = useAlert();
+
+
 function copyProjectId() {
     if (!navigator.clipboard) alert('NON PUOI COPIARE IN HTTP');
     navigator.clipboard.writeText(activeProject.value?._id?.toString() || '');
-    alert('Copiato !');
+    createAlert('Success', 'Project id copied successfully.', 'far fa-circle-check', 5000);
 }
 
 
@@ -48,7 +51,7 @@ function copyScript() {
     }
 
     navigator.clipboard.writeText(createScriptText());
-    alert('Copiato !');
+    createAlert('Success', 'Script copied successfully.', 'far fa-circle-check', 5000);
 }
 
 const { data: firstInteraction, pending, refresh } = useFirstInteractionData();
@@ -165,10 +168,10 @@ const selectLabels = [
 
         </div>
 
-        <div v-if="!firstInteraction && activeProject" class="mt-[36vh] flex flex-col gap-6">
+        <div v-if="!firstInteraction && activeProject" class="mt-[20vh] lg:mt-[36vh] flex flex-col gap-6">
             <div class="flex gap-4 items-center justify-center">
                 <div class="animate-pulse w-[1.5rem] h-[1.5rem] bg-accent rounded-full"> </div>
-                <div class="text-text/90 poppins text-[1.4rem] font-bold">
+                <div class="text-text/90 poppins text-[1.3rem] font-semibold">
                     Waiting for your first Visit or Event
                 </div>
             </div>
@@ -199,7 +202,11 @@ const selectLabels = [
 
             </div>
 
-            <div></div>
+            <NuxtLink to="https://docs.litlyx.com" target="_blank"
+                class="flex justify-center poppins text-[1.2rem] text-accent gap-2 items-center">
+                <div> <i class="far fa-book"></i> </div>
+                <div class="poppins"> Go to docs </div>
+            </NuxtLink>
         </div>