<html>
  <head>
      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  

      
    </head>
  <body>

<app-all-menus></app-all-menus>



 <div class="small">
  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
<md-menu #menu="mdMenu">

      <a href="#">
        <h6>DASHBOARD
        <md-icon style="float:right">dashboard</md-icon>
      </h6>
    </a>
      
  
         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
         
   
  </md-menu> 
</div>

    <div  style="float:left; width: 100%;padding-top: 6%;">

    

        <div class="loading" *ngIf="Load">Loading&#8230;</div>

       <md-card style="opacity: .9;margin-top: 15px;background: #fcfbfb;">
      <h4 style="float:left;color:#855353">{{'Add Device Model' | translate}}</h4> <br><hr>


     <!-- ----------------------- Body of Driver Form----------------------------------------------------- -->
        <form #signupForm="ngForm">
     
     <div class ="form-group">
          <!-- Device Model Name  -->
          <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
          <input mdInput   class="no-spin" [(ngModel)]="device_type" name="device_type"placeholder="{{'Device Model Name' | translate}}" required/>
                  <md-error class="required">{{'Enter Device Model' | translate}}</md-error>
                 </md-form-field>
                 <!-- Device Model Configuration Command -->
                 <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
       <input mdInput type="text" [(ngModel)]="config_cmd" name="config_cmd"placeholder="{{'Configuration Command' | translate}}" required/> 
       <md-error class="required">{{'Enter Configuration Command' | translate}}</md-error>
      </md-form-field>
      </div>

      <!-- <div class ="form-group">
   
        <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
        <input mdInput   class="no-spin" [(ngModel)]="sos_number" name="device_type"placeholder="{{'Device SOS Number' | translate}}" />
            
               </md-form-field>
    
               <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
     <input mdInput type="text" [(ngModel)]="chk_status" name="config_cmd"placeholder="{{'Check Status Command' | translate}}" /> 
  
    </md-form-field>
    </div> -->
    <!-- <div class ="form-group">
   
      <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
      <input mdInput   class="no-spin" [(ngModel)]="stop_engine" name="stop_engine" placeholder="{{'Stop Engine Command' | translate}}" />
            
             </md-form-field>
           
             <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
   <input mdInput type="text" [(ngModel)]="restore_engine" name="restore_engine" placeholder="{{'Restore Engine Command' | translate}}" /> 
 
  </md-form-field>
  </div> -->
       <div class ="form-group">
         <!--Location command -->
    <md-form-field class="example-full-width width "  style="float:left;width: 50%;padding-left:2%">
    <input mdInput type="text" [(ngModel)]="loc_cmd" name="loc_cmd"placeholder="{{'Location Command'| translate}}" />                
   </md-form-field>
      <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
          
              <input   mdInput type="text"  [(ngModel)]="imob_cmd" name="imob_cmd"placeholder="{{'Immoblizer Command' | translate}}" required>
              <md-error class="required">{{'Enter Immoblizer command' | translate}}</md-error>  
      </md-form-field>
     </div>
     <div class ="form-group">
        <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
            <input mdInput type="text" [(ngModel)]="reset_cmd" name="reset_cmd" placeholder="{{'Reset Command' | translate}}" required> 
            <md-error class="required">{{'Enter Reset command' | translate}}</md-error> 
          </md-form-field>
          <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
              <input mdInput type="text" [(ngModel)]="resume_cmd" name="resume_cmd" placeholder="{{'Resume Command' | translate}}" required> 
              <md-error class="required">{{'Enter Resume command' | translate}}</md-error> 
            </md-form-field>
     </div>
     <div class ="form-group">
        <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
          <input mdInput class="no-spin" [(ngModel)]="timeZone" name="timezone" placeholder="{{'Timezone' | translate}}" />
        </md-form-field>
        <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
          <input mdInput type="text" [(ngModel)]="apn" name="apn" placeholder="{{'APN' | translate}}" />
        </md-form-field>
    </div>
    <div class ="form-group">
       <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
           <input mdInput type="number" [(ngModel)]="deviceport" name="port" placeholder="{{'Port' | translate}}" > 
         </md-form-field>
 
         <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
           <input mdInput type="text" [(ngModel)]="sms_ip" name="port" placeholder="{{'SMS IP' | translate}}">
         </md-form-field>
   </div>
 
   <div class="form-group">
     <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
       <input mdInput type="text" [(ngModel)]="sms_apn" name="port" placeholder="{{'SMS APN' | translate}}">
     </md-form-field>
     </div>
     <div class="form-group">
   
     <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
       <input mdInput type="text" [(ngModel)]="sms_timezone" name="port" placeholder="{{'SMS Timezone' | translate}}">
     </md-form-field>
   </div>
     <div >
      <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
          <input mdInput type="text" [(ngModel)]="Manufacturer" name="manufacturer" placeholder="{{'Manufacturer' | translate}}" > 
        </md-form-field>
        <md-select (ngModelChange)="immobilizerType($event)" style="width: 46%;padding-top: 12px;"[(ngModel)]="immValue" name="immType" placeholder="{{'Immoblizer Type' | translate}}">
          <md-option  value="serverCmd">Server Command</md-option>
          <md-option  value="mobileCmd">Mobile Command</md-option>
      </md-select>
   </div>
    <!-- sms_ip;
    sms_apn;
    sms_timezone; -->
 

 
     </form>
         <!-- formgroup ends here  -->
