Added support for add station

This commit is contained in:
Lukáš Plevač 2023-10-06 08:11:39 +02:00
parent 5f77087202
commit 15e4188b10
3 changed files with 130 additions and 0 deletions

View File

@ -48,4 +48,23 @@
}
return $res;
}
function add($params) {
$stations = new \wsos\database\core\table(\DAL\station::class);
$myStation = new \DAL\station();
$myStation->name->set($params["name"]);
$myStation->description->set($params["description"]);
$myStation->locator->set([
"gps" => [
"lat" => floatval($params["lat"]),
"lon" => floatval($params["lon"]),
"alt" => floatval($params["alt"])
]
]);
$myStation->commit();
return ["id" => $myStation->id->get()];
}

View File

@ -134,6 +134,9 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">Stations</h3>
<button type="button" class="btn btn-primary ms-auto" data-bs-toggle="modal" onclick="updateStationMap()" data-bs-target="#newStationModal">
+ Add
</button>
</div>
<div class="scrollable" style="height: 274px;">
<table class="table card-table table-vcenter">
@ -182,6 +185,68 @@
</div>
</div>
<div class="modal" id="newStationModal" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New station</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="mb-3">
<label class="form-label">Station name</label>
<input class="form-control" type="text" id="station-name">
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Station LAT</label>
<input type="number" step="0.001" id="station-lat" placeholder="0.0" onchange="updateStationMap()" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Station LON</label>
<input type="number" step="0.001" id="station-lon" placeholder="0.0" onchange="updateStationMap()" class="form-control">
</div>
</div>
<div id="stationMap" style="height:200px;" class="mt-1 w-100">
</div>
<div class="col-lg-12 mt-3">
<div class="mb-3">
<label class="form-label">Station Altitude [meters]</label>
<input type="number" step="1" id="station-alt" placeholder="0" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="mb-3">
<label class="form-label">Station description</label>
<textarea class="form-control" id="station-description"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" onclick="addStation()" class="btn btn-primary" data-bs-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
<script src="/static/js/dashboard.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js?1668287865" defer=""></script>
</div>

View File

@ -0,0 +1,46 @@
function addStation() {
var station = new FormData();
var name = document.getElementById("station-name").value;
var lat = document.getElementById("station-lat").value;
var lon = document.getElementById("station-lon").value;
var alt = document.getElementById("station-alt").value;
var description = document.getElementById("station-description").value;
station.append('name', name);
station.append('lat', lat);
station.append('lon', lon);
station.append('alt', alt);
station.append('description', description);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(JSON.parse(this.responseText).id);
}
};
xhttp.open("POST", "/api/station/add", true);
xhttp.send(station);
}
function updateStationMap() {
setTimeout(function(){ stationMap.invalidateSize()}, 400);
var lat = document.getElementById("station-lat").value;
var lon = document.getElementById("station-lon").value;
var newLatLon = new L.LatLng(lat, lon);
stationMarker.setLatLng(newLatLon);
stationMap.setView(stationMarker.getLatLng(), 5);
}
var stationMap = L.map('stationMap').setView([0, 0], 1);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(stationMap);
var stationMarker = L.marker([0, 0]).addTo(stationMap).bindPopup('Your station coordinates');