Spaces:
Sleeping
Sleeping
File size: 5,412 Bytes
cf14e32 ab25bb2 cf14e32 ab25bb2 a72a73a 7e6b994 a72a73a 7e6b994 a72a73a 7e6b994 a72a73a cf14e32 a72a73a 7e6b994 a72a73a cf14e32 ab25bb2 cf14e32 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signal Tracker Map</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
#map {
width: 80%;
height: 500px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
margin-bottom: 150px; /* Thêm khoảng cách phía dưới bản đồ */
}
.filter-form {
margin-bottom: 20px;
background: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 80%;
display: flex;
justify-content: center;
align-items: center;
}
.title {
margin-bottom: 20px;
text-align: center;
}
.btn-download {
padding: 8px 15px;
font-size: 14px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
text-decoration: none;
margin-left: 15px;
}
.btn-download:hover {
background-color: #0056b3;
}
.user-info {
position: absolute;
top: 20px;
right: 20px;
background-color: white;
padding: 10px 15px;
border-radius: 25px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
align-items: center;
font-family: Arial, sans-serif;
font-size: 14px;
}
.user-info span {
font-weight: bold;
margin-right: 10px;
}
.user-info a {
text-decoration: none;
color: #007bff;
padding: 5px 10px;
border-radius: 15px;
transition: background-color 0.3s, color 0.3s;
}
.user-info a:hover {
background-color: #007bff;
color: white;
}
.user-info .separator {
margin: 0 5px;
color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="user-info">
{% if current_user %}
<span>Welcome, {{ current_user.username }}</span>
{% if current_user.is_admin %}
<a href="/admin">Admin Panel</a>
<span class="separator">|</span>
{% endif %}
<a href="/logout">Logout</a>
{% else %}
<a href="/login">Login</a>
{% endif %}
</div>
<h1 class="title">Signal Tracker Map</h1>
<form class="filter-form" id="date-form" method="GET" action="/">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="start_date" class="col-form-label">Start Date:</label>
</div>
<div class="col-auto">
<input type="date" id="start_date" name="start_date" class="form-control"
value="{{ start_date or '' }}">
</div>
<div class="col-auto">
<label for="end_date" class="col-form-label">End Date:</label>
</div>
<div class="col-auto">
<input type="date" id="end_date" name="end_date" class="form-control"
value="{{ end_date or '' }}">
</div>
<div class="col-auto">
<a href="/download-csv" class="btn-download">Download CSV</a>
</div>
</div>
</form>
<div id="map">
{{ map_html|safe }}
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<!-- Bootstrap JS (Optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// JavaScript để tự động submit form khi thay đổi ngày nếu cả hai ngày đều có giá trị
function updateMapIfDatesFilled() {
const startDate = document.getElementById('start_date').value;
const endDate = document.getElementById('end_date').value;
if (startDate && endDate) {
document.getElementById('date-form').submit();
}
}
document.getElementById('start_date').addEventListener('change', updateMapIfDatesFilled);
document.getElementById('end_date').addEventListener('change', updateMapIfDatesFilled);
</script>
</body>
</html>
|