mirror of
https://github.com/Lukas0025/YAGS.git
synced 2025-04-10 17:32:17 +01:00
254 lines
12 KiB
HTML
254 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
{% INCLUDE layout/head.html %}
|
|
<body>
|
|
<div class="page">
|
|
{% BINDINCLUDE layout/header.html logined %}
|
|
|
|
<div class="page-header d-print-none mt-4">
|
|
<div class="container-xl">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col">
|
|
<!-- Page pre-title -->
|
|
<div class="page-pretitle">
|
|
Overview
|
|
</div>
|
|
<h2 class="page-title">
|
|
Dashboard
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-body">
|
|
<div class="container-xl">
|
|
<div class="row row-deck row-cards">
|
|
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="subheader">Success observations</div>
|
|
<div class="h3 m-0">{% BIND successCount %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="subheader">Fail observations</div>
|
|
<div class="h3 m-0">{% BIND failCount %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="subheader">All observations</div>
|
|
<div class="h3 m-0">{% BIND observationsCount %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p class="mb-3">Using Storage <strong>{% BIND usedSize %} MB </strong>of {% BIND artefactsSpace %} MB</p>
|
|
<div class="progress progress-separated mb-3">
|
|
<div class="progress-bar bg-primary" role="progressbar" style="width: {% MUL 100 DIV BIND imagesSize BIND artefactsSpace %}%" aria-label="Images"></div>
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: {% MUL 100 DIV BIND basebandSize BIND artefactsSpace %}%" aria-label="Baseband"></div>
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: {% MUL 100 DIV BIND otherSize BIND artefactsSpace %}%" aria-label="Other"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-auto d-flex align-items-center pe-2">
|
|
<span class="legend me-2 bg-primary"></span>
|
|
<span>Images</span>
|
|
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">{% BIND imagesSize %}MB</span>
|
|
</div>
|
|
<div class="col-auto d-flex align-items-center px-2">
|
|
<span class="legend me-2 bg-info"></span>
|
|
<span>Baseband</span>
|
|
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">{% BIND basebandSize %}MB</span>
|
|
</div>
|
|
<div class="col-auto d-flex align-items-center px-2">
|
|
<span class="legend me-2 bg-success"></span>
|
|
<span>Other</span>
|
|
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">{% BIND otherSize %}MB</span>
|
|
</div>
|
|
<div class="col-auto d-flex align-items-center ps-2">
|
|
<span class="legend me-2"></span>
|
|
<span>Free</span>
|
|
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">{% BIND freeSize %}MB</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header border-0">
|
|
<div class="card-title">Assigned targets map</div>
|
|
</div>
|
|
<div class="position-relative">
|
|
<div id="map" style="height:400px;" class="position-absolute top-0 left-0 px-3 mt-1 w-100">
|
|
|
|
</div>
|
|
|
|
<script src="/static/js/map.js"></script>
|
|
<script>
|
|
var map = L.map('map', {
|
|
worldCopyJump: false
|
|
}).setView([0, 0], 1);
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
var planedObs = JSON.parse('{% BIND planedObservations %}');
|
|
|
|
for (var i = 0; i < planedObs.length; i++) {
|
|
mapAddTLEPath(
|
|
map,
|
|
planedObs[i]["tle"]["line1"],
|
|
planedObs[i]["tle"]["line2"],
|
|
planedObs[i]["start"],
|
|
planedObs[i]["end"]
|
|
);
|
|
}
|
|
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-md-6 col-lg-6">
|
|
<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">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Observations</th>
|
|
<th>Last seen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% FOREACH stations RENDER blocks/station-item.html %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Last observations</h3>
|
|
</div>
|
|
<div class="table-body">
|
|
<table class="table card-table table-vcenter text-nowrap datatable table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Station</th>
|
|
<th>Target</th>
|
|
<th>Modulation</th>
|
|
<th>Type</th>
|
|
<th>Frequency</th>
|
|
<th>Status</th>
|
|
<th>Start</th>
|
|
<th>End</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% FOREACH observations RENDER blocks/observation-item.html %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</body>
|
|
</html> |