Ionic 2 blog series - Rates

input-modal.html

<ion-toolbar>
  <ion-title>
    Rates
  </ion-title>
</ion-toolbar>

<ion-content padding>
  <ion-card>
    <ion-card-header>Money {{rate.direction}} • Daily Rate {{rate.dailyRate() | currency:'GBP':true:'1.2-2'}}</ion-card-header>

    <ion-card-content>
      <ion-list>
        <ion-input stacked-label>
          <ion-label>Description</ion-label>
          <input type="text" [(ngModel)]="rate.description" autofocus required>
        </ion-input>

        <ion-input stacked-label>
          <ion-label>Amount</ion-label>
          <input type="text" [(ngModel)]="rate.amount" required>
        </ion-input>

        <ion-input stacked-label>
          <ion-label>Days</ion-label>
          <input type="text" [(ngModel)]="rate.days" required>
        </ion-input>
      </ion-list>

      <button (click)="save(rate)">Save</button>
      <button light (click)="cancel()">Cancel</button>
    </ion-card-content>
  </ion-card>
</ion-content>

input-modal.js

import {Page, Modal, NavParams} from 'ionic/ionic';

@Page({
  templateUrl: 'app/rates/input-modal.html'
})
export class InputModal {
  constructor(modal: Modal, params: NavParams) {
    this.modal = modal;
    this.rate = {
      direction: params.get('direction'),
      description: '',
      amount: 0,
      days: 30,
      dailyRate() {
        return this.amount / this.days;
      }
    };
  }

  save(rate) {
    console.log(JSON.stringify(rate));
  }

  cancel() {
    let modal = this.modal.get();
    if (modal) {
      modal.close();
    }
  }
}

rates.html

<ion-navbar *navbar>
  <ion-title>
    Rates
  </ion-title>
</ion-navbar>

<ion-content class="rates">
  <ion-row>
    <ion-col><button secondary (click)="showInputModal('In')">Money In</button></ion-col>
    <ion-col class="align-right"><button danger (click)="showInputModal('Out')">Money Out</button></ion-col>
  </ion-row>

  <ion-list>
    <ion-list-header>Daily Rate £100.00</ion-list-header>
    <ion-item>
        <span item-left><h1 secondary>+</h1></span>
        <h2>Wages</h2>
        <p>£100,000 Every 365 Days • £273.98</p>
        <button clear danger item-right>
            <icon trash></icon>
        </button>
    </ion-item>
    <ion-item>
        <span item-left><h1 danger>-</h1></span>
        <h2>Mortgage</h2>
        <p>£1,000 Every 30 Days • £33.33</p>
        <button clear danger item-right>
            <icon trash></icon>
        </button>
    </ion-item>
    <ion-item>
        <span item-left><h1 danger>-</h1></span>
        <h2>Council Tax</h2>
        <p>£137.00 Every 30 Days • £4.56</p>
        <button clear danger item-right>
            <icon trash></icon>
        </button>
    </ion-item>
    <ion-item>
        <span item-left><h1 danger>-</h1></span>
        <h2>TV License</h2>
        <p>£12.12 Every 30 Days • £0.40</p>
        <button clear danger item-right>
            <icon trash></icon>
        </button>
    </ion-item>
    <ion-item>
        <span item-left><h1 danger>-</h1></span>
        <h2>Broadband</h2>
        <p>£33.62 Every 30 Days • £1.12</p>
        <button clear danger item-right>
            <icon trash></icon>
        </button>
    </ion-item>
  </ion-list>
</ion-content>

rates.js

import {Page, Modal} from 'ionic/ionic';
import {InputModal} from './input-modal';

@Page({
  templateUrl: 'app/rates/rates.html'
})
export class Rates {
  constructor(modal: Modal) {
    this.modal = modal;
  }
  showInputModal(direction) {
    this.modal.open(InputModal, {direction: direction});
  }
}