feat : ajout download backup

components/BackupButtonSee.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="bg-m-secondary w-[250px] h-[259px] rounded-md mx-4 shadow-md/50 shadow-black">
+    <p class="font-bold text-3xl text-m-tertiary my-1 mx-3">
+      Backup
+    </p>
+    <button
+        type="button"
+        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
+        @click="select('bitwarden')"
+    >
+      <p class="font-bold uppercase text-xl ml-[24px]">
+        bitwarden
+      </p>
+      <IconifyIcon
+          icon="mdi:eye"
+          class="text-black text-2xl mr-[24px]"
+      />
+    </button>
+
+    <button
+        type="button"
+        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
+        @click="select('inventory')"
+    >
+      <p class="font-bold uppercase text-xl ml-[24px]">
+        inventory
+      </p>
+      <IconifyIcon
+          icon="mdi:eye"
+          class="text-black text-2xl mr-[24px]"
+      />
+    </button>
+
+    <button
+        type="button"
+        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
+        @click="select('sirh')"
+    >
+      <p class="font-bold uppercase text-xl ml-[24px]">
+        sirh
+      </p>
+      <IconifyIcon
+          icon="mdi:eye"
+          class="text-black text-2xl mr-[24px]"
+      />
+    </button>
+
+    <button
+        type="button"
+        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
+        @click="select('ferme')"
+    >
+      <p class="font-bold uppercase text-xl ml-[24px]">
+        ferme
+      </p>
+      <IconifyIcon
+          icon="mdi:eye"
+          class="text-black text-2xl mr-[24px]"
+      />
+    </button>
+
+    <button
+        type="button"
+        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
+        @click="select('user')"
+    >
+      <p class="font-bold uppercase text-xl ml-[24px]">
+        user
+      </p>
+      <IconifyIcon
+          icon="mdi:eye"
+          class="text-black text-2xl mr-[24px]"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon as IconifyIcon } from "@iconify/vue"
+
+const emit = defineEmits(["select"])
+
+const select = (name: string) => {
+  emit("select", name)
+}
+</script>
+

components/BackupList.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="bg-m-secondary w-[507px] h-[367px] rounded-md mx-4 shadow-md/50 shadow-black">
+    <p class="font-bold text-3xl text-m-tertiary my-1 mx-3">
+      {{ title }}
+    </p>
+
+    <div v-if="loading">
+      <div
+        v-for="n in 6"
+        :key="`backup-skeleton-${n}`"
+        class="relative w-[483px] h-[39px] mx-3 mb-[10px]"
+      >
+        <ButtonSkeleton custom-class="h-full w-full" />
+        <div class="absolute inset-0 flex items-center justify-between px-3">
+          <TextSkeleton custom-class="h-5 w-[260px]" />
+          <CircleSkeleton custom-class="h-6 w-6 rounded-md" />
+        </div>
+      </div>
+    </div>
+
+    <button
+        v-else
+        v-for="file in backups"
+        :key="file"
+        class="bg-m-tertiary w-[483px] h-[39px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
+        @click="downloadBackup(file)"
+    >
+      <p class="text-xl ml-3 truncate max-w-[400px]">
+        {{ file }}
+      </p>
+
+      <IconifyIcon
+          icon="mdi:download"
+          class="text-black text-2xl mr-3"
+      />
+    </button>
+  </div>
+</template>
+<script setup lang="ts">
+import {Icon as IconifyIcon} from "@iconify/vue"
+import ButtonSkeleton from "~/components/skeleton/ButtonSkeleton.vue"
+import CircleSkeleton from "~/components/skeleton/CircleSkeleton.vue"
+import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
+
+const props = defineProps<{
+  folder: string | null
+}>()
+
+const backups = ref<string[]>([])
+const loading = ref(false)
+const title = computed(() => {
+  if (!props.folder) return "Backup"
+  return `Liste des backup de ${props.folder.toUpperCase()}`
+})
+
+const downloadBackup = (file: string) => {
+  if (!props.folder) return
+  const url = `/api/download?folder=${encodeURIComponent(props.folder)}&file=${encodeURIComponent(file)}`
+  window.location.href = url
+}
+
+watch(() => props.folder, async (folder) => {
+  if (!folder) {
+    loading.value = false
+    backups.value = []
+    return
+  }
+
+  loading.value = true
+  try {
+    const data = await $fetch<string[]>(`/api/backups?folder=${folder}`)
+    backups.value = data.slice(0, 6)
+  } catch (error) {
+    console.error("Erreur récupération backups:", error)
+    backups.value = []
+  } finally {
+    loading.value = false
+  }
+})
+</script>

