 |
| Client Portal Ticket |
Overview
You can use this code to show ticket information such as a new ticket, cancel ticket, expired ticket, and all ticket information. Some progress bars are used to analyze the data.
Related Topic
Html Code:
<div id = "ticket_section" class = "col-md-12 display-none"
>
<div class = "row my-3 p-0"
>
<div class = "col-md-12 p-0"
>
<ul class = "nav justify-content-start"
>
<li class = "nav-item p-1"
>
<a id = "home_ticket_link" class = "nav-link rounded" href = "#" > <i class = "fa fa-home" aria-hidden = "true" > </i> </a>
</li>
<li class = "nav-item" >
<a id = "new_ticket_nav_link" class = "nav-link rounded" href = "#" > New </a>
</li>
<li class = "nav-item" >
<a id = "cancel_ticket_nav_link" class = "nav-link rounded" href = "#" > Cancel </a>
</li>
<li class = "nav-item" >
<a id = "expired_ticket_nav_link" class = "nav-link rounded" href = "#" > Expired </a>
</li>
<li class = "nav-item" >
<a id = "all_ticket_nav_link" class = "nav-link rounded" href = "#" > All </a>
</li>
</ul>
</div>
<div class = "col-md-12 p-0 my-3"
>
<div class = "card" >
<div class = "card-header bg-grey-500"
>
<div class = "dropleft" >
<strong id = "ticket_header_text"
> </strong>
<button class = "btn dropdown float-right bg-grey-500" type = "button"
id = "triggerId" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false" >
<i class = "fa fa-ellipsis-v" aria-hidden = "true" > </i>
</button>
<div class = "dropdown-menu" aria-labelledby = "triggerId" >
<a id = "new_ticket_drop_list_link" class = "dropdown-item" href = "#"> New </a>
<a id = "cancel_ticket_drop_list_link" class = "dropdown-item"
href = "#" > Cancel </a>
<a id = "expired_ticket_drop_list_link" class = "dropdown-item"
href = "#" > Expired </a>
<a id = "all_ticket_drop_list_link" class = "dropdown-item" href = "#"> All </a>
</div>
</div>
</div>
<div class = "card-body" >
<div class = "row my-3" >
<div id = "new_ticket_progress_bar" class = "col-sm-2 p-3 m-3 bg-blue-500 rounded"
> New Bar </div>
<div id = "cancel_ticket_progress_bar"
class = "col-sm-2 p-3 m-3 bg-teal-500 rounded"
> Cancel Bar
</div>
<div id = "expired_ticket_progress_bar" class = "col-sm-2 p-3 m-3 bg-red-500 rounded"
> Expired Bar </div>
<div id = "all_ticket_progress_bar" class = "col-sm-2 p-3 m-3 bg-green-500 rounded"
> All Bar </div>
</div>
<div class = "row" >
<div id = "new_progress_bar_detail" class = "col-md-12" >
<div class = "card" >
<div class = "card-body" >
<div class = "row" >
<div class = "col-sm-2" >
<p class = "card-text" > Date: </p>
</div>
<div class = "col-sm-2" >
<p class = "card-text"> Time: </p>
</div>
<div class = "col-sm-2" >
<p class = "card-text" > From: </p>
</div>
<div class = "col-sm-2" >
<p class = "card-text" > To: </p>
</div>
<div class = "col-sm-2" >
<p class = "card-text" > Charges: </p>
</div>
<div class = "col-sm-2" >
<p class = "card-text" > Status: </p>
</div>
</div>
</div>
</div>
</div>
<div id = "cancel_progress_bar_detail" class = "col-md-12 my-3"
>
<div class = "card" >
<div class = "card-body" >
<div class = "row" >
<div class = "col-md-2" >
<p class = "card-text" > Total Ticket </p>
</div>
<div class = "col-md-12" >
<div class = "progress my-3"
>
<div class = "progress-bar progress-bar-striped bg-primary"
style = "width: 100%" role = "progressbar"
aria-valuenow = "25" aria-valuemin = "0"
aria-valuemax = "100" > 100% </div>
</div>
</div>
<div class = "col-md-2" >
<p class = "card-text" > cancel Ticket </p>
</div>
<div class = "col-md-12" >
<div class = "progress my-3"
>
<div class = "progress-bar progress-bar-striped bg-teal-500"
style = "width: 10%" role = "progressbar"
aria-valuenow = "25" aria-valuemin = "0"
aria-valuemax = "100" > 10% </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "expired_progress_bar_detail" class = "col-md-12 my-3"
>
<div class = "card" >
<div class = "card-body" >
<div class = "row" >
<div class = "col-md-2" >
<p class = "card-text"> Total Ticket </p>
</div>
<div class = "col-md-12" >
<div class = "progress my-3"
>
<div class = "progress-bar progress-bar-striped bg-primary"
style = "width: 100%" role = "progressbar"
aria-valuenow = "25" aria-valuemin = "0"
aria-valuemax = "100" > 100% </div>
</div>
</div>
<div class = "col-md-2" >
<p class = "card-text" > Expired Ticket </p>
</div>
<div class = "col-md-12" >
<div class = "progress my-3"
>
<div class = "progress-bar progress-bar-striped bg-red-500"
style = "width: 40%" role = "progressbar"
aria-valuenow = "25" aria-valuemin = "0"
aria-valuemax = "100" > 40% </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "home_ticket_page" class = "col-md-12 p-0 my-3"
>
<div class = "card" >
<div class = "card-body" > Content. </div>
</div>
</div>
<div id = "new_ticket_page" class = "col-md-12 p-0 my-3"
>
<div class = "card" >
<div class = "card-body" >
<table class = "table table-bordered"
>
<thead class = "thead-inverse" >
<tr>
<th>
# </th>
<th>
Ticket ID
</th>
<th>
Veh #
</th>
<th>
Date </th>
<th>
Time </th>
<th>
From </th>
<th>
To </th>
<th>
Seats </th>
</tr>
</thead>
<tbody>
<tr>
<td scope = "row" > </td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id = "cancel_ticket_page" class = "col-md-12 p-0 my-3"
>
<div class = "card" >
<div class = "card-body" >
<table class = "table table-bordered"
>
<thead class = "thead-inverse" >
<tr>
<th>
# </th>
<th>
Ticket ID
</th>
<th>
Veh #
</th>
<th>
Date </th>
<th>
Time </th>
<th>
From </th>
<th>
To </th>
<th>
Seats </th>
</tr>
</thead>
<tbody>
<tr>
<td scope = "row"> </td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id = "expired_ticket_page" class = "col-md-12 p-0 my-3"
>
<div class = "card" >
<div class = "card-body" >
<table class = "table table-bordered"
>
<thead class = "thead-inverse" >
<tr>
<th>
# </th>
<th>
Ticket ID
</th>
<th>
Veh #
</th>
<th>
Date </th>
<th>
Time </th>
<th>
From </th>
<th>
To </th>
<th>
Seats </th>
</tr>
</thead>
<tbody>
<tr>
<td scope = "row"> </td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id = "all_ticket_page" class = "col-md-12 p-0 my-3"
>
<div class = "card" >
<div class = "card-body" >
<table class = "table table-bordered"
>
<thead class = "thead-inverse" >
<tr>
<th>
# </th>
<th>
Ticket ID
</th>
<th>
Veh #
</th>
<th>
Date </th>
<th>
Time </th>
<th>
From </th>
<th>
To </th>
<th>
Seats </th>
</tr>
</thead>
<tbody>
<tr>
<td scope = "row"> </td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
 |
| All Ticket |
 |
| Ticket |
 |
| Cancel Ticket Collapse Result |
 |
| Cancel Ticket Result |
 |
| Expired Ticket Result Collapse View |
 |
| Expired Ticket Result |
 |
| New Ticket Result Collapse View |
 |
| New Ticket Result |
 |
| All Ticket Result Collpase |
 |
| All Ticket Result |
 |
| Cancel Ticket Result |
 |
| Ticket Result |
 |
| Expired Ticket Result Collapse. |
 |
| Expired Ticket Result |
 |
| Cancel Ticket Result |
 |
| New Ticket Result Collaspe |
 |
| New Ticket Result |
 |
| Ticket |
0 Comments
Thanks