· 6 years ago · May 03, 2020, 02:26 PM
1<template>
2 <div>
3 <table style="width:100%;">
4 <tr>
5 <th>Zutat</th>
6 <th>Menge(g)</th>
7 <th>Anteil(%)</th>
8 <th>Wasser</th>
9 <th>Zucker</th>
10 <th>Fett</th>
11 <th>MTR</th>
12 <th>ATR</th>
13 <th>GTR</th>
14 <th></th>
15 </tr>
16 <tr :key="index" v-for="(element, index) in test" :class="element.name">
17 <td>
18 <v-autocomplete
19 prepend-icon="mdi-database-search"
20 :items="billanzierung"
21 color="white"
22 item-text="rohstoff"
23 label="Wähle dein Rohstoff aus"
24 :v-model="test1['test']"
25 return-object
26 ></v-autocomplete>
27 </td>
28 <td>
29 <label>
30 <input :class="element.name" style="border: 1px solid black"
31 type="number" v-model="form[element.name]">
32 </label>
33
34 </td>
35 <td></td>
36 <td>{{ element.wasser }}</td>
37 <td>{{ element.zucker }}</td>
38 <td>{{ element.fett }}</td>
39 <td>{{ element.mtr }}</td>
40 <td>{{ element.atr }}</td>
41 <td>{{ element.gtr }}</td>
42 <td>
43 <div>
44 <a @click="remove(element.name)">
45 <span>remove</span>
46 </a>
47 </div>
48 </td>
49 </tr>
50 <tr>
51 <td> </td>
52 <td> </td>
53 <td> </td>
54 <td> {{ ergebnis.wasser }}</td>
55 <td> {{ ergebnis.zucker }}</td>
56 <td> {{ ergebnis.fett }}</td>
57 <td> {{ ergebnis.mtr }}</td>
58 <td> {{ ergebnis.atr }}</td>
59 <td> {{ ergebnis.gtr }}</td>
60 <td> </td>
61 </tr>
62 <tr v-if="!isNaN(percentage(ergebnis.wasser, summary()))">
63 <td> </td>
64 <td v-html="summary()"/>
65 <td> </td>
66 <td>{{ percentage(ergebnis.wasser, summary()) }}%</td>
67 <td>{{ percentage(ergebnis.zucker, summary()) }}%</td>
68 <td>{{ percentage(ergebnis.fett, summary()) }}%</td>
69 <td>{{ percentage(ergebnis.mtr, summary()) }}%</td>
70 <td>{{ percentage(ergebnis.atr, summary()) }}%</td>
71 <td>{{ percentage(ergebnis.gtr, summary()) }}%</td>
72 <td></td>
73 </tr>
74 <tr>
75 <td><a @click="add('name')">weiteres hinzufügen</a></td>
76 </tr>
77 </table>
78 </div>
79</template>
80
81<script>
82 import {mapGetters} from "vuex";
83 import {api} from "@/services/api";
84 import {resToBill} from "@/helper/respToBill";
85
86 export default {
87 name: "Calculate",
88 data() {
89 return {
90 test1: {},
91 values: null,
92 form: {},
93 ergebnis: [{
94 name: "",
95 wasser: 0,
96 zucker: 0,
97 fett: 0,
98 mtr: 0,
99 atr: 0,
100 gtr: 0,
101 pac: 0,
102 pad: 0,
103 price: "",
104 }],
105 billanzierung: []
106 }
107 },
108 created() {
109 this.apiCall();
110 },
111 computed: {
112 fields () {
113 if (!this.test1) return []
114
115 return Object.keys(this.test1).map(key => {
116 return {
117 key,
118 value: this.test1[key] || 'n/a',
119 }
120 })
121 },
122
123 // map `this.user` to `this.$store.getters.user`
124 ...mapGetters({
125 user: "user"
126 }),
127
128 test: function () {
129 let final = [];
130 let input;
131
132 if (this.test1 === null) {
133 final.push({
134 "name": 0,
135 "wasser": 0,
136 "zucker": 0,
137 "fett": 0,
138 "mtr": 0,
139 "atr": 0,
140 "gtr": 0
141 });
142
143 } else {
144 // for (let i = 0; i < this.test1.length; i++) {
145 input = this.form[this.test1.rohstoff];
146 final.push({
147 "name": this.test1.rohstoff,
148 "wasser": this.inline(input, this.test1.wasser),
149 "zucker": this.inline(input, this.test1.zucker),
150 "fett": this.inline(input, this.test1.fett),
151 "mtr": this.inline(input, this.test1.milchtrockenmasse),
152 "atr": this.inline(input, this.test1.andere_trockenmasse),
153 "gtr": (parseFloat(this.inline(input, this.test1.zucker))+parseFloat(this.inline(input, this.test1.fett))+parseFloat(this.inline(input, this.test1.milchtrockenmasse))+parseFloat(this.inline(input, this.test1.andere_trockenmasse))).toFixed(2)
154 });
155 }
156 //}
157 this.getIngredients(final);
158 return final;
159 },
160 },
161
162 methods: {
163 apiCall() {
164 api().get("http://127.0.0.1:1234/uid=" + this.user.data.uid).then(response => {
165 this.results = response.data;
166 this.billanzierung = response.data.map(resToBill)
167 })
168 },
169
170 items () {
171 return this.billanzierung.map(entry => {
172 return Object.assign({}, entry)
173 })
174 },
175
176 inline(input, value) {
177 let calc = (value / 100) * input;
178 if (isNaN(calc)) {
179 return value
180 } else {
181 return calc.toFixed(2);
182 }
183 },
184
185 getIngredients(data) {
186 this.ergebnis.name = this.name;
187 this.ergebnis.wasser = (data.reduce((sum, key) => sum + parseFloat(key.wasser || 0), 0)).toFixed(2);
188 this.ergebnis.zucker = (data.reduce((sum, key) => sum + parseFloat(key.zucker || 0), 0)).toFixed(2);
189 this.ergebnis.fett = (data.reduce((sum, key) => sum + parseFloat(key.fett || 0), 0)).toFixed(2);
190 this.ergebnis.atr = (data.reduce((sum, key) => sum + parseFloat(key.atr || 0), 0)).toFixed(2);
191 this.ergebnis.mtr = (data.reduce((sum, key) => sum + parseFloat(key.mtr || 0), 0)).toFixed(2);
192 this.ergebnis.gtr = (data.reduce((sum, key) => sum + parseFloat(key.gtr || 0), 0)).toFixed(2)
193 },
194
195 percentage(pEarned, pPos) {
196 return ((pEarned/pPos) * 100).toFixed(2);
197 },
198
199 summary() {
200 return Object.keys(this.form).reduce((sum, key) => sum + parseFloat(this.form[key] || 0), 0);
201 },
202
203 remove(name) {
204 delete this.form[name];
205
206 },
207
208 add(name) {
209 this.billanzierung.push(name)
210 }
211
212 },
213
214 }
215</script>
216
217<style lang="scss" scoped>
218 @import "./src/components/App/Helper/style/table";
219</style>