Skip to content

Commit

Permalink
Merge pull request #84 from DurhamAcademy/dev
Browse files Browse the repository at this point in the history 
updating coaches page
  • Loading branch information
@Ryan-Bauroth
Ryan-Bauroth authored Feb 4, 2024
2 parents e82c5f6 + aef417c commit 3626ec6
Show file tree
Hide file tree
Showing 9 changed files with 294 additions and 167 deletions.
77 changes: 37 additions & 40 deletions components/Navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ const {usernameState, sessionState, logout}: {
updateUsernameState: () => Promise<boolean>
} = inject(loginStateKey)!
const events = ['2024test', '2024trial']
let selectedEvent = useState('selectedEvent', () => window.localStorage.getItem("event"))
let props = defineProps({
scoutMode: {
type: Boolean,
Expand All @@ -33,72 +37,65 @@ let links: VerticalNavigationLink[] = [
{ label: "Dashboard", to: "/dashboard" },
{ label: "Matches", to: "/matches" },
{ label: "Teams", to: "/teams" },
{ label: "Competitions", to: "/competitions" },
{ label: "Attachments", to: "/attachments" },
{ label: "Contacts", to: "/contacts" }
]
console.log(sessionState?.value?.userCtx?.roles)
if (sessionState?.value?.userCtx?.roles?.indexOf('_admin') != -1)
links.push({ label: "Users", to: "/users" })
const events = ['2024test', '2024trial']
let selectedEvent = ref(window.localStorage.getItem("event"))
function updateEvent(value: string){
window.localStorage.setItem("event", value)
}
</script>

<template>
<div 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">
<div class="flex">
<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" icon="i-heroicons-bars-3-20-solid" variant="ghost" @click="isOpen=!isOpen" :size="scoutMode?'sm':'xl'" square/>
<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>
<UPopover style="right: 1%; position: absolute;top: 50%;transform: translateY(-50%);">
<UButton variant="ghost">
<UAvatar v-if="usernameState!==undefined" :alt="usernameState" :size="scoutMode?'xs':'md'" class="m-1"/>
</UButton>
<template #panel>
<UCard class="p-2">
<template #header>
{{usernameState}}
</template>
<UFormGroup class="inputDiv" label="Event" name="event">
<USelectMenu v-model="selectedEvent" :options="events" @update:model-value ="value => {updateEvent(value)}"/>
</UFormGroup>
<template #footer>
<UButton block label="Logout" square @click="logout"/>
</template>
</UCard>
</template>
</UPopover>
</div>
</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="scoutMode?'sm':'xl'"/>
<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="selectedEvent" :options="events" @update:model-value ="value => {updateEvent(value)}"/>
</UFormGroup>
<template #footer>
<UButton block label="Logout" square @click="logout"/>
</template>
</UCard>
</template>
</UPopover>
</div>
</UCard>
</USlideover>
</template>

<style scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 0.3s ease-in-out;
.slide-nothing {
transform: translateX(0%);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(-100%) !important;
opacity: .5;
.usernameLabel{
overflow:hidden
}
.slide-nothing {
transform: translateX(0%);
.settingsPopupDiv{
position:absolute;
left:4%;
bottom: 2%
}
</style>
123 changes: 78 additions & 45 deletions components/OuterComponents.vue
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,83 @@
<script setup lang="ts">
import {useWindowSize} from "@vueuse/core";
import LoginState from "~/utils/authorization/LoginState";
import {loginStateKey} from "~/utils/keys";
import AddButton from "~/components/AddButton.vue";
import SessionResponse = PouchDB.Authentication.SessionResponse;
import type {VerticalNavigationLink} from "#ui/types";
import type {Ref} from "@vue/reactivity";
import type {UnwrapRef} from "vue";
import {useWindowSize} from "@vueuse/core";
import LoginState from "~/utils/authorization/LoginState";
import {loginStateKey} from "~/utils/keys";
import AddButton from "~/components/AddButton.vue";
import type {VerticalNavigationLink} from "#ui/types";
import type {Ref} from "@vue/reactivity";
import type {UnwrapRef} from "vue";
import {couchDBBaseURL} from "~/utils/URIs";
const {loginState,usernameState, sessionState, logout}: {
logout: () => Promise<void>;
loginState: Ref<UnwrapRef<LoginState>>;
sessionState: Ref<UnwrapRef<PouchDB.Authentication.SessionResponse>>;
usernameState: Ref<UnwrapRef<string>>;
updateUsernameState: () => Promise<boolean>
} = inject(loginStateKey)!
const usersDB = new PouchDB(`${couchDBBaseURL}/_users`, {skip_setup: true});
const session = await usersDB.getSession()
let {width, height} = useWindowSize()
let {width, height} = useWindowSize()
let route = useRoute()
let route = useRoute()
let links: VerticalNavigationLink[] = [
{ label: "Dashboard", to: "/dashboard" },
{ label: "Matches", to: "/matches" },
{ label: "Teams", to: "/teams" },
{ label: "Competitions", to: "/competitions" },
{ label: "Attachments", to: "/attachments" },
]
if (sessionState?.value?.userCtx?.roles?.indexOf('_admin') != -1)
links.push({ label: "Users", to: "/users" })
if (sessionState?.value?.userCtx?.roles?.indexOf('Coach') != -1)
links.push({ label: "Coach Preview", to: "/coach-preview" })
const events = ['2024test', '2024trial']
const selectedEvent = useState('selectedEvent', () => window.localStorage.getItem("event"))
function updateEvent(value: string) {
window.localStorage.setItem("event", value)
}
const {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)!
let links: VerticalNavigationLink[] = [
{label: "Dashboard", to: "/dashboard"},
{label: "Matches", to: "/matches"},
{label: "Teams", to: "/teams"},
{label: "Attachments", to: "/attachments"}
]
if (session.userCtx.roles?.indexOf("_admin") != -1) {
links.push({label: "Users", to: "/users"})
}
if (sessionState?.value?.userCtx?.roles?.indexOf('Coach') != -1)
links.push({ label: "Coach Preview", to: "/coach-preview" })
</script>

<template>
<div class="flex min-h-screen w-screen flex-col">
<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">
<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-full max-w-full">
<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">
<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 text-zinc-900 max-w-32">
{{ usernameState }}
</div>
</template>
<UFormGroup class="inputDiv" label="Event" name="event">
<USelectMenu v-model="selectedEvent" :options="events"
@update:model-value="value => {updateEvent(value)}"/>
</UFormGroup>
<template #footer>
<UButton block label="Logout" square @click="logout"/>
</template>
</UCard>
</template>
</UPopover>
</div>
</UCard>
</div>
</Transition>
Expand All @@ -54,24 +90,21 @@
</template>

<style scoped>
/*
Enter and leave animations can use different
durations and timing functions.
*/
.width-fade-enter-active,
.width-fade-leave-active {
transition: all 0.3s ease-in-out;
.vis {
width: 20em;
left: 0;
position: relative;
}
.width-fade-enter-from,
.width-fade-leave-to {
width: 0em !important;
opacity: 0;
.usernameLabel {
overflow: hidden
}
.vis {
width: 20em;
left: 0em;
position:relative;
.settingsPopupDiv {
position: absolute;
left: 5.7%;
bottom: 2.15%
}
</style>
6 changes: 5 additions & 1 deletion components/ViewAttachment.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ const props = defineProps({value: Boolean, name: String, author: String, team: N
<UCard>
<template #header>
<div class="flex justify-between">
<h1>{{(name.length==0)?'[No Name]':name}}</h1>
<div>
<h1>{{(name.length==0)?'[No Name]':'Name: '+name}}</h1>
<h2>{{(team==0)?'[No Team #]':'Team #: '+team}}</h2>
</div>

<UPopover mode="hover">
<UAvatar :alt="author?author:''"/>
<template #panel>
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@vueuse/core": "10.4.1",
"chart.js": "^3.9.1",
"compressorjs": "1.2.1",
"heic2any": "^0.0.4",
"nuxt": "^3.9.1",
"pouchdb": "8.0.1",
"pouchdb-authentication": "1.1.3",
Expand Down
Loading

0 comments on commit 3626ec6

Please sign in to comment.