Merge pull request #5 from krazkidd:share-scoreboard

Share scoreboard proof of concept

README.md

@@ -1,6 +1,6 @@
 # lineup
 
-Plan your softball team's batting order and field positions.
+Plan your softball team's batting order and field positions. Then share a live scoreboard through a URL!
 
 [Try the live app now!](https://krazkidd.github.io/lineup/)
 

app.vue

@@ -1,28 +1,9 @@
 <script setup lang="ts">
+import { navMenuItems, homeMenuItem } from '~~/nav'
 import { useAppSettingsStore } from '~~/stores/AppSettings';
 
 const appSettingsStore = useAppSettingsStore();
 
-const homeRoute = ref({
-  label: 'Home',
-  icon: 'pi pi-fw pi-home',
-  route: '/'
-});
-
-const menuItems = ref([
-  homeRoute.value,
-  {
-    label: 'Lineup',
-    icon: 'pi pi-fw pi-user-edit',
-    route: '/lineup'
-  },
-  {
-    label: 'Scoreboard',
-    icon: 'pi pi-fw pi-play',
-    route: '/scoreboard'
-  },
-]);
-
 const isSidebarVisible = ref(false);
 const sidebarPassThroughOptions = {
   headerContent: {
@@ -66,9 +47,9 @@ const menuPassThroughOptions = {
     </template>
 
     <template #default>
-      <Menu :model="menuItems" :pt="menuPassThroughOptions">
+      <Menu :model="navMenuItems" :pt="menuPassThroughOptions">
         <template #item="{ label, item, props }">
-          <RouterLink :to="item.route" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
+          <RouterLink :to="item.to!" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
             <a :href="href" v-bind="props.action" @click="navigate" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
               <span v-bind="props.icon" />
               <span v-bind="props.label">{{ label }}</span>
@@ -85,8 +66,8 @@ const menuPassThroughOptions = {
 
   <div class="flex flex-col items-center min-h-screen">
     <div class="flex justify-between items-center w-full p-1">
-      <RouterLink :to="homeRoute.route" :title="homeRoute.label" class="inline-block p-2">
-        <img src="/favicon/favicon-32x32.png" :alt="homeRoute.label" />
+      <RouterLink :to="homeMenuItem.to!" :title="homeMenuItem.label" class="inline-block p-2">
+        <img src="/favicon/favicon-32x32.png" :alt="homeMenuItem.label as string" />
       </RouterLink>
 
       <Button

components/lineup/LineupJerseyButton.vue

@@ -5,6 +5,7 @@ import { getLineup, updateSpot } from '~~/db/Lineup';
 import type { Spot } from '~~/types';
 
 const db = useFirestore();
+
 const teamStore = useTeamStore();
 
 const { data: team } = useDocument(await getTeam(db, teamStore.id));

components/lineup/LineupPositionButton.vue

@@ -5,6 +5,7 @@ import type { Spot } from '~~/types';
 import { PositionOptions, getPositionShortName, getPositionLongName } from '~~/types';
 
 const db = useFirestore();
+
 const teamStore = useTeamStore();
 
 const { data: lineup } = useDocument(await getLineup(db, teamStore.id));
@@ -34,7 +35,7 @@ const positionLongName = computed(() => getPositionLongName(props.spot.position)
                 content: { class: 'pt-1' }
             }"
         >
-          <Listbox
+            <Listbox
                 :model-value="props.spot.position"
                 @update:model-value="updateSpot(lineup!.spots, { ...props.spot, position: $event })"
                 :options="PositionOptions"
@@ -49,13 +50,13 @@ const positionLongName = computed(() => getPositionLongName(props.spot.position)
             >
                 <template #option="{ option }">
                     <span :title="option.longName" class="inline-block bg-white text-gray-800 rounded-full text-center w-[2em]">
-                      {{ option.shortName }}
+                        {{ option.shortName }}
                     </span>
 
                     {{ option.longName }}
                 </template>
             </Listbox>
-      </Dialog>
+        </Dialog>
     </div>
 </template>
 

components/settings/SettingsButton.vue

@@ -3,6 +3,7 @@ import { useTeamStore } from '~~/stores/Team';
 import { getTeam, setJerseyColor, setJerseyTextColor } from '~~/db/Team';
 
 const db = useFirestore();
+
 const teamStore = useTeamStore();
 
 const { data: team } = useDocument(await getTeam(db, teamStore.id));
@@ -30,14 +31,14 @@ const isDialogVisible = ref(false);
   />
 
   <Dialog
-      v-model:visible="isDialogVisible"
-      modal
-      header="Team Settings"
-      :pt="{
-          root: { class: 'w-full md:w-3/4 xl:w-1/2' },
-          content: { class: 'pt-1' }
-      }"
-    >
+    v-model:visible="isDialogVisible"
+    modal
+    header="Team Settings"
+    :pt="{
+        root: { class: 'w-full md:w-3/4 xl:w-1/2' },
+        content: { class: 'pt-1' }
+    }"
+  >
     <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
       <div class="text-right text-xs py-2">
         Jersey Color

components/settings/SettingsHelpButton.vue

@@ -33,14 +33,14 @@ const isDialogVisible = ref(false);
   />
 
   <Dialog
-      v-model:visible="isDialogVisible"
-      modal
-      header="Help"
-      :pt="{
-          root: { class: 'w-full md:w-3/4 xl:w-1/2' },
-          content: { class: 'pt-1' }
-      }"
-    >
+    v-model:visible="isDialogVisible"
+    modal
+    header="Help"
+    :pt="{
+        root: { class: 'w-full md:w-3/4 xl:w-1/2' },
+        content: { class: 'pt-1' }
+    }"
+  >
     <div class="py-2">
       <ul class="list-disc">
         <li>

components/share/ShareButton.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { scoreboardMenuItem } from '~~/nav';
+import type { ID, Team } from '~~/types';
+
+const props = defineProps<{
+    teamId: ID
+    team: Team
+}>();
+
+const buttonPassThroughOptions = {
+  label: {
+    class: 'hidden'
+  }
+};
+
+const isDialogVisible = ref(false);
+</script>
+
+
+<template>
+    <Button
+        @click="isDialogVisible = true"
+        icon="pi pi-fw pi-share-alt"
+        severity="secondary"
+        text
+        rounded
+        aria-label="Share"
+        title="Share"
+        :pt="buttonPassThroughOptions"
+    />
+
+    <Dialog
+        v-model:visible="isDialogVisible"
+        modal
+        :header="`${team.name}'s Scoreboard`"
+        :pt="{
+            root: { class: 'w-full md:w-3/4 xl:w-1/2' },
+            content: { class: 'pt-1' }
+        }"
+    >
+        <RouterLink :to="scoreboardMenuItem.to!" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
+            <a :href="href.concat('/', props.teamId)" v-bind="props.action" @click="navigate" class="block">
+                <VueQrcode
+                    :value="`href.concat('/', props.teamId)`"
+                    type="image/png"
+                    :color="{ dark: '#000000ff', light: '#ffffffff' }"
+                    class="block mx-auto"
+                />
+            </a>
+    </RouterLink>
+    </Dialog>
+</template>

nav/index.ts

@@ -0,0 +1,30 @@
+import type { MatcherLocationAsPath } from "#vue-router";
+import type { MenuItem } from "primevue/menuitem";
+
+export const homeMenuItem: MenuItem = {
+    key: 'home',
+    label: 'Home',
+    icon: 'pi pi-fw pi-home',
+    //TODO deprecated
+    to: { path: '/' } as MatcherLocationAsPath
+};
+export const lineupMenuItem: MenuItem = {
+    key: 'lineup',
+    label: 'Lineup',
+    icon: 'pi pi-fw pi-user-edit',
+    //TODO deprecated
+    to: { path: '/lineup' } as MatcherLocationAsPath
+};
+export const scoreboardMenuItem: MenuItem = {
+    key: 'scoreboard',
+    label: 'Scoreboard',
+    icon: 'pi pi-fw pi-play',
+    //TODO deprecated
+    to: { path: '/scoreboard' } as MatcherLocationAsPath
+};
+
+export const navMenuItems: MenuItem[] = [
+    homeMenuItem,
+    lineupMenuItem,
+    scoreboardMenuItem,
+];