reformat of code

frontend/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BuildServerStats: typeof import('./src/components/BuildServerStats.vue')['default']
+    FooterContent: typeof import('./src/components/FooterContent.vue')['default']
     MainNav: typeof import('./src/components/MainNav.vue')['default']
     Packages: typeof import('./src/components/Packages.vue')['default']
   }

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-sheet color="transparent" :style="`width: ${contentWidth}px; margin-left: ${offsetLeft}px;`">
+    <v-sheet :style="`width: ${contentWidth}px; margin-left: ${offsetLeft}px;`" color="transparent">
       <main-nav :style="`padding-left: ${offsetLeft}px;`" />
 
       <v-main>
@@ -10,18 +10,18 @@
       </v-main>
     </v-sheet>
 
-    <v-footer color="black" :style="`padding-left: ${offsetLeft}px;`" app>
+    <v-footer :style="`padding-left: ${offsetLeft}px;`" app color="black">
-      <footer-content/>
+      <footer-content />
     </v-footer>
   </v-app>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
-import MainNav from "@/components/MainNav.vue";
+import MainNav from '@/components/MainNav.vue'
-import BuildServerStats from "@/components/BuildServerStats.vue";
+import BuildServerStats from '@/components/BuildServerStats.vue'
-import Packages from "@/components/Packages.vue";
+import Packages from '@/components/Packages.vue'
-import {onMounted, ref} from "vue";
+import { onMounted, ref } from 'vue'
-import FooterContent from "@/FooterContent.vue";
+import FooterContent from '@/components/FooterContent.vue'
 
 const contentWidth = ref(1440)
 const offsetLeft = ref(0)

frontend/src/FooterContent.vue

@@ -1,49 +0,0 @@
-<template>
-  <v-sheet class="d-flex justify-center" color="transparent" width="100%" style="gap: 50px">
-    <v-list class="d-flex" style="border-radius: 5px" bg-color="black">
-      <v-list-subheader>Stats:</v-list-subheader>
-      <v-list-item title="latest" style="color: #084f46">{{ stats.latest }}</v-list-item>
-      <v-list-item title="queued" style="color: #824204">{{ stats.queued }}</v-list-item>
-      <v-list-item title="skipped" style="color: #4c4c4c">{{ stats.skipped }}</v-list-item>
-      <v-list-item title="failed" style="color: #711712">{{ stats.failed }}</v-list-item>
-    </v-list>
-    <v-list class="d-flex" style="border-radius: 5px" bg-color="black">
-      <v-list-subheader>LTO:</v-list-subheader>
-      <v-list-item title="enabled" style="color: #084f46">{{ stats.lto.enabled }}</v-list-item>
-      <v-list-item title="disabled" style="color: #711712">{{ stats.lto.disabled }}</v-list-item>
-      <v-list-item title="unknown" style="color: #4c4c4c">{{ stats.lto.unknown }}</v-list-item>
-    </v-list>
-  </v-sheet>
-</template>
-
-<script setup lang="ts">
-import {onMounted, ref} from "vue";
-
-const stats = ref({
-  latest: 0,
-  queued: 0,
-  skipped: 0,
-  failed: 0,
-  lto: {
-    enabled: 0,
-    disabled: 0,
-    unknown: 0
-  }
-})
-
-const getStats = () => {
-  fetch('https://api.alhp.dev/stats')
-    .then(response => {
-      if (!response.ok) throw new Error(response.statusText)
-      return response.json()
-    }).then(statistics => {
-      stats.value = statistics
-  }).catch(error => {
-    console.error(error)
-  }).finally(() => {})
-}
-
-onMounted(() => {
-  getStats()
-})
-</script>

frontend/src/components/BuildServerStats.vue

@@ -1,6 +1,10 @@
 <template>
-  <v-sheet color="transparent" class="mt-6">
+  <v-sheet class="mt-6" color="transparent">
     <h5 class="text-h5">Buildserver Stats</h5>
-    <iframe allowtransparency="true" class="w-100 border-0" height="420px" src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1"></iframe>
+    <iframe
+      allowtransparency="true"
+      class="w-100 border-0"
+      height="420px"
+      src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1"></iframe>
   </v-sheet>
 </template>

