running-tools

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

AdvancedOptionsInput.vue (4084B)

      1 <template>
      2   <div>
      3     Default units:
      4     <select v-model="globalOptions.defaultUnitSystem" aria-label="Default units">
      5       <option value="imperial">Miles</option>
      6       <option value="metric">Kilometers</option>
      7     </select>
      8   </div>
      9 
     10   <div>
     11     Target set:
     12     <target-set-selector :setType="props.type"
     13       :default-unit-system="globalOptions.defaultUnitSystem"
     14       v-model:selected-target-set="options.selectedTargetSet" v-model:target-sets="targetSets"
     15       :customWorkoutNames="props.type === Calculators.Workout ?
     16       (options as WorkoutOptions).customTargetNames : false"/>
     17   </div>
     18 
     19   <div v-if="props.type === Calculators.Workout">
     20     Workout name customization:
     21     <select v-model="(options as WorkoutOptions).customTargetNames"
     22       aria-label="Workout name customization">
     23       <option :value="false">Disabled</option>
     24       <option :value="true">Enabled</option>
     25     </select>
     26   </div>
     27 
     28   <div v-if="batchOptions && props.type === Calculators.Workout"
     29        v-show="(options as WorkoutOptions).customTargetNames">
     30     Batch column label:
     31     <input v-model="batchOptions.label" :placeholder="formatDistance(batchOptions.input, false)"
     32            aria-label="Batch column label"/>
     33   </div>
     34 
     35   <div v-if="props.type === Calculators.Race || props.type === Calculators.Workout">
     36     Prediction model:
     37     <select v-model="globalOptions.racePredictionOptions.model"
     38       aria-label="Prediction model">
     39       <option :value="RacePredictionModels.AverageModel">Average</option>
     40       <option :value="RacePredictionModels.PurdyPointsModel">Purdy Points Model</option>
     41       <option :value="RacePredictionModels.VO2MaxModel">V&#775;O&#8322; Max Model</option>
     42       <option :value="RacePredictionModels.CameronModel">Cameron's Model</option>
     43       <option :value="RacePredictionModels.RiegelModel">Riegel's Model</option>
     44     </select>
     45   </div>
     46 
     47   <div v-if="props.type === Calculators.Race || props.type === Calculators.Workout"
     48        v-show="globalOptions.racePredictionOptions.model == RacePredictionModels.AverageModel
     49          || globalOptions.racePredictionOptions.model == RacePredictionModels.RiegelModel">
     50     Riegel exponent:
     51     <decimal-input v-model="globalOptions.racePredictionOptions.riegelExponent"
     52       aria-label="Riegel exponent" :min="1" :max="1.3" :digits="2" :step="0.01"/>
     53       (default: 1.06)
     54   </div>
     55 </template>
     56 
     57 <script setup lang="ts">
     58 import { Calculators } from '@/core/calculators';
     59 import type { BatchOptions, GlobalOptions, PaceOptions, RaceOptions, SplitOptions,
     60   WorkoutOptions } from '@/core/calculators';
     61 import { RacePredictionModels } from '@/core/racePrediction';
     62 import type { TargetSets } from '@/core/targets';
     63 import { formatDistance } from '@/core/units';
     64 
     65 import DecimalInput from '@/components/DecimalInput.vue';
     66 import TargetSetSelector from '@/components/TargetSetSelector.vue';
     67 
     68 import useObjectModel from '@/composables/useObjectModel';
     69 
     70 type CalculatorOptions = PaceOptions | RaceOptions | SplitOptions | WorkoutOptions;
     71 
     72 const props = defineProps<{
     73   /*
     74    * The batch calculator options (if applicable)
     75    */
     76   batchOptions?: BatchOptions,
     77 
     78   /*
     79    * The global options
     80    */
     81   globalOptions: GlobalOptions,
     82 
     83   /*
     84    * The calculator options
     85    */
     86   options: CalculatorOptions,
     87 
     88   /*
     89    * The calculator type
     90    */
     91   type: Calculators,
     92 
     93   /*
     94    * The calculator target sets
     95    */
     96   targetSets: TargetSets,
     97 }>();
     98 
     99 // Generate internal refs tied to batchOptions, globalOptions, options and targetSets props
    100 const emit = defineEmits([
    101   'update:batchOptions', 'update:globalOptions', 'update:options', 'update:targetSets'
    102 ]);
    103 const batchOptions = useObjectModel<BatchOptions | undefined>(() => props.batchOptions, (x) =>
    104   emit('update:batchOptions', x));
    105 const globalOptions = useObjectModel<GlobalOptions>(() => props.globalOptions, (x) =>
    106   emit('update:globalOptions', x));
    107 const options = useObjectModel<CalculatorOptions>(() => props.options, (x) =>
    108   emit('update:options', x));
    109 const targetSets = useObjectModel<TargetSets>(() => props.targetSets, (x) =>
    110   emit('update:targetSets', x));
    111 </script>