<br><br>
      <div >
          <!-- <button class="btn btn-primary btn-block/"(click)="addDevice()" style="cursor:pointer;width: 159px;height: 44px;">Add Device</button> -->
      </div><br>
      <flash-messages style="float: center;"></flash-messages>   
      <!-- form button and flash msgs end here  -->
     <div style="padding-top:3%;">
            <input type="submit" [disabled]="!signupForm.form.valid" (click) ="addDeviceModel(signupForm.form)" class="btn btn-primary btn-block/" value="ADD DEVICE MODEL" style="cursor:pointer;width: 159px;height: 44px;"  fxFlexAlign="center">&nbsp;&nbsp;
            <input type="submit"  (click) ="NewVehicleType()" class="btn btn-primary btn-block/" value="Cancel" style="cursor:pointer;width: 159px;height: 44px;"  >
            <br>
            <flash-messages style="float: center;"></flash-messages>
     </div>
  
       </md-card>
  </div>  
<!-- </div>     -->



    </body>
</html>


<!--   <html>
          <head>
              <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
             
          </head>
          <body>
              <div class="upper">
                  <md-toolbar>My App</md-toolbar>
                <md-toolbar flex style="background-color:white;width: 100%;" >
                  
                        <img src="../../assets/image/f_logo.jpg" 
                        style=
                        "width:12%;padding-top: 8px;">
                        
                      <ul fxHide.sm="true" fxHide.xs="true" style="width:50%;padding:30px 10% 0 0;"  fxLayout="row" >
                                   </ul>
                        
                                   <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> 
                                       <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
                                          <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
                                          <h5>&nbsp;&nbsp;{{or}}</h5><br>
                                       
                                          &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
                                             <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
                                        </md-menu>
                                        
                                        <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
                                       
                                           <img src="../../assets/image/us.jpg" height=30px>
                                        </button>
                                 </ul>
                                       
                                
                             
                                     <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
   
                                         <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
                                           <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
                                           <h5>&nbsp;&nbsp;{{or}}</h5><br>
                                        
                                           &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
                                              <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
                                         </md-menu>
                                         
                                         <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
                                   
                                            <img src="../../assets/image/us.jpg" height=30px>
                                         </button>
                                     
                                   </ul>
                                         
                      
                     </md-toolbar>
                </div>


      
