Add total sums of EUR/USD expenses

app/components/add-reimbursement/component.js

@@ -33,6 +33,26 @@ export default class AddReimbursementComponent extends Component {
     return this.isValidTotal ? 'valid' : '';
   }
 
+  get totalEUR () {
+    const expenses = this.expenses.filterBy('currency', 'EUR');
+    if (expenses.length > 0) {
+      return expenses.mapBy('amount')
+                     .reduce((summation, current) => summation + current);
+    } else {
+      return 0;
+    }
+  }
+
+  get totalUSD () {
+    const expenses = this.expenses.filterBy('currency', 'USD');
+    if (expenses.length > 0) {
+      return expenses.mapBy('amount')
+                     .reduce((summation, current) => summation + current);
+    } else {
+      return 0;
+    }
+  }
+
   get submitButtonEnabled () {
     return this.isValidTotal &&
            (this.expenses.length > 0);

app/components/add-reimbursement/template.hbs

@@ -13,17 +13,37 @@
       </select>
     </p>
   </label>
-  <label>
-    <p class="label">Total amount (WBTC):</p>
-    <p>
-      {{input type="text"
-              placeholder="500"
-              value=this.total
-              required=true
-              pattern="([0-9]*[.])?[0-9]+"
-              class=this.totalInputClass}}
-    </p>
-  </label>
+  <fieldset class="horizontal thirds total-amounts">
+    <label>
+      <p class="label">Total amount (WBTC):</p>
+      <p>
+        {{input type="text"
+                placeholder="0.0015"
+                value=this.total
+                required=true
+                pattern="([0-9]*[.])?[0-9]+"
+                class=this.totalInputClass}}
+      </p>
+    </label>
+    <label>
+      <p class="label">EUR total</p>
+      <p>
+        {{input type="text"
+                name="total-eur"
+                value=this.totalEUR
+                disabled=true}}
+      </p>
+    </label>
+    <label>
+      <p class="label">USD total</p>
+      <p>
+        {{input type="text"
+                name="total-usd"
+                value=this.totalUSD
+                disabled=true}}
+      </p>
+    </label>
+  </fieldset>
 
   <h3>Expense items</h3>
   {{#if this.expenses}}

app/styles/_forms.scss

@@ -53,6 +53,14 @@ section#signup {
         grid-template-columns: 1fr 1fr;
         grid-gap: 2rem;
 
+        &.thirds {
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        &.total-amounts {
+          grid-template-columns: 2fr 1fr 1fr;
+        }
+
         label {
         }
       }