mirror of
https://github.com/Pandipipas/scoreko-dev.git
synced 2026-06-06 03:32:06 +00:00
Embed scoreboard panel in dashboard
This commit is contained in:
Pandipipas
@@ -0,0 +1,140 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import type { Schemas } from '../../../types';
|
||||||
|
import { usePlayersStore } from '../stores/players';
|
||||||
|
import { useScoreboardStore } from '../stores/scoreboard';
|
||||||
|
|
||||||
|
const playersStore = usePlayersStore();
|
||||||
|
const scoreboardStore = useScoreboardStore();
|
||||||
|
|
||||||
|
const playerOptions = computed(() => {
|
||||||
|
const base = [{ label: '(Sin asignar)', value: '' }];
|
||||||
|
const entries = Object.entries(playersStore.players) as [string, Schemas.Players[string]][];
|
||||||
|
const options = entries.map(([id, player]) => ({
|
||||||
|
value: id,
|
||||||
|
label: player.gamertag || id,
|
||||||
|
}));
|
||||||
|
return base.concat(options);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="scoreboard-panel">
|
||||||
|
<div class="row items-center q-mb-md">
|
||||||
|
<div class="text-h4">Scoreboard</div>
|
||||||
|
<QSpace />
|
||||||
|
<QBtn
|
||||||
|
color="secondary"
|
||||||
|
outline
|
||||||
|
icon="swap_horiz"
|
||||||
|
label="Intercambiar lados"
|
||||||
|
class="q-mr-sm"
|
||||||
|
@click="scoreboardStore.swapPlayers"
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
color="secondary"
|
||||||
|
outline
|
||||||
|
icon="restart_alt"
|
||||||
|
label="Reset scores"
|
||||||
|
@click="scoreboardStore.resetScores"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row q-col-gutter-lg">
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
<QCard flat bordered>
|
||||||
|
<QCardSection>
|
||||||
|
<div class="text-subtitle1 text-weight-bold">Lado izquierdo</div>
|
||||||
|
</QCardSection>
|
||||||
|
<QSeparator />
|
||||||
|
<QCardSection>
|
||||||
|
<QSelect
|
||||||
|
v-model="scoreboardStore.scoreboard.leftPlayerId"
|
||||||
|
:options="playerOptions"
|
||||||
|
label="Jugador"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
/>
|
||||||
|
<QInput
|
||||||
|
v-model="scoreboardStore.scoreboard.leftNameOverride"
|
||||||
|
label="Nombre override"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
class="q-mt-md"
|
||||||
|
/>
|
||||||
|
<QInput
|
||||||
|
v-model.number="scoreboardStore.leftScore"
|
||||||
|
type="number"
|
||||||
|
label="Score"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
class="q-mt-md"
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
<QCard flat bordered>
|
||||||
|
<QCardSection>
|
||||||
|
<div class="text-subtitle1 text-weight-bold">Lado derecho</div>
|
||||||
|
</QCardSection>
|
||||||
|
<QSeparator />
|
||||||
|
<QCardSection>
|
||||||
|
<QSelect
|
||||||
|
v-model="scoreboardStore.scoreboard.rightPlayerId"
|
||||||
|
:options="playerOptions"
|
||||||
|
label="Jugador"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
/>
|
||||||
|
<QInput
|
||||||
|
v-model="scoreboardStore.scoreboard.rightNameOverride"
|
||||||
|
label="Nombre override"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
class="q-mt-md"
|
||||||
|
/>
|
||||||
|
<QInput
|
||||||
|
v-model.number="scoreboardStore.rightScore"
|
||||||
|
type="number"
|
||||||
|
label="Score"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
class="q-mt-md"
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<QCard flat bordered class="q-mt-lg">
|
||||||
|
<QCardSection>
|
||||||
|
<div class="text-subtitle1 text-weight-bold">Detalles de la ronda</div>
|
||||||
|
</QCardSection>
|
||||||
|
<QSeparator />
|
||||||
|
<QCardSection>
|
||||||
|
<QInput
|
||||||
|
v-model="scoreboardStore.scoreboard.round"
|
||||||
|
label="Ronda (ej. Winners Finals)"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.scoreboard-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useHead } from '@unhead/vue';
|
import { useHead } from '@unhead/vue';
|
||||||
|
import ScoreboardPanel from '../components/ScoreboardPanel.vue';
|
||||||
|
|
||||||
useHead({ title: 'Dashboard' });
|
useHead({ title: 'Dashboard' });
|
||||||
</script>
|
</script>
|
||||||
@@ -10,5 +11,25 @@ useHead({ title: 'Dashboard' });
|
|||||||
<div class="text-body1">
|
<div class="text-body1">
|
||||||
Panel principal del dashboard.
|
Panel principal del dashboard.
|
||||||
</div>
|
</div>
|
||||||
|
<QCard bordered class="dashboard-scoreboard-window q-mt-lg">
|
||||||
|
<QCardSection class="dashboard-scoreboard-content">
|
||||||
|
<ScoreboardPanel />
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
</QPage>
|
</QPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dashboard-scoreboard-window {
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 320px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-scoreboard-content {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,143 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useHead } from '@unhead/vue';
|
import { useHead } from '@unhead/vue';
|
||||||
import { computed } from 'vue';
|
import ScoreboardPanel from '../components/ScoreboardPanel.vue';
|
||||||
import type { Schemas } from '../../../types';
|
|
||||||
import { usePlayersStore } from '../stores/players';
|
|
||||||
import { useScoreboardStore } from '../stores/scoreboard';
|
|
||||||
|
|
||||||
useHead({ title: 'Scoreboard' });
|
useHead({ title: 'Scoreboard' });
|
||||||
|
|
||||||
const playersStore = usePlayersStore();
|
|
||||||
const scoreboardStore = useScoreboardStore();
|
|
||||||
|
|
||||||
const playerOptions = computed(() => {
|
|
||||||
const base = [{ label: '(Sin asignar)', value: '' }];
|
|
||||||
const entries = Object.entries(playersStore.players) as [string, Schemas.Players[string]][];
|
|
||||||
const options = entries.map(([id, player]) => ({
|
|
||||||
value: id,
|
|
||||||
label: player.gamertag || id,
|
|
||||||
}));
|
|
||||||
return base.concat(options);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QPage class="q-pa-lg scoreboard-page">
|
<QPage class="q-pa-lg">
|
||||||
<div class="row items-center q-mb-md">
|
<ScoreboardPanel />
|
||||||
<div class="text-h4">Scoreboard</div>
|
|
||||||
<QSpace />
|
|
||||||
<QBtn
|
|
||||||
color="secondary"
|
|
||||||
outline
|
|
||||||
icon="swap_horiz"
|
|
||||||
label="Intercambiar lados"
|
|
||||||
class="q-mr-sm"
|
|
||||||
@click="scoreboardStore.swapPlayers"
|
|
||||||
/>
|
|
||||||
<QBtn
|
|
||||||
color="secondary"
|
|
||||||
outline
|
|
||||||
icon="restart_alt"
|
|
||||||
label="Reset scores"
|
|
||||||
@click="scoreboardStore.resetScores"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row q-col-gutter-lg">
|
|
||||||
<div class="col-12 col-md-6">
|
|
||||||
<QCard flat bordered>
|
|
||||||
<QCardSection>
|
|
||||||
<div class="text-subtitle1 text-weight-bold">Lado izquierdo</div>
|
|
||||||
</QCardSection>
|
|
||||||
<QSeparator />
|
|
||||||
<QCardSection>
|
|
||||||
<QSelect
|
|
||||||
v-model="scoreboardStore.scoreboard.leftPlayerId"
|
|
||||||
:options="playerOptions"
|
|
||||||
label="Jugador"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
/>
|
|
||||||
<QInput
|
|
||||||
v-model="scoreboardStore.scoreboard.leftNameOverride"
|
|
||||||
label="Nombre override"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
class="q-mt-md"
|
|
||||||
/>
|
|
||||||
<QInput
|
|
||||||
v-model.number="scoreboardStore.leftScore"
|
|
||||||
type="number"
|
|
||||||
label="Score"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
class="q-mt-md"
|
|
||||||
min="0"
|
|
||||||
/>
|
|
||||||
</QCardSection>
|
|
||||||
</QCard>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 col-md-6">
|
|
||||||
<QCard flat bordered>
|
|
||||||
<QCardSection>
|
|
||||||
<div class="text-subtitle1 text-weight-bold">Lado derecho</div>
|
|
||||||
</QCardSection>
|
|
||||||
<QSeparator />
|
|
||||||
<QCardSection>
|
|
||||||
<QSelect
|
|
||||||
v-model="scoreboardStore.scoreboard.rightPlayerId"
|
|
||||||
:options="playerOptions"
|
|
||||||
label="Jugador"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
/>
|
|
||||||
<QInput
|
|
||||||
v-model="scoreboardStore.scoreboard.rightNameOverride"
|
|
||||||
label="Nombre override"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
class="q-mt-md"
|
|
||||||
/>
|
|
||||||
<QInput
|
|
||||||
v-model.number="scoreboardStore.rightScore"
|
|
||||||
type="number"
|
|
||||||
label="Score"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
class="q-mt-md"
|
|
||||||
min="0"
|
|
||||||
/>
|
|
||||||
</QCardSection>
|
|
||||||
</QCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<QCard flat bordered class="q-mt-lg">
|
|
||||||
<QCardSection>
|
|
||||||
<div class="text-subtitle1 text-weight-bold">Detalles de la ronda</div>
|
|
||||||
</QCardSection>
|
|
||||||
<QSeparator />
|
|
||||||
<QCardSection>
|
|
||||||
<QInput
|
|
||||||
v-model="scoreboardStore.scoreboard.round"
|
|
||||||
label="Ronda (ej. Winners Finals)"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
/>
|
|
||||||
</QCardSection>
|
|
||||||
</QCard>
|
|
||||||
</QPage>
|
</QPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.scoreboard-page {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user