allow for comma values in input fields. More work on calculations
This commit is contained in:
parent
20e4afd223
commit
bb4ee470d9
|
@ -5,16 +5,20 @@
|
||||||
Du må først fylle ut IK og IF verdier før du kan kalkulere dosen.
|
Du må først fylle ut IK og IF verdier før du kan kalkulere dosen.
|
||||||
</p>
|
</p>
|
||||||
<p><label>
|
<p><label>
|
||||||
Blodsukker:
|
Målt blodsukker:
|
||||||
<input type="number" v-model.number="bloodsugar" :disabled="disableInputFields">
|
<input type="number" step="0.1" v-model.number="measuredBloodsugar" :disabled="disableInputFields">
|
||||||
</label></p>
|
</label></p>
|
||||||
<p><label>
|
<p><label>
|
||||||
Karbohydrater:
|
Karbohydrater:
|
||||||
<input type="number" v-model.number="carbohydrates" :disabled="disableInputFields">
|
<input type="number" v-model.number="plannedCarbohydratesIntake" :disabled="disableInputFields">
|
||||||
</label></p>
|
</label></p>
|
||||||
<p>
|
<p>Blodsukkermål: {{ bloodsugarGoal }}</p>
|
||||||
Din anbefalte dose: {{ recommendedDose }}
|
<p><label>
|
||||||
</p>
|
Treningsmodus:
|
||||||
|
<input type="checkbox" v-model="isTrainingMode">
|
||||||
|
</label></p>
|
||||||
|
<p><strong>Din anbefalte dose: <span v-if="shouldShowCalculation">{{ roundToNearestHalf(recommendedDose) }}</span></strong></p>
|
||||||
|
<p v-if="shouldShowCalculation">Bakgrunnstall: {{ recommendedDose }}</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -23,17 +27,42 @@
|
||||||
name: 'DosageCalculator',
|
name: 'DosageCalculator',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
bloodsugar: null,
|
measuredBloodsugar: null,
|
||||||
carbohydrates: null
|
plannedCarbohydratesIntake: null,
|
||||||
|
isTrainingMode: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
recommendedDose: function () {
|
recommendedDose: function () {
|
||||||
const result = this.bloodsugar + this.carbohydrates
|
const { IKValue, IFValue } = this.$store.state
|
||||||
|
const {measuredBloodsugar, plannedCarbohydratesIntake, bloodsugarGoal} = this
|
||||||
|
const result = plannedCarbohydratesIntake / IKValue + (measuredBloodsugar - bloodsugarGoal) / IFValue
|
||||||
return result ? result : 0
|
return result ? result : 0
|
||||||
},
|
},
|
||||||
|
bloodsugarGoal: function () {
|
||||||
|
const defaultBloodSugarGoal = 5
|
||||||
|
const trainingBloodsugarGoal = 8
|
||||||
|
return this.isTrainingMode ? trainingBloodsugarGoal : defaultBloodSugarGoal
|
||||||
|
},
|
||||||
disableInputFields: function () {
|
disableInputFields: function () {
|
||||||
return !(this.$store.state.IKValue && this.$store.state.IFValue)
|
return !(this.$store.state.IKValue && this.$store.state.IFValue)
|
||||||
|
},
|
||||||
|
shouldShowCalculation: function () {
|
||||||
|
return this.measuredBloodsugar !== null || this.plannedCarbohydratesIntake !== null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
roundToNearestHalf: function (num) {
|
||||||
|
const decimals = num % 1
|
||||||
|
let adjustment = 0.0
|
||||||
|
if (decimals >= 0.3 && decimals <= 0.7) {
|
||||||
|
adjustment = 0.5
|
||||||
|
} else if (decimals > 0.7) {
|
||||||
|
adjustment = 1.0
|
||||||
|
} else if (decimals < 0.3) {
|
||||||
|
adjustment = 0.0
|
||||||
|
}
|
||||||
|
return (num - decimals) + adjustment
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,16 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h2>Brukerinfo</h2>
|
<h2>Brukerinfo</h2>
|
||||||
<form @submit.prevent="handleSubmit">
|
<p>Verdiene lagres automatisk når du skriver inn.</p>
|
||||||
<p><label>
|
<p><label>
|
||||||
IK:
|
IK:
|
||||||
<input type="number" v-model.number="IKValue">
|
<input type="number" step="0.1" @change="changeListener" v-model="IKValue">
|
||||||
</label></p>
|
</label></p>
|
||||||
<p><label>
|
<p><label>
|
||||||
IF:
|
IF:
|
||||||
<input type="number" v-model.number="IFValue">
|
<input type="number" step="0.1" @change="changeListener" v-model="IFValue">
|
||||||
</label></p>
|
</label></p>
|
||||||
<button type="submit">Lagre</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -23,8 +22,9 @@
|
||||||
return { IKValue, IFValue }
|
return { IKValue, IFValue }
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSubmit: function () {
|
changeListener: function () {
|
||||||
const { IKValue, IFValue } = this
|
const { IKValue, IFValue } = this
|
||||||
|
console.log('Handle submit was called');
|
||||||
this.$store.commit('updateIKAndIFValues', { IKValue, IFValue })
|
this.$store.commit('updateIKAndIFValues', { IKValue, IFValue })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,9 +7,8 @@ Vue.config.productionTip = false
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
count: 0,
|
IKValue: parseFloat(window.localStorage.getItem("IKValue")) || 0,
|
||||||
IKValue: parseInt(window.localStorage.getItem("IKValue"), 10),
|
IFValue: parseFloat(window.localStorage.getItem("IFValue")) || 0,
|
||||||
IFValue: parseInt(window.localStorage.getItem("IFValue"), 10)
|
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
updateIKAndIFValues(state, { IKValue, IFValue }) {
|
updateIKAndIFValues(state, { IKValue, IFValue }) {
|
||||||
|
|
Loading…
Reference in a new issue