Jak zrobić żeby lista DEVICE/DEVICES była wczytywana na podstawie wybranego statku i numeru raportu ?
Stawiam flaszkę za rzetelność :)
<!DOCTYPE html>
<head>
<title>NaviServ - Remarks</title>
</head>
{% extends "base.html" %}
{% block title %}
<h1>NAVISEV REMARKS</h1>
{% endblock %}
{% block content %}
<body>
<style>
.btn-scroll {
right: 10px;
position: fixed;
bottom: 10px;
width: 100px;
}
</style>
<div id="content" style="text-align: center;">
<div class="containter block mr-5 pr-4">
<div class="row">
<div class="col-lg-4 col-md-12">
<select class="custom-select" id="owners" name="owners" onchange="loadShips()">
<option value="error">no results</option>
</select>
</div>
<div class="col-lg-4 col-md-12">
<select class="custom-select" id="ship" name="ship" onchange="loadReport()">
<option value="error">no results</option>
</select>
</div>
<div class="col-lg-4 col-md-12">
<select class="custom-select" id="report" name="report" onchange="loadRemarksData()">
<option value="error">no results</option>
</select>
</div>
<div class="col-lg-4 col-md-12">
<select class="custom-select" id="device" name="device" onchange="loadDevices()">
<option value="error">no results</option>
</select>
</div>
</div>
<br>
<div id="buttons-block" class="mb-3">
</div>
<div><input type="text" class="form-control form-control-sm" id="search_input"
placeholder="Search device" onkeyup="search_device(this)">
<hr>
<div class="row">
<div class="col-12">
<div class="row" id="device-row">
</div>
</div>
</div>
</div>
<div class="senior-alert" id="alert" role="alert">
<strong>Confirmation required </strong>
<i class="fa fa-times cross" aria-hidden="true" onclick="turnOff()"></i>
<hr>
<div class="row">
<div class="col-12">
<p>Do you want to remove the sent flag and feedback? </p>
</div>
<div class="col-6">
<button class="btn" onclick="turnOff()">Back</button>
</div>
<div class="col-6" id="update_button_div">
</div>
</div>
</div>
</div>
<button type="button" name="button" class="btn btn-scroll" onclick="scroll_up()">Scroll <i
class="fa fa-level-up" aria-hidden="true"></i></button>
<div class="senior-alert-delete-remarks" id="alert-delete-remarks" role="alert"></div>
</body>
<script>
function scroll_up() {
$('html,body').scrollTop(0);
}
function search_device(input) {
var keyword = input.value.toUpperCase();
var device_row = document.getElementById("device-row");
dev_list = device_row.getElementsByClassName('device_elemnt')
remark_list = device_row.getElementsByClassName('remark_elemnt')
feedback_list = device_row.getElementsByClassName('feedback_elemnt')
hr_list = device_row.getElementsByClassName('hr_element')
for (var i = 0; i < dev_list.length; i++) {
var txt = dev_list[i].innerText.toUpperCase();
if (!txt.match(keyword)) {
$(dev_list[i]).attr('disabled', 'disabled').hide();
$(remark_list[i]).attr('disabled', 'disabled').hide();
$(feedback_list[i]).attr('disabled', 'disabled').hide();
$(hr_list[i]).attr('disabled', 'disabled').hide();
} else {
$(dev_list[i]).removeAttr('disabled').show();
$(remark_list[i]).removeAttr('disabled').show();
$(feedback_list[i]).removeAttr('disabled').show();
$(hr_list[i]).removeAttr('disabled').show();
}
}
}
let parent_select = document.getElementById('owners');
let ship_select = document.getElementById('ship');
let report_select = document.getElementById('report');
let device_select = document.getElementById('device');
loadOwners()
function loadOwners() {
$.ajax({
url: '/load_owners',
contentType: 'application/json;charset=UTF-8',
type: 'POST',
success: function (response) {
owners = response.owners
let optionHTML = ''
for (let owner of owners) {
optionHTML += '<option value="' + owner.owner_id + '">' + owner.owner_name + '</option>';
}
parent_select.innerHTML = optionHTML;
loadShips()
},
error: function (error) {
createAlerts('danger', 'Error while loading owner list')
}
});
};
function loadShips() {
owner_id = parent_select.options[parent_select.selectedIndex].value
$.ajax({
url: '/load_ships',
data: JSON.stringify({
owner_id: owner_id,
}),
contentType: 'application/json;charset=UTF-8',
type: 'POST',
success: function (response) {
ships = response.ships
let optionHTML = ''
for (let ship of ships) {
optionHTML += '<option value="' + ship.ship_id + '">' + ship.ship_name + '</option>';
}
ship_select.innerHTML = optionHTML;
loadReport()
loadDevices()
},
error: function (error) {
createAlerts('danger', 'Error while loading ship list')
}
});
};
function loadReport() {
ship_id = document.getElementById('ship').value
$.ajax({
url: '/load_reports',
data: JSON.stringify({
ship_id: ship_id,
}),
contentType: 'application/json;charset=UTF-8',
type: 'POST',
success: function (response) {
reports = response.report_list
let optionHTML = ''
for (let report of reports) {
optionHTML += '<option value="' + report.id + '">' + report.report_number + '</option>';
}
report_select.innerHTML = optionHTML;
// loadRemarksData()
},
error: function (error) {
createAlerts('danger', 'Error while loading report list')
}
});
}
function loadDevices() {
ship_id = ship_select.options[ship_select.selectedIndex].value
$.ajax({
url: '/load_devices',
data: JSON.stringify({
ship_id: ship_id,
}),
contentType: 'application/json;charset=UTF-8',
type: 'POST',
success: function (response) {
devices = response.devices_list
let optionHTML = ''
for (let device of devices) {
optionHTML += '<option id="' + device.device_id + '" value="' + device.device_id + '">' + device.device_name + '</option>';
}
device_select.innerHTML = optionHTML;
// loadPointDevices()
},
error: function (error) {
createAlerts('danger', 'Error while loading device list')
}
})
}
</script>
{% endblock %}
</html>
BACKEND:
@app.route('/load_devices', methods=["POST"])
@login_required
def load_devices():
JSON = request.json
ship_id = JSON["ship_id"]
json_data = LoadLists().load_device_list(ship_id)
return json_data
@app.route('/load_ships', methods=["POST"])
@login_required
def load_ship_list():
JSON = request.json
owner_id = JSON["owner_id"]
json_data = LoadLists().load_ship_list(owner_id)
return json_data
@app.route('/load_owners', methods=["POST"])
@login_required
def load_owner_list():
json_data = LoadLists().load_owner_list()
return json_data
@app.route('/load_reports', methods=["POST"])
@login_required
def load_reports():
JSON = request.json
ship_id = JSON["ship_id"]
json_data = LoadLists().load_report_list(ship_id)
return json_data