running-tools

A collection of tools for runners and their coaches
git clone https://git.ashermorgan.net/running-tools/
Log | Files | Refs | README

SingleOutputTable.vue (1782B)

      1 <template>
      2   <div class="simple-target-table">
      3     <table class="results">
      4       <thead>
      5         <tr>
      6           <th>Distance</th>
      7 
      8           <th>Time</th>
      9 
     10           <th v-if="showPace">Pace</th>
     11         </tr>
     12       </thead>
     13 
     14       <tbody>
     15         <tr v-for="(item, index) in results" :key="index">
     16           <td :class="item.result === 'key' ? 'result' : ''">
     17             {{ item.key }}
     18           </td>
     19 
     20           <td :class="item.result === 'value' ? 'result' : ''">
     21             {{ item.value }}
     22           </td>
     23 
     24           <td v-if="showPace">
     25             {{ item.pace }}
     26           </td>
     27         </tr>
     28 
     29         <tr v-if="results.length === 0" class="empty-message">
     30           <td colspan="4">
     31             There aren't any targets in this set yet.
     32           </td>
     33         </tr>
     34       </tbody>
     35     </table>
     36   </div>
     37 </template>
     38 
     39 <script setup lang="ts">
     40 import { computed } from 'vue';
     41 
     42 import type { TargetResult } from '@/core/calculators';
     43 import type { Target } from '@/core/targets';
     44 
     45 interface Props {
     46   /**
     47    * The method that generates the target table rows
     48    */
     49   calculateResult: (x: Target) => TargetResult,
     50 
     51   /**
     52    * The target set
     53    */
     54   targets: Array<Target>,
     55 
     56   /**
     57    * Whether to show result paces (defaults to false)
     58    */
     59   showPace?: boolean,
     60 };
     61 
     62 const props = withDefaults(defineProps<Props>(), { showPace: false });
     63 
     64 /**
     65  * The target table results
     66  */
     67 const results = computed(() => {
     68   // Calculate results
     69   const result: Array<TargetResult> = [];
     70   props.targets.forEach((row) => {
     71     // Add result
     72     result.push(props.calculateResult(row));
     73   });
     74 
     75   // Sort results
     76   result.sort((a, b) => a.sort - b.sort);
     77 
     78   // Return results
     79   return result;
     80 });
     81 </script>
     82 
     83 <style scoped>
     84 /* target table */
     85 .results .result {
     86   font-weight: bold;
     87 }
     88 </style>