test: local dev dynamic serverState

web/_data/serverState.ts

@@ -1,20 +1,20 @@
-// import dayjs, { extend } from 'dayjs';
-// import customParseFormat from 'dayjs/plugin/customParseFormat';
-// import relativeTime from 'dayjs/plugin/relativeTime';
-// import wretch from 'wretch';
+import dayjs, { extend } from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import wretch from 'wretch';
 // // eslint-disable-next-line import/no-named-as-default
-// import QueryStringAddon from 'wretch/addons/queryString';
+import QueryStringAddon from 'wretch/addons/queryString';
 
-// import { OS_RELEASES } from '~/helpers/urls';
+import { OS_RELEASES } from '~/helpers/urls';
 import type {
   Server,
   ServerState,
-  // ServerUpdateOsResponse,
+  ServerUpdateOsResponse,
 } from '~/types/server';
 
 // dayjs plugins
-// extend(customParseFormat);
-// extend(relativeTime);
+extend(customParseFormat);
+extend(relativeTime);
 
 // function makeid(length: number) {
 //   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
@@ -105,80 +105,80 @@ const connectPluginInstalled = 'dynamix.unraid.net.staging.plg';
 
 const osVersion = '6.13.0-beta0.22';
 const osVersionBranch = 'preview';
-// const parsedRegExp = regExp ? dayjs(regExp).format('YYYY-MM-DD') : undefined;
+const parsedRegExp = regExp ? dayjs(regExp).format('YYYY-MM-DD') : undefined;
 
