fix typing errors

Signed-off-by: garionion <github@entr0py.de>

README.md

@@ -1,4 +1,3 @@
 # Radiator-Web
 
 API URL must be set on Build Time, either via Env `API_URL`(prefered), or via `VITE_API_URL` from [`.env.production`](.env.production)
-

src/App.vue

@@ -4,7 +4,7 @@
     <main class="container mx-auto px-2 sm:px-6 pt-8">
       <suspense>
         <template #default><router-view></router-view> </template>
-        <template #fallback>Loading</template>
+        <template #fallback><VSpinner /></template>
       </suspense>
     </main>
   </div>
@@ -13,11 +13,13 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import VNav from "./components/VNav.vue";
+import VSpinner from "./components/VSpinner.vue";
 
 export default defineComponent({
   name: "App",
   components: {
     VNav,
+    VSpinner,
   },
   setup() {},
 });

src/components/HelloWorld.vue

@@ -1,69 +0,0 @@
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
-    +
-    <a
-      href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
-      target="_blank"
-      >Vetur</a
-    >
-    or
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    (if using
-    <code>&lt;script setup&gt;</code>)
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank"
-      >Vite Docs</a
-    >
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
-  </p>
-
-  <button @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<script lang="ts">
-import { ref, defineComponent } from "vue";
-export default defineComponent({
-  name: "HelloWorld",
-  props: {
-    msg: {
-      type: String,
-      required: true,
-    },
-  },
-  setup: () => {
-    const count = ref(0);
-    return { count };
-  },
-});
-</script>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

src/components/VNav.vue

@@ -124,11 +124,11 @@
 <script lang="ts">
 //stolen from https://git.max-site.de/Eulinchen/eulinchen-frontend/src/branch/master/src/components/VNav.vue
 
-import { ref, reactive, computed, watch } from "vue";
+import { ref, reactive, computed, watch, defineComponent } from "vue";
 import { useRoute } from "vue-router";
 import { isLoggedIn as isLoggedinFromAPI } from "../api";
 
-export default {
+export default defineComponent({
   name: "VNav",
   setup() {
     const title = "radiator";
@@ -170,7 +170,7 @@ export default {
 
     return { title, open, items, activeRoute, isLoggedIn };
   },
-};
+});
 </script>
 
 <style scoped></style>

src/components/VSpinner.vue

@@ -0,0 +1,9 @@
+<template>Loading…</template>
+
+<script>
+export default {
+  name: "VSpinner",
+};
+</script>
+
+<style scoped></style>

src/components/VTaskState.vue

@@ -2,39 +2,40 @@
   <div
     class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg text-left"
   >
-    <span class="block w-full">{{ apName }}</span>
+    <span class="block w-full" v-text="apName" />
-    <div v-if="state.result === undefined">
+    <div v-if="stateOfTask.result === undefined">
-      <span class="block w-full">{{ state.state }}</span>
+      <span class="block w-full" v-text="stateOfTask.state" />
       <progress
         class="block w-full"
-        :max="state.total"
+        :max="stateOfTask.total"
-        :value="state.current"
+        :value="stateOfTask.current"
       ></progress>
-      <span class="block w-full">{{ state.status }}</span>
+      <span class="block w-full" v-text="stateOfTask.status" />
     </div>
     <div v-else class="w-full flex">
       <span class="flex-1 mr-2"
-        >SwitchPortID {{ state.result.switchportid }}</span
+        >SwitchPortID {{ stateOfTask.result.switchportid }}</span
       >
       <span class="flex-1 mr-2"
-        >New SwitchPortID {{ state.result.switchportid_new }}</span
+        >New SwitchPortID {{ stateOfTask.result.switchportid_new }}</span
       >
-      <span class="flex-1 mr-2">UserPortID {{ state.result.userportid }}</span>
       <span class="flex-1 mr-2"
-        >SwitchPortID {{ state.result.userportid_new }}</span
+        >UserPortID {{ stateOfTask.result.userportid }}</span
+      >
+      <span class="flex-1 mr-2"
+        >SwitchPortID {{ stateOfTask.result.userportid_new }}</span
       >
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, defineComponent } from "vue";
 import { useIntervalFn } from "@vueuse/core";
 import { getStateOfTask, StateOfTask } from "../api";
 
