implementing snapshots

This commit is contained in:
Emily
2024-07-29 16:07:15 +02:00
parent 7b54c109f0
commit bc27d7cded
6 changed files with 88 additions and 32 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>