running-tools

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

SplitCalculator.vue (1986B)

      1 <template>
      2   <div class="calculator">
      3     <div class="input">
      4       <advanced-options-input v-model:globalOptions="globalOptions"
      5         v-model:options="splitOptions" v-model:targetSets="targetSets" :type="Calculators.Split"/>
      6     </div>
      7 
      8     <div class="output">
      9       <split-output-table :default-unit-system="globalOptions.defaultUnitSystem"
     10         v-model="targetSet"/>
     11     </div>
     12   </div>
     13 </template>
     14 
     15 <script setup lang="ts">
     16 import { computed } from 'vue';
     17 
     18 import { Calculators, defaultGlobalOptions, defaultSplitOptions } from '@/core/calculators';
     19 import type { GlobalOptions, SplitOptions } from '@/core/calculators';
     20 import { defaultSplitTargetSets } from '@/core/targets';
     21 import type { SplitTargetSets } from '@/core/targets';
     22 
     23 import AdvancedOptionsInput from '@/components/AdvancedOptionsInput.vue';
     24 import SplitOutputTable from '@/components/SplitOutputTable.vue';
     25 
     26 import useStorage from '@/composables/useStorage';
     27 
     28 /*
     29  * The global options
     30  */
     31 const globalOptions = useStorage<GlobalOptions>('global-options', defaultGlobalOptions);
     32 
     33 /*
     34  * The split calculator options
     35  */
     36 const splitOptions = useStorage<SplitOptions>('split-calculator-options', defaultSplitOptions);
     37 
     38 /*
     39  * The split calculator target sets
     40  */
     41 const targetSets = useStorage<SplitTargetSets>('split-calculator-target-sets',
     42   defaultSplitTargetSets);
     43 
     44 /*
     45  * The active target set
     46  */
     47 const targetSet = computed({
     48   get: () => {
     49     if (targetSets.value[splitOptions.value.selectedTargetSet]) {
     50       return targetSets.value[splitOptions.value.selectedTargetSet].targets
     51     } else {
     52       return []
     53     }
     54   },
     55   set: (newValue) => {
     56     if (targetSets.value[splitOptions.value.selectedTargetSet]) {
     57       targetSets.value[splitOptions.value.selectedTargetSet].targets = newValue;
     58     }
     59   },
     60 });
     61 </script>
     62 
     63 <style scoped>
     64 @import '@/assets/target-calculator.css';
     65 
     66 /* Widen default calculator output */
     67 @media only screen and (min-width: 501px) {
     68   .output {
     69     min-width: 400px;
     70   }
     71 }
     72 </style>