SEC2003/src/App.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}}&nbsp;: {{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>