parsley/app/javascript/components/TheCalculator.vue

129 lines
3.0 KiB
Vue
Raw Normal View History

2018-03-30 14:31:09 -05:00
<template>
2018-04-02 00:10:06 -05:00
<div>
<h1 class="title">Calculator</h1>
2018-03-30 14:31:09 -05:00
2018-04-02 00:10:06 -05:00
<div v-for="err in errors" :key="err" class="notification is-warning">
{{err}}
</div>
<div class="columns">
<div class="field column">
<label class="label">Input</label>
<div class="control">
<input class="input" type="text" placeholder="input" v-model="input">
</div>
</div>
<div class="field column">
<label class="label">Output Unit</label>
<div class="control">
<input class="input" type="text" placeholder="unit" v-model="outputUnit">
</div>
</div>
</div>
<div class="columns">
<div class="field column">
<label class="label">Ingredient</label>
<div class="control">
<app-autocomplete
:inputClass="{'is-success': ingredient !== null}"
ref="autocomplete"
v-model="ingredient_name"
:minLength="2"
valueAttribute="name"
labelAttribute="name"
placeholder=""
@optionSelected="searchItemSelected"
:onGetOptions="updateSearchItems"
>
</app-autocomplete>
</div>
</div>
<div class="field column">
<label class="label">Density</label>
<div class="control">
<input class="input" type="text" placeholder="8.345 lb/gallon" v-model="density">
</div>
</div>
</div>
<div class="field">
<label class="label">Output</label>
<div class="control">
<input class="input" type="text" disabled="disabled" v-model="output">
</div>
</div>
</div>
2018-03-30 14:31:09 -05:00
</template>
<script>
2018-04-02 00:10:06 -05:00
import api from "../lib/Api";
import debounce from "lodash/debounce";
import AppAutocomplete from "./AppAutocomplete";
2018-03-30 14:31:09 -05:00
export default {
2018-04-02 00:10:06 -05:00
data() {
return {
input: '',
outputUnit: '',
ingredient_name: '',
ingredient: null,
density: '',
output: '',
errors: []
};
},
methods: {
updateSearchItems(text) {
return api.getSearchIngredients(text);
},
searchItemSelected(ingredient) {
this.ingredient = ingredient;
this.ingredient_name = ingredient.name;
this.density = ingredient.density;
},
updateOutput: debounce(function() {
this.loadResource(api.getCalculate(this.input, this.outputUnit, this.density)
.then(data => {
this.output = data.output;
this.errors = data.errors;
})
);
}, 500)
},
watch: {
'ingredient_name': function(val) {
if (this.ingredient && this.ingredient.name !== val) {
this.ingredient = null;
}
}
},
created() {
this.$watch(
function() {
return this.input + this.outputUnit + this.density;
},
function() {
this.updateOutput();
}
)
},
2018-03-30 14:31:09 -05:00
2018-04-02 00:10:06 -05:00
components: {
AppAutocomplete
}
2018-03-30 14:31:09 -05:00
}
</script>
<style lang="scss" scoped>
</style>