frontend/src/components/FooterContent.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-sheet class="d-flex justify-center" color="transparent" style="gap: 50px" width="100%">
+    <v-list bg-color="black" class="d-flex" style="border-radius: 5px">
+      <v-list-subheader>Stats:</v-list-subheader>
+      <v-list-item style="color: #084f46" title="latest">{{ stats.latest }}</v-list-item>
+      <v-list-item style="color: #824204" title="queued">{{ stats.queued }}</v-list-item>
+      <v-list-item style="color: #4c4c4c" title="skipped">{{ stats.skipped }}</v-list-item>
+      <v-list-item style="color: #711712" title="failed">{{ stats.failed }}</v-list-item>
+    </v-list>
+    <v-list bg-color="black" class="d-flex" style="border-radius: 5px">
+      <v-list-subheader>LTO:</v-list-subheader>
+      <v-list-item style="color: #084f46" title="enabled">{{ stats.lto.enabled }}</v-list-item>
+      <v-list-item style="color: #711712" title="disabled">{{ stats.lto.disabled }}</v-list-item>
+      <v-list-item style="color: #4c4c4c" title="unknown">{{ stats.lto.unknown }}</v-list-item>
+    </v-list>
+  </v-sheet>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+
+const stats = ref({
+  latest: 0,
+  queued: 0,
+  skipped: 0,
+  failed: 0,
+  lto: {
+    enabled: 0,
+    disabled: 0,
+    unknown: 0
+  }
+})
+
+const getStats = () => {
+  fetch('https://api.alhp.dev/stats')
+    .then((response) => {
+      if (!response.ok) throw new Error(response.statusText)
+      return response.json()
+    })
+    .then((statistics) => {
+      stats.value = statistics
+    })
+    .catch((error) => {
+      console.error(error)
+    })
+    .finally(() => {})
+}
+
+onMounted(() => {
+  getStats()
+})
+</script>

frontend/src/components/MainNav.vue

@@ -1,20 +1,20 @@
-<script setup lang="ts">
+<script lang="ts" setup></script>
-
-</script>
 
 <template>
-<v-app-bar color="primary" flat>
+  <v-app-bar color="primary" flat>
     <v-app-bar-title style="margin-left: 0 !important">
       <span style="font-size: 20px">
         ALHP Status
-      <a class="ms-2" style="color: white; font-size: 25px" href="https://somegit.dev/ALHP/ALHP.GO" target="_blank">
+        <a
-        <i class="fa fa-gitea" ></i>
+          class="ms-2"
+          href="https://somegit.dev/ALHP/ALHP.GO"
+          style="color: white; font-size: 25px"
+          target="_blank">
+          <i class="fa fa-gitea"></i>
         </a>
       </span>
     </v-app-bar-title>
-</v-app-bar>
+  </v-app-bar>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

frontend/src/components/Packages.vue

@@ -1,59 +1,67 @@
 <template>
-  <v-sheet color="transparent" class="mt-6" width="100%">
+  <v-sheet class="mt-6" color="transparent" width="100%">
     <h5 class="text-h5 mb-4">Packages</h5>
 
     <v-sheet class="d-flex justify-space-between" color="transparent" width="100%">
-      <v-sheet class="d-flex align-center w-50" style="gap: 15px" color="transparent">
+      <v-sheet class="d-flex align-center w-50" color="transparent" style="gap: 15px">
-        <v-text-field color="primary" style="width: 30%; height: 60px" variant="outlined" placeholder="Search Pkgbase" clearable v-model="inputPkgBase"></v-text-field>
+        <v-text-field
+          v-model="inputPkgBase"
+          clearable
+          color="primary"
+          placeholder="Search Pkgbase"
+          style="width: 30%; height: 60px"
+          variant="outlined"></v-text-field>
 
         <v-select
-          color="primary"
-          style="width: 30%; height: 60px"
-          variant="outlined"
           v-model="selectRepo"
           :items="selectRepoItems"
+          color="primary"
           item-title="title"
           item-value="value"
           return-object
           single-line
-        ></v-select>
+          style="width: 30%; height: 60px"
+          variant="outlined"></v-select>
 
         <v-select
-          color="primary"
-          style="width: 30%; height: 60px"
-          variant="outlined"
           v-model="selectStatus"
           :items="selectStatusItems"
+          color="primary"
           item-title="title"
           item-value="value"
           return-object
           single-line
-        ></v-select>
+          style="width: 30%; height: 60px"
+          variant="outlined"></v-select>
       </v-sheet>
 
-      <v-sheet style="height: 60px; transform: translateX(30px)" class="d-flex align-center w-50 justify-end" color="transparent">
+      <v-sheet
-        <v-pagination style="width: 75%"
+        class="d-flex align-center w-50 justify-end"
+        color="transparent"
+        style="height: 60px; transform: translateX(30px)">
+        <v-pagination
           v-model="page"
