OneQlik/src/app/dashboard/add-new-device/add-new-device.component.html

<app-all-menus></app-all-menus>
<div id="toast">
  <div id="desc">{{ data_descip }}</div>
</div>
<div class="loading" *ngIf="Load">Loading&#8230;</div>
<div class="topDiv">
  <div class="card">
    <div class="card-header">
      <h4>
        Add Device
        <button type="button" class="close pull-right" (click)="back()">
          <i class="fas fa-arrow-circle-left"></i>
        </button>
      </h4>
    </div>

    <div class="card-body">
      <form [formGroup]="deviceForm" (ngSubmit)="submit()">
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="inputPassword4">Contact No.</label> <span>*</span>
            <input
              (input)="onSearchChange($event.target.value)"
              formControlName="contactNo"
              type="text"
              class="form-control"
              id="inputPassword4"
              placeholder="Enter Contact number"
              [ngClass]="{ 'is-invalid': submitted && f.contactNo.errors }"
            />
            <small [class.d-none]="!contactMessage">{{contactMessage}}</small>
            <div
              *ngIf="submitted && f.contactNo.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.contactNo.errors.required">
                Contact Number is required
              </div>
              <div *ngIf="f.contactNo.errors.pattern">
                Please enter valid Contact No
              </div>
            </div>
          </div>
          <div class="form-group col-md-2">
            <label for="inputEmail4">Owner First Name</label> <span>*</span>
            <input
              formControlName="first_name"
              type="text"
              class="form-control"
              id="inputEmail4"
              placeholder="Enter First Name"
              [ngClass]="{ 'is-invalid': submitted && f.first_name.errors }"
            />
            <div
              *ngIf="submitted && f.first_name.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.first_name.errors.required">
                Owner First Name is required
              </div>
              <div *ngIf="f.first_name.errors.pattern">
                Please enter valid first name
              </div>
            </div>
          </div>
          <div class="form-group col-md-2">
            <label for="inputEmail4">Owner Last Name</label> <span>*</span>
            <input
              formControlName="last_name"
              type="text"
              class="form-control"
              id="inputEmail4"
              placeholder="Enter Last Name"
              [ngClass]="{ 'is-invalid': submitted && f.last_name.errors }"
            />
            <div
              *ngIf="submitted && f.last_name.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.last_name.errors.required">
                Owner Last Name is required
              </div>
              <div *ngIf="f.last_name.errors.pattern">
                Please enter valid last name
              </div>
            </div>
          </div>
          <div class="form-group col-md-4">
            <label for="inputCity">Email</label>
            <!-- <span>*</span> -->
            <input
              formControlName="email"
              type="text"
              class="form-control"
              id="inputCity"
              placeholder="Please Enter Email"
            />
            <!-- <div *ngIf="submitted && f.email.errors.email" class="invalid-feedback">
                <div *ngIf="f.email.errors.email">Please Enter valid email id</div>
              </div> -->
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="inputCity">Dealer Followup Mobile</label> <span>*</span>
            <input
              formControlName="dealerFollowup"
              type="text"
              class="form-control"
              id="inputCity"
              [ngClass]="{ 'is-invalid': submitted && f.dealerFollowup.errors }"
            />
            <div
              *ngIf="submitted && f.dealerFollowup.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.dealerFollowup.errors.required">
                Dealer Followup is required
              </div>
              <div *ngIf="f.dealerFollowup.errors.pattern">
                Please Enter Valid number
              </div>
            </div>
          </div>

          <div class="form-group col-md-4">
            <label for="inputCity">Address</label> <span>*</span>
            <input
              formControlName="address"
              type="text"
              class="form-control"
              id="inputCity"
              [ngClass]="{ 'is-invalid': submitted && f.dealerFollowup.errors }"
            />
            <div *ngIf="submitted && f.address.errors" class="invalid-feedback">
              <div *ngIf="f.address.errors.required">Address is required</div>
            </div>
          </div>
          <div class="form-group col-md-4">
            <label for="pin">Pin Code</label> <span>*</span>
            <input
              formControlName="pin"
              type="text"
              class="form-control"
              id="pin"
              [ngClass]="{ 'is-invalid': submitted && f.dealerFollowup.errors }"
            />
            <div *ngIf="submitted && f.pin.errors" class="invalid-feedback">
              <div *ngIf="f.pin.errors.required">Pin Code is required</div>
              <div *ngIf="f.pin.errors.pattern">
                Please Enter valid Pin code
              </div>
            </div>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="inputState">State</label>
            <select
              formControlName="state"
              (change)="onStateChange($event)"
              id="inputState"
              class="form-control"
            >
              <option value="" selected disabled>Choose state</option>
              <option *ngFor="let item of states" [value]="item">
                {{ item }}
              </option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label for="inputCity">City</label>
            <select
              formControlName="city"
              (change)="onCityChange($event)"
              id="inputState"
              class="form-control"
            >
              <option value="" selected disabled>Choose City</option>
              <option *ngFor="let item of cityList" [value]="item.city">
                {{ item.city }}
              </option>
            </select>
            <!-- <input formControlName="city" type="text" class="form-control" id="inputCity"> -->
          </div>
          <div class="form-group col-md-4">
            <label for="inputZip">RTO Office</label>
            <select
              formControlName="rtoOffice"
              id="inputState"
              class="form-control"
            >
              <option value="" selected disabled>Choose RTO</option>
              <option *ngFor="let item of RTO" [value]="item.RTO_Name">
                {{ item.RTO_Name }}
              </option>
            </select>
            <!-- <input formControlName="rtoOffice" type="text" class="form-control" id="inputZip"> -->
          </div>
        </div>

        <div class="form-row">
          <div *ngIf="!inventoryManagement" class="form-group col-md-4">
            <label for="inputCity">Device ID (IMEI)</label><span>*</span>
            <input
              formControlName="device_id"
              type="text"
              (keyup)="removeSpecialChar()"
              class="form-control"
              id="inputCity"
              [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
            />
            <div
              *ngIf="submitted && f.device_id.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.device_id.errors.required">
                Device Id is required
              </div>
            </div>
          </div>
          <div *ngIf="inventoryManagement" class="form-group col-md-4">
            <label for="inputCity">Device ID (IMEI)</label><span>*</span>
            <div>
              <select   id="inventory" multiple="multiple">
                <option
                  *ngFor="let option_1 of inventory"
                  [value]="option_1.IMEI"
                >
                  {{ option_1.IMEI }}
                </option>
              </select>
            </div>
           
            <div  *ngIf="invalidEmeiSelected"   style="margin-top: 0.25rem;
    font-size: .875rem;
    color: #dc3545;">This IMEI is already added in system. Please choose different IMEI</div>
            <div
              *ngIf="submitted && f.device_id.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.device_id.errors.required">
                Device Id is required
              </div>
            </div> 
            
          </div>

          <div class="form-group col-md-4">
            <label for="inputPassword4">Vehicle No.</label><span>*</span>
            <input
              formControlName="vehicleNo"
              type="text"
              class="form-control"
              id="inputPassword4"
              placeholder="Enter Vehicle number"
              [ngClass]="{ 'is-invalid': submitted && f.vehicleNo.errors }"
            />
            <div
              *ngIf="submitted && f.vehicleNo.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.vehicleNo.errors.required">
                Vehicle number is required
              </div>
              <div *ngIf="f.vehicleNo.errors.maxLength">
                Vehicle number accepts max 10 digits
              </div>
            </div>
          </div>

          <div class="form-group col-md-4">
            <label for="inputEmail4">Vehicle Type</label><span>*</span>
            <div>
              <select id="vehicleType" multiple="multiple">
                <option *ngFor="let option_1 of vehData" [value]="option_1._id">
                  {{ option_1.vehicle_name }}
                </option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="iccid">ICCID</label>
            <input
              formControlName="iccid"
              type="text"
              class="form-control"
              id="iccid"
              placeholder="Enter ICCID No number"
            />
          </div>

          <div class="form-group col-md-4">
            <label for="sim1">SIM 1</label> <span>*</span>
            <input
              formControlName="sim1"
              type="text"
              class="form-control"
              id="sim1"
              placeholder="Enter SIM number"
              [ngClass]="{ 'is-invalid': submitted && f.sim1.errors }"
            />
            <div *ngIf="submitted && f.sim1.errors" class="invalid-feedback">
              <div *ngIf="f.sim1.errors.required">SIM 1 is required</div>
            </div>
          </div>

          <div class="form-group col-md-4">
            <label for="inputEmail4">SIM 2</label>
            <div>
              <input
                formControlName="sim2"
                type="text"
                class="form-control"
                id="sim1"
                placeholder="Enter SIM number"
              />
            </div>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="inputEmail4">Chassis No.</label><span>*</span>
            <input
              formControlName="chasisNo"
              type="text"
              class="form-control"
              id="inputEmail4"
              placeholder="Enter Chasis No."
              [ngClass]="{ 'is-invalid': submitted && f.chasisNo.errors }"
            />
            <div
              *ngIf="submitted && f.chasisNo.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.chasisNo.errors.required">
                Chassis No is required
              </div>
            </div>
          </div>
          <div class="form-group col-md-4">
            <label for="inputPassword4">Engine No.</label><span>*</span>
            <input
              formControlName="engineNo"
              type="text"
              class="form-control"
              id="inputPassword4"
              placeholder="Enter Engine number"
              [ngClass]="{ 'is-invalid': submitted && f.engineNo.errors }"
            />
            <div
              *ngIf="submitted && f.engineNo.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.engineNo.errors.required">
                Engine No is required
              </div>
            </div>
          </div>
          <div class="form-group col-md-4">
            <label for="inputEmail4">Panic Button Quality.</label>
            <select formControlName="panic" class="form-control">
              <option value="" selected disabled>Select Panic Button</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
            <!-- <input formControlName="panic" type="text" class="form-control" id="inputEmail4"
                placeholder="Enter Panic Button Quality."> -->
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="inputCity">Vehicle Manufacture</label>
            <select
              class="form-control"
              formControlName="vehicleManufacture"
              (change)="selectModel($event)"
            >
              <option value="" selected disabled>Choose Manufacturer</option>
              <option *ngFor="let item of manufacturingData" [value]="item">
                {{ item }}
              </option>
            </select>
            <!-- <input formControlName="vehicleManufacture" type="text" class="form-control" id="inputCity"> -->
          </div>

          <div class="form-group col-md-4">
            <label for="inputZip">Model</label>
            <select class="form-control" formControlName="model">
              <option value="" selected disabled>Choose Model</option>
              <option *ngFor="let item of modelData" [value]="item.ModelName">
                {{ item.ModelName }}
              </option>
            </select>
            <!-- <input formControlName="vehicleCategory" type="text" class="form-control" id="inputZip"> -->
          </div>

          <div class="form-group col-md-4">
            <lable>{{ "Vehicle Category" | translate }} :</lable>
            <select formControlName="vehicleCategory" class="form-control">
              <option *ngFor="let license of vehicleCat" [value]="license">
                {{ license }}
              </option>
            </select>

            <!-- <label for="inputZip">Type Of Vehicle</label>
              <input formControlName="vehicleCategory" type="text" class="form-control" id="inputZip"> -->
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="inputState">Device Model</label><span>*</span>
            <div>
              <select id="dbselect" multiple="multiple">
                <option
                  *ngFor="let option_1 of device_Model"
                  [value]="option_1._id"
                >
                  {{ option_1.modelName }}
                </option>
              </select>
            </div>
          </div>

          <div class="form-group col-md-4">
            <label for="inputZip">Tracking Expiry</label>
            <input
              disabled
              formControlName="trackingExp"
              bsDatepicker
              [bsConfig]="bsConfig"
              [isDisabled]="true"
              type="text"
              class="form-control"
              id="inputZip"
            />
          </div>

          <div class="form-group col-md-4">
            <label for="inputZip">E sim Expiry</label>
            <input
              formControlName="eSimExpiry"
              bsDatepicker
              [attr.disabled]="true"
              [bsConfig]="bsConfig"
              type="text"
              class="form-control"
              id="inputZip"
            />
          </div>
        </div>

        <div class="row"></div>
      </form>
      <div
        style="overflow: auto; overflow-x: hidden; min-height: 200px"
        [ngClass]="{ rowHeight: docRow }"
      >
        <div class="row" *ngFor="let data of imageuploadObject; let i = index">
          <div class="col-sm-6" style="padding-top: 8px">
            <div class="row">
              <div class="col-md-4">
                <span>{{ data.doctype }} : </span>
              </div>
              <div class="col-md-6">
                <input
                  type="text"
                  [(ngModel)]="data.phone"
                  placeholder="{{ 'Doc number' | translate }}"
                />
              </div>
              <div class="col-md-2">
                <img
                  *ngIf="data.image"
                  style="width: 50px"
                  [src]="'https://www.oneqlik.in' + data.image.substring(6)"
                  (click)="openModal(template, data)"
                />
              </div>
            </div>
          </div>

          <div class="col-sm-6">
            <span
              ><input
                type="file"
                class="btn btn btn-success"
                style="background: #f1f1f1; border: none; color: black"
                (change)="onFileChanged($event, i)"
            /></span>
            <!-- <span>
              <button class="btn btn btn-success" (click)="onUpload(i)">
                {{ uploadStatus }}
              </button></span
            > -->
          </div>
        </div>
      </div>
      <div class="accordion" id="accordionExample">
        <div
          class="card"
          style="margin-left: 61px; margin-top: 23px; margin-right: 151px"
        >
          <div class="card-header" id="headingOne">
            <h2 class="mb-0">
              <button
                class="btn btn-link"
                type="button"
                data-toggle="collapse"
                data-target="#collapseOne"
                aria-expanded="true"
                aria-controls="collapseOne"
              >
                Upload Device Image
              </button>
            </h2>
          </div>

          <div
            id="collapseOne"
            class="collapse collapse"
            aria-labelledby="headingOne"
            data-parent="#accordionExample"
          >
            <div class="card-body">
              <div class="row">
                <div class="col-md-2">
                  <span>Device Image 1: </span>
                </div>

                <div class="col-md-2">
                  <img
                    *ngIf="deviceImg[0]"
                    style="width: 50px"
                    [src]="'https://www.oneqlik.in' + deviceImg[0].substring(6)"
                    (click)="openModal(template, deviceImg[0])"
                  />
                </div>

                <div class="col-md-4">
                  <input
                    style="
                      background: #ececec;
                      width: 80%;
                      margin-left: 5px;
                      border: 1px solid #c1c1c1;
                    "
                    type="file"
                    (change)="onDeviceImageChanged($event, 0)"
                  />
                </div>

                <!-- <div class="col-md-4">
                  <i
                    class="fas fa-cloud-upload-alt"
                    style="
                      color: #4c6ef5;
                      float: left;
                      font-size: 23px;
                      line-height: 2.1rem;
                      cursor: pointer;
                    "
                    title="Upload Image"
                    (click)="onDeviceImageUploadUpload(0)"
                  ></i>
                </div> -->
              </div>

              <div class="row">
                <div class="col-md-2">
                  <span>Device Image 2: </span>
                </div>
                <div class="col-md-2">
                  <img
                    *ngIf="deviceImg[1]"
                    style="width: 50px"
                    [src]="'https://www.oneqlik.in' + deviceImg[1].substring(6)"
                    (click)="openModal(template, deviceImg[1])"
                  />
                </div>
                <div class="col-md-4">
                  <input
                    style="
                      background: #ececec;
                      width: 80%;
                      margin-left: 5px;
                      border: 1px solid #c1c1c1;
                    "
                    type="file"
                    (change)="onDeviceImageChanged($event, 1)"
                  />
                </div>

                <!-- <div class="col-md-4">
                  <i
                    class="fas fa-cloud-upload-alt"
                    style="
                      color: #4c6ef5;
                      float: left;
                      font-size: 23px;
                      line-height: 2.1rem;
                      cursor: pointer;
                    "
                    title="Upload Image"
                    (click)="onDeviceImageUploadUpload(1)"
                  ></i>
                </div> -->
              </div>

              <div class="row">
                <div class="col-md-2">
                  <span>Device Image 3: </span>
                </div>
                <div class="col-md-2">
                  <img
                    *ngIf="deviceImg[2]"
                    style="width: 50px"
                    [src]="'https://www.oneqlik.in' + deviceImg[2].substring(6)"
                    (click)="openModal(template, deviceImg[2])"
                  />
                </div>
                <div class="col-md-4">
                  <input
                    style="
                      background: #ececec;
                      width: 80%;
                      margin-left: 5px;
                      border: 1px solid #c1c1c1;
                    "
                    type="file"
                    (change)="onDeviceImageChanged($event, 2)"
                  />
                </div>

                <!-- <div class="col-md-4">
                  <i
                    class="fas fa-cloud-upload-alt"
                    style="
                      color: #4c6ef5;
                      float: left;
                      font-size: 23px;
                      line-height: 2.1rem;
                      cursor: pointer;
                    "
                    title="Upload Image"
                    (click)="onDeviceImageUploadUpload(2)"
                  ></i>
                </div> -->
              </div>

              <div id="toast">
                <div id="desc">{{ data_descip }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card-footer text-center">
        <button type="submit" class="btn btn-primary" (click)="submit()">
          Add Device
        </button>
      </div>
    </div>
  </div>
</div>
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">{{ docName }}</h4>
    <button
      type="button"
      class="close pull-right"
      aria-label="Close"
      (click)="modalRef.hide()"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body row">
    <div class="col-md-12">
      <img style="width: -webkit-fill-available" src="{{ image }}" />
    </div>
  </div>
</ng-template>