add version modal

src/components/modals/AboutModal.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import ModalHeader from './helpers/ModalHeader.vue'
+import ModalTemplate from './helpers/ModalTemplate.vue'
+import useStatusStore from '@/stores/tableStatus'
+import useLoader from '@/stores/loader'
+import { useToast } from 'vue-toast-notification'
+import table from '@/plugins/table'
+
+const status = useStatusStore()
+const loader = useLoader()
+const toast = useToast()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+async function checkForUpdate() {
+  loader.showLoader('update')
+  await table.get("/update")
+  loader.hideLoader('update')
+  toast.info('Update queued')
+}
+</script>
+
+<template>
+  <ModalTemplate @close="emit('close')">
+    <ModalHeader title="About" @close="emit('close')" />
+    <span class="w-full text-center text-md font-mono">{{ status.raw.espV }}</span>
+    <button
+      @click="checkForUpdate"
+      class="hover:scale-105 hover:bg-blue-500 transform-gpu duration-300 disabled:scale-100 disabled:text-gray-500 px-4 py-2 rounded-lg bg-blue-600"
+    >
+      Check for updates
+    </button>
+  </ModalTemplate>
+</template>

src/views/SettingsView.vue

@@ -13,6 +13,7 @@ import { useModal } from 'vue-final-modal'
 import { useRouter } from 'vue-router'
 import useTable from '@/stores/tableStatus'
 import 'vue-toast-notification/dist/theme-sugar.css'
+import AboutModal from '@/components/modals/AboutModal.vue'
 
 const router = useRouter()
 const table = useTable()
@@ -29,6 +30,18 @@ const openSecuritySettingsModal = async () => {
   await open()
 }
 
+const openAboutModal = async () => {
+  const { open, close } = useModal({
+    component: AboutModal,
+    attrs: {
+      onClose: () => {
+        close()
+      }
+    }
+  })
+  await open()
+}
+
 const openWireguardSettingsModal = async () => {
   const { open, close } = useModal({
     component: WireguardSettingsModal,
@@ -71,6 +84,13 @@ const openLightsSettingsModal = async () => {
   <div class="mx-[5vw] flex flex-col gap-5 justify-start items-center pt-5">
     <span class="font-semibold text-2xl text-center">Settings</span>
     <div class="flex flex-col w-full justify-evenly gap-4 px-4">
+      <button
+        @click="openAboutModal"
+        class="flex w-full justify-between items-center p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transform-gpu duration-300"
+      >
+        <span class="text-lg font-medium">About</span>
+        <ArrowRightIcon class="w-6 h-6"></ArrowRightIcon>
+      </button>
       <button
         @click="openSecuritySettingsModal"
         class="flex w-full justify-between items-center p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transform-gpu duration-300"