-          active-color="primary"
-          variant="text"
-          density="comfortable"
           :length="pagesMax"
-        ></v-pagination>
+          active-color="primary"
+          density="comfortable"
+          style="width: 75%"
+          variant="text"></v-pagination>
       </v-sheet>
     </v-sheet>
 
-    <v-table style="width: 100%; background: transparent" class="mt-6">
+    <v-table class="mt-6" style="width: 100%; background: transparent">
       <thead>
         <tr>
           <th scope="col">Repository</th>
           <th scope="col">Pkgbase</th>
           <th scope="col">Status</th>
           <th scope="col">Reason</th>
-        <th scope="col" title="link time optimization&#10;does not guarantee that package is actually built with LTO">
+          <th
+            scope="col"
+            title="link time optimization&#10;does not guarantee that package is actually built with LTO">
             LTO
           </th>
-        <th scope="col" title="Debug-symbols available via debuginfod">DS
+          <th scope="col" title="Debug-symbols available via debuginfod">DS</th>
-        </th>
           <th scope="col">Archlinux Version</th>
           <th scope="col">ALHP Version</th>
           <th class="text-end" scope="col" style="width: 30px">Info</th>
@@ -65,15 +73,18 @@
           No Packages found
         </tr>
         <template v-else>
-        <tr v-for="(pkg, index) in packages" :key="index" :style="`background-color: ${getStatus(pkg.status)};`">
+          <tr
+            v-for="(pkg, index) in packages"
+            :key="index"
+            :style="`background-color: ${getStatus(pkg.status)};`">
             <td class="font-weight-bold">
               {{ pkg.repo.split('-')[0] }}
               <v-chip
+                :color="getVersionColor(pkg.repo.split('-')[pkg.repo.split('-').length - 1])"
                 class="ms-2"
-              variant="flat"
-              label
                 density="comfortable"
-              :color="getVersionColor(pkg.repo.split('-')[pkg.repo.split('-').length - 1])">
+                label
+                variant="flat">
                 {{ pkg.repo.split('-')[pkg.repo.split('-').length - 1] }}
               </v-chip>
             </td>
@@ -81,7 +92,11 @@
             <td>{{ pkg.status.toLocaleUpperCase() }}</td>
             <td>{{ pkg.skip_reason || '' }}</td>
             <td><i :class="getLto(pkg.lto).class" :title="getLto(pkg.lto).title"></i></td>
-          <td><i :class="getDs(pkg.debug_symbols).class" :title="getDs(pkg.debug_symbols).title"></i></td>
+            <td>
+              <i
+                :class="getDs(pkg.debug_symbols).class"
+                :title="getDs(pkg.debug_symbols).title"></i>
+            </td>
             <td>{{ pkg.arch_version }}</td>
             <td>{{ pkg.repo_version }}</td>
             <td class="d-flex align-center" style="gap: 3px; width: 60px">
@@ -89,27 +104,37 @@
                 v-if="pkg.status === 'failed'"
                 :href="`https://alhp.dev/logs/${pkg.repo.slice(pkg.repo.indexOf('-') + 1)}/${pkg.pkgbase}.log`"
                 class="text-decoration-none"
-              style="color: darkgrey; transform: translateY(-3px) translateX(-15px); max-width: 15px"
+                style="
+                  color: darkgrey;
+                  transform: translateY(-3px) translateX(-15px);
+                  max-width: 15px;
+                "
                 target="_blank">
                 <i class="fa fa-file-text fa-lg"></i>
               </a>
               <span v-else style="max-width: 15px"></span>
               <a
                 :href="`https://archlinux.org/packages/?q=${pkg.pkgbase}`"
+                class="text-decoration-none font-weight-bold"
+                style="
+                  color: darkgrey;
+                  font-size: 18px;
+                  padding: 0;
+                  margin: 0;
+                  width: 15px;
+                  transform: translateX(-15px);
+                "
                 target="_blank"
-              title="ArchWeb"
+                title="ArchWeb">
-              style="color: darkgrey; font-size: 18px; padding: 0; margin: 0; width: 15px; transform: translateX(-15px);"
-              class="text-decoration-none font-weight-bold">
                 AW
               </a>
               <span
                 v-if="pkg.build_date && pkg.peak_mem"
                 class="fa fa-info-circle fa-lg"
