API tools faq
paste
Guest User

Untitled

a guest
Jun 24th, 2017
513
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.59 KB | None | 0 0
raw download clone embed print report
  1. <ion-header>
  2.   <ion-navbar color="primary">
  3.     <ion-title>Log a Catch</ion-title>
  4.     <ion-buttons end>
  5.       <button ion-button icon-only (click)="logOut()">
  6.         <ion-icon name="log-out"></ion-icon>
  7.       </button>
  8.     </ion-buttons>
  9.   </ion-navbar>
  10. </ion-header>
  11.  
  12. <ion-content>
  13.   <form [formGroup]="addCatchForm" (submit)="addToDb()" novalidate>
  14.     <!--LOCATION AND TIME DETAILS-->
  15.     <ion-grid>
  16.       <ion-row>
  17.         <ion-col col-12>
  18.           <ion-item no-lines>
  19.             <h1>Basic Details</h1>
  20.           </ion-item>
  21.         </ion-col>
  22.       </ion-row>
  23.       <!--IMAGE / CAUGHT BY-->
  24.       <ion-row>
  25.         <ion-col col-3>
  26.           <img src="assets/img/catchimg_placeholder.png" class="catchimg-preview">
  27.         </ion-col>
  28.         <ion-col col-9>
  29.           <ion-item>
  30.             <ion-label stacked>
  31.               <ion-icon name="person"></ion-icon> Caught By *</ion-label>
  32.             <ion-input value="{{ userName }}" type="text" formControlName="catchCaughtBy"></ion-input>
  33.           </ion-item>
  34.         </ion-col>
  35.       </ion-row>
  36.       <!--TIME AND DATE-->
  37.       <ion-row>
  38.         <ion-col col-12>
  39.           <ion-item>
  40.             <ion-label stacked>
  41.               <ion-icon name="time"></ion-icon> Time/Date *</ion-label>
  42.             <ion-datetime displayFormat="DDDD DD.MM.YYYY, HH:mm" min="2016" [(ngModel)]="currentDate" name="currentDate" formControlName="catchDate"></ion-datetime>
  43.           </ion-item>
  44.         </ion-col>
  45.       </ion-row>
  46.       <!--LOCATION-->
  47.       <ion-row>
  48.         <ion-col col-12>
  49.           <ion-item no-lines>
  50.             <h1>Location Details</h1>
  51.           </ion-item>
  52.         </ion-col>
  53.       </ion-row>
  54.       <ion-row>
  55.         <ion-col col-6>
  56.           <ion-item>
  57.             <ion-label stacked>
  58.               <ion-icon name="pin"></ion-icon> Location * </ion-label>
  59.             <ion-input type="text" formControlName="catchLocation"></ion-input>
  60.           </ion-item>
  61.         </ion-col>
  62.         <ion-col col-6>
  63.           <ion-item>
  64.             <ion-label stacked>
  65.               <ion-icon name="book"></ion-icon> Location Description</ion-label>
  66.             <ion-input type="text" formControlName="catchLocationDesc"></ion-input>
  67.           </ion-item>
  68.         </ion-col>
  69.       </ion-row>
  70.       <!--CATCH DETAILS-->
  71.       <ion-row>
  72.         <ion-col col-12>
  73.           <ion-item no-lines>
  74.             <h1>Catch Details</h1>
  75.           </ion-item>
  76.         </ion-col>
  77.       </ion-row>
  78.       <!--SPECIES-->
  79.       <ion-row>
  80.         <ion-col col-12>
  81.           <ion-item (click)="setCatchSpecies()">
  82.             <!--<ion-label stacked (click)="setLureType()">
  83.            Type
  84.          </ion-label>-->
  85.             <p stacked style="font-size: 12px; padding-bottom: 10px; color:gray;">Type</p>
  86.             <p style="font-size: 14px; color:black;" *ngIf="!catchSpecies">Click to set</p>
  87.             <p style="font-size: 14px; color:black;" *ngIf="catchSpecies">{{ catchSpecies }}</p>
  88.  
  89.           </ion-item>
  90.         </ion-col>
  91.       </ion-row>
  92.       <ion-row radio-group [(ngModel)]="catchSexSelection" [ngModelOptions]="{standalone: true}">
  93.         <ion-item no-lines>
  94.           <h2>Sex</h2>
  95.         </ion-item>
  96.         <!--FISH SEX-->
  97.         <ion-col col-4>
  98.           <ion-item no-lines>
  99.             <ion-label>
  100.               <ion-icon name="male"></ion-icon> Male</ion-label>
  101.             <ion-radio value="male" formControlName="catchSex"></ion-radio>
  102.           </ion-item>
  103.         </ion-col>
  104.         <ion-col col-4>
  105.           <ion-item no-lines>
  106.             <ion-label>
  107.               <ion-icon name="female"></ion-icon> Female</ion-label>
  108.             <ion-radio value="female" formControlName="catchSex"></ion-radio>
  109.           </ion-item>
  110.         </ion-col>
  111.         <ion-col col-4>
  112.           <ion-item no-lines>
  113.             <ion-label>Unknown</ion-label>
  114.             <ion-radio value="unknown" formControlName="catchSex"></ion-radio>
  115.           </ion-item>
  116.         </ion-col>
  117.       </ion-row>
  118.       <ion-row>
  119.         <ion-item no-lines>
  120.           <h2>Size</h2>
  121.           <p>Set custom value by clicking subheader</p>
  122.         </ion-item>
  123.         <ion-col col-4>
  124.           <!--Hack to use decimals with slider-->
  125.           <!--WEIGHT-->
  126.           <ion-item no-lines>
  127.             <ion-label (click)="setCatchWeightManually()">Weight {{ catchWeight }} kg</ion-label>
  128.             <ion-range min="10" max="500" [ngModel]="100 * catchWeight" (ngModelChange)="catchWeight=$event/100" name="catchWeight" formControlName="catchWeight"></ion-range>
  129.           </ion-item>
  130.         </ion-col>
  131.         <ion-col col-4>
  132.           <!--LENGTH-->
  133.           <ion-item no-lines>
  134.             <ion-label (click)="setCatchLengthManually()">Length {{ catchLength }} cm</ion-label>
  135.             <ion-range min="0" max="800" [ngModel]="10 * catchLength" (ngModelChange)="catchLength=$event/10" name="catchLength" formControlName="catchLength"></ion-range>
  136.           </ion-item>
  137.         </ion-col>
  138.         <ion-col col-4>
  139.           <!--GIRTH-->
  140.           <ion-item no-lines>
  141.             <ion-label (click)="setCatchGirthManually()">Girth {{ catchGirth }} cm</ion-label>
  142.             <ion-range min="0" max="500" [ngModel]="10 * catchGirth" (ngModelChange)="catchGirth=$event/10" name="catchGirth" formControlName="catchGirth"></ion-range>
  143.           </ion-item>
  144.         </ion-col>
  145.       </ion-row>
  146.  
  147.       <ion-row radio-group [(ngModel)]="catchFate" [ngModelOptions]="{standalone: true}" justify-content-center align-items-center>
  148.         <ion-item no-lines>
  149.           <h2>Fate</h2>
  150.         </ion-item>
  151.         <!--FATE-->
  152.         <ion-col col-6>
  153.           <ion-item no-lines>
  154.             <ion-label text-end>
  155.               Keep
  156.             </ion-label>
  157.             <ion-radio item-start value="Keep" formControlName="catchFate"></ion-radio>
  158.           </ion-item>
  159.         </ion-col>
  160.         <ion-col col-6>
  161.           <ion-item no-lines>
  162.             <ion-label text-start>
  163.               Release
  164.             </ion-label>
  165.             <ion-radio value="Release" formControlName="catchFate"></ion-radio>
  166.           </ion-item>
  167.         </ion-col>
  168.       </ion-row>
  169.  
  170.       <!--BAIT AND LURE DETAILS-->
  171.       <ion-row>
  172.         <ion-col col-12>
  173.           <ion-item no-lines>
  174.             <h1>Lure Details</h1>
  175.           </ion-item>
  176.         </ion-col>
  177.       </ion-row>
  178.       <ion-row>
  179.         <ion-col col-6>
  180.           <!--BAIT NAME-->
  181.           <ion-item>
  182.             <ion-label stacked>
  183.               Name or Model
  184.             </ion-label>
  185.             <ion-input type="text" formControlName="lureModel"></ion-input>
  186.             <!--<ion-input></ion-input>-->
  187.           </ion-item>
  188.         </ion-col>
  189.         <ion-col col-6>
  190.           <!--BAIT TYPE-->
  191.           <ion-item (click)="setLureType()">
  192.             <!--<ion-label stacked (click)="setLureType()">
  193.            Type
  194.          </ion-label>-->
  195.             <p stacked style="font-size: 12px; padding-bottom: 10px; color:gray;">Type</p>
  196.             <p style="font-size: 14px; color:black;" *ngIf="!lureType">Click to set</p>
  197.             <p style="font-size: 14px; color:black;" *ngIf="lureType">{{ lureType }}</p>
  198.  
  199.           </ion-item>
  200.         </ion-col>
  201.       </ion-row>
  202.  
  203.       <ion-row>
  204.         <ion-col col-12>
  205.           <ion-item>
  206.             <ion-label stacked>
  207.               Technique
  208.             </ion-label>
  209.             <ion-textarea formControlName="lureTechnique"></ion-textarea>
  210.           </ion-item>
  211.         </ion-col>
  212.       </ion-row>
  213.       <ion-item>
  214.         <button ion-button full block type="submit">Submit</button>
  215.       </ion-item>
  216.     </ion-grid>
  217.   </form>
  218. </ion-content>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!