Skip to content

Commit

Permalink
Make the system settings a bit nicer
Browse files Browse the repository at this point in the history
  • Loading branch information
swantzter committed Jul 10, 2023
1 parent bf3d611 commit 2a93e12
Show file tree
Hide file tree
Showing 12 changed files with 170 additions and 127 deletions.
14 changes: 7 additions & 7 deletions package-lock.json

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

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"dependencies": {
"@apollo/client": "^3.7.17",
"@github/time-elements": "^3.1.2",
"@ropescore/components": "file:../components/ropescore-components-1.6.1.tgz",
"@ropescore/components": "^1.6.3",
"@sentry/tracing": "^7.57.0",
"@sentry/vue": "^7.57.0",
"@vue/apollo-composable": "^4.0.0-beta.8",
Expand Down
10 changes: 7 additions & 3 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<div
class="grid grid-cols-1 min-h-[100vh] w-full"
:class="{
'grid-rows-[3.5rem,auto,2rem]': !fullscreen,
'grid-rows-[3.5rem,auto,2rem,2rem]': !fullscreen,
'grid-rows-1': fullscreen,
'h-[100vh]': fullscreen,
'overflow-y-hidden': fullscreen,
dark: darkMode === 'dark'
}"
>
<header v-if="!fullscreen" class="col-span-2 bg-gray-100 flex justify-between items-center px-4 sticky top-0 z-1000">
<header v-if="!fullscreen" class="bg-gray-100 flex justify-between items-center px-4 sticky top-0 z-1000">
<router-link to="/">
<span class="text-2xl font-semibold">RopeScore Live</span>
</router-link>
Expand All @@ -32,11 +32,14 @@
</button-link>
</nav>
</header>

<main v-if="!fullscreen" class="px-2 py-4">
<router-view />
</main>
<router-view v-else />
<footer v-if="!fullscreen" class="flex col-span-2 justify-between items-center bg-gray-100 dark:bg-gray-700 dark:text-white px-4">

<system-settings-footer v-if="!fullscreen" />
<footer v-if="!fullscreen" class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 dark:text-white px-4">
<span>&copy; Swantzter 2018-2023</span>
<span>{{ version }}</span>
</footer>
Expand All @@ -49,6 +52,7 @@ import { useRoute } from 'vue-router'
import { useLocalStorage } from '@vueuse/core'
import { ButtonLink, TextButton } from '@ropescore/components'
import SystemSettingsFooter from './components/SystemSettingsFooter.vue'
const route = useRoute()
Expand Down
27 changes: 0 additions & 27 deletions src/components/SystemName.vue

This file was deleted.

49 changes: 49 additions & 0 deletions src/components/SystemSettingsFooter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<script setup lang="ts">
import { TextField, TextButton, SelectField } from '@ropescore/components'
import { apiDomain, localManual, localApis } from '../apollo'
import { useAuth } from '../hooks/auth'
import { ref } from 'vue'
const auth = useAuth()
const newName = ref('')
</script>

<template>
<div
class="grid bg-white border-t px-4 items-stretch gap-4"
:class="{
'grid-cols-1': !auth.isLoggedIn.value,
'grid-cols-[max-content,max-content,auto]': auth.isLoggedIn.value
}"
>
<div class="flex items-center gap-2">
<span>Server: {{ apiDomain }}</span>
<select-field
v-model="localManual"
dense
label="Preferred Server"
:data-list="localApis"
class="min-w-[14ch]"
/>
</div>

<p v-if="auth.isLoggedIn.value" class="border-l pl-4 flex items-center">
System ID: <code class="bg-gray-100 px-2 rounded">{{ auth.loading.value ? 'Loading...' : auth.user.value?.id }}</code>
</p>

<form v-if="auth.isLoggedIn.value" class="border-l pl-4 grid grid-cols-[max-content,auto,max-content] gap-2 items-center" @submit.prevent="auth.update({ name: newName })">
System name:
<text-field
:model-value="auth.user.value?.name ?? ''"
label="System Name"
dense
:disabled="auth.loadingUpdate.value"
@update:model-value="newName = $event"

