136 lines
4.6 KiB
Vue
136 lines
4.6 KiB
Vue
<template>
|
|
<div>
|
|
<h2>Formule SEGER</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Oxyde basique <button @click="formule_seger['oxyde_basique'].push({quantity:0})" class="fa fa-plus"></button></th>
|
|
<th>Amphotere <button @click="formule_seger['amphotere'].push({quantity:0})" class="fa fa-plus"></button></th>
|
|
<th>Oxyde acide <button @click="formule_seger['oxyde_acide'].push({quantity:0})" class="fa fa-plus"></button></th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<seger-field :liste="liste_oxydes_basique" v-model="formule_seger['oxyde_basique']"></seger-field>
|
|
</td>
|
|
<td>
|
|
<seger-field :liste="liste_amphoteres" v-model="formule_seger['amphotere']"></seger-field>
|
|
</td>
|
|
<td>
|
|
<seger-field :liste="liste_oxydes_acide" v-model="formule_seger['oxyde_acide']"></seger-field>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Total: <span :class="{invalid: sommeQtyOxydesBasiques != 1}">{{sommeQtyOxydesBasiques}}</span></td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
<h2>Ingrédients</h2>
|
|
<table>
|
|
<tr>
|
|
<th>
|
|
Ingredients
|
|
<button @click="ingredients.push({ingredient:0, molecule:0, quantity:20})" class="fa fa-plus"></button>
|
|
</th>
|
|
<th>Total pour <input type="numer" name="" min="0" v-model="grammage">g</th>
|
|
</tr>
|
|
<ingredients v-model="ingredients" :liste="liste_ingredients"></ingredients>
|
|
<tr>
|
|
<td></td>
|
|
<td>Masse molaire totale de la recette : 40 mol/g</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2>Résultats</h2>
|
|
<td v-for="(l, type) in results" :key="type">
|
|
<h3>{{type}}</h3>
|
|
<ul>
|
|
<li v-for="v in l" :key="v.label" :class="{invalid:Math.abs(v.quantity) > 0.01}">
|
|
{{v.label}} : {{v.quantity.toFixed(2)}}
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SegerField from './components/SegerField.vue'
|
|
import Ingredients from './components/Ingredients.vue'
|
|
import liste_ingredients from './data/ingredients.js'
|
|
import liste_oxydes_acide from './data/oxydes_acide.js'
|
|
import liste_oxydes_basique from './data/oxydes_basique.js'
|
|
import liste_amphoteres from './data/amphoteres.js'
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
SegerField,
|
|
Ingredients,
|
|
},
|
|
data() {
|
|
return {
|
|
liste_ingredients: liste_ingredients,
|
|
liste_oxydes_acide: liste_oxydes_acide,
|
|
liste_oxydes_basique: liste_oxydes_basique,
|
|
liste_amphoteres: liste_amphoteres,
|
|
ingredients: [{ingredient:0, molecule:'', quantity:20}],
|
|
formule_seger: {
|
|
oxyde_basique: [{label:'CaO',quantity:0,imutable:true}, {label:'KNaO',quantity:0,imutable:true}, {label:'MgO',quantity:0,imutable:true}],
|
|
oxyde_acide: [{label:'SiO2',quantity:0,imutable:true}],
|
|
amphotere: [{label:'Al2O3',quantity:0,imutable:true}],
|
|
},
|
|
grammage: 100,
|
|
}
|
|
},
|
|
computed: {
|
|
sommeQtyOxydesBasiques: function () {
|
|
var result = 0
|
|
for (const index in this.formule_seger.oxyde_basique) {
|
|
const i = parseFloat(this.formule_seger.oxyde_basique[index].quantity)
|
|
result += isNaN(i) ? 0 : i
|
|
}
|
|
return result
|
|
},
|
|
results: function () {
|
|
/* Input elements but times -1 */
|
|
var res = {}
|
|
for (const type in this.formule_seger) {
|
|
res[type] = []
|
|
for (const index in this.formule_seger[type]) {
|
|
res[type].push(Object.assign({}, this.formule_seger[type][index]))
|
|
res[type][index].quantity *= -1
|
|
}
|
|
}
|
|
/* Add elements we got in ingredients */
|
|
for (const index_ingredient in this.ingredients) {
|
|
const ingredient = this.ingredients[index_ingredient]
|
|
for (const index_molecule in liste_ingredients[ingredient.ingredient].composition) {
|
|
const molecule = liste_ingredients[ingredient.ingredient].composition[index_molecule]
|
|
var objet = res[molecule.type].find(o => {return o.label==molecule.label}) /* get the molecule item */
|
|
if (objet === undefined) {
|
|
objet = {label:molecule.label, quantity:molecule.quantity}
|
|
res[molecule.type].push(objet)
|
|
}
|
|
objet.quantity += molecule.quantity * (ingredient.quantity / liste_ingredients[ingredient.ingredient].masse_molaire)
|
|
}
|
|
}
|
|
return res
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
margin-top: 60px;
|
|
}
|
|
button {
|
|
cursor:pointer;
|
|
}
|
|
</style>
|