mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-04 23:50:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: WIP progress on UPC

Browse Source
This commit is contained in:
Zack Spear
2023-05-31 14:16:01 -07:00
committed by Zack Spear
parent 55c492147f
commit 8c98f462f4
1 changed files with 71 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
components/UserProfile.ce.vue
View File

@@ -1,20 +1,32 @@
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useCallbackStore } from '~/store/callback';
import { useClipboard, useToggle, onClickOutside } from '@vueuse/core';
// import { vOnClickOutside } from '@vueuse/components';
// import { useCallbackStore } from '~/store/callback';
import { useServerStore } from '~/store/server';
import type { Server } from '~/types/server';
import 'tailwindcss/tailwind.css';
import '~/assets/main.css';
export interface Props {
server?: Server;
showDescription?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
showDescription: true,
});
const props = defineProps<Props>();
/**
* Dropdown handling
*/
const dropdown = ref(null);
const dropdownOpen = ref(false);
const toggleDropdown = useToggle(dropdownOpen);
onClickOutside(dropdown, (_event) => dropdownOpen.value = false);
const callbackStore = useCallbackStore();
// const callbackStore = useCallbackStore();
const serverStore = useServerStore();
const { name, description, guid, uptime, expireTime, state } = storeToRefs(serverStore);
const { name, description, guid, lanIp, uptime, expireTime, state } = storeToRefs(serverStore);
const uptimeOrExpiredTime = computed(() => {
return (state.value === 'TRIAL' || state.value === 'EEXPIRED') && expireTime.value && expireTime.value > 0
@@ -22,6 +34,28 @@ const uptimeOrExpiredTime = computed(() => {
: uptime.value;
});
/**
* Copy LAN IP on server name click
*/
let copyIpInterval: string | number | NodeJS.Timeout | undefined = undefined;
const { text, copy, copied, isSupported } = useClipboard({ source: lanIp.value ?? '' });
const showCopyNotSupported = ref<boolean>(false);
const copyLanIp = () => {
if (!isSupported) showCopyNotSupported.value = true;
copy(lanIp.value ?? '');
};
watch(showCopyNotSupported, async (newVal, oldVal) => {
if (newVal && oldVal === false) {
clearTimeout(copyIpInterval);
copyIpInterval = setTimeout(() => {
showCopyNotSupported.value = false;
}, 2000);
}
});
/**
*
*/
onBeforeMount(() => {
console.debug('[onBeforeMount]', { props }, typeof props.server);
if (!props.server) return console.error('Server data not present');
@@ -40,11 +74,39 @@ onBeforeMount(() => {
</script>
<template>
<div>
<div class="text-gamma text-12px text-right font-semibold leading-normal flex flex-row items-baseline justify-end pr-16px pt-4px">
<UptimeExpire :time="uptimeOrExpiredTime" :state="state" />
<div id="UserProfile" class="UserProfile text-alpha relative z-20 flex flex-col h-full pl-80px rounded">
<div class="text-gamma text-12px text-right font-semibold leading-normal flex flex-row items-baseline justify-end">
<upc-uptime-expire :time="uptimeOrExpiredTime" :state="state" />
<span class="px-12px">&bull;</span>
<ServerState />
<upc-server-state />
</div>
<div class="relative z-0 flex flex-row items-center justify-end gap-x-16px h-full">
<h1 class="relative text-18px border-t-0 border-r-0 border-l-0 border-b-2 border-transparent">
<template v-if="showDescription">
<span>{{ description }}</span>
<span class="text-grey-mid px-8px">&bull;</span>
</template>
<!-- @todo click to copy ip -->
<button @click="copyLanIp()" :title="`LAN IP ${lanIp}`">{{ name }}</button>
<span v-if="copied" class="text-12px absolute right-0 bg-gradient-to-r from-red to-orange text-center block w-100px rounded">{{ 'LAN IP Copied' }}</span>
<span v-if="showCopyNotSupported" class="text-12px font-semibold px-4px absolute right-0 bg-gradient-to-r from-red to-orange text-center block rounded">
LAN IP: <span class="select-all">{{ lanIp }}</span>
</span>
</h1>
<div class="block w-2px h-24px bg-grey-mid"></div>
<div ref="dropdown" class="relative flex items-center justify-end h-full">
<upc-dropdown-button @click="toggleDropdown" />
<upc-dropdown :show="dropdownOpen" />
</div>
</div>
</div>
</template>
<style lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>