diff --git a/src/views/RCalculator.vue b/src/views/RCalculator.vue index f793dc6b..9d9cc910 100644 --- a/src/views/RCalculator.vue +++ b/src/views/RCalculator.vue @@ -39,17 +39,16 @@ 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 @@ -57,17 +56,17 @@ 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 @@ -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' @@ -139,7 +135,7 @@ import type { PropType } from 'vue' export default defineComponent({ name: 'RCalculator', i18n, - components: { VueSlider, Colophon }, + components: { Colophon }, props: {}, data() { @@ -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 }, } @@ -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() }, @@ -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] } @@ -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 } } @@ -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 } } @@ -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; diff --git a/src/views/RCalculatorNew.vue b/src/views/RCalculatorNew.vue index a54c3815..20041bf9 100644 --- a/src/views/RCalculatorNew.vue +++ b/src/views/RCalculatorNew.vue @@ -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] }" @@ -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 @@ -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' @@ -136,7 +134,7 @@ import type { PropType } from 'vue' export default defineComponent({ name: 'RCalculatorNew', i18n, - components: { VueSlider, Colophon }, + components: { Colophon }, props: {}, data() { @@ -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 }, @@ -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 @@ -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 @@ -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 @@ -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) @@ -494,8 +492,8 @@ li.notes-item { } .slider { + padding: 0.5rem; margin: 0 0; - // 0.5rem 0.5rem 0.5rem 0.5rem; } .slider-label { diff --git a/src/views/RiskCalculator.vue b/src/views/RiskCalculator.vue index 40a43d0e..cda2fea2 100644 --- a/src/views/RiskCalculator.vue +++ b/src/views/RiskCalculator.vue @@ -31,34 +31,35 @@ h4 {{ group }} .description {{ yaml.multipliers[group].description }} - vue-slider.slider( - v-model="sliders[group]" - :data="lookup[group]" - :data-value="'value'" - :data-label="'title'" - tooltip="none" - :adsorb="true" - :dotSize=20 - @change="handleFactorButton(group)" + b-slider.slider( + :value="0" + v-model="sliders[group]" + :min="0" :max="lookup[group].length-1" + :tooltip="false" + size="is-large" + @input="handleFactorButton(group)" ) - p.slider-label {{ sliders[group].title }} + b-slider-tick(v-for="tick,i in lookup[group]" :key="tick.title" :value="i") + + p.slider-label {{ lookup[group][sliders[group]].title}} + //- divisors .option-group(v-for="group in divisors" :key="group") h4 {{ group }} .description {{ yaml.divisors[group].description }} - vue-slider.slider( - v-model="sliders[group]" - :data="lookup[group]" - :data-value="'value'" - :data-label="'title'" - tooltip="none" - :adsorb="true" - :dotSize=20 - @change="handleDivFactorButton(group)" + b-slider.slider( + :value="0" + v-model="sliders[group]" + :min="0" :max="lookup[group].length-1" + :tooltip="false" + size="is-large" + @input="handleDivFactorButton(group)" ) - p.slider-label {{ sliders[group].title }} + b-slider-tick(v-for="tick,i in lookup[group]" :key="tick.title" :value="i") + + p.slider-label {{ lookup[group][sliders[group]].title}} br @@ -96,8 +97,6 @@ const i18n = { import YAML from 'yaml' import MarkdownIt from 'markdown-it' -import VueSlider from 'vue-slider-component' -import 'vue-slider-component/theme/default.css' import { PUBLIC_SVN } from '@/Globals' @@ -137,7 +136,7 @@ import type { PropType } from 'vue' export default defineComponent({ name: 'RiskCalculator', i18n, - components: { VueSlider }, + components: {}, props: {}, data() { @@ -156,12 +155,11 @@ export default defineComponent({ badPage: false, selectedScenario: {} as any, - sliders: {} as { [measure: string]: { title: string; value: number } }, - finalR: 0, adjustedR: 0, lookup: {} as { [measure: string]: { title: string; value: number }[] }, + sliders: {} as { [measure: string]: number }, factors: {} as { [measure: string]: number }, divFactors: {} as { [measure: string]: number }, } @@ -232,15 +230,17 @@ export default defineComponent({ }, async handleDivFactorButton(measure: string) { - const slider = this.sliders[measure] - this.divFactors[measure] = slider.value + const idx = this.sliders[measure] + const option = this.lookup[measure][idx] + this.divFactors[measure] = option.value this.updateR() this.$forceUpdate() }, async handleFactorButton(measure: string) { - const slider = this.sliders[measure] - this.factors[measure] = slider.value + const idx = this.sliders[measure] + const option = this.lookup[measure][idx] + this.factors[measure] = option.value this.updateR() this.$forceUpdate() }, @@ -259,9 +259,10 @@ export default defineComponent({ if (this.divisors.indexOf(measure) > -1) this.divFactors[measure] = value // find this entry for the slider! - for (const choice of this.lookup[measure]) { + for (let i = 0; i < this.lookup[measure].length; i++) { + const choice = this.lookup[measure][i] if (choice.title === title) { - this.sliders[measure] = choice + this.sliders[measure] = i break } } @@ -304,24 +305,26 @@ export default defineComponent({ const measures = this.yaml.multipliers[measureName] this.lookup[measureName] = [] - for (const option of measures.options) { + for (let i = 0; i < measures.options.length; i++) { + const option = measures.options[i] const title = Object.keys(option)[0] const value = option[title] + Number.isNaN if (!isNaN(value)) { this.lookup[measureName].push({ title, value }) // first? if (this.yaml.multipliers[measureName].options === undefined) { this.factors[measureName] = value - this.sliders[measureName] = this.lookup[measureName][0] + this.sliders[measureName] = i // this.lookup[measureName][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[measureName].push(choice) - this.sliders[measureName] = choice + this.sliders[measureName] = i this.factors[measureName] = trimAsterisk } } @@ -332,7 +335,8 @@ export default defineComponent({ const measures = this.yaml.divisors[measureName] this.lookup[measureName] = [] - for (const option of measures.options) { + for (let i = 0; i < measures.options.length; i++) { + const option = measures.options[i] const title = Object.keys(option)[0] const value = option[title] @@ -342,14 +346,14 @@ export default defineComponent({ // first? if (this.yaml.divisors[measureName].options === undefined) { this.divFactors[measureName] = value - this.sliders[measureName] = this.lookup[measureName][0] + this.sliders[measureName] = i // this.lookup[measureName][0].value } } else { // user specified a default with an asterisk* after the number const trimAsterisk = 1.0 / parseFloat(value.substring(0, value.length - 1)) const choice = { title, value: trimAsterisk } this.lookup[measureName].push(choice) - this.sliders[measureName] = choice + this.sliders[measureName] = i // choice.value this.divFactors[measureName] = trimAsterisk } } @@ -484,7 +488,8 @@ li.notes-item { } .slider { - margin: 0.5rem 0.5rem; + padding: 0.5rem; + margin: 0rem 0rem; } .slider-label {