Merge pull request #19 from Pandipipas/move-scoreboard-to-dashboard-window

Embed scoreboard panel into dashboard as half-screen window

src/dashboard/example/components/ScoreboardPanel.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { useHead } from '@unhead/vue';
 import { computed } from 'vue';
 import type { Schemas } from '../../../types';
 import { usePlayersStore } from '../stores/players';
 import { useScoreboardStore } from '../stores/scoreboard';
 
-useHead({ title: 'Scoreboard' });
-
 const playersStore = usePlayersStore();
 const scoreboardStore = useScoreboardStore();
 
@@ -22,7 +19,7 @@ const playerOptions = computed(() => {
 </script>
 
 <template>
-  <QPage class="q-pa-lg scoreboard-page">
+  <div class="scoreboard-panel">
     <div class="row items-center q-mb-md">
       <div class="text-h4">Scoreboard</div>
       <QSpace />
@@ -131,11 +128,11 @@ const playerOptions = computed(() => {
         />
       </QCardSection>
     </QCard>
-  </QPage>
+  </div>
 </template>
 
 <style scoped>
-.scoreboard-page {
+.scoreboard-panel {
   display: flex;
   flex-direction: column;
   gap: 16px;

src/dashboard/example/main.vue

@@ -7,7 +7,6 @@ const route = useRoute();
 const menuItems = [
   { label: 'Dashboard', to: '/', icon: 'dashboard' },
   { label: 'Players', to: '/players', icon: 'groups' },
-  { label: 'Scoreboard', to: '/scoreboard', icon: 'scoreboard' },
   { label: 'Graphics', to: '/graphics', icon: 'collections' },
   { label: 'Settings', to: '/settings', icon: 'settings' },
   { label: 'About', to: '/about', icon: 'info' },

src/dashboard/example/router.ts

@@ -3,7 +3,6 @@ import AboutView from './views/About.vue';
 import DashboardView from './views/Dashboard.vue';
 import GraphicsView from './views/Graphics.vue';
 import PlayersView from './views/Players.vue';
-import ScoreboardView from './views/Scoreboard.vue';
 import SettingsView from './views/Settings.vue';
 
 const router = createRouter({
@@ -11,7 +10,6 @@ const router = createRouter({
   routes: [
     { path: '/', name: 'dashboard', component: DashboardView },
     { path: '/players', name: 'players', component: PlayersView },
-    { path: '/scoreboard', name: 'scoreboard', component: ScoreboardView },
     { path: '/graphics', name: 'graphics', component: GraphicsView },
     { path: '/settings', name: 'settings', component: SettingsView },
     { path: '/about', name: 'about', component: AboutView },

src/dashboard/example/views/Dashboard.vue

@@ -1,14 +1,28 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
+import ScoreboardPanel from '../components/ScoreboardPanel.vue';
 
 useHead({ title: 'Dashboard' });
 </script>
 
 <template>
   <QPage class="q-pa-lg">
-    <div class="text-h4 q-mb-md">Dashboard</div>
+    <QCard bordered class="dashboard-scoreboard-window q-mt-lg">
-    <div class="text-body1">
+      <QCardSection class="dashboard-scoreboard-content">
-      Panel principal del dashboard.
+        <ScoreboardPanel />
-    </div>
+      </QCardSection>
+    </QCard>
   </QPage>
 </template>
+
+<style scoped>
+.dashboard-scoreboard-window {
+  width: 50vw;
+  min-width: 320px;
+  max-width: 100%;
+}
+
+.dashboard-scoreboard-content {
+  padding-bottom: 16px;
+}
+</style>