Skip to content

Commit

Permalink
Merge pull request #220 from DurhamAcademy/production
Browse files Browse the repository at this point in the history 
updating dev with new production changes
  • Loading branch information
@PrestonSwigart
PrestonSwigart authored Oct 24, 2024
2 parents 4504ad7 + 8077f9c commit f54460f
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 107 deletions.
209 changes: 118 additions & 91 deletions components/website-utils/Navbar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,145 @@
<script setup lang="ts">
import LoginState from '~/utils/authorization/LoginState'
import { loginStateKey } from '~/utils/keys'
import PouchDB from 'pouchdb'
import { eventOptions } from '~/utils/eventOptions'
import { useEventKey } from '~/composables/useEventKey'
import LoginState from '~/utils/authorization/LoginState';
import { loginStateKey } from '~/utils/keys';
import PouchDB from 'pouchdb';
import { eventOptions } from '~/utils/eventOptions';
import { useEventKey } from '~/composables/useEventKey';
const {
usernameState,
sessionState,
logout,
usernameState,
sessionState,
logout,
}: {
logout: () => Promise<void>
// noinspection TypeScriptUnresolvedReference
loginState: Ref<UnwrapRef<LoginState>>
// noinspection TypeScriptUnresolvedReference
sessionState: Ref<UnwrapRef<PouchDB.Authentication.SessionResponse>>
// noinspection TypeScriptUnresolvedReference
usernameState: Ref<UnwrapRef<string>>
updateUsernameState: () => Promise<boolean>
} = inject(loginStateKey)!
logout: () => Promise<void>;
// noinspection TypeScriptUnresolvedReference
loginState: Ref<UnwrapRef<LoginState>>;
// noinspection TypeScriptUnresolvedReference
sessionState: Ref<UnwrapRef<PouchDB.Authentication.SessionResponse>>;
// noinspection TypeScriptUnresolvedReference
usernameState: Ref<UnwrapRef<string>>;
updateUsernameState: () => Promise<boolean>;
} = inject(loginStateKey)!;
const events = eventOptions
const currentEvent = useEventKey()
const events = eventOptions;
const currentEvent = useEventKey();
watch(currentEvent, (value) => {
window.localStorage.setItem('currentEvent', value)
window.dispatchEvent(new Event('event-changed'))
})
watch(currentEvent, value => {
window.localStorage.setItem('currentEvent', value);
window.dispatchEvent(new Event('event-changed'));
});
let props = defineProps({
scoutMode: {
type: Boolean,
default: false,
},
disableSidebar: {
type: Boolean,
default: false,
},
})
scoutMode: {
type: Boolean,
default: false,
},
disableSidebar: {
type: Boolean,
default: false,
},
});
let route = useRoute()
let route = useRoute();
let isOpen = ref(false)
let isOpen = ref(false);
let links: VerticalNavigationLink[] = [
{ label: 'Dashboard', to: '/dashboard' },
{ label: 'Matches', to: '/matches' },
{ label: 'Teams', to: '/teams' },
{ label: 'Predict', to: '/predict' },
{ label: 'Pit', to: '/pit' },
]
console.log(sessionState?.value?.userCtx?.roles)
if (sessionState?.value?.userCtx?.roles?.indexOf('_admin') != -1) links.push({ label: 'Users', to: '/users' })
{ label: 'Dashboard', to: '/dashboard' },
{ label: 'Matches', to: '/matches' },
{ label: 'Teams', to: '/teams' },
{ label: 'Predict', to: '/predict' },
];
console.log(sessionState?.value?.userCtx?.roles);
if (sessionState?.value?.userCtx?.roles?.indexOf('_admin') != -1)
links.push({ label: 'Users', to: '/users' });
</script>

