@@ -49,6 +49,7 @@
<tr>
<th scope="col">#</th>
<th scope="col">License Plate</th>
<th scope="col">Current Owner</th>
<th scope="col">Type</th>
<th scope="col">Cartracker</th>
<th scope="col">Manage</th>
@@ -58,14 +59,64 @@
<tr *ngFor="let vehicle of filteredVehicles; let i=index">
<th *ngIf="i < listLimit" scope="row">{{vehicle.id}}</th>
<td *ngIf="i < listLimit">{{vehicle.licensePlate}}</td>
<td *ngIf="i < listLimit && vehicle.currentOwner !== null">{{vehicle.currentOwner.username}}</td>
<td *ngIf="i < listLimit && vehicle.currentOwner === null">No Owner</td>
<td *ngIf="i < listLimit">{{vehicle.vehicleType}}</td>
<td *ngIf="i < listLimit">{{vehicle.cartrackerId}}</td>
<td *ngIf="i < listLimit && vehicle.cartracker !== null">{{vehicle.cartracker.hardware}}</td>
<td *ngIf="i < listLimit && vehicle.cartracker === null">No Cartracker</td>
<td *ngIf="i < listLimit">
<a (click)="edit(vehicle)" data-toggle="tooltip" data-placement="bottom" title="Edit">
<a (click)="edit(vehicle)" data-toggle="modal" data-target="#editModal" title="Edit">
<span class="fas fa-edit"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog bg-dark" role="document">
<div class="modal-content bg-dark">
<div class="modal-header bg-dark">
<h5 class="modal-title" id="editModalLabel">Edit Vehicle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body bg-dark">
<form *ngIf="editVehicle !== null">
<div class="form-group">
<label for="licensePlate" class="col-form-label">License Plate:</label>
<input name="licensePlate" type="text" class="form-control" id="licensePlate" [(ngModel)]="editVehicle.licensePlate">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Type:</label>
<div class="dropdown mr-sm-3">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{editVehicle.vehicleType}}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a *ngFor="let type of types()" class="dropdown-item" (click)="setEditVehicleType(type)">{{type}}</a>
</div>
</div>
</div>
<div class="form-group">
<label for="cartracker" class="col-form-label">Cartracker:</label>
<input name="cartracker" type="text" class="form-control dropdown-toggle" data-toggle="dropdown" placeholder="Search Cartracker" aria-label="Search"
aria-describedby="basic-addon2" [(ngModel)]="cartrackerQuery" (keyup)="searchCartracker()">
<div class="dropdown-menu" [hidden]="cartrackerResults.length === 0">
<a *ngFor="let result of cartrackerResults" class="dropdown-item" (click)="setCartracker(result)">
{{result.hardware}}
</a>
</div>
</div>
</form>
</div>
<div class="modal-footer bg-dark">
<button type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light" (click)="updateVehicle()" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
@@ -1,28 +1,38 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpService } from '../_service/http.service';
import { Vehicle } from '../_model/Vehicle';
import { VehicleType } from '../_model/VehicleType';
import { EnumEx } from '../_util/EnumEx';
import { Cartracker } from '../_model/Cartracker';
import { User } from '../_model/User';

@Component({
selector: 'app-vehicle-list',
templateUrl: 'vehicle-list.component.html'
})

export class VehicleListComponent implements OnInit {
vehicles: Vehicle[] = [];
filteredVehicles: Vehicle[] = [];
search = '';
searchProperty = 'ID';
filteredType = 'All';

listLimit = 50;
private vehicles: Vehicle[] = [];
private filteredVehicles: Vehicle[] = [];
private search = '';
private searchProperty = 'ID';
private filteredType: VehicleType | string = 'All';

public listLimit = 50;

editUser = null;
userQuery = '';
userResults: User[] = [];

editVehicle = null;
cartrackerQuery = '';
cartrackerResults: Cartracker[] = [];

constructor(private http: HttpService) { }

ngOnInit() {
this.getVehicles();
// this.http.getUser();
}

getVehicles() {
@@ -31,6 +41,11 @@ export class VehicleListComponent implements OnInit {
if (response !== null) {
this.vehicles = response;
this.filteredVehicles = response;


if (this.filteredVehicles.length > 0) {
this.editVehicle = this.filteredVehicles[0];
}
}
});
}
@@ -68,7 +83,7 @@ export class VehicleListComponent implements OnInit {
break;
case 'Cartracker':
this.filteredVehicles = this.vehicles.filter(v =>
(v.cartrackerId.toString().toLowerCase().search(this.search) >= 0));
(v.cartracker.hardware.toString().toLowerCase().search(this.search) >= 0));
break;
}
} else {
@@ -77,11 +92,67 @@ export class VehicleListComponent implements OnInit {

if (this.filteredType !== 'All') {
this.filteredVehicles = this.filteredVehicles.filter(v =>
(v.vehicleType.valueOf().toLowerCase().replace('_', '') === this.filteredType));
(v.vehicleType === this.filteredType));
}
}

edit(vehicle: Vehicle) {
console.log('Editting...');
this.editVehicle = new Vehicle(vehicle.id, vehicle.licensePlate, vehicle.vehicleType, vehicle.cartracker);
if (this.editVehicle.cartracker !== null) {
this.cartrackerQuery = this.editVehicle.cartracker.hardware;
} else {
this.cartrackerQuery = '';
}
}

searchUser() {
if (this.userQuery !== '') {
this.http.getUsersByUsername(this.userQuery)
.then(response => {
if (response !== null) {
this.userResults = response;
} else {
this.userResults = [];
}
});
}
}

setCurrentOwner(user: User) {
this.editUser = user;
this.userQuery = user.username;
}

setEditVehicleType(type: VehicleType) {
this.editVehicle.vehicleType = type;
}

searchCartracker() {
if (this.cartrackerQuery !== '') {
this.http.getCartrackersByHardware(this.cartrackerQuery)
.then(response => {
if (response !== null) {
this.cartrackerResults = response;
} else {
this.cartrackerResults = [];
}
});
}
}

setCartracker(cartracker: Cartracker) {
this.editVehicle.cartracker = cartracker;
this.cartrackerQuery = cartracker.hardware;
}

updateVehicle() {
this.http.updateVehicle(this.editVehicle)
.then(response => {
let veh = this.vehicles.filter(v => v.id === response.id)[0];
veh = response;
this.filteredVehicles = this.vehicles;
console.log(this.vehicles);
this.filterVehicles();
});
}
}