running-tools

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

DoubleOutputTable.vue (2098B)

      1 <template>
      2   <div class="double-target-table">
      3     <table class="results">
      4       <thead>
      5         <tr>
      6           <th v-for="(col, x) in results[0]" :key="x">
      7             {{ col }}
      8           </th>
      9         </tr>
     10       </thead>
     11 
     12       <tbody>
     13         <tr v-for="(row, y) in results.slice(1)" :key="y">
     14           <td v-for="(col, x) in row" :key="x">
     15             {{ col }}
     16           </td>
     17         </tr>
     18 
     19         <tr v-if="results.length === 1" class="empty-message">
     20           <td colspan="4">
     21             No inputs were specified.
     22           </td>
     23         </tr>
     24       </tbody>
     25     </table>
     26   </div>
     27 </template>
     28 
     29 <script setup lang="ts">
     30 import { computed } from 'vue';
     31 
     32 import { ResultType } from '@/core/calculators';
     33 import type { TargetResult } from '@/core/calculators';
     34 import type { Target } from '@/core/targets';
     35 import { formatDuration } from '@/core/units';
     36 import type { Distance, DistanceTime } from '@/core/units';
     37 
     38 interface Props {
     39   /*
     40    * The method that generates the target table rows
     41    */
     42   calculateResult: (x: DistanceTime, y: Target) => TargetResult,
     43 
     44   /*
     45    * The input distance
     46    */
     47   inputDistance: Distance,
     48 
     49   /*
     50    * The set of input times
     51    */
     52   inputTimes: Array<number>,
     53 
     54   /*
     55    * The label to use for the first column
     56    */
     57   label: string,
     58 
     59   /*
     60    * The target set
     61    */
     62   targets: Array<Target>,
     63 }
     64 
     65 const props = defineProps<Props>();
     66 
     67 /*
     68  * The target table results
     69  */
     70 const results = computed(() => {
     71   // Calculate results
     72   const results: Array<Array<string>> = [[
     73     props.label
     74   ]];
     75 
     76   props.inputTimes.forEach((input, y) => {
     77     const row = [formatDuration(input, 3, 2, false)];
     78 
     79     props.targets.forEach(target => {
     80       const result = props.calculateResult({ ...props.inputDistance, time: input }, target);
     81 
     82       if (y === 0) {
     83         results[0].push(result[result.result === ResultType.Key ? 'value' : 'key']);
     84       }
     85 
     86       row.push(result[result.result]);
     87     });
     88     results.push(row);
     89   });
     90   return results;
     91 });
     92 </script>
     93 
     94 <style scoped>
     95 table th, table td {
     96   /* Add more space between table cells */
     97   padding: 0.2em 0.5em;
     98 }
     99 </style>