From 41d6ebe536b39367047dc8cf217be8ee652bfd59 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 27 Sep 2023 19:34:53 -0700
Subject: [PATCH] refactor(web): progress on regExp & dateTimeFormat from
 server

---
 .../dynamix.my.servers/include/state.php      |  4 +++
 web/components/Registration.ce.vue            |  8 +++--
 .../Registration/UpgradeExpiration.vue        |  6 ++--
 web/components/UpdateOs/Status.vue            |  6 ++--
 web/components/UpdateOs/Update.vue            | 18 +++++------
 web/components/UserProfile/UptimeExpire.vue   |  6 ++--
 web/composables/time.ts                       | 30 +++++++++++++++++--
 web/locales/en_US.json                        |  6 +++-
 web/store/server.ts                           |  5 +++-
 web/store/updateOsActions.ts                  | 27 ++++++++++++++++-
 web/types/server.ts                           | 15 ++++++++++
 11 files changed, 106 insertions(+), 25 deletions(-)

diff --git a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/state.php b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/state.php
index daf9d0ba8..fb0ae4142 100644
--- a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/state.php
+++ b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/state.php
@@ -41,6 +41,10 @@ $serverState = [
     "connectPluginInstalled" => $connectPluginInstalled,
     "connectPluginVersion" => $connectPluginVersion,
     "csrf" => $var['csrf_token'],
+    "dateTimeFormat" => [
+        "date" => $var['date_format'],
+        "time" => $var['time_format'],
+    ],
     "description" => $var['COMMENT'] ? htmlspecialchars($var['COMMENT']) : '',
     "deviceCount" => $var['deviceCount'],
     "email" => $myservers['remote']['email'] ?? '',
diff --git a/web/components/Registration.ce.vue b/web/components/Registration.ce.vue
index d55b193b1..cfece0f66 100644
--- a/web/components/Registration.ce.vue
+++ b/web/components/Registration.ce.vue
@@ -25,8 +25,9 @@ import dayjs from 'dayjs'
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
+import useTimeHelper from '~/composables/time';
 import { useServerStore } from '~/store/server';
-import { RegistrationItemProps } from '~/types/registration';
+import type { RegistrationItemProps } from '~/types/registration';
 
 import KeyActions from '~/components/KeyActions.vue';
 import RegistrationReplaceCheck from '~/components/Registration/ReplaceCheck.vue';
@@ -46,6 +47,7 @@ withDefaults(defineProps<Props>(), {
 
 const serverStore = useServerStore();
 const {
+  dateTimeFormat,
   deviceCount,
   guid,
   flashVendor,
@@ -63,6 +65,8 @@ const {
   stateDataError,
 } = storeToRefs(serverStore);
 
+const { formatDate } = useTimeHelper(dateTimeFormat.value, t);
+
 const devicesAvailable = computed((): number => {
   switch(regTy.value) {
     case 'Starter':
@@ -104,7 +108,7 @@ const items = computed((): RegistrationItemProps[] => {
        }] : []),
     ...(regTo.value && regTm.value ? [{
         label: t('Registered on'),
-        text: dayjs(regTm.value).format('YYYY-MM-DD HH:mm'),
+        text: formatDate(regTm.value),
       }] : []),
     ...(regExp.value && (state.value === 'STARTER' || state.value === 'UNLEASHED') ? [{
           error: regUpdatesExpired.value,
diff --git a/web/components/Registration/UpgradeExpiration.vue b/web/components/Registration/UpgradeExpiration.vue
index a7cf923f7..d9a9e1b1d 100644
--- a/web/components/Registration/UpgradeExpiration.vue
+++ b/web/components/Registration/UpgradeExpiration.vue
@@ -10,10 +10,11 @@ export interface Props {
 
 const props = defineProps<Props>();
 
-const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(props.t);
 
 const serverStore = useServerStore();
-const { regTy, regExp, regUpdatesExpired, state } = storeToRefs(serverStore);
+const { dateTimeFormat, regTy, regExp, regUpdatesExpired, state } = storeToRefs(serverStore);
+
+const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t);
 
 const parsedTime = ref<string>('');
 const formattedTime = computed<string>(() => formatDate(regExp.value));
@@ -38,7 +39,6 @@ const runDiff = () => {
 
 let interval: string | number | NodeJS.Timeout | undefined;
 onBeforeMount(() => {
-  console.debug('[UpgradeExpiration.onBeforeMount]', props);
   runDiff();
   interval = setInterval(() => {
     runDiff();
diff --git a/web/components/UpdateOs/Status.vue b/web/components/UpdateOs/Status.vue
index 0ac49a362..5cd463a6c 100644
--- a/web/components/UpdateOs/Status.vue
+++ b/web/components/UpdateOs/Status.vue
@@ -25,7 +25,7 @@ const updateOsActionsStore = useUpdateOsActionsStore();
 
 const { guid, keyfile, osVersion } = storeToRefs(serverStore);
 const { available, parsedReleaseTimestamp } = storeToRefs(updateOsStore);
-const { rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
+const { ineligibleText, rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
 </script>
 
 <template>
@@ -47,9 +47,9 @@ const { rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
           v-if="!guid || !keyfile"
           :color="'red'"
           :icon="ExclamationTriangleIcon"
-          :title="t('A valid keyfile and USB Flash boot device are required to check for updates.')"
+          :title="t(ineligibleText)"
         >
-          {{ t('Unable to check for updates') }}
+          {{ t('Ineligible for updates') }}
         </UiBadge>
         <UiBadge
           v-else-if="rebootType === ''"
diff --git a/web/components/UpdateOs/Update.vue b/web/components/UpdateOs/Update.vue
index a2cfcede1..e38e9547e 100644
--- a/web/components/UpdateOs/Update.vue
+++ b/web/components/UpdateOs/Update.vue
@@ -17,7 +17,6 @@ import { ref, watchEffect } from 'vue';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
-import { useServerStore } from '~/store/server';
 import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 import type { UserProfileLink } from '~/types/userProfile';
 
@@ -25,23 +24,24 @@ const props = defineProps<{
   t: any;
 }>();
 
-const serverStore = useServerStore();
 const updateOsStore = useUpdateOsStore();
 const updateOsActionsStore = useUpdateOsActionsStore();
 
-const { guid, keyfile, osVersion } = storeToRefs(serverStore);
 const { available } = storeToRefs(updateOsStore);
+const { ineligibleText } = storeToRefs(updateOsActionsStore);
 
 const updateButton = ref<UserProfileLink | undefined>();
 
-const availableText = computed(() => {
+const heading = computed(() => {
+  if (ineligibleText.value) {
+    return props.t('Ineligible for Unraid OS updates');
+  }
   if (available.value && updateButton?.value?.text && updateButton?.value?.textParams) {
     return props.t(updateButton?.value.text, updateButton?.value.textParams);
   }
+  return props.t('Check for Updates');
 });
 
-const ineligible = computed(() => !guid.value || !keyfile.value || !osVersion.value);
-
 watchEffect(() => {
   if (available.value) {
     updateButton.value = updateOsActionsStore.initUpdateOsCallback();
@@ -59,17 +59,17 @@ watchEffect(() => {
           <BellAlertIcon v-if="available" class="w-20px shrink-0" />
           <ArrowPathIcon v-else class="w-20px shrink-0" />
           <span>
-            {{ availableText ? availableText : t('Check for Updates')}}
+            {{ heading }}
           </span>
         </h3>
         <div class="text-16px leading-relaxed whitespace-normal opacity-75">
-          <p v-if="ineligible">{{ t('A valid keyfile and USB Flash boot device are required to check for updates.') }} {{ t('Please fix any errors and try again.') }}</p>
+          <p v-if="ineligibleText">{{ ineligibleText }}</p>
           <p v-else>{{ t('Receive the latest and greatest for Unraid OS. Whether it new features, security patches, or bug fixes – keeping your server up-to-date ensures the best experience that Unraid has to offer.') }}</p>
         </div>
       </div>
 
       <BrandButton
-        v-if="ineligible"
+        v-if="ineligibleText"
         href="/Tools/Registration"
         :icon="WrenchScrewdriverIcon"
         :text="t('Go to Tools > Registration to fix')"
diff --git a/web/components/UserProfile/UptimeExpire.vue b/web/components/UserProfile/UptimeExpire.vue
index 2d45dddcb..e6b690c30 100644
--- a/web/components/UserProfile/UptimeExpire.vue
+++ b/web/components/UserProfile/UptimeExpire.vue
@@ -15,10 +15,10 @@ const props = withDefaults(defineProps<Props>(), {
   shortText: false,
 });
 
-const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(props.t);
-
 const serverStore = useServerStore();
-const { uptime, expireTime, state } = storeToRefs(serverStore);
+const { dateTimeFormat, uptime, expireTime, state } = storeToRefs(serverStore);
+
+const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t);
 
 const time = computed(() => {
   if (props.forExpire && expireTime.value) {
diff --git a/web/composables/time.ts b/web/composables/time.ts
index a9f82dcc0..d5d1f7fc3 100644
--- a/web/composables/time.ts
+++ b/web/composables/time.ts
@@ -1,5 +1,6 @@
 import dayjs, { extend } from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
+import { DateFormatOption, ServerDateTimeFormat, TimeFormatOption } from 'types/server';
 
 /** @see https://day.js.org/docs/en/display/format#localized-formats */
 extend(localizedFormat);
@@ -15,7 +16,22 @@ export interface TimeStringsObject {
   displaySeconds?: boolean;
 }
 
-const useTimeHelper = (t: any) => {
+const dateFormatOptions: DateFormatOption[] = [
+  { format: '%A, %Y %B %e', display: 'ddd, YYYY MMMM D' },
+  { format: '%A, %e %B %Y', display: 'ddd, D MMMM YYYY' },
+  { format: '%A, %B %e, %Y', display: 'ddd, MMMM D, YYYY' },
+  { format: '%A, %m/%d/%Y', display: 'ddd, MM/DD/YYYY' },
+  { format: '%A, %d-%m-%Y', display: 'ddd, DD-MM-YYYY' },
+  { format: '%A, %d.%m.%Y', display: 'ddd, DD.MM.YYYY' },
+  { format: '%A, %Y-%m-%d', display: 'ddd, YYYY-MM-DD' },
+];
+
+const timeFormatOptions: TimeFormatOption[] = [
+  { format: '%I:%M %p', display: 'hh:mm' },
+  { format: '%R', display: 'HH:mm' },
+];
+
+const useTimeHelper = (format: ServerDateTimeFormat | undefined, t: any) => {
   const buildStringFromValues = (payload: TimeStringsObject) => {
     const {
       years,
@@ -39,7 +55,17 @@ const useTimeHelper = (t: any) => {
     return result.join(' ');
   };
 
-  const formatDate = (date: number): string => dayjs(date).format('LLLL');
+  // use the format from the server to determine the format to use
+  const findMatchingFormat = (
+      selectedFormat: string,
+      formats: DateFormatOption[] | TimeFormatOption[],
+    ): DateFormatOption | TimeFormatOption | undefined =>
+    formats.find(formatOption => formatOption.format === selectedFormat);
+  const dateFormat = findMatchingFormat(format?.date ?? dateFormatOptions[0].format, dateFormatOptions);
+  const timeFormat = findMatchingFormat(format?.time ?? timeFormatOptions[0].format , timeFormatOptions);
+
+  const formatDate = (date: number): string =>
+    dayjs(date).format(`${dateFormat?.display} ${timeFormat?.display}`);
 
   /**
  * Original meat and potatos from:
diff --git a/web/locales/en_US.json b/web/locales/en_US.json
index 778433e3b..fcdbbaa45 100644
--- a/web/locales/en_US.json
+++ b/web/locales/en_US.json
@@ -275,5 +275,9 @@
   "Starter": "Starter",
   "Unleashed": "Unleashed",
   "Lifetime": "Lifetime",
-  "Renew your license key to continue receiving OS updates.": "Renew your license key to continue receiving OS updates."
+  "Renew your license key to continue receiving OS updates.": "Renew your license key to continue receiving OS updates.",
+  "A valid GUID is required to check for updates.": "A valid GUID is required to check for updates.",
+  "A valid keyfile is required to check for updates.": "A valid keyfile is required to check for updates.",
+  "A valid OS version is required to check for updates.": "A valid OS version is required to check for updates.",
+  "Your OS update eligibility has expired. Please renew your license key enable updates.": "Your OS update eligibility has expired. Please renew your license key enable updates."
 }
diff --git a/web/store/server.ts b/web/store/server.ts
index 22cf659b2..94eeb29d0 100644
--- a/web/store/server.ts
+++ b/web/store/server.ts
@@ -34,6 +34,7 @@ import type {
   ServerStateData,
   ServerStateDataAction,
   ServerconnectPluginInstalled,
+  ServerDateTimeFormat,
 } from '~/types/server';
 
 /**
@@ -67,6 +68,7 @@ export const useServerStore = defineStore('server', () => {
   const connectPluginInstalled = ref<ServerconnectPluginInstalled>('');
   const connectPluginVersion = ref<string>('');
   const csrf = ref<string>(''); // required to make requests to Unraid webgui
+  const dateTimeFormat = ref<ServerDateTimeFormat | undefined>();
   const description = ref<string>('');
   const deviceCount = ref<number>(0);
   const email = ref<string>('');
@@ -92,7 +94,7 @@ export const useServerStore = defineStore('server', () => {
   const regTo = ref<string>('');
   const regTy = ref<string>('');
   const regExp = ref<number>(0);
-  const regUpdatesExpired = computed(() => regExp.value < Date.now()); // @todo temp solution until webgui provides
+  const regUpdatesExpired = computed(() => regExp.value < Date.now());
   const site = ref<string>('');
   const state = ref<ServerState>();
   const theme = ref<Theme>();
@@ -858,6 +860,7 @@ export const useServerStore = defineStore('server', () => {
     config,
     connectPluginInstalled,
     csrf,
+    dateTimeFormat,
     description,
     deviceCount,
     expireTime,
diff --git a/web/store/updateOsActions.ts b/web/store/updateOsActions.ts
index 868d0d911..f8e202cb2 100644
--- a/web/store/updateOsActions.ts
+++ b/web/store/updateOsActions.ts
@@ -49,7 +49,24 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
       default:
         return '';
     }
-  })
+  });
+
+  const ineligible = computed(() => !serverStore.guid || !serverStore.keyfile || !serverStore.osVersion || serverStore.regUpdatesExpired);
+  const ineligibleText = computed(() => { // translated in components
+    if (!serverStore.guid) {
+      return 'A valid GUID is required to check for updates.';
+    }
+    if (!serverStore.keyfile) {
+      return 'A valid keyfile is required to check for updates.';
+    }
+    if (!serverStore.osVersion) {
+      return 'A valid OS version is required to check for updates.';
+    }
+    if (serverStore.regUpdatesExpired) {
+      return 'Your OS update eligibility has expired. Please renew your license key enable updates.';
+    }
+    return '';
+  });
 
   // Actions
   const initUpdateOsCallback = (includeNextReleases: boolean = false): UserProfileLink => {
@@ -128,6 +145,12 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
     rebootType.value = payload;
   };
 
+  watchEffect(() => {
+    if (status.value === 'ready' && ineligible.value) {
+      setStatus('ineligible');
+    }
+  });
+
   return {
     // State
     callbackUpdateRelease,
@@ -135,6 +158,8 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
     rebootType,
     rebootTypeText,
     status,
+    ineligible,
+    ineligibleText,
     // Actions
     confirmUpdateOs,
     installOsUpdate,
diff --git a/web/types/server.ts b/web/types/server.ts
index 23443fb8b..df3488d4b 100644
--- a/web/types/server.ts
+++ b/web/types/server.ts
@@ -144,3 +144,18 @@ export interface ServerStateData {
   error?: ServerStateDataError | boolean;
   withKey?: boolean; // @todo potentially remove
 }
+
+export interface DateFormatOption {
+  format: string;
+  display: string;
+}
+
+export interface TimeFormatOption {
+  format: string;
+  display: string;
+}
+
+export interface ServerDateTimeFormat {
+  date: string;
+  time: string;
+}