mirror of
https://github.com/unraid/api.git
synced 2026-04-28 03:01:12 -05:00
Zack Spear
105 lines
3.1 KiB
Vue
105 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
||
/**
|
||
* @todo require keyfile to be set before allowing user to check for updates
|
||
* @todo require keyfile to update
|
||
* @todo require valid guid / server state to update
|
||
*/
|
||
import {
|
||
ArrowPathIcon,
|
||
ArrowSmallRightIcon,
|
||
ArrowTopRightOnSquareIcon,
|
||
BellAlertIcon,
|
||
ShieldExclamationIcon,
|
||
WrenchScrewdriverIcon,
|
||
} from '@heroicons/vue/24/solid';
|
||
import { storeToRefs } from 'pinia';
|
||
import { ref, watchEffect } from 'vue';
|
||
|
||
import 'tailwindcss/tailwind.css';
|
||
import '~/assets/main.css';
|
||
|
||
import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
|
||
import type { UserProfileLink } from '~/types/userProfile';
|
||
|
||
const props = defineProps<{
|
||
t: any;
|
||
}>();
|
||
|
||
const updateOsStore = useUpdateOsStore();
|
||
const updateOsActionsStore = useUpdateOsActionsStore();
|
||
|
||
const { available } = storeToRefs(updateOsStore);
|
||
const { ineligibleText } = storeToRefs(updateOsActionsStore);
|
||
|
||
const updateButton = ref<UserProfileLink | undefined>();
|
||
|
||
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 headingIcon = computed(() => {
|
||
if (ineligibleText.value) {
|
||
return ShieldExclamationIcon;
|
||
}
|
||
if (available.value) {
|
||
return BellAlertIcon;
|
||
}
|
||
return ArrowPathIcon;
|
||
});
|
||
|
||
watchEffect(() => {
|
||
if (available.value) {
|
||
updateButton.value = updateOsActionsStore.initUpdateOsCallback();
|
||
} else {
|
||
updateButton.value = undefined;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<UiCardWrapper :error="!!ineligibleText" :increased-padding="true">
|
||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-20px sm:gap-24px">
|
||
<div class="grid gap-y-16px">
|
||
<h3 class="text-20px font-semibold leading-normal flex flex-row items-center gap-8px">
|
||
<component :is="headingIcon" class="w-20px shrink-0" />
|
||
<span>
|
||
{{ heading }}
|
||
</span>
|
||
</h3>
|
||
<div class="text-16px leading-relaxed whitespace-normal" :class="!ineligibleText ? 'opacity-75' : ''">
|
||
<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="ineligibleText"
|
||
btn-style="white"
|
||
href="/Tools/Registration"
|
||
:icon="WrenchScrewdriverIcon"
|
||
:icon-right="ArrowSmallRightIcon"
|
||
:text="t('Learn more and fix')"
|
||
/>
|
||
<BrandButton
|
||
v-else-if="available && updateButton"
|
||
@click="updateButton?.click"
|
||
:external="updateButton?.external"
|
||
:icon-right="ArrowTopRightOnSquareIcon"
|
||
:name="updateButton?.name"
|
||
:text="t('View changelog & update')" />
|
||
</div>
|
||
</UiCardWrapper>
|
||
</template>
|
||
|
||
<style lang="postcss">
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
</style>
|