#javascript #php #html #angularjs
Вопрос:
Поэтому я создал эту таблицу поиска, в которой будут отображаться все номера отслеживания, к которым у вас есть доступ, в зависимости от ваших привилегий. Как только таблица заполнена, вы можете просмотреть подробную информацию на новой вкладке, но на существующей странице (она существует, потому что именно там пользователь должен отслеживать отслеживание), но моя проблема в том, что категория в зависимости от того, какое отслеживание вы будете просматривать, находится в отдельном html, и я не знаю, как я это сделаю.
ПРИМЕЧАНИЕ: чтобы я уже получил подробную информацию об отслеживании, мне просто нужно передать ее на определенную вкладку(категорию) и отобразить ее там.
Вот таблица на странице поиска:
<table class="table table-hover fixed_header" id="bookingTable">
<thead class="bg-info text-white">
<th nowrap>Trip ID</th>
<th nowrap>Trip Category</th>
<th nowrap>type</th>
<th nowrap> </th>
</thead>
<tbody dir-paginate="data in allSearchData|filter:search.keyword|itemsPerPage:showNum" ng-init="x = $index" pagination-id="jos" pagination-id="jos">
<td rowspan="{{data.rowspan}}">{{ data.trip_plan_no }}</td>
<td rowspan="{{data.rowspan}}">{{ data.trip_category }}</td>
<td rowspan="{{data.rowspan}}">{{ data.type }}</td>
<td ><button class="btn btn-rounded btn-info btn-sm" onclick="myFunction()" ng-click="viewDetails(data)">View</button></td>
</tbody>
<tbody>
<tr ng-if="(bookings |filter:search.keyword).length == 0">
<td colspan="30"><i class="fa fa-search"></i> No record found...</td>
</tr>
<tr ng-if="(allSearchData |filter:search).length == 0">
<td colspan="22"><i class="mdi mdi-magnify"></i> No record found...</td>
</tr>
</tbody>
</table>
А вот пример одной из страниц, на которую он должен приземлиться:
<div class="card-body" style="padding-top: .25rem;">
<div class="row">
<div class="col-2">
<div class="form-material form-group">
<input type="text" class="form-control form-control-line" placeholder="Search here..." ng-model="search.keyword">
</div>
</div>
<div class="col-2">
<div class="form-material form-group">
<select class="form-control form-control-line" ng-model="search.status" ng-change="retrieveBookings(search)">
<option>ALL</option>
<option value="C">Confirmed</option>
<option value="B">Booked</option>
<option value="D">Dispatched</option>
<option value="CL">Closed</option>
</select>
</div>
</div>
<div class="col-2">
<div class="form-material form-group">
<input type="date" class="form-control form-control-line" ng-model="search.fdate">
</div>
</div>
<div class="col-2">
<div class="form-material form-group">
<input type="date" class="form-control form-control-line" ng-model="search.tdate">
</div>
</div>
<div class="col-1">
<button class="btn btn-rounded btn-success" ng-click="retrieveBookings(search)" title="Retrieve Entries in Confirmed, Booked, Dispatched and Closed status"><i class="fa fa-search"></i>amp;nbsp;Retrieve</button>
</div>
<div class="col-3" align="right">
<dir-pagination-controls pagination-id="jos" max-size="3" direction-links="true" boundary-links="true" template-url="./contents/css/page.tpl.html"></dir-pagination-controls>
</div>
</div>
<div class="table-responsive" style="overflow-y: scroll !important; padding-top: .25rem;">
<table class="table table-hover fixed_header" id="bookingTable">
<thead class="bg-info text-white" align="center">
<th nowrap style="width: 25px;">
<input class="material-inputs" type="checkbox" id="selectAll" ng-model="selectAll" ng-change="tickAll(selectAll)"><label for="selectAll"></label>
</th>
<th nowrap>Trip ID</th>
<th nowrap>Created By</th>
<th nowrap>Category amp; Type</th>
<th nowrap>Job #</th>
<th nowrap>Status</th>
<th nowrap>Shipper</th>
<th nowrap>Shipper Address</th>
<th nowrap># of Package</th>
<th nowrap>Type of Package</th>
<th nowrap>Gross Weight</th>
<th nowrap>Dimension</th>
<th nowrap>Warehouse</th>
<th nowrap>Forwarder</th>
<th nowrap>Final Destination</th>
<th nowrap>Airline</th>
<th nowrap>Cut-off Datetime</th>
<th nowrap>ETD</th>
<th nowrap>Transfer Datetime</th>
<th nowrap>Delivered at</th>
<th nowrap>PEZA</th>
<th nowrap>Crossdock</th>
<th nowrap>Remarks</th>
<th nowrap>Provider</th>
<th nowrap>Plate Number</th>
<th nowrap>Truck Size</th>
<th nowrap>Billable Truck Size</th>
<th nowrap style="width: 250px;">Driver's Name</th>
<th nowrap># of Package Loaded</th>
<th nowrap>Dispatched</th>
<th nowrap>Datetime Picked-Up</th>
<th nowrap>Datetime Loaded</th>
<th nowrap>Received by</th>
<th nowrap>Remarks</th>
</thead>
<tbody dir-paginate="jo in bookings|filter:search.keyword|itemsPerPage:showNum" ng-init="x = $index" pagination-id="jos" pagination-id="jos">
<tr ng-click="selectJO(jo.id)" ng-class="{'table-info' : selectedJO == jo.id, 'table-danger': jo.reversion_flag == 'Y' }" title="{{ jo.job_order }}">
<td rowspan="{{jo.rowspan}}" style="width: 25px;">
<input class="material-inputs" type="checkbox" id="{{jo.id}}" ng-model="jo.selected"><label for="{{jo.id}}"></label>
</td>
<td rowspan="{{jo.rowspan}}">{{ jo.trip_plan_no }}</td>
<td rowspan="{{jo.rowspan}}">{{ jo.created_by_name }}</td>
<td rowspan="{{jo.rowspan}}" nowrap>{{ jo.trip_category }} - {{ jo.type }}</td>
<td rowspan="{{jo.rowspan}}">{{ jo.job_order }}</td>
<td rowspan="{{jo.rowspan}}" align="center">
<span class="label label-primary" ng-if="jo.status == 'A'">ACTIVE</span>
<span class="label label-info" ng-if="jo.status == 'R'">REQUESTED</span>
<span class="label label-warning" ng-if="jo.status == 'C'">CONFIRMED</span>
<span class="label label-booked" ng-if="jo.status == 'B'">BOOKED</span>
<span class="label label-success" ng-if="jo.status == 'D'">DISPATCHED</span>
<span class="label label-danger" ng-if="jo.status == 'CL'">CLOSED</span>
<span class="label label-danger" ng-if="jo.status == 'X'">CANCELLED</span>
<span class="label label-danger" ng-if="jo.reversion_flag == 'Y'">FOR REVERSION</span>
</td>
<td rowspan="{{jo.rowspan}}">
<input type="text" ng-model="jo.shipper_name" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<textarea ng-model="jo.shipper_add" rows="3" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()"></textarea>
</td>
<td rowspan="{{jo.rowspan}}">
<input type="text" ng-model="jo.no_package" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="text" ng-model="jo.type_package" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="text" ng-model="jo.gross_weight" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="text" ng-model="jo.dimension" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<select class="form-control form-control-sm" ng-model="jo.warehouse">
<option ng-repeat="wh in warehouses">{{ wh.warehouse_name}}</option>
</select>
</td>
<td rowspan="{{jo.rowspan}}">
<input type="text" ng-model="jo.forwarder" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="text" ng-model="jo.final_dest" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="text" ng-model="jo.airline" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="date" ng-model="jo.cutoff_datetime" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="date" ng-model="jo.etd" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="date" ng-model="jo.transfer_datetime" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="text" ng-model="jo.deliver_at" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}" align="center">
<input class="material-inputs" type="checkbox" id="is_peza_{{jo.id}}" ng-model="jo.is_peza"><label for="is_peza_{{jo.id}}"></label>
</td>
<td rowspan="{{jo.rowspan}}" align="center">
<input class="material-inputs" type="checkbox" id="crossdock_{{jo.id}}" ng-model="jo.crossdock"><label for="crossdock_{{jo.id}}"></label>
<td rowspan="{{jo.rowspan}}">
<textarea ng-model="jo.remarks" rows="3" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()"></textarea>
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<select ng-if="jo.rowspan >= 1" ng-model="jo.booking_vehicle[0].provider_id" class="form-control form-control-sm" ng-options="provider.id as provider.provider for provider in providers" ng-change="getRowVehicle(jo.booking_vehicle[0].provider_id, $index, 0)" ng-disabled="jo.booking_vehicle[0].status == 'D'"></select>
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<select ng-if="jo.rowspan >= 1" ng-model="jo.booking_vehicle[0].vehicle_id" class="form-control form-control-sm" ng-options="vehicle.id as vehicle.plate_no for vehicle in jo.booking_vehicle[0].provider_vehicles" style="width: 100%;" ng-change="updateRowTruckSize(jo.booking_vehicle[0].vehicle_id, $index, 0)" ng-disabled="jo.booking_vehicle[0].status == 'D'"></select>
<!-- updateTruckSizeRow -->
<!-- <input ng-if="jo.rowspan >= 1" type="text" class="form-control form-control-sm" ng-model="jo.booking_vehicle[0].plate_no" oninput="this.value = this.value.toUpperCase()" readonly> -->
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<input ng-if="jo.rowspan >= 1" type="text" class="form-control form-control-sm" ng-model="jo.booking_vehicle[0].truck_size" oninput="this.value = this.value.toUpperCase()" ng-disabled="jo.booking_vehicle[0].status == 'D'" >
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<input ng-if="jo.rowspan >= 1" type="text" class="form-control form-control-sm" ng-model="jo.booking_vehicle[0].billable_truck_size" oninput="this.value = this.value.toUpperCase()" ng-disabled="jo.booking_vehicle[0].status == 'D'" >
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<select ng-if="jo.rowspan >= 1" ng-model="jo.booking_vehicle[0].driver_id" class="form-control form-control-sm" ng-options="driver.id as driver.driver_name for driver in drivers" ng-disabled="jo.booking_vehicle[0].status == 'D'" style="width: 100%"></select>
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<input ng-if="jo.rowspan >= 1" type="text" class="form-control form-control-sm" ng-model="jo.booking_vehicle[0].no_package_loaded" ng-disabled="jo.booking_vehicle[0].status == 'D'" >
</td>
<td align="center" ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<input ng-if="jo.rowspan >= 1" class="material-inputs" type="checkbox" id="{{jo.booking_vehicle[0].id}}" ng-model="jo.booking_vehicle[0].isDispatched" ng-disabled="jo.booking_vehicle[0].status != 'B'" ng-click="markDispatched(jo.booking_vehicle[0])"><label for="{{jo.booking_vehicle[0].id}}"></label>
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<input ng-if="jo.rowspan >= 1" type="datetime-local" ng-model="jo.booking_vehicle[0].pickup_datetime" class="form-control form-control-sm">
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<input ng-if="jo.rowspan >= 1" type="datetime-local" ng-model="jo.booking_vehicle[0].loaded_datetime" class="form-control form-control-sm">
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<input ng-if="jo.rowspan >= 1" type="text" ng-model="jo.booking_vehicle[0].received_by" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td ng-click="selectVehicleBookID(jo.booking_vehicle[0].id)" ng-class="{'table-info' : vehicleBookID == jo.booking_vehicle[0].id, 'table-danger': jo.booking_vehicle[0].status == 'C' }">
<textarea ng-if="jo.rowspan >= 1" ng-model="jo.booking_vehicle[0].booking_remarks" rows="3" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()"></textarea>
</td>
<!-- <td rowspan="{{jo.rowspan}}">
<input type="datetime-local" ng-model="jo.arrived_datetime" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="datetime-local" ng-model="jo.examined_datetime" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<input type="datetime-local" ng-model="jo.received_datetime" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td rowspan="{{jo.rowspan}}">
<textarea ng-model="jo.booking_remarks" rows="3" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()"></textarea>
</td> -->
</tr>
<tr ng-if="jo.rowspan > 1" ng-repeat="vehicle in jo.booking_vehicle.slice(1,jo.booking_vehicle.length)" style="cursor: pointer;" ng-click="selectVehicleBookID(vehicle.id)" title="{{jo.job_order}}" ng-class="{'table-info' : vehicleBookID == vehicle.id, 'table-danger': vehicle.status == 'C' }">
<td>
<select ng-model="vehicle.provider_id" class="form-control form-control-sm" ng-options="provider.id as provider.provider for provider in providers" ng-change="getRowVehicle(vehicle.provider_id, x, $index 1)" style="width: 100%;" ng-disabled="vehicle.status == 'D'"></select>
</td>
<td>
<select ng-model="vehicle.vehicle_id" class="form-control form-control-sm" ng-options="vehicle1.id as vehicle1.plate_no for vehicle1 in vehicle.provider_vehicles" style="width: 100%;" ng-change="updateRowTruckSize(vehicle.vehicle_id, x, $index 1)" ng-disabled="vehicle.status == 'D'" style="width: 100%;"></select>
</td>
<td>
<input type="text" class="form-control form-control-sm" ng-model="vehicle.truck_size" oninput="this.value = this.value.toUpperCase()" ng-disabled="vehicle.status == 'D'"/>
</td>
<td>
<input type="text" class="form-control form-control-sm" ng-model="vehicle.billable_truck_size" oninput="this.value = this.value.toUpperCase()" ng-disabled="vehicle.status == 'D'"/>
</td>
<td>
<select ng-model="vehicle.driver_id" class="form-control form-control-sm" ng-options="driver.id as driver.driver_name for driver in drivers" ng-disabled="vehicle.status == 'D'" style="width: 100%"></select>
</td>
<td>
<input type="text" class="form-control form-control-sm" ng-model="vehicle.no_package_loaded" ng-disabled="vehicle.status == 'D'" >
</td>
<td align="center">
<input class="material-inputs" type="checkbox" id="{{vehicle.id}}" ng-model="vehicle.isDispatched" ng-disabled="vehicle.status != 'B'" ng-click="markDispatched(vehicle)"><label for="{{vehicle.id}}"></label>
</td>
<td>
<input type="datetime-local" ng-model="vehicle.pickup_datetime" class="form-control form-control-sm">
</td>
<td>
<input type="datetime-local" ng-model="vehicle.loaded_datetime" class="form-control form-control-sm">
</td>
<td>
<input type="text" ng-model="vehicle.received_by" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()">
</td>
<td>
<textarea ng-model="vehicle.booking_remarks" rows="3" class="form-control form-control-sm" oninput="this.value = this.value.toUpperCase()"></textarea>
</td>
</tr>
<!-- <tr>
<td colspan="22">
<button class="btn btn-info btn-sm" ng-click="addJO()">Add JO</button>
</td>
</tr> -->
</tbody>
<tbody>
<tr ng-if="(bookings |filter:search.keyword).length == 0">
<td colspan="30"><i class="fa fa-search"></i> No record found...</td>
</tr>
</tbody>
</table>
</div>
</div>
It is a very long one, and I’d really appreciate of your help 🙂