Vue

by borsna

HTML

<div id="app">
  <h1>{{ name }}</h1>
  <table class="table">
     <tr v-for="item in items">
       <td><input v-model=item.mass> {{ Math.round(item.mass/totalMass*100)}}%</td>
       <td><input v-model=item.text></td>
     </tr>
  </table>
  Total degvikt: {{ totalMass }}
  <hr>
  
  <p v-for="o in orderedItems">
    <input v-model=o.count> {{ o.text }}
  </p>
  
  <table class="table">
    <tr v-for="item in calculatedRecepie">
      <td>{{ Math.round(item.mass) }}</td>
      <td>{{ item.text }}</td>
    </tr>
  </table>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
	data: {
    name: "Levain",
    items: [
     {text: "Vatten", mass: 370},
     {text: "Vetemjöl", mass: 510},
     {text: "Salt", mass: 10},
     {text: "Vetesurdeg", mass: 100}
    ],
    orderedItems: [
     {text: "Bröd 900 gram", mass: 900, count: 10},
     {text: "Fralla 120 gram", mass: 120, count: 5},
     {text: "Fralla 160 gram", mass: 120, count: 5}
    ]
  },
  computed: {
     totalMass: function(){
       var total = 0;
       for(var i=0; i < this.items.length; i++){
          total = total + parseInt(this.items[i].mass);
       }
       return total;
     },
     totalOrderMass: function(){
       var total = 0;
       for(var i=0; i < this.orderedItems.length; i++){
          var num = parseInt(this.orderedItems[i].count);
          total = total + this.orderedItems[i].mass * num;
       }
       return total;
     },
     calculatedRecepie: function() {
       var factor =  this.totalOrderMass / this.totalMass;
       var calculatedItems = [];
       for(var i=0; i < this.items.length; i++){
         calculatedItems.push({
           text: this.items[i].text,
           mass: this.items[i].mass * factor
         });
       }

       return calculatedItems;
    }
  }