alientronics/fleetany-mobile

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{ "title" | translate }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="fuel">

  <form #fuelForm="ngForm">
    <ion-list>

      <ion-item>
        <ion-label>{{ "fuel.Price" | translate }}</ion-label>
        <ion-input type="number" [(ngModel)]="price" [ngModelOptions]="{standalone: true}"></ion-input>
      </ion-item>
      <div *ngIf="price.hasError('required') && price.touched && false" 
          class="error">* {{ "fuel.Price" | translate }} {{ "validate.Numeric" | translate }}!</div>

      <ion-item>
        <ion-label>{{ "fuel.Amount" | translate }}</ion-label>
        <ion-input type="number" [(ngModel)]="amount" [ngModelOptions]="{standalone: true}"></ion-input>
      </ion-item>
      <div *ngIf="amount.hasError('required') && amount.touched && false" 
          class="error">* {{ "fuel.Amount" | translate }} {{ "validate.Numeric" | translate }}!</div>

      <ion-item>
        <ion-label>{{ "fuel.Miliage" | translate }}</ion-label>
        <ion-input type="number" [(ngModel)]="miliage" [ngModelOptions]="{standalone: true}"></ion-input>
      </ion-item>
      <div *ngIf="miliage.hasError('required') && miliage.touched && false" 
          class="error">* {{ "fuel.Miliage" | translate }} {{ "validate.Numeric" | translate }}!</div>

      <ion-item>
        <ion-label>{{ "fuel.Type" | translate }}</ion-label>
        <ion-select [(ngModel)]="type" [ngModelOptions]="{standalone: true}">
          <ion-option *ngFor="let type of types" value="{{type.key}}">
            {{type.value}}
          </ion-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>{{ "fuel.TankFillUp" | translate }}</ion-label>
        <ion-toggle [(ngModel)]="tankfill" checked="true" [ngModelOptions]="{standalone: true}"></ion-toggle>
      </ion-item>

    </ion-list>
    
    <div padding>
      <button type="submit" primary block [disabled]="!fuelForm.valid" (click)="onSubmit(fuelForm.value)">{{ "fuel.SendFuel" | translate }}</button>
    </div>
  </form>

  <ion-card [hidden]="!fuelsent">

  </ion-card>

  <ion-card [hidden]="!vehiclefailed">

    <ion-card-content>
      <ion-item>
        {{ "fuel.Vehicle" | translate }} {{ "validate.Selected" | translate }}!
        <button outline item-right (click)="closeAlert()">
          <ion-icon name='close'></ion-icon>
          {{ "general.close" | translate }}
        </button>
      </ion-item>
    </ion-card-content>

  </ion-card>

</ion-content>