Ticket Management System Administration Portal | Part 5| Vehicle Page Code.

 

Vehicle

Overview

This page will store information about vehicles. It has four parts one vehicle list, new vehicle, search vehicle, update vehicle and delete the vehicle. Update vehicle page will be upload soon. 

Vehicle Page Html Code:

<div id="vehicle_panel" class="col-md-12 display-none">

<nav id="vehicle_nav" class="nav nav-pills nav-stacked my-3">

<a id="new_vehicle_nav_link" class="nav-link" href="#new_vehicle_panel">New</a>

<a id="search_vehicle_nav_link" class="nav-link" href="#search_vehicle_panel">Search</a>

<a id="update_vehicle_nav_link" class="nav-link" href="#update_vehicle_panel">Update</a>

<a id="delete_vehicle_nav_link" class="nav-link" href="#delete_vehicle_panel">Delete</a>

</nav>

<div class="row">

<div id="vehicle_heading_panel" class="col-md-12">

<div class="card bg-grey-500">

<div class="card-header">

<strong id="vehicle_header_text"></strong>

</div>

</div>

</div>

<div id="display_vehicle_panel" class="col-md-12  my-3">

<div class="card">

<div class="card-body">

<table class="table table-bordered">

<thead class="thead-inverse">

<tr>

<th class="w-25">#</th>

<th class="w-25">Veh #</th>

<th class="w-25">Owner Name</th>

<th class="w-25">Type</th>

</tr>

</thead>

<tbody>

<tr>

<td class="w-25" scope="row"></td>

<td class="w-25"></td>

<td class="w-25"></td>

<td class="w-25"></td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

<div id="new_vehicle_panel" class="col-md-12  my-3">

<div class="card">

<div class="card-body">

<div class="row">

<div class="col-md-6">

<div class="form-group">

<label for="my-input">Veh #</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

<div class="col-md-6">

Validation

</div>

<div class="col-md-6">

<div class="form-group">

<label for="my-input">Owner Name</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

<div class="col-md-6">

Validation

</div>

<div class="col-md-6">

<div class="form-group">

<label for="my-input">Date</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

<div class="col-md-6">

Validation

</div>

<div class="col-md-6">

<div class="form-group">

<label for="my-input">Type</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

<div class="col-md-6">

Validation

</div>

<div class="col-md-6">

<div class="form-group">

<label for="my-input">Seat</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

<div class="col-md-6">

Validation

</div>

<div class="col-md-6">

<button class="btn btn-success w-25 float-right">Save</button>

</div>

</div>

</div>

</div>

</div>

<div id="search_vehicle_panel" class="col-md-12  my-3">

<div class="card">

<div class="card-body">

<div class="row">

<div class="col-md-6">

<div class="form-group">

<label for="my-input">Enter Veh #</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

<div class="col-md-6">

Validation

</div>

<div class="col-md-6">

<button class="btn btn-success w-25 float-right">Search</button>

</div>

<div class="col-md-12 mt-3">

<table class="table table-bordered">

<thead class="thead-inverse">

<tr>

<td class="w-25">Veh #</td>

<td class="w-25"></td>

<td class="w-25">Owner Name</td>

<td class="w-25"></td>

</tr>

</thead>

<tbody>

<tr>

<td class="w-25">Seat</td>

<td class="w-25"></td>

<td class="w-25">Type</td>

<td class="w-25"></td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</div>

</div>

<div id="update_vehicle_panel" class="col-md-12  my-3">

<div class="card">

<div class="card-body">

Update Vehicle

</div>

</div>

</div>

<div id="delete_vehicle_panel" class="col-md-12  my-3">

<div class="card">

<div class="card-body">

<div class="row">

<div class="col-md-6">

<div class="form-group">

<label for="my-input">Enter Veh #</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

<div class="col-md-6">

Validation

</div>

<div class="col-md-6">

<button class="btn btn-success w-25 float-right">Submit</button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Output

Vehicle View

Vehicle Collapse View

Vehicle New View

Vehicle Search View

Vehicle Delete View