Get correct view. Needs to update the formulas
This commit is contained in:
Milvert Simon
parent
9d8da84ccf
commit
4c5b5b4405
|
|
@ -2,9 +2,7 @@
|
|||
<div id="app">
|
||||
<div id="nav">
|
||||
<b-navbar variant="faded" type="light">
|
||||
<b-navbar-brand href="#">AppName</b-navbar-brand>
|
||||
<router-link to="/">Home</router-link>|
|
||||
<router-link to="/ping">About</router-link>
|
||||
<b-navbar-brand href="#">CalcMilvert</b-navbar-brand>
|
||||
</b-navbar>
|
||||
</div>
|
||||
<router-view />
|
||||
|
|
@ -30,6 +28,6 @@
|
|||
}
|
||||
|
||||
#nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
color: #5cb38b;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="col-sm-10">
|
||||
<h1>Calculate</h1>
|
||||
<hr />
|
||||
<br />
|
||||
<div class="form">
|
||||
<div class="summary text-red" v-if="$v.form.$error">
|
||||
Enter number!
|
||||
</div>
|
||||
<br />
|
||||
<form @submit.prevent="submit">
|
||||
<b-form-input v-model="form.number1"
|
||||
placeholder="Enter first number" type="number"
|
||||
:class="{ 'hasError': $v.form.number1.$error }"
|
||||
@input="$v.form.number1.$touch()"
|
||||
:state="!$v.form.number1.$error && null"
|
||||
></b-form-input>
|
||||
<br />
|
||||
<b-form-input v-model="form.number2"
|
||||
placeholder="Enter second number"
|
||||
:class="{ 'hasError': $v.form.number1.$error }"
|
||||
type="number"
|
||||
@input="$v.form.number2.$touch()"
|
||||
:state="!$v.form.number2.$error && null"
|
||||
></b-form-input>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<b-button type="submit"
|
||||
class="btn btn-sm"
|
||||
@click="onSubmitCalc"
|
||||
>Calculate</b-button>
|
||||
<br />
|
||||
</form>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
<div class="mt-2" v-if="show">{{ form.number1 }} + {{ form.number2 }} = {{ text }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import { required } from 'vuelidate/lib/validators';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
number1: '',
|
||||
number2: '',
|
||||
},
|
||||
text: '',
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getCalc(payload) {
|
||||
const path = 'http://localhost:5000/calc';
|
||||
axios.post(path, payload)
|
||||
.then((res) => {
|
||||
this.text = res.data.text;
|
||||
this.show = true;
|
||||
})
|
||||
.catch((error) => {
|
||||
// eslint-disable-next-line
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
onSubmitCalc(evt) {
|
||||
evt.preventDefault();
|
||||
this.$v.form.$touch();
|
||||
if (this.$v.form.$error) return;
|
||||
const payload = {
|
||||
number1: this.form.number1,
|
||||
number2: this.form.number2,
|
||||
};
|
||||
this.getCalc(payload);
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
form: {
|
||||
number1: { required },
|
||||
number2: { required },
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div class='container'>
|
||||
<div class='col-sm-10'>
|
||||
<h1>Måltidsenheter</h1>
|
||||
<hr />
|
||||
<div class='form'>
|
||||
<div class='summary text-red' v-if='$v.form.$error'>
|
||||
Enter number!
|
||||
</div>
|
||||
<br />
|
||||
<form @submit.prevent='submit'>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<label for='form.number1'>Ange ditt totala inslunintag</label>
|
||||
<b-form-input
|
||||
id='form.number1'
|
||||
v-model='form.number1'
|
||||
number
|
||||
placeholder='Enter first number'
|
||||
type='number'
|
||||
:class='{ hasError: $v.form.number1.$error }'
|
||||
@input='$v.form.number1.$touch()'
|
||||
:state='!$v.form.number1.$error && null'
|
||||
></b-form-input>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<label for='form.number2'>Ange måltidens kolhydrater</label>
|
||||
<b-form-input
|
||||
id='form.number2'
|
||||
v-model='form.number2'
|
||||
number
|
||||
placeholder='Enter second number'
|
||||
:class='{ hasError: $v.form.number1.$error }'
|
||||
type='number'
|
||||
@input='$v.form.number2.$touch()'
|
||||
:state='!$v.form.number2.$error && null'
|
||||
></b-form-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<br />
|
||||
<br />
|
||||
<b-form-checkbox id='morning_checkbox' v-model='form.morning' name='morning_checkbox'>
|
||||
Är det morgon?
|
||||
</b-form-checkbox>
|
||||
<br />
|
||||
<br />
|
||||
<b-button type='submit' class='btn btn-sm' @click='onSubmitCalc'>Calculate</b-button>
|
||||
<br />
|
||||
</form>
|
||||
</div>
|
||||
<div class='mt-2' v-if='show'>Du borde ta ca {{ text }} enheter</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div class='col-sm-10'>
|
||||
<h1>Korrigeringsenheter</h1>
|
||||
<hr />
|
||||
<br />
|
||||
<div class='form_corr'>
|
||||
<div class='summary text-red' v-if='$v.form_corr.$error'>
|
||||
Enter number!
|
||||
</div>
|
||||
<br />
|
||||
<form @submit.prevent='submit'>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<label for='form_corr.current'>Nuvarande</label>
|
||||
<b-form-input
|
||||
id='form_corr.current'
|
||||
v-model='form_corr.current'
|
||||
number
|
||||
placeholder='Enter first number'
|
||||
type='number'
|
||||
:class='{ hasError: $v.form_corr.current.$error }'
|
||||
@input='$v.form_corr.current.$touch()'
|
||||
:state='!$v.form_corr.current.$error && null'>
|
||||
</b-form-input>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<label for='form_corr.wanted'>Ange måltidens kolhydrater</label>
|
||||
<b-form-input
|
||||
id='form_corr.wanted'
|
||||
v-model='form_corr.wanted'
|
||||
number
|
||||
placeholder='Enter second number'
|
||||
:class='{ hasError: $v.form_corr.wanted.$error }'
|
||||
type='number'
|
||||
@input='$v.form_corr.wanted.$touch()'
|
||||
:state='!$v.form_corr.wanted.$error && null'
|
||||
></b-form-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<br />
|
||||
<br />
|
||||
<b-button type='submit' class='btn btn-sm' @click='onSubmitCorr'>Calculate</b-button>
|
||||
<br />
|
||||
</form>
|
||||
<br />
|
||||
</div>
|
||||
<div class='mt-2' v-if='show_current'>Du borde ta ca {{ text_current }} enheter</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { required } from 'vuelidate/lib/validators';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
number1: 62,
|
||||
number2: 0,
|
||||
morning: false,
|
||||
},
|
||||
form_corr: {
|
||||
current: '',
|
||||
wanted: '',
|
||||
},
|
||||
text: '',
|
||||
text_current: '',
|
||||
show: false,
|
||||
show_current: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmitCalc(evt) {
|
||||
evt.preventDefault();
|
||||
this.$v.form.$touch();
|
||||
if (this.$v.form_corr.$error) return;
|
||||
if (this.form.morning) {
|
||||
this.text = this.form.number1 + this.form.number2;
|
||||
this.show = true;
|
||||
} else {
|
||||
this.text = this.form.number1 - this.form.number2;
|
||||
this.show = true;
|
||||
}
|
||||
},
|
||||
onSubmitCorr(evt) {
|
||||
evt.preventDefault();
|
||||
this.$v.form_corr.$touch();
|
||||
if (this.$v.form.$error) return;
|
||||
this.text_current = this.form_corr.current - this.form_corr.wanted;
|
||||
this.show_current = true;
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
form: {
|
||||
number1: { required },
|
||||
number2: { required },
|
||||
},
|
||||
form_corr: {
|
||||
current: { required },
|
||||
wanted: { required },
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-primary">{{ msg }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'Ping',
|
||||
data() {
|
||||
return {
|
||||
msg: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getMessage() {
|
||||
const path = 'http://localhost:5000/ping';
|
||||
axios.get(path)
|
||||
.then((res) => {
|
||||
this.msg = res.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
// eslint-disable-next-line
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getMessage();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import Ping from '../components/Ping.vue';
|
||||
import Books from '../components/Books.vue';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import Calc from '../components/Calc.vue';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
|
|
@ -11,13 +11,8 @@ export default new VueRouter({
|
|||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Books',
|
||||
component: Books,
|
||||
},
|
||||
{
|
||||
path: '/ping',
|
||||
name: 'Ping',
|
||||
component: Ping,
|
||||
name: 'Calc',
|
||||
component: Calc,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import Calc from '@/components/Calc.vue';
|
||||
|
||||
let url = '';
|
||||
let data = '';
|
||||
|
||||
const mockHttp = {
|
||||
get: (_url, _data) => {
|
||||
return new Promise((resolve) => {
|
||||
url = _url;
|
||||
data = _data;
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
describe('Books', () => {
|
||||
const wrapper = shallowMount(Calc);
|
||||
it('Calc is a component', () => {
|
||||
// expect(wrapper.isVueInstance()).toBeTruthy()
|
||||
wrapper.setData({ number1: 1});
|
||||
|
||||
});
|
||||
});
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import HelloWorld from '@/components/HelloWorld.vue';
|
||||
|
||||
describe('HelloWorld.vue', () => {
|
||||
it('renders props.msg when passed', () => {
|
||||
const msg = 'new message';
|
||||
const wrapper = shallowMount(HelloWorld, {
|
||||
propsData: { msg },
|
||||
});
|
||||
expect(wrapper.text()).toMatch(msg);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue