mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-04-23 07:45:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: query online for connect status

Browse Source
This commit is contained in:
Zack Spear
2023-07-21 16:05:40 -07:00
committed by Zack Spear
parent cb60fb1283
commit 80d1c70e35
6 changed files with 30 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/UserProfile/DropdownConnectStatus.fragment.ts
+3 -11
View File
@@ -1,15 +1,7 @@
import { graphql } from '~/composables/gql/gql';
export const TEST_FRAGMENT = graphql(/* GraphQL */`
fragment TestFragment on Cloud {
error
}
`);
export const TEST_QUERY = graphql(/* GraphQL */`
query cloudError {
cloud {
...TestFragment
}
export const ONLINE_QUERY = graphql(/* GraphQL */`
query OnlineStatus {
online
}
`);
components/UserProfile/DropdownConnectStatus.vue
+14 -22
View File
@@ -1,43 +1,35 @@
<script setup lang="ts">
import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/vue/24/solid';
import { provideApolloClient, useQuery } from '@vue/apollo-composable';
type ApiOnlineStatus = 'online'|'offline';
const onlineStatus = ref<ApiOnlineStatus>('online');
const apiLoading = ref(false);
import { ONLINE_QUERY } from './DropdownConnectStatus.fragment';
import { useUnraidApiStore } from '~/store/unraidApi';
// import { useQuery } from '@vue/apollo-composable';
const unraidApiStore = useUnraidApiStore();
// import {
// TEST_FRAGMENT,
// TEST_QUERY,
// } from './DropdownConnectStatus.fragment';
// import { useFragment } from '@/composables/gql/fragment-masking';
const { loading, result } = provideApolloClient(unraidApiStore.unraidApiClient)(() => useQuery(ONLINE_QUERY));
const online = computed(() => result.value ?? null);
// const { result: newResult } = useQuery(
// TEST_QUERY,
// );
// const result = computed(() => useFragment(TEST_FRAGMENT, newResult.value?.cloud));
// watch(result, (newVal, oldVal) => {
// console.log('result', newVal, oldVal);
// });
watch(online, (newVal, oldVal) => {
console.log('[watch:online]', newVal, oldVal);
});
</script>
<template>
<li class="px-8px flex flex-col items-center">
<template v-if="apiLoading">
<template v-if="loading">
<BrandLoading class="w-36px mx-auto" />
<span class="text-12px italic opacity-80">{{ 'Loading Connect status…' }}</span>
</template>
<span
v-else
class="w-full flex flex-row justify-start items-center gap-x-8px"
:title="onlineStatus !== 'online' ? 'Connect is not connected to Unraid cloud services' : 'Connect is connected to Unraid cloud services'"
:title="online ? 'Connect is connected to Unraid cloud services' : 'Connect is not connected to Unraid cloud services'"
>
<!-- <span class="block w-12px h-12px bg-green-600 rounded-full"></span> -->
<CheckCircleIcon v-if="onlineStatus === 'online'" class="text-green-500 w-16px h-16px" />
<CheckCircleIcon v-if="online" class="text-green-500 w-16px h-16px" />
<ExclamationTriangleIcon v-else class="text-red-500 w-16px h-16px" />
<span>{{ onlineStatus !== 'online' ? 'Disconnected' : 'Connected' }}</span>
<span>{{ online ? 'Connected' : 'Disconnected' }}</span>
</span>
</li>
</template>
</template>