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="app">
|
||||||
<div id="nav">
|
<div id="nav">
|
||||||
<b-navbar variant="faded" type="light">
|
<b-navbar variant="faded" type="light">
|
||||||
<b-navbar-brand href="#">AppName</b-navbar-brand>
|
<b-navbar-brand href="#">CalcMilvert</b-navbar-brand>
|
||||||
<router-link to="/">Home</router-link>|
|
|
||||||
<router-link to="/ping">About</router-link>
|
|
||||||
</b-navbar>
|
</b-navbar>
|
||||||
</div>
|
</div>
|
||||||
<router-view />
|
<router-view />
|
||||||
|
|
@ -30,6 +28,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav a.router-link-exact-active {
|
#nav a.router-link-exact-active {
|
||||||
color: #42b983;
|
color: #5cb38b;
|
||||||
}
|
}
|
||||||
</style>
|
</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 Vue from 'vue';
|
||||||
import VueRouter from 'vue-router';
|
import VueRouter from 'vue-router';
|
||||||
import Ping from '../components/Ping.vue';
|
// eslint-disable-next-line import/no-unresolved
|
||||||
import Books from '../components/Books.vue';
|
import Calc from '../components/Calc.vue';
|
||||||
|
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
|
|
@ -11,13 +11,8 @@ export default new VueRouter({
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Books',
|
name: 'Calc',
|
||||||
component: Books,
|
component: Calc,
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/ping',
|
|
||||||
name: 'Ping',
|
|
||||||
component: Ping,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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