don't move completed scoresheets to the bottom, add judge info bar

package.json

@@ -21,8 +21,8 @@
   "dependencies": {
     "@apollo/client": "^3.11.8",
     "@ropescore/components": "^1.9.1",
-    "@ropescore/rulesets": "^0.11.0",
-    "@sentry/vue": "^8.35.0",
+    "@ropescore/rulesets": "^0.13.0",
+    "@sentry/vue": "^8.36.0",
     "@vue/apollo-composable": "^4.2.1",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^11.2.0",
@@ -40,11 +40,12 @@
     "@graphql-codegen/typescript": "^4.1.1",
     "@graphql-codegen/typescript-operations": "^4.3.1",
     "@graphql-codegen/typescript-vue-apollo": "^4.1.1",
+    "@parcel/watcher": "^2.4.1",
     "@types/eslint__js": "^8.42.3",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/compiler-sfc": "^3.5.12",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
     "eslint-plugin-vue": "^9.30.0",
     "neostandard": "^0.11.7",
     "typescript": "5.5",

src/App.vue

@@ -17,7 +17,7 @@ import NotificationCards from './components/NotificationCards.vue'
 }
 
 .grid-rows-score {
-  grid-template-rows: 9vh repeat(3, calc(82vh / 3));
+  grid-template-rows: 9vh repeat(3, calc((82vh - 2rem) / 3));
 }
 
 .touch-manipulation {

src/components/BatteryStatus.vue

@@ -1,14 +1,13 @@
 <template>
   <div
-    v-if="!hidden"
+    v-if="!hidden && !inline"
     class="relative m-2 rounded border border-green-500"
     :class="{ 'border-red-500': lowBattery, 'animate-pulse': !battery.isSupported && needUpdate }"
   >
     <div
       class="absolute left-0 bottom-0 top-0 bg-green-500 text-white battery-width rounded"
       :class="{
         'bg-red-500': lowBattery
-
       }"
     />
     <div
@@ -35,6 +34,20 @@
       </label>
     </div>
   </div>
+  <span
+    v-else-if="!hidden && inline"
+    class="font-mono w-[8ch] inline-block"
+    :class="{
+      'text-red-500 font-bold animate-ping': lowBattery
+    }"
+  >
+    <template v-if="battery.isSupported">
+      {{ percentage }} {{ battery.charging.value ? '(c)' : '' }}
+    </template>
+    <template v-else>
+      {{ manualLevel }} (m)
+    </template>
+  </span>
 </template>
 
 <script lang="ts" setup>
@@ -48,6 +61,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  inline: {
+    type: Boolean,
+    default: false
+  },
   noPush: {
     type: Boolean,
     default: false

src/components/EntryLink.vue

@@ -1,11 +1,13 @@
 <template>
   <div
     v-if="assignment"
+    :id="`heat-${entry.heat}`"
     class="rounded text-white overflow-hidden cursor-pointer"
     :class="{
       'bg-green-500': color === 'green',
       'bg-indigo-500': color === 'indigo',
       'bg-gray-500': color === 'gray',
+      'outline  outline-4 outline-red-500': currentHeat,
     }"
   >
     <div
@@ -47,12 +49,13 @@
           'hover:bg-green-600': color === 'green',
           'hover:bg-indigo-600': color === 'indigo',
           'hover:bg-gray-600': color === 'gray',
-          'col-span-2': entry.didNotSkipAt || entry.lockedAt
+          'col-span-2': entry.didNotSkipAt || entry.lockedAt,
+          'border-r': !entry.didNotSkipAt && !entry.lockedAt
         }"
         @click="showPrevious = !showPrevious"
       >
-        <span v-if="showPrevious">Hide Previous</span>
-        <span v-else>Show Previous</span>
+        <span v-if="showPrevious">Hide scoresheets</span>
+        <span v-else>Show scoresheets</span>
       </button>
       <button
         v-if="!entry.didNotSkipAt && !entry.lockedAt"
