694 lines
24 KiB
HTML
694 lines
24 KiB
HTML
<app-all-menus></app-all-menus>
|
|
<div id="toast">
|
|
<div id="desc">{{ data_descip }}</div>
|
|
</div>
|
|
<div class="loading" *ngIf="Load">Loading…</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
|
|
formControlName="trackingExp"
|
|
bsDatepicker
|
|
[bsConfig]="bsConfig"
|
|
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
|
|
[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">×</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>
|