-              style="color: darkgrey; transform: translateY(-1px); max-width: 15px !important"
+                style="color: darkgrey; transform: translateY(-1px); max-width: 15px !important">
-            >
                 <v-tooltip activator="parent" location="start">
                   {{ `Built on ${pkg.build_date}` }}
-               <br>
+                  <br />
                   {{ `Peak-Memory: ${pkg.peak_mem}` }}
                 </v-tooltip>
               </span>
@@ -122,14 +147,23 @@
   </v-sheet>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
-import {onMounted, ref, UnwrapRef, watch} from "vue";
+import { onMounted, ref, UnwrapRef, watch } from 'vue'
 
 interface Package {
   pkgbase: string
   repo: string
   split_packages: Array<string>
-  status: 'latest' | 'failed' | 'build' | 'skipped' | 'delayed' | 'building' | 'signing' | 'unknown' | 'queued'
+  status:
+    | 'latest'
+    | 'failed'
+    | 'build'
+    | 'skipped'
+    | 'delayed'
+    | 'building'
+    | 'signing'
+    | 'unknown'
+    | 'queued'
   skip_reason: string
   lto: 'enabled' | 'unknown' | 'disabled' | 'auto_disabled'
   debug_symbols: 'available' | 'unknown' | 'not_available'
@@ -138,6 +172,7 @@ interface Package {
   build_date: string
   peak_mem: any
 }
+
 interface Packages {
   packages: Array<Package>
   total: number
@@ -145,7 +180,7 @@ interface Packages {
   limit: number
 }
 
-const inputPkgBase = ref("")
+const inputPkgBase = ref('')
 const selectRepo = ref({ title: 'Repository (any)', value: 'any' })
 const selectRepoItems = [
   { title: 'Repository (any)', value: 'any' },
@@ -157,7 +192,7 @@ const selectRepoItems = [
   { title: 'multilib-x86-64-v3', value: 'multilib-x86-64-v3' },
   { title: 'core-x86-64-v4', value: 'core-x86-64-v4' },
   { title: 'extra-x86-64-v4', value: 'extra-x86-64-v4' },
-  { title: 'multilib-x86-64-v4', value: 'multilib-x86-64-v4' },
+  { title: 'multilib-x86-64-v4', value: 'multilib-x86-64-v4' }
 ]
 const selectStatus = ref({ title: 'Status (any)', value: 'any' })
 const selectStatusItems = [
@@ -170,7 +205,7 @@ const selectStatusItems = [
   { title: 'Queued', value: 'queued' },
   { title: 'Building', value: 'building' },
   { title: 'Signing', value: 'signing' },
-  { title: 'Unknown', value: 'unknown' },
+  { title: 'Unknown', value: 'unknown' }
 ]
 
 const page = ref(1)
@@ -180,7 +215,7 @@ const noPackagesFound = ref(false)
 
 const searchPackages = (offset: number) => {
   const params = new URLSearchParams({
-    limit: "50",
+    limit: '50',
     offset: offset.toString()
   })
 
@@ -189,8 +224,9 @@ const searchPackages = (offset: number) => {
   if (selectStatus.value.value !== 'any') params.append('status', selectStatus.value.value)
 
   fetch('https://api.alhp.dev/packages?' + params, {
-    method: 'GET',
+    method: 'GET'
-  }).then(response => {
+  })
+    .then((response) => {
       if (response.ok) return response.json()
       if (response.status === 404) {
         noPackagesFound.value = true
@@ -198,7 +234,8 @@ const searchPackages = (offset: number) => {
       } else {
         throw new Error(response.statusText)
       }
-  }).then(json => {
+    })
+    .then((json) => {
       if (!json) return
 
       if (pagesMax.value !== json.total) {
@@ -206,7 +243,8 @@ const searchPackages = (offset: number) => {
       }
 
       packages.value = json.packages
-  }).catch(error => {
+    })
+    .catch((error) => {
       console.error(error)
     })
 }
@@ -227,7 +265,7 @@ const getVersionColor = (version: string) => {
   return color
 }
 
-const getStatus = (status: UnwrapRef<Package["status"]>) => {
+const getStatus = (status: UnwrapRef<Package['status']>) => {
   let color = ''
   switch (status) {
     case 'skipped':
@@ -246,16 +284,16 @@ const getStatus = (status: UnwrapRef<Package["status"]>) => {
       color = '#093372'
       break
     case 'building':
-      color ='#084f46'
+      color = '#084f46'
       break
     case 'unknown':
-      color ='#191919'
+      color = '#191919'
       break
   }
   return color
 }
 
-const getLto = (lto: UnwrapRef<Package["lto"]>) => {
+const getLto = (lto: UnwrapRef<Package['lto']>) => {
   let icon = {
     title: '',
     class: ''
@@ -289,7 +327,7 @@ const getLto = (lto: UnwrapRef<Package["lto"]>) => {
   return icon
 }
 
-const getDs = (ds: UnwrapRef<Package["debug_symbols"]>) => {
+const getDs = (ds: UnwrapRef<Package['debug_symbols']>) => {
   let icon = {
     title: '',
     class: ''
@@ -320,29 +358,47 @@ const getDs = (ds: UnwrapRef<Package["debug_symbols"]>) => {
 const url = new URL(window.location.href)
 
 window.addEventListener('load', () => {
-  inputPkgBase.value = url.searchParams.has('pkgbase') ? (url.searchParams.get('pkgbase') || '').toLowerCase() : ''
+  inputPkgBase.value = url.searchParams.has('pkgbase')
+    ? (url.searchParams.get('pkgbase') || '').toLowerCase()
+    : ''
   selectRepo.value = {
-    value: url.searchParams.has('repo') ? (url.searchParams.get('repo') || '').toLowerCase() : 'any',
+    value: url.searchParams.has('repo')
-    title: url.searchParams.has('repo') ? (url.searchParams.get('repo') || '').toLowerCase() : 'Repository (any)'
+      ? (url.searchParams.get('repo') || '').toLowerCase()
+      : 'any',
+    title: url.searchParams.has('repo')
+      ? (url.searchParams.get('repo') || '').toLowerCase()
+      : 'Repository (any)'
   }
   selectStatus.value = {
-    value: url.searchParams.has('status') ? (url.searchParams.get('status') || '').toLowerCase() : 'any',
+    value: url.searchParams.has('status')
-    title: url.searchParams.has('status') ? (url.searchParams.get('status') || '').substring(0, 1).toLocaleUpperCase() + (url.searchParams.get('status') || '').substring(1, url.searchParams.get('status')!!.length - 1).toLocaleUpperCase() : 'Status (any)',
+      ? (url.searchParams.get('status') || '').toLowerCase()
+      : 'any',
+    title: url.searchParams.has('status')
+      ? (url.searchParams.get('status') || '').substring(0, 1).toLocaleUpperCase() +
+        (url.searchParams.get('status') || '')
+          .substring(1, url.searchParams.get('status')!!.length - 1)
+          .toLocaleUpperCase()
+      : 'Status (any)'
   }
 
   searchPackages(0)
 })
 
-watch(() => page.value, () => {
+watch(
+  () => page.value,
+  () => {
     searchPackages(page.value)
-})
+  }
+)
 
 // @ts-ignore
 let delayTimer = null
-watch(() => inputPkgBase.value, () => {
+watch(
+  () => inputPkgBase.value,
+  () => {
     // @ts-ignore
-  if (delayTimer) clearTimeout(delayTimer);
+    if (delayTimer) clearTimeout(delayTimer)
-  delayTimer = setTimeout(function() {
+    delayTimer = setTimeout(function () {
       if (inputPkgBase.value) {
         url.searchParams.set('pkgbase', inputPkgBase.value.toLowerCase())
       } else {
@@ -350,10 +406,13 @@ watch(() => inputPkgBase.value, () => {
       }
       window.history.pushState(null, '', url.toString())
       searchPackages(0)
-  }, 250);
+    }, 250)
-})
+  }
+)
 
-watch(() => selectRepo.value, () => {
+watch(
+  () => selectRepo.value,
+  () => {
     if (selectRepo.value) {
       if (selectRepo.value.value === 'any') {
         url.searchParams.delete('repo')
@@ -363,9 +422,12 @@ watch(() => selectRepo.value, () => {
       window.history.pushState(null, '', url.toString())
     }
     searchPackages(0)
-})
+  }
+)
 
-watch(() => selectStatus.value, () => {
+watch(
+  () => selectStatus.value,
+  () => {
     if (selectStatus.value) {
       if (selectStatus.value.value === 'any') {
         url.searchParams.delete('status')
@@ -375,7 +437,8 @@ watch(() => selectStatus.value, () => {
       window.history.pushState(null, '', url.toString())
     }
     searchPackages(0)
-})
+  }
+)
 
 onMounted(() => {
   searchPackages(0)