@@ -95,6 +98,7 @@ import { type ScoresheetBaseFragment, type MarkScoresheetFragment, type Entry, u
 import { useRouter } from 'vue-router'
 import { type PropType, toRef, ref, computed } from 'vue'
 import { formatDate } from '../helpers'
+import { isRemoteMarkScoresheet } from '../hooks/scoresheet'
 
 const props = defineProps({
   entry: {
@@ -117,18 +121,15 @@ const props = defineProps({
     type: String,
     required: true
   },
-  color: {
-    validator (value: unknown) {
-      return typeof value === 'string' &&
-    ['green', 'indigo', 'gray'].includes(value)
-    },
-    default: 'green'
+  currentHeat: {
+    type: Boolean,
+    default: false,
   }
 })
 
 const entry = toRef(props, 'entry')
 const _scoresheets = toRef(props, 'scoresheets')
-const markScoresheets = computed(() => _scoresheets.value?.filter(scsh => scsh.__typename === 'MarkScoresheet') ?? [])
+const markScoresheets = computed(() => _scoresheets.value?.filter(scsh => isRemoteMarkScoresheet(scsh)) ?? [])
 const judge = toRef(props, 'judge')
 const router = useRouter()
 
@@ -141,6 +142,15 @@ const createScoresheetMutation = useCreateMarkScoresheetMutation({
   refetchQueries: ['GroupScoresheets']
 })
 
+const color = computed(() => {
+  if (props.entry.didNotSkipAt) return 'gray'
+  if (
+    props.entry.lockedAt ||
+    markScoresheets.value.every(scsh => !(scsh as MarkScoresheetFragment).completedAt)
+  ) return 'indigo'
+  return 'green'
+})
+
 async function createScoresheet () {
   const res = await createScoresheetMutation.mutate({
     entryId: entry.value.id,

src/components/ScoreNavigation.vue

@@ -1,4 +1,30 @@
 <template>
+  <div class="text-xl line-height-none px-2 overflow-hidden whitespace-nowrap grid grid-cols-[min-content,1fr,min-content] max-w-full gap-2 justify-between">
+    <div class="font-mono">
+      <template v-if="isServoIntermediateScoresheet(scsh.scoresheet.value)">
+        <span class="font-bold">H{{ scsh.scoresheet.value?.entry.heat }}</span>:{{ scsh.scoresheet.value?.entry.station }}
+        #{{ scsh.scoresheet.value?.entry.id }}
+      </template>
+
+      <template v-else-if="isRemoteMarkScoresheet(scsh.scoresheet.value)">
+        <span class="font-bold">H{{ scsh.scoresheet.value?.entry.heat }}</span>{{ scsh.scoresheet.value?.entry.pool != null ? `:${scsh.scoresheet.value?.entry.pool}`: '' }}
+        <!-- #{{ scsh.scoresheet.value?.entry.id }} -->
+      </template>
+    </div>
+
+    <div class="overflow-hidden text-center">
+      <template v-if="isServoIntermediateScoresheet(scsh.scoresheet.value)">
+        <span class="font-bold">{{ scsh.scoresheet.value?.judgeType }}</span>{{ scsh.scoresheet.value.judge.id }}
+      </template>
+      <template v-else-if="isRemoteMarkScoresheet(scsh.scoresheet.value)">
+        <span class="font-bold">{{ scsh.scoresheet.value.judgeType }}</span>: {{ scsh.scoresheet.value.judge.name }}
+      </template>
+    </div>
+
+    <div class="font-mono">
+      {{ version }} - <battery-status inline />
+    </div>
+  </div>
   <nav class="grid grid-cols-3 h-header">
     <template v-if="!confirmNext">
       <score-button
@@ -57,9 +83,11 @@
 <script lang="ts" setup>
 import { computed, ref, type PropType } from 'vue'
 import { useRouter } from 'vue-router'
-import { useScoresheet, isUndoMark } from '../hooks/scoresheet'
+import { useScoresheet, isUndoMark, isServoIntermediateScoresheet, isRemoteMarkScoresheet, isRemoteTallyScoresheet } from '../hooks/scoresheet'
 import { useConfirm } from '../hooks/confirm'
 import ScoreButton from './ScoreButton.vue'
+import { version } from '../helpers'
+import BatteryStatus from './BatteryStatus.vue'
 
 const router = useRouter()
 const scsh = useScoresheet()

src/components/ServoEntryLink.vue

@@ -1,10 +1,12 @@
 <template>
   <div
+    :id="`heat-${entry.HeatNumber}`"
     class="rounded text-white overflow-hidden cursor-pointer"
     :class="{
       'bg-green-500': color === 'green',
       'bg-indigo-500': color === 'indigo',
-      'bg-gray-500': color === 'gray'
+      'bg-gray-500': color === 'gray',
+      'outline  outline-4 outline-red-500': currentHeat
     }"
   >
     <a
@@ -40,16 +42,16 @@
     <div v-if="prevScoresheets.length > 0" class="grid grid-cols-1 grid-rows-1">
       <button
         v-if="prevScoresheets.length > 0"
-        class="block flex justify-center align-middle border-t border-r p-2"
+        class="block flex justify-center align-middle border-t p-2"
         :class="{
           'hover:bg-green-600': color === 'green',
           'hover:bg-indigo-600': color === 'indigo',
           'hover:bg-gray-600': color === 'gray',
         }"
         @click="showPrevious = !showPrevious"
       >
-        <span v-if="showPrevious">Hide Previous</span>
-        <span v-else>Show Previous</span>
+        <span v-if="showPrevious">Hide scoresheets</span>
+        <span v-else>Show scoresheets</span>
       </button>
     </div>
 
@@ -90,6 +92,14 @@ const props = defineProps({
   competitionId: {
     type: Number,
     required: true
+  },
+  stationName: {
+    type: String,
+    required: true
+  },
+  currentHeat: {
+    type: Boolean,
+    default: false,
   }
 })
 
@@ -138,7 +148,12 @@ async function createScoresheet () {
       judgeType: judge.value.JudgeType,
       scoringModel: entry.value.ScoringModelName,
       competitionEventId: entry.value.EventTypeCode,
-      options: entry.value.EntryExtraData?.options
+      options: entry.value.EntryExtraData?.options,
+      entry: {
+        id: entry.value.EntryNumber,
+        heat: entry.value.HeatNumber,
+        station: props.stationName.replace(/[^\d]/g, '')
+      },
     })
     openScoresheet(scoresheetId)
   } finally {

src/graphql/fragments/ScoresheetFragments.gql

@@ -26,6 +26,11 @@ fragment MarkScoresheetFragment on MarkScoresheet {
     name
   }
 
+  entry {
+    heat
+    pool
+  }
+
   marks
 }
 

src/hooks/scoresheet.ts

@@ -67,6 +67,15 @@ export interface ServoIntermediateScoresheet<T extends string> {
   judgeType: string
   competitionEventId: string
 
+  entry: {
+    id: number
+    heat: number
+    station: string
+  }
+  judge: {
+    id: number
+  }
+
   marks: Array<Mark<T>>
 
   createdAt: number
@@ -635,8 +644,9 @@ export interface CreateServoScoresheetArgs {
   scoringModel: string
   competitionEventId: string
   options?: Record<string, any> | null
+  entry: ServoIntermediateScoresheet<string>['entry']
 }
-export async function createServoScoresheet ({ competitionId, entryId, judgeSequence, judgeType: _judgeType, scoringModel, competitionEventId, options }: CreateServoScoresheetArgs) {
+export async function createServoScoresheet ({ competitionId, entryId, judgeSequence, judgeType: _judgeType, scoringModel, competitionEventId, entry, options }: CreateServoScoresheetArgs) {
   try {
     let judgeType = _judgeType
     if (judgeType == null) {
@@ -700,6 +710,10 @@ export async function createServoScoresheet ({ competitionId, entryId, judgeSequ
       id: `servo::${competitionId}::${entryId}::${judgeSequence}::${uuid()}`,
       marks: [],
       rulesId: scoringModel,
+      entry,
+      judge: {
+        id: judgeSequence
+      },
       judgeType,
       competitionEventId,
       options,

src/models.ts

@@ -144,7 +144,7 @@ const models: Model[] = [
     component: defineAsyncComponent(async () => await import('./views/scoring/ijru@1.1.0/Difficulty.vue'))
   },
   {
-    rulesId: ['ijru@3.0.0', 'ijru.freestyle.2023', 'ijru.teamshow.2023'],
+    rulesId: ['ijru@3.0.0', 'ijru.freestyle.2023', 'ijru.teamshow.2023', 'svgf-par@3.0.0'],
     judgeType: 'D',
     historic: true,
     name: 'Difficulty',
@@ -227,7 +227,7 @@ const models: Model[] = [
     component: defineAsyncComponent(async () => await import('./views/scoring/ijru@2.0.0/AthletePresentation.vue'))
   },
   {
-    rulesId: ['ijru@3.0.0', 'ijru.freestyle.2023', 'ijru.teamshow.2023'],
+    rulesId: ['ijru@3.0.0', 'ijru.freestyle.2023', 'ijru.teamshow.2023', 'svgf-par@3.0.0'],
     judgeType: 'Pa',
     name: 'Athlete Presentation',
     historic: true,
@@ -327,7 +327,7 @@ const models: Model[] = [
     component: defineAsyncComponent(async () => await import('./views/scoring/ijru@2.0.0/RoutinePresentation.vue'))
   },
   {
-    rulesId: ['ijru@3.0.0', 'ijru.freestyle.2023', 'ijru.teamshow.2023'],
+    rulesId: ['ijru@3.0.0', 'ijru.freestyle.2023', 'ijru.teamshow.2023', 'svgf-par@3.0.0'],
     judgeType: 'Pr',
     name: 'Routine Presentation',
     historic: true,
@@ -417,7 +417,7 @@ const models: Model[] = [
     ]
   },
   {
-    rulesId: ['ijru@3.0.0', 'ijru.freestyle.2023', 'ijru.teamshow.2023'],
+    rulesId: ['ijru@3.0.0', 'ijru.freestyle.2023', 'ijru.teamshow.2023', 'svgf-par@3.0.0'],
     judgeType: 'R',
     name: 'Required Elements',
     historic: true,

src/views/Score.vue

@@ -115,5 +115,4 @@ async function onUndo () {
 async function onClear () {
   compRef.value?.onClear?.()
 }
-
 </script>