mirror of
https://github.com/unraid/api.git
synced 2026-02-19 14:38:29 -06:00
120 lines
3.7 KiB
Vue
120 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
|
import {
|
|
ArrowPathIcon,
|
|
BellAlertIcon,
|
|
CheckCircleIcon,
|
|
ExclamationTriangleIcon,
|
|
InformationCircleIcon,
|
|
} from '@heroicons/vue/24/solid';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import useTimeHelper from '~/composables/time';
|
|
import { useServerStore } from '~/store/server';
|
|
import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
|
|
|
|
export interface Props {
|
|
restoreVersion?: string | undefined;
|
|
t: any;
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
restoreVersion: undefined,
|
|
});
|
|
|
|
const serverStore = useServerStore();
|
|
const updateOsStore = useUpdateOsStore();
|
|
const updateOsActionsStore = useUpdateOsActionsStore();
|
|
|
|
const { dateTimeFormat, osVersion, regExp, regUpdatesExpired } = storeToRefs(serverStore);
|
|
const { available, parsedReleaseTimestamp } = storeToRefs(updateOsStore);
|
|
const { ineligibleText, rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
|
|
|
|
const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t);
|
|
|
|
const parsedTime = ref<string>('');
|
|
const formattedTime = computed<string>(() => formatDate(regExp.value));
|
|
|
|
const regExpOutput = computed(() => {
|
|
if (!regExp.value) {
|
|
return undefined;
|
|
}
|
|
return {
|
|
text: regUpdatesExpired.value
|
|
? props.t('Ineligible for updates released after {0}', [formattedTime.value])
|
|
: props.t('Eligible for updates until {0}', [formattedTime.value]),
|
|
title: regUpdatesExpired.value
|
|
? props.t('Ineligible as of {0}', [parsedTime.value])
|
|
: props.t('Eligible for updates for {0}', [parsedTime.value]),
|
|
};
|
|
});
|
|
|
|
const runDiff = () => {
|
|
parsedTime.value = buildStringFromValues(dateDiff((regExp.value).toString(), false));
|
|
};
|
|
|
|
let interval: string | number | NodeJS.Timeout | undefined;
|
|
onBeforeMount(() => {
|
|
runDiff();
|
|
interval = setInterval(() => {
|
|
runDiff();
|
|
}, 1000);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
clearInterval(interval);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid gap-y-16px">
|
|
<h1 class="text-24px">{{ t('Update Unraid OS') }}</h1>
|
|
<div class="flex flex-col md:flex-row gap-16px justify-start md:items-start md:justify-between">
|
|
<div class="inline-flex flex-wrap justify-center gap-8px">
|
|
<button
|
|
@click="updateOsActionsStore.viewCurrentReleaseNotes(t('{0} Release Notes', [osVersion]))"
|
|
class="group"
|
|
:title="t('View release notes')"
|
|
>
|
|
<UiBadge :icon="InformationCircleIcon" class="underline">
|
|
{{ t('Current Version {0}', [osVersion]) }}
|
|
</UiBadge>
|
|
</button>
|
|
|
|
<UiBadge
|
|
v-if="ineligibleText"
|
|
:color="'red'"
|
|
:icon="ExclamationTriangleIcon"
|
|
:title="regExpOutput?.text"
|
|
>
|
|
{{ t('Ineligible for new updates') }}
|
|
</UiBadge>
|
|
<UiBadge
|
|
v-else-if="rebootType === ''"
|
|
:color="available ? 'orange' : 'green'"
|
|
:icon="available ? BellAlertIcon : CheckCircleIcon"
|
|
:title="parsedReleaseTimestamp ? t('Last checked: {0}', [parsedReleaseTimestamp.relative]) : ''"
|
|
>
|
|
{{ available ? t('Update Available') : t('Up-to-date') }}
|
|
</UiBadge>
|
|
<UiBadge
|
|
v-else
|
|
:color="'yellow'"
|
|
:icon="ExclamationTriangleIcon"
|
|
>
|
|
{{ t(rebootTypeText) }}
|
|
</UiBadge>
|
|
</div>
|
|
|
|
<div>
|
|
<UpdateOsCheckButton
|
|
v-if="rebootType === ''"
|
|
:t="t" />
|
|
<BrandButton
|
|
v-else-if="rebootType === 'downgrade' || rebootType === 'upgrade'"
|
|
@click="updateOsActionsStore.rebootServer()"
|
|
:icon="ArrowPathIcon"
|
|
:text="rebootType === 'downgrade' ? t('Reboot Now to Downgrade') : t('Reboot Now to Update')" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|