-// const mimicWebguiUnraidCheck = async (): Promise<ServerUpdateOsResponse | undefined> => {
-//   try {
-//     const response = await wretch()
-//       .addon(QueryStringAddon)
-//       .url(OS_RELEASES.toString())
-//       .query({
-//         ...(parsedRegExp ? { update_exp: parsedRegExp } : undefined),
-//         ...(osVersion ? { current_version: osVersion } : undefined),
-//         ...(osVersionBranch ? { branch: osVersionBranch } : undefined),
-//       })
-//       .get()
-//       .json<ServerUpdateOsResponse>()
-//       .catch((caughtError) => {
-//         throw new Error(caughtError);
-//       });
-//     return response;
-//   } catch {
-//     return undefined;
-//   }
-// };
-
-export const serverState: Server = {
-  apiKey: 'unupc_fab6ff6ffe51040595c6d9ffb63a353ba16cc2ad7d93f813a2e80a5810',
-  avatar: 'https://source.unsplash.com/300x300/?portrait',
-  config: {
-    // error: 'INVALID',
-    valid: true,
-  },
-  connectPluginInstalled,
-  description: 'DevServer9000',
-  deviceCount: 3,
-  expireTime,
-  flashBackupActivated: !!connectPluginInstalled,
-  flashProduct: 'SanDisk_3.2Gen1',
-  flashVendor: 'USB',
-  guid: staticGuid,
-  // "guid": "0781-5583-8355-81071A2B0211",
-  inIframe: false,
-  // keyfile: 'DUMMY_KEYFILE',
-  keyfile: 'TkJCrVyXMLWWGKZF6TCEvf0C86UYI9KfUDSOm7JoFP19tOMTMgLKcJ6QIOt9_9Psg_t0yF-ANmzSgZzCo94ljXoPm4BESFByR0K7nyY9KVvU8szLEUcBUT3xC2adxLrAXFNxiPeK-mZqt34n16uETKYvLKL_Sr5_JziG5L5lJFBqYZCPmfLMiguFo1vp0xL8pnBH7q8bYoBnePrAcAVb9mAGxFVPEInSPkMBfC67JLHz7XY1Y_K5bYIq3go9XPtLltJ53_U4BQiMHooXUBJCKXodpqoGxq0eV0IhNEYdauAhnTsG90qmGZig0hZalQ0soouc4JZEMiYEcZbn9mBxPg',
-  lanIp: '192.168.254.36',
-  license: '',
-  locale: 'en_US', // en_US, ja
-  name: 'dev-static',
-  osVersion,
-  osVersionBranch,
-  // registered: connectPluginInstalled ? true : false,
-  registered: false,
-  regGen: 0,
-  regTm: twoDaysAgo,
-  regTo: 'Zack Spear',
-  regTy,
-  regExp,
-  // "regGuid": "0781-5583-8355-81071A2B0211",
-  site: 'http://localhost:4321',
-  state,
-  theme: {
-    banner: false,
-    bannerGradient: false,
-    bgColor: '',
-    descriptionShow: true,
-    metaColor: '',
-    name: 'white',
-    textColor: ''
-  },
-  updateOsResponse: {
-    version: '6.13.0-beta0.27',
-    name: 'Unraid 6.13.0-beta0.27',
-    date: '2023-12-13',
-    isNewer: true,
-  },
-  uptime,
-  username: 'zspearmint',
-  wanFQDN: ''
+const mimicWebguiUnraidCheck = async (): Promise<ServerUpdateOsResponse | undefined> => {
+  try {
+    const response = await wretch()
+      .addon(QueryStringAddon)
+      .url(OS_RELEASES.toString())
+      .query({
+        ...(parsedRegExp ? { update_exp: parsedRegExp } : undefined),
+        ...(osVersion ? { current_version: osVersion } : undefined),
+        ...(osVersionBranch ? { branch: osVersionBranch } : undefined),
+      })
+      .get()
+      .json<ServerUpdateOsResponse>()
+      .catch((caughtError) => {
+        throw new Error(caughtError);
+      });
+    return response;
+  } catch {
+    return undefined;
+  }
+};
+
+export const getServerState = async (): Promise<Server> => {
+  console.debug('[getServerState]');
+  const serverState: Server = {
+    apiKey: 'unupc_fab6ff6ffe51040595c6d9ffb63a353ba16cc2ad7d93f813a2e80a5810',
+    avatar: 'https://source.unsplash.com/300x300/?portrait',
+    config: {
+      // error: 'INVALID',
+      valid: true,
+    },
+    connectPluginInstalled,
+    description: 'DevServer9000',
+    deviceCount: 3,
+    expireTime,
+    flashBackupActivated: !!connectPluginInstalled,
+    flashProduct: 'SanDisk_3.2Gen1',
+    flashVendor: 'USB',
+    guid: staticGuid,
+    // "guid": "0781-5583-8355-81071A2B0211",
+    inIframe: false,
+    // keyfile: 'DUMMY_KEYFILE',
+    keyfile: 'TkJCrVyXMLWWGKZF6TCEvf0C86UYI9KfUDSOm7JoFP19tOMTMgLKcJ6QIOt9_9Psg_t0yF-ANmzSgZzCo94ljXoPm4BESFByR0K7nyY9KVvU8szLEUcBUT3xC2adxLrAXFNxiPeK-mZqt34n16uETKYvLKL_Sr5_JziG5L5lJFBqYZCPmfLMiguFo1vp0xL8pnBH7q8bYoBnePrAcAVb9mAGxFVPEInSPkMBfC67JLHz7XY1Y_K5bYIq3go9XPtLltJ53_U4BQiMHooXUBJCKXodpqoGxq0eV0IhNEYdauAhnTsG90qmGZig0hZalQ0soouc4JZEMiYEcZbn9mBxPg',
+    lanIp: '192.168.254.36',
+    license: '',
+    locale: 'en_US', // en_US, ja
+    name: 'dev-static',
+    osVersion,
+    osVersionBranch,
+    // registered: connectPluginInstalled ? true : false,
+    registered: false,
+    regGen: 0,
+    regTm: twoDaysAgo,
+    regTo: 'Zack Spear',
+    regTy,
+    regExp,
+    // "regGuid": "0781-5583-8355-81071A2B0211",
+    site: 'http://localhost:4321',
+    state,
+    theme: {
+      banner: false,
+      bannerGradient: false,
+      bgColor: '',
+      descriptionShow: true,
+      metaColor: '',
+      name: 'white',
+      textColor: ''
+    },
+    updateOsResponse: await mimicWebguiUnraidCheck(),
+    uptime,
+    username: 'zspearmint',
+    wanFQDN: ''
+  };
+  console.debug('[getServerState]', { serverState });
+  return serverState;
 };

web/pages/index.vue

@@ -1,13 +1,18 @@
 <script lang="ts" setup>
 import AES from 'crypto-js/aes';
-import type { SendPayloads } from '~/store/callback';
 
-import { serverState } from '~/_data/serverState';
+import { getServerState } from '~/_data/serverState';
+import type { SendPayloads } from '~/store/callback';
+import type { Server } from '~/types/server';
+
+const serverData = ref<Server | undefined>(undefined);
 
 const nuxtApp = useNuxtApp();
-onBeforeMount(() => {
+onBeforeMount(async () => {
   // @ts-ignore
   nuxtApp.$customElements.registerEntry('UnraidComponents');
+
+  serverData.value = await getServerState();
 });
 
 const valueToMakeCallback = ref<SendPayloads | undefined>();
@@ -64,7 +69,7 @@ onMounted(() => {
             UserProfileCe
           </h3>
           <header class="bg-beta py-4">
-            <UserProfileCe :server="serverState" />
+            <UserProfileCe v-if="serverData" :server="serverData" />
           </header>
           <hr class="border-black dark:border-white">
           <h3 class="text-lg font-semibold font-mono">

web/pages/newFile.ts

@@ -0,0 +1,9 @@
+import { onBeforeMount } from 'vue';
+import { nuxtApp } from './index.vue';
+
+onBeforeMount(() => {
+// @ts-ignore
+nuxtApp.$customElements.registerEntry('UnraidComponents');
+
+// serverData.value = await getServerState();
+});

web/pages/webComponents.vue

@@ -1,10 +1,16 @@
 <script lang="ts" setup>
-import { serverState } from '~/_data/serverState';
+import { getServerState } from '~/_data/serverState';
+
+import type { Server } from '~/types/server';
+
+const serverData = ref<Server | undefined>(undefined);
 
 const nuxtApp = useNuxtApp();
-onBeforeMount(() => {
+onBeforeMount(async () => {
   // @ts-ignore
   nuxtApp.$customElements.registerEntry('UnraidComponents');
+
+  serverData.value = await getServerState();
 });
 </script>
 
@@ -18,7 +24,7 @@ onBeforeMount(() => {
         UserProfileCe
       </h3>
       <header class="bg-beta py-4">
-        <unraid-user-profile :server="JSON.stringify(serverState)" />
+        <unraid-user-profile v-if="serverData" :server="JSON.stringify(serverData)" />
       </header>
       <hr class="border-black dark:border-white">
       <h3 class="text-lg font-semibold font-mono">