components/DiagramStorage.vue

@@ -1,33 +1,46 @@
 <template>
   <section class="flex flex-col items-center p-4">
-    <p class="text-center text-xl font-semibold uppercase">{{ hostName }}</p>
-    <div class="relative h-[140px] w-[140px]" :class="statusColorClass">
-      <svg class="h-full w-full -rotate-90" viewBox="0 0 120 120" aria-label="Pourcentage restant">
-        <circle
-          class="fill-none stroke-[rgba(255,255,255,0.22)] [stroke-width:10]"
-          cx="60"
-          cy="60"
-          :r="chartRadius"
-        />
-        <circle
-          class="fill-none stroke-[currentColor] [stroke-linecap:round] [stroke-width:10] transition-[stroke-dashoffset] duration-300"
-          cx="60"
-          cy="60"
-          :r="chartRadius"
-          :style="{ strokeDasharray: `${chartCircumference}`, strokeDashoffset: `${chartOffset}` }"
-        />
-      </svg>
-      <div class="absolute inset-0 flex flex-col items-center justify-center">
-        <strong class="text-2xl leading-none">{{ remainingPercentText }}</strong>
-      </div>
-    </div>
+    <template v-if="loading">
+      <TextSkeleton custom-class="h-7 w-40" />
+      <CircleSkeleton custom-class="mt-2 h-[140px] w-[140px]" />
+      <BlockSkeleton custom-class="mt-2 h-5 w-36" />
+    </template>
 
-    <p class="mt-1 text-center text-sm font-semibold">{{ usedText }} / {{ totalText }}</p>
+    <template v-else>
+      <p class="text-center text-xl font-semibold uppercase">{{ hostName }}</p>
+      <div class="relative h-[140px] w-[140px]" :class="statusColorClass">
+        <svg class="h-full w-full -rotate-90" viewBox="0 0 120 120" aria-label="Pourcentage restant">
+          <circle
+            class="fill-none stroke-[rgba(255,255,255,0.22)] [stroke-width:10]"
+            cx="60"
+            cy="60"
+            :r="chartRadius"
+          />
+          <circle
+            class="fill-none stroke-[currentColor] [stroke-linecap:round] [stroke-width:10] transition-[stroke-dashoffset] duration-300"
+            cx="60"
+            cy="60"
+            :r="chartRadius"
+            :style="{ strokeDasharray: `${chartCircumference}`, strokeDashoffset: `${chartOffset}` }"
+          />
+        </svg>
+        <div class="absolute inset-0 flex flex-col items-center justify-center">
+          <strong class="text-2xl leading-none">{{ remainingPercentText }}</strong>
+        </div>
+      </div>
+
+      <p class="mt-1 text-center text-sm font-semibold">{{ usedText }} / {{ totalText }}</p>
+    </template>
   </section>
 </template>
 
 <script setup lang="ts">