-export default {
+export default defineComponent({
   name: "VTaskState",
-  emits: ["finished"],
   props: {
     taskID: {
       type: String,
@@ -45,26 +46,29 @@ export default {
       required: true,
     },
   },
-  setup(props: { taskID: string }) {
+  setup(props: { taskID: string; apName: string }) {
-    const { taskID } = toRefs(props);
+    const { taskID, apName } = toRefs(props);
 
-    const state = reactive<StateOfTask>({
+    const stateOfTask = reactive<StateOfTask>({
       state: "",
       current: "",
-      total: undefined,
+      total: 0,
-      result: undefined,
+      status: "",
-      status: null,
     });
 
-    const { pause, resume } = useIntervalFn(async () => {
+    const { pause } = useIntervalFn(
-      const s = await getStateOfTask(taskID.value);
+      async () => {
-      Object.assign(state, s);
+        const s = await getStateOfTask(taskID.value);
-      if (s.result !== undefined) pause();
+        Object.assign(stateOfTask, s);
-    }, 300);
+        if (s.result !== undefined) pause();
+      },
+      300,
+      true
+    );
 
-    return { state };
+    return { stateOfTask, apName };
   },
-};
+});
 </script>
 
 <style scoped></style>

src/router/index.ts

@@ -55,7 +55,10 @@ const routes: RouteRecordRaw[] = [
     path: "/registerAccessPoint",
     name: "RegisterAccessPoint",
     component: RegisterAccessPoint,
-    props: (route) => ({ apID: Number(route.query["ap-id"]).valueOf() }),
+    props: (route) =>
+      route.query["ap-id"]
+        ? { apID: Number(route.query["ap-id"]).valueOf() }
+        : {},
   },
 ];
 

src/views/AccessPoints.vue

@@ -45,10 +45,10 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, defineComponent } from "vue";
 import { getAccessPointDetails, AccessPoint } from "../api";
 
-export default {
+export default defineComponent({
   name: "AccessPoints",
   props: {
     siteID: {
@@ -72,7 +72,7 @@ export default {
 
     return { aps };
   },
-};
+});
 </script>
 
 <style scoped></style>

src/views/CreateAccessPoint.vue

@@ -98,7 +98,7 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive } from "vue";
+import { ref, toRefs, reactive, defineComponent } from "vue";
 import {
   AccessPoint,
   getAccessPointByID,
@@ -110,7 +110,7 @@ import {
 import AccessPoints from "./AccessPoints.vue";
 import router from "../router";
 
-export default {
+export default defineComponent({
   name: "CreateAccessPoint",
   props: {
     siteID: {
@@ -183,7 +183,7 @@ export default {
 
     return { isEdit, ap, sites, getSites, createAccessPoint };
   },
-};
+});
 </script>
 
 <style scoped></style>

src/views/Home.vue

@@ -1,9 +1,11 @@
 <template>Mi casa e tu casa</template>
 
 <script lang="ts">
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "Home",
-};
+});
 </script>
 
 <style scoped></style>

src/views/Login.vue

@@ -45,11 +45,11 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs } from "vue";
+import { ref, toRefs, defineComponent } from "vue";
 import { login as apiLogin, logout as apiLogout } from "../api";
 import router from "../router";
 
-export default {
+export default defineComponent({
   name: "Login",
   props: {
     logout: {
@@ -84,7 +84,7 @@ export default {
       login,
     };
   },
-};
+});
 </script>
 
 <style scoped></style>

src/views/RegisterAccessPoint.vue

@@ -33,14 +33,14 @@
 </template>
 
 <script lang="ts">
-import { reactive, ref, toRefs } from "vue";
+import { reactive, ref, toRefs, defineComponent } from "vue";
 import {
   getAccessPointByID,
   registerAccessPoint as apiRegisterAccessPoint,
 } from "../api";
 import VTaskState from "../components/VTaskState.vue";
 
-export default {
+export default defineComponent({
   name: "RegisterAccessPoint",
   components: { VTaskState },
   props: {
@@ -62,7 +62,7 @@ export default {
         console.error(e);
       }
     }
-    if (!isNaN(apID?.value)) {
+    if (apID?.value !== undefined) {
       getAccessPointSettings(apID.value);
     }
 
@@ -77,7 +77,7 @@ export default {
 
     return { apName, registerAccessPoint, tasks, finishedTasks };
   },
-};
+});
 </script>
 
 <style scoped></style>

src/views/Settings.vue

@@ -1,9 +1,11 @@
 <template>settierungsmöglichkeiten</template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "Settings",
-};
+});
 </script>
 
 <style scoped></style>

src/views/Sites.vue

@@ -79,9 +79,9 @@ import {
   Site,
   createSite as apiCreateSite,
 } from "../api";
-import { reactive, ref } from "vue";
+import { reactive, ref, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
   name: "Sites",
   async setup() {
     const sites = reactive<Site[]>([]);
@@ -110,7 +110,7 @@ export default {
 
     return { sites, newSiteName, newDefaultPrefix, createSite };
   },
-};
+});
 </script>
 
 <style scoped></style>