Skip to content

Commit a8aafdf

Browse files
pujitmpujitm
committed
chore(web): add pinia store and select dropdown for dummy server state
1 parent cba1551 commit a8aafdf

File tree

4 files changed

+105
-66
lines changed

4 files changed

+105
-66
lines changed

‎web/_data/serverState.ts‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import type {
1111
ServerState,
1212
// ServerUpdateOsResponse,
1313
} from '~/types/server';
14+
import { defineStore } from 'pinia'
1415

1516
// dayjs plugins
1617
// extend(customParseFormat);
@@ -132,20 +133,7 @@ const osVersionBranch = 'stable';
132133
// }
133134
// };
134135

135-
export const serverState: Server = {
136-
// activationCodeData: {
137-
// code: 'CC2KP3TDRF',
138-
// partnerName: 'OEM Partner',
139-
// partnerUrl: 'https://unraid.net/OEM+Partner',
140-
// sysModel: 'OEM Partner v1',
141-
// comment: 'OEM Partner NAS',
142-
// caseIcon: 'case-model.png',
143-
// header: '#ffffff',
144-
// headermetacolor: '#eeeeee',
145-
// background: '#000000',
146-
// showBannerGradient: 'yes',
147-
// partnerLogo: true,
148-
// },
136+
const baseServerState: Server = {
149137
avatar: 'https://source.unsplash.com/300x300/?portrait',
150138
config: {
151139
id: 'config-id',
@@ -204,3 +192,33 @@ export const serverState: Server = {
204192
username: 'zspearmint',
205193
wanFQDN: '',
206194
};
195+
196+
type ServerSelector = 'default' | 'oemActivation';
197+
const defaultServer: ServerSelector = 'default';
198+
199+
const servers: Record<ServerSelector, Server> = {
200+
default: baseServerState,
201+
/** shows oem activation flow */
202+
oemActivation: {
203+
...baseServerState,
204+
activationCodeData: {
205+
code: 'CC2KP3TDRF',
206+
partnerName: 'OEM Partner',
207+
partnerUrl: 'https://unraid.net/OEM+Partner',
208+
sysModel: 'OEM Partner v1',
209+
comment: 'OEM Partner NAS',
210+
caseIcon: 'case-model.png',
211+
header: '#ffffff',
212+
headermetacolor: '#eeeeee',
213+
background: '#000000',
214+
showBannerGradient: 'yes',
215+
partnerLogo: true,
216+
},
217+
},
218+
};
219+
220+
export const useDummyServerStore = defineStore('_dummyServer',() => {
221+
const selector = ref<ServerSelector>(defaultServer);
222+
const serverState = computed(() => servers[selector.value] ?? servers.default);
223+
return { selector, serverState };
224+
})

‎web/components/DummyServerSwitcher.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script lang="ts" setup>
2+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@unraid/ui';
3+
import { useDummyServerStore } from '~/_data/serverState';
4+
5+
const store = useDummyServerStore();
6+
const { selector, serverState } = storeToRefs(store);
7+
8+
const updateSelector = (val: string) => {
9+
console.log('typeof selector', typeof selector);
10+
console.log('new dummy server state:', val);
11+
selector.value = val;
12+
};
13+
</script>
14+
15+
<template>
16+
<div class="flex flex-col gap-2 border-solid border-2 p-2 border-r-2">
17+
<h1 class="text-lg">Server State Selection</h1>
18+
<details>
19+
<summary>Initial Server State: {{ selector }}</summary>
20+
<pre>{{ JSON.stringify(serverState, null, 4) }}</pre>
21+
</details>
22+
<!-- <select v-model="selector">
23+
<option value="default">Default</option>
24+
<option value="oemActivation">OEM Activation</option>
25+
</select> -->
26+
<Select v-model="selector" @update:model-value="updateSelector">
27+
<SelectTrigger>
28+
<SelectValue placeholder="Select an initial state" />
29+
</SelectTrigger>
30+
<SelectContent>
31+
<SelectItem value="default">Default</SelectItem>
32+
<SelectItem value="oemActivation">OEM Activation</SelectItem>
33+
</SelectContent>
34+
</Select>
35+
</div>
36+
</template>
37+
38+
<style lang="postcss">
39+
/* Import unraid-ui globals first */
40+
@import '@unraid/ui/styles';
41+
@import '../assets/main.css';
42+
</style>

‎web/pages/index.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<script lang="ts" setup>
22
import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
33
import { BrandButton, BrandLogo } from '@unraid/ui';
4-
import { serverState } from '~/_data/serverState';
4+
import { useDummyServerStore } from '~/_data/serverState';
55
import AES from 'crypto-js/aes';
66
77
import type { SendPayloads } from '~/store/callback';
88
99
import SsoButtonCe from '~/components/SsoButton.ce.vue';
1010
11+
const serverStore = useDummyServerStore();
12+
const { serverState } = storeToRefs(serverStore);
1113
const { registerEntry } = useCustomElements();
1214
onBeforeMount(() => {
1315
registerEntry('UnraidComponents');
@@ -80,6 +82,8 @@ onMounted(() => {
8082
<div class="pb-12 mx-auto">
8183
<client-only>
8284
<div class="flex flex-col gap-6 p-6">
85+
<DummyServerSwitcher />
86+
<DevSettings />
8387
<ColorSwitcherCe />
8488
<h2 class="text-xl font-semibold font-mono">Vue Components</h2>
8589
<h3 class="text-lg font-semibold font-mono">UserProfileCe</h3>

‎web/pages/webComponents.vue‎

Lines changed: 26 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script lang="ts" setup>
2-
import { serverState } from '~/_data/serverState';
2+
import { useDummyServerStore } from '~/_data/serverState';
33
4+
const serverStore = useDummyServerStore();
5+
const { serverState } = storeToRefs(serverStore);
46
const { registerEntry } = useCustomElements();
57
onBeforeMount(() => {
68
registerEntry('UnraidComponents');
@@ -12,12 +14,8 @@ onBeforeMount(() => {
1214
<unraid-i18n-host
1315
class="flex flex-col gap-6 p-6 mx-auto text-black bg-white dark:text-white dark:bg-black"
1416
>
15-
<h2 class="text-xl font-semibold font-mono">
16-
Web Components
17-
</h2>
18-
<h3 class="text-lg font-semibold font-mono">
19-
UserProfileCe
20-
</h3>
17+
<h2 class="text-xl font-semibold font-mono">Web Components</h2>
18+
<h3 class="text-lg font-semibold font-mono">UserProfileCe</h3>
2119
<header class="bg-header-background-color py-4 flex flex-row justify-between items-center">
2220
<div class="inline-flex flex-col gap-4 items-start px-4">
2321
<a href="https://unraid.net" target="_blank">
@@ -27,59 +25,36 @@ onBeforeMount(() => {
2725
</div>
2826
<unraid-user-profile :server="JSON.stringify(serverState)" />
2927
</header>
30-
<hr class="border-black dark:border-white" >
28+
<hr class="border-black dark:border-white" />
3129

32-
<h3 class="text-lg font-semibold font-mono">
33-
ConnectSettingsCe
34-
</h3>
30+
<h3 class="text-lg font-semibold font-mono">ConnectSettingsCe</h3>
3531
<ConnectSettingsCe />
36-
<hr class="border-black dark:border-white">
37-
<h3 class="text-lg font-semibold font-mono">
38-
DownloadApiLogsCe
39-
</h3>
32+
<hr class="border-black dark:border-white" />
33+
<h3 class="text-lg font-semibold font-mono">DownloadApiLogsCe</h3>
4034
<unraid-download-api-logs />
41-
<hr class="border-black dark:border-white">
42-
<h3 class="text-lg font-semibold font-mono">
43-
AuthCe
44-
</h3>
35+
<hr class="border-black dark:border-white" />
36+
<h3 class="text-lg font-semibold font-mono">AuthCe</h3>
4537
<unraid-auth />
46-
<hr class="border-black dark:border-white">
47-
<h3 class="text-lg font-semibold font-mono">
48-
WanIpCheckCe
49-
</h3>
38+
<hr class="border-black dark:border-white" />
39+
<h3 class="text-lg font-semibold font-mono">WanIpCheckCe</h3>
5040
<unraid-wan-ip-check php-wan-ip="47.184.85.45" />
51-
<hr class="border-black dark:border-white">
52-
<h3 class="text-lg font-semibold font-mono">
53-
HeaderOsVersion
54-
</h3>
41+
<hr class="border-black dark:border-white" />
42+
<h3 class="text-lg font-semibold font-mono">HeaderOsVersion</h3>
5543
<unraid-header-os-version />
56-
<hr class="border-black dark:border-white">
57-
<h3 class="text-lg font-semibold font-mono">
58-
UpdateOsCe
59-
</h3>
44+
<hr class="border-black dark:border-white" />
45+
<h3 class="text-lg font-semibold font-mono">UpdateOsCe</h3>
6046
<unraid-update-os />
61-
<hr class="border-black dark:border-white">
62-
<h3 class="text-lg font-semibold font-mono">
63-
DowngradeOsCe
64-
</h3>
65-
<unraid-downgrade-os
66-
restore-release-date="2022-10-10"
67-
restore-version="6.11.2"
68-
/>
69-
<hr class="border-black dark:border-white">
70-
<h3 class="text-lg font-semibold font-mono">
71-
RegistrationCe
72-
</h3>
47+
<hr class="border-black dark:border-white" />
48+
<h3 class="text-lg font-semibold font-mono">DowngradeOsCe</h3>
49+
<unraid-downgrade-os restore-release-date="2022-10-10" restore-version="6.11.2" />
50+
<hr class="border-black dark:border-white" />
51+
<h3 class="text-lg font-semibold font-mono">RegistrationCe</h3>
7352
<unraid-registration />
74-
<hr class="border-black dark:border-white">
75-
<h3 class="text-lg font-semibold font-mono">
76-
ModalsCe
77-
</h3>
53+
<hr class="border-black dark:border-white" />
54+
<h3 class="text-lg font-semibold font-mono">ModalsCe</h3>
7855
<!-- uncomment to test modals <unraid-modals />-->
79-
<hr class="border-black dark:border-white">
80-
<h3 class="text-lg font-semibold font-mono">
81-
SSOSignInButtonCe
82-
</h3>
56+
<hr class="border-black dark:border-white" />
57+
<h3 class="text-lg font-semibold font-mono">SSOSignInButtonCe</h3>
8358
<unraid-sso-button :ssoenabled="serverState.ssoEnabled" />
8459
</unraid-i18n-host>
8560
</client-only>

0 commit comments

Comments
 (0)