Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Panel - Signal Tracker</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <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; | |
| } | |
| .section { | |
| margin-bottom: 40px; | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .bottom-nav { | |
| margin-top: 40px; | |
| } | |
| </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" href="/admin/data">Data</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link active" href="/admin">Settings</a> | |
| </li> | |
| </ul> | |
| <div class="section"> | |
| <h2>Users</h2> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Username</th> | |
| <th>Email</th> | |
| <th>Is Admin</th> | |
| <th>Last Login</th> | |
| <th>Is Active</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for user in users %} | |
| <tr> | |
| <td>{{ user.username }}</td> | |
| <td>{{ user.email }}</td> | |
| <td>{{ user.is_admin }}</td> | |
| <td>{{ user.last_login.strftime('%Y-%m-%d %H:%M:%S') if user.last_login else 'Never' }}</td> | |
| <td>{{ user.is_active }}</td> | |
| <td> | |
| <button class="btn btn-sm btn-primary" onclick="editUser('{{ user.username }}', '{{ user.email }}', {{ user.is_admin | tojson }}, {{ user.is_active | tojson }})">Edit</button> | |
| <form method="post" action="/admin/delete/{{ user.username }}" style="display: inline;"> | |
| <button type="submit" class="btn btn-sm btn-danger">Delete</button> | |
| </form> | |
| </td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <h2>Devices</h2> | |
| <button class="btn btn-success" onclick="addDevice()">Add Device</button> | |
| </div> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Description</th> | |
| <th>Device ID</th> | |
| <th>Password</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for device in devices %} | |
| <tr> | |
| <td>{{ device.name }}</td> | |
| <td>{{ device.description }}</td> | |
| <td>{{ device.device_id }}</td> | |
| <td>{{ device.password }}</td> | |
| <td> | |
| <button class="btn btn-sm btn-primary" onclick="editDevice('{{ device.name }}', '{{ device.description }}', '{{ device.device_id }}', '{{ device.password }}')">Edit</button> | |
| <form method="post" action="/admin/delete_device/{{ device.device_id }}" style="display: inline;"> | |
| <button type="submit" class="btn btn-sm btn-danger">Delete</button> | |
| </form> | |
| </td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <h2>System Settings</h2> | |
| <button class="btn btn-primary" onclick="editSystemSetting( | |
| {{ system_setting.check_connect_period }}, | |
| {{ system_setting.data_sync_period }}, | |
| {{ system_setting.get_config_period }}, | |
| {{ system_setting.point_distance }} | |
| )">Edit Settings</button> | |
| </div> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Setting</th> | |
| <th>Value</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Check Connect Period</td> | |
| <td>{{ system_setting.check_connect_period }}</td> | |
| </tr> | |
| <tr> | |
| <td>Data Sync Period</td> | |
| <td>{{ system_setting.data_sync_period }}</td> | |
| </tr> | |
| <tr> | |
| <td>Get Config Period</td> | |
| <td>{{ system_setting.get_config_period }}</td> | |
| </tr> | |
| <tr> | |
| <td>Point Distance</td> | |
| <td>{{ system_setting.point_distance }}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bottom-nav"> | |
| <a href="/" class="btn btn-secondary">Back to Map</a> | |
| </div> | |
| </div> | |
| <!-- Edit User Modal --> | |
| <div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Edit User</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <form id="editUserForm" method="post"> | |
| <div class="modal-body"> | |
| <div class="mb-3"> | |
| <label for="editUsername" class="form-label">Username</label> | |
| <input type="text" class="form-control" id="editUsername" name="new_username" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="editEmail" class="form-label">Email</label> | |
| <input type="email" class="form-control" id="editEmail" name="email" required> | |
| </div> | |
| <div class="mb-3 form-check"> | |
| <input type="hidden" name="is_admin" value="false"> | |
| <input type="checkbox" class="form-check-input" id="editIsAdmin" name="is_admin" value="true"> | |
| <label class="form-check-label" for="editIsAdmin">Is Admin</label> | |
| </div> | |
| <div class="mb-3 form-check"> | |
| <input type="hidden" name="is_active" value="false"> | |
| <input type="checkbox" class="form-check-input" id="editIsActive" name="is_active" value="true"> | |
| <label class="form-check-label" for="editIsActive">Is Active</label> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="editOldPassword" class="form-label">Old Password</label> | |
| <input type="password" class="form-control" id="editOldPassword" name="old_password"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="editNewPassword" class="form-label">New Password</label> | |
| <input type="password" class="form-control" id="editNewPassword" name="new_password"> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| <button type="submit" class="btn btn-primary">Save changes</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Device Modal --> | |
| <div class="modal fade" id="addDeviceModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Add Device</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <form id="addDeviceForm" method="post" action="/admin/add_device"> | |
| <div class="modal-body"> | |
| <div class="mb-3"> | |
| <label for="deviceName" class="form-label">Name</label> | |
| <input type="text" class="form-control" id="deviceName" name="name" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="deviceDescription" class="form-label">Description</label> | |
| <input type="text" class="form-control" id="deviceDescription" name="description" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="deviceId" class="form-label">Device ID</label> | |
| <input type="text" class="form-control" id="deviceId" name="device_id" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="devicePassword" class="form-label">Password</label> | |
| <input type="password" class="form-control" id="devicePassword" name="password" required> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| <button type="submit" class="btn btn-primary">Add Device</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Edit Device Modal --> | |
| <div class="modal fade" id="editDeviceModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Edit Device</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <form id="editDeviceForm" method="post"> | |
| <div class="modal-body"> | |
| <div class="mb-3"> | |
| <label for="editDeviceName" class="form-label">Name</label> | |
| <input type="text" class="form-control" id="editDeviceName" name="name" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="editDeviceDescription" class="form-label">Description</label> | |
| <input type="text" class="form-control" id="editDeviceDescription" name="description" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="editDeviceId" class="form-label">Device ID</label> | |
| <input type="text" class="form-control" id="editDeviceId" name="new_device_id" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="editDevicePassword" class="form-label">Password</label> | |
| <input type="password" class="form-control" id="editDevicePassword" name="password" placeholder="Leave blank to keep current password"> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| <button type="submit" class="btn btn-primary">Save changes</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Edit System Setting Modal --> | |
| <div class="modal fade" id="editSystemSettingModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Edit System Settings</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <form id="editSystemSettingForm" method="post" action="/admin/edit_system_setting"> | |
| <div class="modal-body"> | |
| <div class="mb-3"> | |
| <label for="checkConnectPeriod" class="form-label">Check Connect Period</label> | |
| <input type="number" class="form-control" id="checkConnectPeriod" name="check_connect_period" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="dataSyncPeriod" class="form-label">Data Sync Period</label> | |
| <input type="number" class="form-control" id="dataSyncPeriod" name="data_sync_period" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="getConfigPeriod" class="form-label">Get Config Period</label> | |
| <input type="number" class="form-control" id="getConfigPeriod" name="get_config_period" required> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="pointDistance" class="form-label">Point Distance</label> | |
| <input type="number" class="form-control" id="pointDistance" name="point_distance" required> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| <button type="submit" class="btn btn-primary">Save changes</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| function editUser(username, email, isAdmin, isActive) { | |
| document.getElementById('editUserForm').action = `/admin/edit/${username}`; | |
| document.getElementById('editUsername').value = username; | |
| document.getElementById('editEmail').value = email; | |
| document.getElementById('editIsAdmin').checked = isAdmin; | |
| document.getElementById('editIsActive').checked = isActive; | |
| document.getElementById('editOldPassword').value = ''; | |
| document.getElementById('editNewPassword').value = ''; | |
| var editUserModal = new bootstrap.Modal(document.getElementById('editUserModal')); | |
| editUserModal.show(); | |
| } | |
| function addDevice() { | |
| var addDeviceModal = new bootstrap.Modal(document.getElementById('addDeviceModal')); | |
| addDeviceModal.show(); | |
| } | |
| function editDevice(name, description, deviceId, password) { | |
| document.getElementById('editDeviceForm').action = `/admin/edit_device/${deviceId}`; | |
| document.getElementById('editDeviceName').value = name; | |
| document.getElementById('editDeviceDescription').value = description; | |
| document.getElementById('editDeviceId').value = deviceId; | |
| document.getElementById('editDevicePassword').value = password; // Set the current password | |
| var editDeviceModal = new bootstrap.Modal(document.getElementById('editDeviceModal')); | |
| editDeviceModal.show(); | |
| } | |
| function editSystemSetting(checkConnectPeriod, dataSyncPeriod, getConfigPeriod, pointDistance) { | |
| document.getElementById('checkConnectPeriod').value = checkConnectPeriod; | |
| document.getElementById('dataSyncPeriod').value = dataSyncPeriod; | |
| document.getElementById('getConfigPeriod').value = getConfigPeriod; | |
| document.getElementById('pointDistance').value = pointDistance; | |
| var editSystemSettingModal = new bootstrap.Modal(document.getElementById('editSystemSettingModal')); | |
| editSystemSettingModal.show(); | |
| } | |
| </script> | |
| </body> | |
| </html> | |