<template>
<div
<div
v-if="!disableSidebar"
class="py-2.5 px-5 z-10 bg-opacity-50 bg-gray-200 dark:bg-gray-700 w-screen navbar-right sticky top-0 flex-row justify-between backdrop-blur-lg min-h-16"
>
<Transition name="slide-fade">
<UButton
class="slide-nothing"
v-if="!disableSidebar"
class="py-2.5 px-5 z-10 bg-opacity-50 bg-gray-200 dark:bg-gray-700 w-screen navbar-right sticky top-0 flex-row justify-between backdrop-blur-lg min-h-16"
>
<Transition name="slide-fade">
<UButton
class="slide-nothing"
v-if="!disableSidebar"
icon="i-heroicons-bars-3-20-solid"
variant="ghost"
@click="isOpen = !isOpen"
:size="'xl'"
square
style="position: absolute; top: 50%; transform: translateY(-50%)"
/>
</Transition>
</div>
<USlideover v-model="isOpen" side="left" :appear="!disableSidebar">
<UCard class="flex flex-col h-screen">
<template #header>
<UButton icon="i-heroicons-bars-3-20-solid" variant="ghost" @click="isOpen = !isOpen" :size="'xl'" />
</template>
<UVerticalNavigation :links="links" />
<div class="settingsPopupDiv">
<UPopover>
<UButton icon="i-heroicons-cog-6-tooth" square :size="'xl'" :variant="'ghost'" :color="'gray'" />
<template #panel>
<UCard class="p-2">
<template #header>
<div class="usernameLabel max-w-32 text-zinc-900">
{{ usernameState }}
</div>
</template>
<UFormGroup class="inputDiv" label="Event" name="event">
<USelectMenu v-model="currentEvent" :options="events" />
</UFormGroup>
<template #footer>
<UButton block label="Logout" square @click="logout" />
</template>
</UCard>
</template>
</UPopover>
</div>
</UCard>
</USlideover>
icon="i-heroicons-bars-3-20-solid"
variant="ghost"
@click="isOpen = !isOpen"
:size="'xl'"
square
style="position: absolute; top: 50%; transform: translateY(-50%)"
/>
</Transition>
</div>
<USlideover
v-model="isOpen"
side="left"
:appear="!disableSidebar"
>
<UCard class="flex flex-col h-screen">
<template #header>
<UButton
icon="i-heroicons-bars-3-20-solid"
variant="ghost"
@click="isOpen = !isOpen"
:size="'xl'"
/>
</template>
<UVerticalNavigation :links="links" />
<div class="settingsPopupDiv">
<UPopover>
<UButton
icon="i-heroicons-cog-6-tooth"
square
:size="'xl'"
:variant="'ghost'"
:color="'gray'"
/>
<template #panel>
<UCard class="p-2">
<template #header>
<div class="usernameLabel max-w-32 text-zinc-900">
{{ usernameState }}
</div>
</template>
<UFormGroup
class="inputDiv"
label="Event"
name="event"
>
<USelectMenu
v-model="currentEvent"
:options="events"
/>
</UFormGroup>
<template #footer>
<UButton
block
label="Logout"
square
@click="logout"
/>
</template>
</UCard>
</template>
</UPopover>
</div>
</UCard>
</USlideover>
</template>

<style scoped>
.slide-nothing {
transform: translateX(0%);
transform: translateX(0%);
}
.usernameLabel {
overflow: hidden;
overflow: hidden;
}
.settingsPopupDiv {
position: absolute;
left: 4%;
bottom: 2%;
position: absolute;
left: 4%;
bottom: 2%;
}
</style>
34 changes: 27 additions & 7 deletions components/website-utils/OuterComponents.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ let links: VerticalNavigationLink[] = [
{ label: 'Matches', to: '/matches' },
{ label: 'Teams', to: '/teams' },
{ label: 'Predict', to: '/predict' },
{ label: 'Pit', to: '/pit' },
];
if (
sessionState.value.userCtx.roles?.indexOf('admin') != -1 ||
Expand All @@ -57,13 +56,22 @@ if (

<template>
<div class="flex min-h-screen w-screen flex-col">
<Navbar class="flex-grow basis-auto" :disable-sidebar="width > 800" />
<Navbar
class="flex-grow basis-auto"
:disable-sidebar="width > 800"
/>
<div
class="flex flex-grow flex-shrink basis-auto flex-row w-screen overflow-x-clip max-h-none place-content-around min-h-full"
>
<Transition name="width-fade">
<div v-show="width > 800" class="vis min-h-screen h-screen max-w-full">
<UCard class="h-full" :ui="{ rounded: 'rounded-none' }">
<div
v-show="width > 800"
class="vis min-h-screen h-screen max-w-full"
>
<UCard
class="h-full"
:ui="{ rounded: 'rounded-none' }"
>
<UVerticalNavigation :links="links" />
<div class="settingsPopupDiv">
<div class="flex">
Expand Down Expand Up @@ -114,8 +122,15 @@ if (
</span>
</div>
</template>
<UFormGroup class="inputDiv" label="Event" name="event">
<USelectMenu v-model="currentEvent" :options="events" />
<UFormGroup
class="inputDiv"
label="Event"
name="event"
>
<USelectMenu
v-model="currentEvent"
:options="events"
/>
</UFormGroup>
<br />
<UButton
Expand All @@ -127,7 +142,12 @@ if (
@click="navigateTo('/settings')"
/>
<template #footer>
<UButton block label="Logout" square @click="logout" />
<UButton
block
label="Logout"
square
@click="logout"
/>
</template>
</UCard>
</template>
Expand Down
9 changes: 0 additions & 9 deletions pages/pit.vue
View file

This file was deleted.

0 comments on commit f54460f

Please sign in to comment.