Skip to content

Commit

Permalink
update calculators
Browse files Browse the repository at this point in the history
  • Loading branch information
@billyc
billyc committed Oct 25, 2024
1 parent 77769c8 commit e3cf3e2
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 98 deletions.
66 changes: 35 additions & 31 deletions src/views/RCalculator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,35 +39,34 @@
span(:style="{fontWeight: 'normal'}"
v-if="additions[measure] != 0")   : {{additions[measure]>0 ? '+' : ''}}{{ additions[measure].toFixed(3) }}

vue-slider.slider(
b-slider.slider(
v-model="sliders[measure]"
:data="lookup[measure]"
:data-value="'value'"
:data-label="'title'"
tooltip="none"
:adsorb="true"
:dotSize=20
@change="handleAdditiveButton(measure)"
:min="0" :max="lookup[measure].length-1"
:tooltip="false"
size="is-large"
@input="handleAdditiveButton(measure)"
)
p.slider-label {{ sliders[measure].title }}
b-slider-tick(v-for="tick,i in lookup[measure]" :key="tick.title" :value="i")

p.slider-label {{ lookup[measure][sliders[measure]].title}}


//- multiplicative factors
.option-group(v-for="measure in optionGroups" :key="measure")
h4 {{ measure }}
span(:style="{fontWeight: 'normal'}" v-if="factors[measure] != 1")   : {{ factors[measure].toFixed(2) }}x

vue-slider.slider(
b-slider.slider(
v-model="sliders[measure]"
:data="lookup[measure]"
:data-value="'value'"
:data-label="'title'"
tooltip="none"
:adsorb="true"
:dotSize=20
@change="handleButton(measure)"
:min="0" :max="lookup[measure].length-1"
:tooltip="false"
size="is-large"
@input="handleButton(measure)"
)
p.slider-label {{ sliders[measure].title }}
b-slider-tick(v-for="tick,i in lookup[measure]" :key="tick.title" :value="i")

p.slider-label {{ lookup[measure][sliders[measure]].title}}


br

Expand Down Expand Up @@ -108,12 +107,9 @@ const i18n = {
}
import YAML from 'yaml'
import { Route } from 'vue-router'
import MarkdownIt from 'markdown-it'
import VueSlider from 'vue-slider-component'
import Colophon from '@/components/Colophon.vue'
import 'vue-slider-component/theme/default.css'
import { PUBLIC_SVN } from '@/Globals'
import allCalculators from '@/assets/calculators'
Expand All @@ -139,7 +135,7 @@ import type { PropType } from 'vue'
export default defineComponent({
name: 'RCalculator',
i18n,
components: { VueSlider, Colophon },
components: { Colophon },
props: {},
data() {
Expand All @@ -154,7 +150,7 @@ export default defineComponent({
oldCalculators: allCalculators,
lookup: {} as { [measure: string]: { title: string; value: number }[] },
sliders: {} as { [measure: string]: { title: string; value: number } },
sliders: {} as { [measure: string]: number },
factors: {} as { [measure: string]: number },
additions: {} as { [measure: string]: number },
}
Expand Down Expand Up @@ -240,15 +236,17 @@ export default defineComponent({
},
async handleButton(measure: string) {
const slider = this.sliders[measure]
this.factors[measure] = slider.value
const idx = this.sliders[measure] as any
const option = this.lookup[measure][idx]
this.factors[measure] = option.value
this.updateR()
this.$forceUpdate()
},
async handleAdditiveButton(measure: string) {
const slider = this.sliders[measure]
this.additions[measure] = slider.value
const idx = this.sliders[measure] as any
const option = this.lookup[measure][idx]
this.additions[measure] = option.value
this.updateR()
this.$forceUpdate()
},
Expand Down Expand Up @@ -282,6 +280,7 @@ export default defineComponent({
},
buildUI() {
console.log({ yaml: this.yaml })
if (this.yaml.baseValues) {
this.selectedBaseR = Object.values(this.yaml.baseValues[0])[0]
}
Expand All @@ -301,14 +300,14 @@ export default defineComponent({
// first?
if (this.yaml.optionGroups[group] === undefined) {
this.factors[group] = value
this.sliders[group] = this.lookup[group][0]
this.sliders[group] = this.lookup[group][0].value
}
} else {
// user specified a default with an asterisk* after the number
const trimAsterisk = parseFloat(value.substring(0, value.length - 1))
const choice = { title, value: trimAsterisk }
this.lookup[group].push(choice)
this.sliders[group] = choice
this.sliders[group] = choice.value
this.factors[group] = trimAsterisk
}
}
Expand All @@ -329,14 +328,14 @@ export default defineComponent({
// first?
if (this.yaml.additiveGroups[group] === undefined) {
this.additions[group] = value
this.sliders[group] = this.lookup[group][0]
this.sliders[group] = this.lookup[group][0].value
}
} else {
// user specified a default with an asterisk* after the number
const trimAsterisk = parseFloat(value.substring(0, value.length - 1))
const choice = { title, value: trimAsterisk }
this.lookup[group].push(choice)
this.sliders[group] = choice
this.sliders[group] = choice.value
this.additions[group] = trimAsterisk
}
}
Expand Down Expand Up @@ -509,6 +508,11 @@ ul {
margin-bottom: 1rem;
}
.my-tooltip {
background-color: yellow !important;
z-index: 5;
}
@media only screen and (max-width: 950px) {
.colophon {
display: none;
Expand Down
56 changes: 27 additions & 29 deletions src/views/RCalculatorNew.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
h3: b {{ $t('base-r-value')}}:  
h3.greenbig {{ selectedBaseR.toFixed(2) }}

.base-buttons(v-if="yaml.baseValues.length > 1")
.base-buttons(v-if="yaml.baseValues && yaml.baseValues.length > 1")
button.button.is-small(
v-for="base in yaml.baseValues"
:class="{active: selectedBaseR == Object.values(base)[0], 'is-link': selectedBaseR == Object.values(base)[0] }"
Expand All @@ -39,32 +39,33 @@
span(:style="{fontWeight: 'normal'}"
v-if="additions[measure] != 0")   : {{additions[measure]>0 ? '+' : ''}}{{ additions[measure].toFixed(3) }}

vue-slider.slider(
b-slider.slider(
v-model="selectedOptionLabels[measure]"
:data="labels[measure]"
:marks="true"
:adsorb="true"
:dotSize=24
tooltip="none"
@change="handleAdditiveButton(measure)"
:min="0" :max="labels[measure].length-1"
:tooltip="false"
size="is-large"
@input="handleAdditiveButton(measure)"
)
p.slider-label {{ sliders[measure].description }}
b-slider-tick(v-for="tick,i in labels[measure]" :key="i" :value="i")

p.slider-label {{ labels[measure][selectedOptionLabels[measure]] }}

//- multiplicative factors
.option-group(v-for="measure in optionGroups" :key="measure")
h4 {{ measure }}
span(:style="{fontWeight: 'normal'}" v-if="factors[measure] != 1")   : {{ factors[measure].toFixed(2) }}x

vue-slider.slider(

b-slider.slider(
v-model="selectedOptionLabels[measure]"
:data="labels[measure]"
:marks="true"
:adsorb="true"
:dotSize=24
tooltip="none"
@change="handleButton(measure)"
:min="0" :max="labels[measure].length-1"
:tooltip="false"
size="is-large"
@input="handleButton(measure)"
)
p.slider-label {{ sliders[measure].description }}
b-slider-tick(v-for="tick,i in labels[measure]" :key="i" :value="i")

p.slider-label {{ labels[measure][selectedOptionLabels[measure]] }}

br

Expand Down Expand Up @@ -105,12 +106,9 @@ const i18n = {
}
import YAML from 'yaml'
import { Route } from 'vue-router'
import MarkdownIt from 'markdown-it'
import VueSlider from 'vue-slider-component'
import Colophon from '@/components/Colophon.vue'
import 'vue-slider-component/theme/default.css'
import allCalculators from '@/assets/calculators'
import { PUBLIC_SVN } from '@/Globals'
Expand All @@ -136,7 +134,7 @@ import type { PropType } from 'vue'
export default defineComponent({
name: 'RCalculatorNew',
i18n,
components: { VueSlider, Colophon },
components: { Colophon },
props: {},
data() {
Expand All @@ -155,7 +153,7 @@ export default defineComponent({
sliders: {} as { [measure: string]: { title: string; value: number; description: string } },
labels: {} as { [measure: string]: string[] },
selectedOptionLabels: {} as { [measure: string]: string },
selectedOptionLabels: {} as { [measure: string]: number },
factors: {} as { [measure: string]: number },
additions: {} as { [measure: string]: number },
Expand Down Expand Up @@ -241,8 +239,8 @@ export default defineComponent({
},
async handleButton(measure: string) {
const selectedTitle = this.selectedOptionLabels[measure]
const selection = this.lookup[measure].filter(a => a.title === selectedTitle)[0]
const i = this.selectedOptionLabels[measure]
const selection = this.lookup[measure][i]
this.sliders[measure] = selection
this.factors[measure] = selection.value
Expand All @@ -251,8 +249,8 @@ export default defineComponent({
},
async handleAdditiveButton(measure: string) {
const selectedTitle = this.selectedOptionLabels[measure]
const selection = this.lookup[measure].filter(a => a.title === selectedTitle)[0]
const i = this.selectedOptionLabels[measure]
const selection = this.lookup[measure][i]
this.sliders[measure] = selection
this.additions[measure] = selection.value
Expand Down Expand Up @@ -340,7 +338,7 @@ export default defineComponent({
if (this.yaml.additiveGroups[group] === undefined) {
this.additions[group] = value
this.sliders[group] = this.lookup[group][0]
this.selectedOptionLabels[group] = this.sliders[group].title
this.selectedOptionLabels[group] = this.sliders[group].value
}
} else {
// user specified a default with an asterisk* after the number
Expand All @@ -349,7 +347,7 @@ export default defineComponent({
this.lookup[group].push(choice)
this.sliders[group] = choice
this.additions[group] = trimAsterisk
this.selectedOptionLabels[group] = this.sliders[group].title
this.selectedOptionLabels[group] = this.sliders[group].value
}
}
this.labels[group] = this.lookup[group].map(g => g.title)
Expand Down Expand Up @@ -494,8 +492,8 @@ li.notes-item {
}
.slider {
padding: 0.5rem;
margin: 0 0;
// 0.5rem 0.5rem 0.5rem 0.5rem;
}
.slider-label {
Expand Down
Loading

0 comments on commit e3cf3e2

Please sign in to comment.