Check failure on line 42 in src/components/SystemSettingsFooter.vue

View workflow job for this annotation

GitHub Actions / lint

Type 'string | number' is not assignable to type 'string'.
/>
<text-button color="blue" dense :loading="auth.loadingUpdate.value">
Update
</text-button>
</form>
</div>
</template>
4 changes: 4 additions & 0 deletions src/hooks/auth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ export function useAuth () {
const { loading, refetch, result } = useMeQuery({})
const token = useLocalStorage<null | string>('rs-auth', null)
const registerMutation = useRegisterUserMutation()
const loadingRegister = registerMutation.loading
const updateMutation = useUpdateUserMutation()
const loadingUpdate = updateMutation.loading

watch(token, (nT, pT) => {
console.log('token', nT)
Expand Down Expand Up @@ -39,6 +41,8 @@ export function useAuth () {
return {
token,
loading,
loadingRegister,
loadingUpdate,
user,
isLoggedIn,

Expand Down
19 changes: 16 additions & 3 deletions src/hooks/stream-pools.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,21 @@ interface StreamPool {
label?: number
}

const pools = useLocalStorage<StreamPool[]>('rs-stream-pools', [])
interface ServoPoolBackgroundsConfig {
system: 'servo'
url: string
}

interface DeviceStreamSettings {
poolBackgrounds?: ServoPoolBackgroundsConfig | null
}

const pools = useLocalStorage<StreamPool[]>('rs-device-stream-pools', [])
const settings = useLocalStorage<DeviceStreamSettings>('rs-device-stream-settings', {})

export function useStreamPools () {
return pools
export function useDeviceStreamPools () {
return {
pools,
settings
}
}
32 changes: 25 additions & 7 deletions src/router.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,37 @@
import { createWebHistory, createRouter } from 'vue-router'
import { useAuth } from './hooks/auth'

export default createRouter({
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: async () => import('./views/Home.vue') },
{ path: '/auth', component: async () => import('./views/Auth.vue') },

{ path: '/groups', component: async () => import('./views/Groups.vue') },
{ path: '/groups/:groupId/live', component: async () => import('./views/Live.vue'), meta: { fullscreen: true } },
{ path: '/groups/:groupId/on-floor', component: async () => import('./views/OnFloor.vue'), meta: { fullscreen: true } },
{ path: '/groups/:groupId/next-up', component: async () => import('./views/NextUp.vue'), meta: { fullscreen: true } },
{ path: '/groups', component: async () => import('./views/Groups.vue'), meta: { authRequired: true } },
{ path: '/groups/:groupId/live', component: async () => import('./views/Live.vue'), meta: { fullscreen: true, authRequired: true } },
{ path: '/groups/:groupId/on-floor', component: async () => import('./views/OnFloor.vue'), meta: { fullscreen: true, authRequired: true } },
{ path: '/groups/:groupId/next-up', component: async () => import('./views/NextUp.vue'), meta: { fullscreen: true, authRequired: true } },

{ path: '/device-stream', component: async () => import('./views/DeviceStreamSetup.vue') },
{ path: '/device-stream/live', component: async () => import('./views/DeviceStreamLive.vue'), meta: { fullscreen: true } },
{ path: '/device-stream', component: async () => import('./views/DeviceStreamSetup.vue'), meta: { authRequired: true } },
{ path: '/device-stream/live', component: async () => import('./views/DeviceStreamLive.vue'), meta: { fullscreen: true, authRequired: true } },

{ path: '/podium', component: async () => import('./views/PodiumConfig.vue') },
{ path: '/podium/live', component: async () => import('./views/PodiumLive.vue'), meta: { fullscreen: true } }
]
})
export default router

router.beforeEach((to) => {
if (!to.meta.authRequired) return

const auth = useAuth()
if (auth.token.value == null) {
return {
path: '/auth',
query: {
'return-to': encodeURIComponent(to.fullPath)
},
replace: true
}
}
})
54 changes: 54 additions & 0 deletions src/views/Auth.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useAuth } from '../hooks/auth'
import { TextButton, TextField } from '@ropescore/components'
import { useRoute, useRouter } from 'vue-router'
const auth = useAuth()
const newName = ref('')
const route = useRoute()
const router = useRouter()
watch(auth.user, newUser => {
if (newUser) {
const returnTo = route.query['return-to'] as string | undefined
router.replace(returnTo ? decodeURIComponent(returnTo) : '/')
}
})
</script>

<template>
<form v-if="!auth.token.value" class="mx-auto container" @submit.prevent="auth.register({ name: newName })">
<h1 class="font-semibold text-2xl mt-4">
Register
</h1>
<text-field v-model="newName" label="System name" />

<div
class="border-l border-l-4 py-2 px-4 mt-2 bg-blue-100 border-l-blue-300"
>
Note that live scoring will send and store data in the cloud,
Swantzter is the data controller for this and can be reached on
<a
class="text-blue-700 hover:text-blue-900 underline"
href="mailto:[email protected]"
target="_blank"
>[email protected]</a>.
Please make sure you have read the (short and simple!) privacy policy
available on
<a
class="text-blue-700 hover:text-blue-900 underline"
href="https://ropescore.com/privacy"
target="_blank"
>https://ropescore.com/privacy</a>
</div>

<text-button type="submit">
Register
</text-button>
</form>
<p v-if="auth.loading.value" class="container mx-auto">
Loading...
</p>
</template>
4 changes: 2 additions & 2 deletions src/views/DeviceStreamLive.vue
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import { computed, reactive, watch } from 'vue'
import { type DeviceStreamJudgeInfo, type DeviceStreamMarkAddedSubscription, useDeviceStreamMarkAddedSubscription } from '../graphql/generated'
import { type ScoreTally, type Mark } from '../helpers'
import { useAuth } from '../hooks/auth'
import { useStreamPools } from '../hooks/stream-pools'
import { useDeviceStreamPools } from '../hooks/stream-pools'
import { useHead } from '@vueuse/head'
import DeviceNotSet from '../components/DeviceNotSet.vue'
Expand All @@ -62,7 +62,7 @@ useHead({
})
const auth = useAuth()
const pools = useStreamPools()
const { pools, settings } = useDeviceStreamPools()
const cols = computed(() => {
const len = pools.value.length
Expand Down
22 changes: 2 additions & 20 deletions src/views/DeviceStreamSetup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -180,22 +180,6 @@
</text-button>
</div>

<div v-else class="mt-4">
<div>
<select-field
v-model="localManual"
label="Preferred Server"
:data-list="localApis"
class="max-w-60"
/>
<p>Server: {{ apiDomain }}</p>
</div>
<p>
System ID: <code class="bg-gray-100 px-2 rounded">{{ auth.user.value?.id }}</code>
</p>
<system-name />
</div>

<div
v-if="sharesQuery.error.value"
class="p-2"
Expand All @@ -207,14 +191,12 @@
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useAuth } from '../hooks/auth'
import { apiDomain, localManual, localApis } from '../apollo'
import { useStreamPools } from '../hooks/stream-pools'
import { useDeviceStreamPools } from '../hooks/stream-pools'
import { DeviceStreamShareStatus, useRequestStreamShareMutation, useUserStreamSharesQuery } from '../graphql/generated'
import { useHead } from '@vueuse/head'
import { TextButton, TextField, SelectField, ButtonLink } from '@ropescore/components'
import IconLoading from 'virtual:icons/mdi/loading'
import SystemName from '../components/SystemName.vue'
useHead({
title: 'Device Stream | RopeScore Live'
Expand Down Expand Up @@ -242,7 +224,7 @@ requestShare.onDone(() => {
newDeviceId.value = ''
})
const pools = useStreamPools()
const { pools, settings } = useDeviceStreamPools()
// Remove devices you no longer have access to from pools
sharesQuery.onResult(res => {
Expand Down
Loading

0 comments on commit 2a93e12

Please sign in to comment.