YAGS/web/VIEWS/dashboard.html
2023-09-09 13:58:11 +02:00

594 lines
33 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-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Success</div>
<div class="ms-auto lh-1">
<span class="text-secondary">Last 7 days</span>
</div>
</div>
<div class="h1 mb-3">{% BIND successCount %}</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Fail</div>
<div class="ms-auto lh-1">
<span class="text-secondary">Last 7 days</span>
</div>
</div>
<div class="h1 mb-3">{% BIND failCount %}</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Planed</div>
<div class="ms-auto lh-1">
<span class="text-secondary">For {% BIND lastPlaned %} days</span>
</div>
</div>
<div class="h1 mb-3">{% BIND planedCount %}</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">all</div>
<div class="ms-auto lh-1">
<span class="text-secondary">Last 7 days</span>
</div>
</div>
<div class="h1 mb-3">{% BIND observationsCount %}</div>
</div>
</div>
</div>
<div class="col-12">
</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>6854.45 MB </strong>of 8 GB</p>
<div class="progress progress-separated mb-3">
<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></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>Regular</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
</div>
<div class="col-auto d-flex align-items-center px-2">
<span class="legend me-2 bg-info"></span>
<span>System</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
</div>
<div class="col-auto d-flex align-items-center px-2">
<span class="legend me-2 bg-success"></span>
<span>Shared</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</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">612MB</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">Planed 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>
var map = L.map('map').setView([0, 0], 1);
var tragetIcon = L.icon({
iconUrl: '/static/icons/satellite.svg',
iconSize: [20, 20],
shadowSize: [0, 0],
iconAnchor: [10, 10],
shadowAnchor: [10, 0],
popupAnchor: [0, 0]
});
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var planedLocators = JSON.parse('{% BIND planedLocators %}'.replaceAll("\n", "\\\\n"));
var targetsMarkers = [];
for (var i = 0; i < planedLocators.length; i++) {
targetsMarkers.push(L.marker(map.getCenter(), {icon: tragetIcon}).bindPopup(planedLocators[i]["tle"].split("\\n")[0]).addTo(map));
}
setInterval(function () {
for (var i = 0; i < planedLocators.length; i++) {
var planedLocator = planedLocators[i]["tle"].split("\\n");
var satrec = satellite.twoline2satrec(planedLocator[1], planedLocator[2]);
var positionAndVelocity = satellite.propagate(satrec, new Date());
var gmst = satellite.gstime(new Date());
var positionEci = positionAndVelocity.position;
var positionGd = satellite.eciToGeodetic(positionEci, gmst);
targetsMarkers[i].setLatLng([satellite.degreesLat(positionGd.latitude), satellite.degreesLong(positionGd.longitude)]);
}
}, 1000);
</script>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Social Media Traffic</h3>
</div>
<table class="table card-table table-vcenter">
<thead>
<tr>
<th>Network</th>
<th colspan="2">Visitors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Instagram</td>
<td>3,550</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 71.0%"></div>
</div>
</td>
</tr>
<tr>
<td>Twitter</td>
<td>1,798</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 35.96%"></div>
</div>
</td>
</tr>
<tr>
<td>Facebook</td>
<td>1,245</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 24.9%"></div>
</div>
</td>
</tr>
<tr>
<td>TikTok</td>
<td>986</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 19.72%"></div>
</div>
</td>
</tr>
<tr>
<td>Pinterest</td>
<td>854</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 17.08%"></div>
</div>
</td>
</tr>
<tr>
<td>VK</td>
<td>650</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 13.0%"></div>
</div>
</td>
</tr>
<tr>
<td>Pinterest</td>
<td>420</td>
<td class="w-50">
<div class="progress progress-xs">
<div class="progress-bar bg-primary" style="width: 8.4%"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Invoices</h3>
</div>
<div class="card-body border-bottom py-3">
<div class="d-flex">
<div class="text-secondary">
Show
<div class="mx-2 d-inline-block">
<input type="text" class="form-control form-control-sm" value="8" size="3" aria-label="Invoices count">
</div>
entries
</div>
<div class="ms-auto text-secondary">
Search:
<div class="ms-2 d-inline-block">
<input type="text" class="form-control form-control-sm" aria-label="Search invoice">
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices"></th>
<th class="w-1">No. <!-- Download SVG icon from http://tabler-icons.io/i/chevron-up -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm icon-thick" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 15l6 -6l6 6"></path></svg>
</th>
<th>Invoice Subject</th>
<th>Client</th>
<th>VAT No.</th>
<th>Created</th>
<th>Status</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td><span class="text-secondary">001401</span></td>
<td><a href="invoice.html" class="text-reset" tabindex="-1">Design Works</a></td>
<td>
<span class="flag flag-xs flag-country-us me-2"></span>
Carlson Limited
</td>
<td>
87956621
</td>
<td>
15 Dec 2017
</td>
<td>
<span class="badge bg-success me-1"></span> Paid
</td>
<td>$887</td>
<td class="text-end">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</span>
</td>
</tr>
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td><span class="text-secondary">001402</span></td>
<td><a href="invoice.html" class="text-reset" tabindex="-1">UX Wireframes</a></td>
<td>
<span class="flag flag-xs flag-country-gb me-2"></span>
Adobe
</td>
<td>
87956421
</td>
<td>
12 Apr 2017
</td>
<td>
<span class="badge bg-warning me-1"></span> Pending
</td>
<td>$1200</td>
<td class="text-end">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</span>
</td>
</tr>
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td><span class="text-secondary">001403</span></td>
<td><a href="invoice.html" class="text-reset" tabindex="-1">New Dashboard</a></td>
<td>
<span class="flag flag-xs flag-country-de me-2"></span>
Bluewolf
</td>
<td>
87952621
</td>
<td>
23 Oct 2017
</td>
<td>
<span class="badge bg-warning me-1"></span> Pending
</td>
<td>$534</td>
<td class="text-end">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</span>
</td>
</tr>
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td><span class="text-secondary">001404</span></td>
<td><a href="invoice.html" class="text-reset" tabindex="-1">Landing Page</a></td>
<td>
<span class="flag flag-xs flag-country-br me-2"></span>
Salesforce
</td>
<td>
87953421
</td>
<td>
2 Sep 2017
</td>
<td>
<span class="badge bg-secondary me-1"></span> Due in 2 Weeks
</td>
<td>$1500</td>
<td class="text-end">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</span>
</td>
</tr>
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td><span class="text-secondary">001405</span></td>
<td><a href="invoice.html" class="text-reset" tabindex="-1">Marketing Templates</a></td>
<td>
<span class="flag flag-xs flag-country-pl me-2"></span>
Printic
</td>
<td>
87956621
</td>
<td>
29 Jan 2018
</td>
<td>
<span class="badge bg-danger me-1"></span> Paid Today
</td>
<td>$648</td>
<td class="text-end">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</span>
</td>
</tr>
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td><span class="text-secondary">001406</span></td>
<td><a href="invoice.html" class="text-reset" tabindex="-1">Sales Presentation</a></td>
<td>
<span class="flag flag-xs flag-country-br me-2"></span>
Tabdaq
</td>
<td>
87956621
</td>
<td>
4 Feb 2018
</td>
<td>
<span class="badge bg-secondary me-1"></span> Due in 3 Weeks
</td>
<td>$300</td>
<td class="text-end">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</span>
</td>
</tr>
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td><span class="text-secondary">001407</span></td>
<td><a href="invoice.html" class="text-reset" tabindex="-1">Logo &amp; Print</a></td>
<td>
<span class="flag flag-xs flag-country-us me-2"></span>
Apple
</td>
<td>
87956621
</td>
<td>
22 Mar 2018
</td>
<td>
<span class="badge bg-success me-1"></span> Paid Today
</td>
<td>$2500</td>
<td class="text-end">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</span>
</td>
</tr>
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td><span class="text-secondary">001408</span></td>
<td><a href="invoice.html" class="text-reset" tabindex="-1">Icons</a></td>
<td>
<span class="flag flag-xs flag-country-pl me-2"></span>
Tookapic
</td>
<td>
87956621
</td>
<td>
13 May 2018
</td>
<td>
<span class="badge bg-success me-1"></span> Paid Today
</td>
<td>$940</td>
<td class="text-end">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer d-flex align-items-center">
<p class="m-0 text-secondary">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
<ul class="pagination m-0 ms-auto">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 6l-6 6l6 6"></path></svg>
prev
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">
next <!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 6l6 6l-6 6"></path></svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js?1668287865" defer=""></script>
</div>
</body>
</html>