+import CircleSkeleton from "~/components/skeleton/CircleSkeleton.vue"
+import BlockSkeleton from "~/components/skeleton/BlockSkeleton.vue"
+import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
+
 defineProps<{
+  loading: boolean
   hostName: string
   statusColorClass: string
   chartRadius: number

components/MessageDiscord.vue

@@ -0,0 +1,19 @@
+<script setup>
+const { data: messages } = await useFetch('/api/discord/messages')
+</script>
+
+<template>
+  <div class="bg-m-secondary w-auto h-auto  mx-4 rounded-md shadow-md/50 shadow-black p-2">
+    <div class="mb-2 flex items-center justify-between">
+      <p class="font-bold text-3xl text-m-tertiary">
+        Speedtest
+      </p>
+  <div v-if="messages">
+    <div v-for="m in messages" :key="m.id">
+      <strong>{{ m.author.username }}</strong>
+      <p>{{ m.content }}</p>
+    </div>
+  </div>
+    </div>
+  </div>
+</template>

components/Speedtest.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-m-secondary w-[509px] h-[184px]  mx-4 rounded-md shadow-md/50 shadow-black p-2">
+  <div class="bg-m-secondary w-[507px] h-[184px]  mx-4 rounded-md shadow-md/50 shadow-black p-2">
     <div class="mb-2 flex items-center justify-between">
       <p class="font-bold text-3xl text-m-tertiary">
         Speedtest
@@ -7,7 +7,7 @@
       <IconifyIcon
           icon="mdi:reload"
           class="bg-m-tertiary text-2xl text-black rounded-md shadow-md/50 mr-1 cursor-pointer"
-          @Click="runTests"
+          @click="runTests"
       />
     </div>
     <div class="grid grid-cols-3 gap-3">
@@ -22,8 +22,11 @@
           </p>
         </div>
         <div class="mx-2 flex flex-col items-center justify-center">
-          <span class="text-4xl">
-            {{ download !== null ? `${download}` : "..." }}
+          <template v-if="isTesting">
+            <TextSkeleton custom-class="h-10 w-16 mb-1" />
+          </template>
+          <span v-else class="text-4xl">
+            {{ download !== null ? `${download}` : "--" }}
           </span>
           <p class="font-bold text-xl leading-tight">
             Mbps
@@ -41,8 +44,11 @@
           </p>
         </div>
         <div class="mx-2 flex flex-col items-center justify-center">
-          <span class="text-4xl">
-            {{ upload !== null ? `${upload}` : "..." }}
+          <template v-if="isTesting">
+            <TextSkeleton custom-class="h-10 w-16 mb-1" />
+          </template>
+          <span v-else class="text-4xl">
+            {{ upload !== null ? `${upload}` : "--" }}
           </span>
           <p class="font-bold text-xl leading-tight">
             Mbps
@@ -60,8 +66,11 @@
           </p>
         </div>
         <div class="mx-2 flex flex-col items-center justify-center">
-          <span class="text-4xl">
-            {{ ping !== null ? `${ping}` : "..." }}
+          <template v-if="isTesting">
+            <TextSkeleton custom-class="h-10 w-16 mb-1" />
+          </template>
+          <span v-else class="text-4xl">
+            {{ ping !== null ? `${ping}` : "--" }}
           </span>
           <p class="font-bold text-xl leading-tight">
             Ms
@@ -72,12 +81,14 @@
   </div>
 </template>
 <script setup lang="ts">
-import {onMounted, ref} from "vue";
+import {ref} from "vue";
 import {Icon as IconifyIcon} from "@iconify/vue"
+import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
 
 const ping = ref<number | null>(null)
 const download = ref<number | null>(null)
 const upload = ref<number | null>(null)
+const isTesting = ref(false)
 
 async function testDownload() {
   const start = performance.now()
@@ -121,11 +132,17 @@ async function testPing() {
 }
 
 async function runTests() {
-  await testDownload()
-  await testUpload()
-  await testPing()
+  isTesting.value = true
+  download.value = null
+  upload.value = null
+  ping.value = null
+
+  try {
+    await testDownload()
+    await testUpload()
+    await testPing()
+  } finally {
+    isTesting.value = false
+  }
 }
-onMounted(() => {
-  runTests()
-})
 </script>

components/StatusSite.vue

@@ -1,30 +1,51 @@
 <template>
-  <div class="bg-m-secondary w-[250px] h-auto rounded-md mx-4 shadow-md/50 shadow-black pb-4">
+  <div class="bg-m-secondary w-[250px] h-[292px] rounded-md mx-4 shadow-md/50 shadow-black">
     <p class="font-bold text-3xl text-m-tertiary my-1 mx-3">
       Status
     </p>
-  <div
-      class="bg-m-tertiary w-[200px] h-auto rounded-md shadow-md/50 shadow-m-black mx-[25px] mb-3"
+    <template v-if="loading">
+      <div
+        v-for="n in 3"
+        :key="`skeleton-${n}`"
+        class="relative w-[200px] h-[68px] rounded-md mx-[25px] mb-3"
+      >
+        <ButtonSkeleton custom-class="h-full w-full" />
+        <div class="absolute inset-0 p-2">
+          <TextSkeleton custom-class="h-5 w-24 mb-2" />
+          <div class="flex items-center gap-2">
+            <CircleSkeleton custom-class="h-6 w-6" />
+            <TextSkeleton custom-class="h-5 w-20" />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="bg-m-tertiary w-[200px] h-[68px] rounded-md shadow-md/50 shadow-m-black mx-[25px] mb-3"
       v-for="row in rows"
       :key="`${row.label}-${row.url}`"
-  >
-    <p class="font-bold text-xl text-m-text mt-2 mx-2 mb-1">
-      {{ row.label }}
-    </p>
-    <div class="mx-2 flex items-center">
-    <span
-        class="inline-block h-[24px] w-[24px] rounded-full mr-2"
-        :class="statusClass(row.status)"
-    />
-      <span class="font-semibold text-lg">
-      {{ statusLabel(row.status) }}
-    </span>
+    >
+      <p class="font-bold text-xl text-m-text mt-2 mx-2 mb-1">
+        {{ row.label }}
+      </p>
+      <div class="mx-2 flex items-center">
+        <span
+          class="inline-block h-[24px] w-[24px] rounded-full mr-2"
+          :class="statusClass(row.status)"
+        />
+        <span class="font-semibold text-lg">
+          {{ statusLabel(row.status) }}
+        </span>
+      </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
+import ButtonSkeleton from "~/components/skeleton/ButtonSkeleton.vue"
+import CircleSkeleton from "~/components/skeleton/CircleSkeleton.vue"
+import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
 import {onBeforeUnmount, onMounted, ref} from "vue"
 
 interface StatusRow {
@@ -52,6 +73,8 @@ const props = withDefaults(
 )
 
 const rows = ref<StatusRow[]>([])
+const loading = ref(true)
+const initialized = ref(false)
 let timer: ReturnType<typeof setInterval> | null = null
 
 const statusClass = (status: number) => {
@@ -67,6 +90,9 @@ const statusLabel = (status: number) => {
 }
 
 const checkStatus = async () => {
+  if (!initialized.value) {
+    loading.value = true
+  }
   try {
     const data = await $fetch<StatusResponse>(props.endpoint)
     rows.value = data.results
@@ -81,6 +107,9 @@ const checkStatus = async () => {
         error: error instanceof Error ? error.message : String(error)
       }
     ]
+  } finally {
+    initialized.value = true
+    loading.value = false
   }
 }
 

components/skeleton/BlockSkeleton.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="animate-pulse rounded-md bg-m-tertiary/70" :class="customClass" />
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    customClass?: string
+  }>(),
+  {
+    customClass: "h-4 w-full"
+  }
+)
+</script>

components/skeleton/ButtonSkeleton.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="animate-pulse rounded-md bg-m-tertiary/70 shadow-md/50 shadow-m-black"
+    :class="customClass"
+  />
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    customClass?: string
+  }>(),
+  {
+    customClass: "h-[39px] w-full"
+  }
+)
+</script>

components/skeleton/CircleSkeleton.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="animate-pulse rounded-full bg-m-tertiary/70" :class="customClass" />
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    customClass?: string
+  }>(),
+  {
+    customClass: "h-10 w-10"
+  }
+)
+</script>

components/skeleton/TextSkeleton.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="animate-pulse rounded bg-m-tertiary/70" :class="customClass" />
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    customClass?: string
+  }>(),
+  {
+    customClass: "h-5 w-24"
+  }
+)
+</script>