Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Data - Signal Tracker</title> | |
| <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/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .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; | |
| } | |
| .pagination .page-link { | |
| color: #007bff; | |
| background-color: #fff; | |
| border: 1px solid #dee2e6; | |
| } | |
| .pagination .page-item.active .page-link { | |
| color: #fff; | |
| background-color: #007bff; | |
| border-color: #007bff; | |
| } | |
| .pagination .page-link:hover { | |
| color: #0056b3; | |
| background-color: #e9ecef; | |
| border-color: #dee2e6; | |
| } | |
| .pagination .page-item.disabled .page-link { | |
| color: #6c757d; | |
| pointer-events: none; | |
| background-color: #fff; | |
| border-color: #dee2e6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container mt-5"> | |
| <div class="user-info"> | |
| <span>Welcome, {{ current_user.username }}</span> | |
| <a href="/logout">Logout</a> | |
| </div> | |
| <h1 class="mb-4">Admin Panel</h1> | |
| <ul class="nav nav-tabs mb-4"> | |
| <li class="nav-item"> | |
| <a class="nav-link active" href="/admin/data">Data</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="/admin">Settings</a> | |
| </li> | |
| </ul> | |
| <form method="get" action="/admin/data" class="mb-4"> | |
| <div class="row g-3"> | |
| <div class="col-md-2"> | |
| <label for="start_date" class="form-label">Start Date</label> | |
| <input type="date" class="form-control" id="start_date" name="start_date" value="{{ start_date }}" placeholder="Start Date"> | |
| </div> | |
| <div class="col-md-2"> | |
| <label for="end_date" class="form-label">End Date</label> | |
| <input type="date" class="form-control" id="end_date" name="end_date" value="{{ end_date }}" placeholder="End Date"> | |
| </div> | |
| <div class="col-md-2"> | |
| <label for="device_id" class="form-label">Device</label> | |
| <select class="form-control" id="device_id" name="device_id"> | |
| <option value="">All Devices</option> | |
| {% for dev_id in device_ids %} | |
| <option value="{{ dev_id }}" {% if dev_id == device_id %}selected{% endif %}>{{ dev_id }}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <div class="col-md-2"> | |
| <label for="per_page" class="form-label">Records per page</label> | |
| <select class="form-control" id="per_page" name="per_page"> | |
| <option value="10" {% if per_page == 10 or not per_page %}selected{% endif %}>10 records</option> | |
| <option value="50" {% if per_page == 50 %}selected{% endif %}>50 records</option> | |
| <option value="100" {% if per_page == 100 %}selected{% endif %}>100 records</option> | |
| </select> | |
| </div> | |
| <div class="col-md-2"> | |
| <label class="form-label"> </label> | |
| <button type="submit" class="btn btn-primary w-100">Filter</button> | |
| </div> | |
| </div> | |
| </form> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Device ID</th> | |
| <th>UUID</th> | |
| <th>Latitude</th> | |
| <th>Longitude</th> | |
| <th>Timestamp</th> | |
| <th>Connect Status</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for record in records %} | |
| <tr> | |
| <td>{{ record.device_id }}</td> | |
| <td>{{ record.uuid }}</td> | |
| <td>{{ record.latitude }}</td> | |
| <td>{{ record.longitude }}</td> | |
| <td>{{ record.timestamp }}</td> | |
| <td>{{ "Connected" if record.connect_status == 1 else "Disconnected" }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| <nav aria-label="Page navigation"> | |
| <ul class="pagination justify-content-center"> | |
| <li class="page-item {% if current_page == 1 %}disabled{% endif %}"> | |
| <a class="page-link" href="/admin/data?page=1&per_page={{ per_page }}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if device_id %}&device_id={{ device_id }}{% endif %}" aria-label="First"> | |
| <i class="fas fa-angle-double-left"></i> | |
| </a> | |
| </li> | |
| <li class="page-item {% if current_page == 1 %}disabled{% endif %}"> | |
| <a class="page-link" href="/admin/data?page={{ current_page - 1 }}&per_page={{ per_page }}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if device_id %}&device_id={{ device_id }}{% endif %}" aria-label="Previous"> | |
| <i class="fas fa-angle-left"></i> | |
| </a> | |
| </li> | |
| {% for page_num in range(start_page, end_page + 1) %} | |
| <li class="page-item {% if page_num == current_page %}active{% endif %}"> | |
| <a class="page-link" href="/admin/data?page={{ page_num }}&per_page={{ per_page }}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if device_id %}&device_id={{ device_id }}{% endif %}">{{ page_num }}</a> | |
| </li> | |
| {% endfor %} | |
| <li class="page-item {% if current_page == total_pages %}disabled{% endif %}"> | |
| <a class="page-link" href="/admin/data?page={{ current_page + 1 }}&per_page={{ per_page }}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if device_id %}&device_id={{ device_id }}{% endif %}" aria-label="Next"> | |
| <i class="fas fa-angle-right"></i> | |
| </a> | |
| </li> | |
| <li class="page-item {% if current_page == total_pages %}disabled{% endif %}"> | |
| <a class="page-link" href="/admin/data?page={{ total_pages }}&per_page={{ per_page }}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if device_id %}&device_id={{ device_id }}{% endif %}" aria-label="Last"> | |
| <i class="fas fa-angle-double-right"></i> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="mt-4"> | |
| <a href="/" class="btn btn-secondary">Back to Map</a> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> | |