feat: added saved driver selecction to EntryListView

Stoolbend · Feb 19, 2024 · 579a878 · 579a878
1 parent 4374865
commit 579a878
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 131 deletions.
diff --git a/src/components/DriverEditModal.vue b/src/components/DriverEditModal.vue
@@ -81,7 +81,7 @@ function submit(event: Event) {
 
 <template>
   <VueFinalModal
-    id="driver-modal"
+    id="driver-edit-modal"
     class="d-flex justify-content-center align-items-center modal"
     content-class="modal-dialog"
     content-transition="vfm-fade"

diff --git a/src/components/DriverEntryInlineForm.vue b/src/components/DriverEntryInlineForm.vue
@@ -1,31 +1,16 @@
 <script lang="ts" setup>
-import { DriverCategories } from '@/lib/gameData'
+import { useGameData } from '@/composables/gameData'
 import type { EntryListDriver } from '@/lib/gameFiles'
 import { formatPlayerId, getPlatformClass, parsePlayerId } from '@/lib/utils'
 import { useDriverStore } from '@/stores/drivers'
 import { PlatformOptionsSmall } from '@/stores/settings'
-import type { SelectOption } from 'bootstrap-vue-next'
 import { cloneDeep } from 'lodash-es'
 import { onMounted } from 'vue'
-import { computed, reactive, watchEffect } from 'vue'
+import { reactive, watchEffect } from 'vue'
 
 const driverStore = useDriverStore()
 const driver = defineModel<EntryListDriver>()
-
-// #region Category
-const driverCategoryOptions = computed(() => {
-  const options = [
-    {
-      value: '',
-      text: 'No category',
-    },
-  ] as SelectOption[]
-  for (const category of DriverCategories) {
-    options.push({ value: category.value, text: category.name })
-  }
-  return options
-})
-// #endregion
+const gameData = useGameData()
 
 // #region Player ID formatting
 const playerIdForm = reactive({
@@ -73,16 +58,16 @@ onMounted(() => {
         <b-form-input v-model="playerIdForm.id" type="text" id="id" required size="sm" placeholder="Player ID" @update:model-value="onPlayerIdUpdated" />
       </b-input-group>
     </div>
-    <div class="col-5">
+    <div class="col-6">
       <b-input-group>
         <b-form-input v-model="driver.firstName" type="text" id="first-name" size="sm" placeholder="First name" />
         <b-form-input v-model="driver.lastName" type="text" id="last-name" size="sm" placeholder="Last name" />
         <b-form-input v-model="driver.shortName" type="text" id="short-name" size="sm" placeholder="LAS" />
       </b-input-group>
     </div>
-    <div class="col-3">
+    <div class="col-2">
       <b-input-group>
-        <b-form-select v-model="driver.driverCategory" :options="driverCategoryOptions" id="category" size="sm" />
+        <b-form-select v-model="driver.driverCategory" :options="gameData.driverCategoryOptionsShort()" id="category" size="sm" />
       </b-input-group>
     </div>
   </div>
@@ -100,7 +85,7 @@ onMounted(() => {
     max-width: 4.5em;
   }
   input#short-name {
-    max-width: 3em;
+    max-width: 4em;
   }
 }
 </style>
diff --git a/src/components/DriverSelectModal.vue b/src/components/DriverSelectModal.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { EntryListDriver } from '@/lib/gameFiles'
+import { getPlatformClass, parsePlayerId } from '@/lib/utils'
+import { useDriverStore } from '@/stores/drivers'
+import { VueFinalModal } from 'vue-final-modal'
+
+const emits = defineEmits<{
+  (e: 'select', value: EntryListDriver): void
+  (e: 'close'): void
+}>()
+const driverStore = useDriverStore()
+const tableFields = ['playerID', 'shortName', 'firstName', 'lastName', 'controls']
+</script>
+
+<template>
+  <VueFinalModal
+    id="driver-select-modal"
+    class="d-flex justify-content-center align-items-center modal"
+    content-class="modal-dialog modal-lg modal-fullscreen-lg-down"
+    content-transition="vfm-fade"
+    overlay-transition="vfm-fade"
+  >
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Add saved driver</h5>
+      </div>
+      <div class="modal-body">
+        <b-table :items="driverStore.drivers" :fields="tableFields" striped>
+          <template #cell(playerID)="data">
+            <div class="d-flex">
+              <div class="platform-badge" :class="getPlatformClass(parsePlayerId(data.value as string).platform)">
+                <i :class="`bi bi-${getPlatformClass(parsePlayerId(data.value as string).platform)} me-1`" />
+                {{ parsePlayerId(data.value as string).playerId }}
+              </div>
+            </div>
+          </template>
+          <template #cell(controls)="data">
+            <div class="d-flex flex-row gap-1">
+              <b-button @click="emits('select', data.item)" size="sm" variant="success">Select</b-button>
+            </div>
+          </template>
+        </b-table>
+      </div>
+      <div class="modal-footer">
+        <div class="d-flex flex-row justify-content-end">
+          <b-button @click="emits('close')" variant="secondary">Cancel</b-button>
+        </div>
+      </div>
+    </div>
+  </VueFinalModal>
+</template>
diff --git a/src/composables/gameData.ts b/src/composables/gameData.ts
@@ -15,11 +15,12 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
 import { Cars, CupCategories, DriverCategories, SessionTypes } from '@/lib/gameData'
+import type { SelectOption } from 'bootstrap-vue-next'
 
 export function useGameData() {
   //#region Session types
   function sessionTypeOptions() {
-    const result = []
+    const result = [] as SelectOption[]
     for (const item of SessionTypes) {
       result.push({
         text: item.name,
@@ -32,7 +33,7 @@ export function useGameData() {
 
   //#region Cup categories
   function cupCategoryOptions() {
-    const result = []
+    const result = [] as SelectOption[]
     for (const item of CupCategories) {
       result.push({
         text: item.name,
@@ -45,7 +46,12 @@ export function useGameData() {
 
   //#region Driver categories
   function driverCategoryOptions() {
-    const result = []
+    const result = [
+      {
+        text: 'No category',
+        value: '',
+      },
+    ] as SelectOption[]
     for (const item of DriverCategories) {
       result.push({
         text: item.name,
@@ -54,6 +60,21 @@ export function useGameData() {
     }
     return result
   }
+  function driverCategoryOptionsShort() {
+    const result = [
+      {
+        text: '-',
+        value: '',
+      },
+    ] as SelectOption[]
+    for (const item of DriverCategories) {
+      result.push({
+        text: item.short,
+        value: item.value,
+      })
+    }
+    return result
+  }
   //#endregion Driver categories
 
   //#region Cars
@@ -63,7 +84,7 @@ export function useGameData() {
         text: 'Any car',
         value: -1,
       },
-    ]
+    ] as SelectOption[]
     for (const item of Cars) {
       result.push({
         text: item.name,
@@ -77,5 +98,5 @@ export function useGameData() {
   //#region Tracks
   //#endregion Tracks
 
-  return { sessionTypeOptions, cupCategoryOptions, driverCategoryOptions, carOptions }
+  return { sessionTypeOptions, cupCategoryOptions, driverCategoryOptions, driverCategoryOptionsShort, carOptions }
 }