<div class="for" >
    <md-card>
          <form action="" role="form">
              <input id='step2' type='checkbox'>
              <input id='step3' type='checkbox'>
          
              <div id="part1" class="form-group">
                <div class="panel panel-primary">
                             <b><h3 style="text-align:left;">Device Details</h3></b>  

                              

                                <form #lgForm="ngForm" (ngSubmit)="addDevice()">

          <progress-bar [value]="50" [max]="100" title="Device Details"></progress-bar> <br>
                     <div class ="form-group">
                             <md-form-field class="example-full-width width">
        <input mdInput   class="no-spin" [(ngModel)]=" deviceid" name=" deviceid"placeholder="Device ID" required/>
                                     <md-error class="required">Enter Device ID</md-error>
                                    </md-form-field>&nbsp;&nbsp;&nbsp;
                                    <md-form-field class="example-full-width width">
                          <input mdInput type="text" [(ngModel)]="devicename" name="devicename"placeholder="Device Name" required/> 
                          <md-error class="required">Enter Device Name</md-error>
                         </md-form-field>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   
                 <md-form-field class="example-full-width width ">
                          <input mdInput type="text" [(ngModel)]="des" name="des"placeholder="Description" />                
                         </md-form-field>&nbsp;&nbsp;&nbsp;&nbsp;

                         <md-select  name="typdev" placeholder="Device Type" style="margin-top: -4px;
                         width: 40%;
                         /* float: right; */
                         margin-right: 2%;" [(ngModel)]="new" (ngModelChange)="cultivoChange(new)">
                            <md-option *ngFor="let food of foods" [value]="food" >
                              {{ food.viewValue }}
                            </md-option>
                          </md-select> 
                          <div *ngIf="show">
                         <md-form-field  class="example-full-width width" style="float:left;margin-left:8%;">
                                 <input mdInput type="text" [(ngModel)]="hrdwr" name="hrdwr"placeholder="SIM Number" required/> 
                                 <md-error class="required">Enter SIM Number</md-error>  
                         </md-form-field>
                         <md-select  name="neww" placeholder="Vechiles Type" style="margin-top: -4px;
                         width: 40%;
                         /* float: right; */
                         margin-right: 8%;" [(ngModel)]="neww">
                            <md-option *ngFor="let foodd of foodds" [value]="foodd" >
                              {{ foodd.viewValue }}
                            </md-option>
                          </md-select> 
                        </div>
               
    



                            </div> 
                        <br>  <br>  <br> 
                     <div class="btn-group btn-group-lg" role="group" aria-label="...">
                      <label class="back">
                        <div class="btn btn-default btn-primary btn-lg" role="button" (click)="back2home();">Back</div>
                      </label>&nbsp;&nbsp;  
                              <label for='step2' id="continue-step2" class="continue">
                                       <div class="btn btn-default btn-success btn-lg" >Next</div> 
                                     </label>
                                   </div> 
                  </form>
             
           
                </div>
              </div>
          
              <div id="part2" class="form-group">
                <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 style="text-align:left;">Security</h3>
                  </div>
     
                  
                      <progress-bar [value]="100" [max]="100" title="Security" color="red"></progress-bar>
                      <b><h5 align="justify"><font size="+1">Auto-generated authentication token</font></h5></b>
                      <p align="justify">
                          You have registered your device credentials, to get connected you need to generate the token key. Once you have generated the token, you will able to read and write the devices. Token will be sent to your registered e-mail id. Authentication tokens are non-recoverable. If you missplace this token, you will need to re-register the device to generate the new authentication token.
                     </p>
                     <md-card style="margin-top:-2px;height:104px">
                        <div style="margin-top:-35px;">  
                      <div class ="form-group">
                            <br> 
                             
                       <label style="float:left;font-size:16px;"><b>Device ID : &nbsp;</b></label>     
                       <label style="float:left;font-size:12px;    margin-top: 3px;">{{this.deviceid}}</label><br>       
                            </div>
                        
                            <div class ="form-group">
                                <label style="float:left;font-size:16px;"><b>Device Name : &nbsp;</b></label>
                                <label style="float:left;font-size:12px;    margin-top: 3px;">{{this.devicename}}</label><br>       
                                
                           <br> 
                                <br>  </div>
                            </div>
                     </md-card>

                    
                     <div class="btn-group btn-group-lg btn-group-justified" role="group" aria-label="...">
                                             
                        <label for='step2' id="back-step2" class="back">
                            <div class="btn btn-default btn-primary btn-lg" role="button">Back</div>
                          </label>&nbsp;&nbsp;                                    
                                             
                                             
                                                          &nbsp;&nbsp;  <label for='step3' id="continue-step3" class="continue">
                                                             
               <button type="submit" class="btn btn-default btn-success btn-lg"  (click)="addDevice()"[disabled]="!lgForm.form.valid">Submit</button>
                                                        </label>
                                                     </div>
   <flash-messages style="float: center;"></flash-messages>
     <button (click)="test()" style="float:left;font-size:11px;background-color: Transparent; background-repeat:no-repeat;border: none;cursor:pointer;   overflow: hidden;outline:none;margin-top:10pxpx">* token pricing</button>                                                
                      
        
             
                </div>
              </div>
          
    
            </form>
    </md-card>

              </div>




          
          </body>
       </html>                -->


