update
This commit is contained in:
root
396
html/admin.html
Normal file
396
html/admin.html
Normal file
@@ -0,0 +1,396 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NebuleAir</title>
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#sidebar a.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#sidebar a.nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#sidebar a.nav-link svg {
|
||||
margin-right: 8px; /* Add spacing between icons and text */
|
||||
}
|
||||
#sidebar {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.offcanvas-backdrop {
|
||||
z-index: 1040;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Topbar -->
|
||||
<span id="topbar"></span>
|
||||
|
||||
<!-- Sidebar Offcanvas for Mobile -->
|
||||
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="sidebar_mobile">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<div class="row">
|
||||
<!-- Side bar -->
|
||||
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
|
||||
</aside>
|
||||
<!-- Main content -->
|
||||
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
|
||||
<h1 class="mt-4">Admin</h1>
|
||||
|
||||
|
||||
<div class="row mb-3">
|
||||
|
||||
<div class="col-lg-3 col-12">
|
||||
<h3 class="mt-4">Parameters</h3>
|
||||
|
||||
<form>
|
||||
|
||||
<!--
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flex_loop" onchange="update_config('loop_activation',this.checked)">
|
||||
<label class="form-check-label" for="flex_loop">Loop activation</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flex_loop_log" onchange="update_config('loop_log', this.checked)">
|
||||
<label class="form-check-label" for="flex_loop_log">Loop Logs</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flex_start_log" onchange="update_config('boot_log', this.checked)">
|
||||
<label class="form-check-label" for="flex_start_log">Boot Logs</label>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" value="" id="check_NPM_5channels" onchange="update_config('NextPM_5channels', this.checked)">
|
||||
<label class="form-check-label" for="check_NPM_5channels">
|
||||
Next PM 5 canaux
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" value="" id="check_bme280" onchange="update_config('BME280/get_data_v2.py', this.checked)">
|
||||
<label class="form-check-label" for="check_bme280">
|
||||
Sonde temp/hum (BME280)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" value="" id="check_envea" onchange="update_config('envea/read_value_v2.py', this.checked)">
|
||||
<label class="form-check-label" for="check_envea">
|
||||
Sonde Envea
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="device_name" class="form-label">Device Name</label>
|
||||
<input type="text" class="form-control" id="device_name" onchange="update_config('deviceName', this.value)">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="device_ID" class="form-label">Device ID</label>
|
||||
<input type="text" class="form-control" id="device_ID" disabled>
|
||||
</div>
|
||||
|
||||
<!--<button type="submit" class="btn btn-primary">Submit</button>-->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- CLOCK-->
|
||||
<div class="col-lg-3 col-12">
|
||||
|
||||
<h3 class="mt-4">Clock</h3>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" value="" id="check_RTC" onchange="update_config('i2c_RTC', this.checked)">
|
||||
<label class="form-check-label" for="check_RTC">
|
||||
RTC module (DS3231)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="sys_local_time" class="form-label">System time (local)</label>
|
||||
<input type="text" class="form-control" id="sys_local_time" disabled>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="sys_UTC_time" class="form-label">System time (UTC)</label>
|
||||
<input type="text" class="form-control" id="sys_UTC_time" disabled>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="RTC_utc_time" class="form-label">RTC time (UTC)</label>
|
||||
<input type="text" class="form-control" id="RTC_utc_time" disabled>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alert_container"></div>
|
||||
|
||||
<h5 class="mt-4">Set RTC</h5>
|
||||
|
||||
<button type="submit" class="btn btn-primary mb-1" onclick="set_RTC_withNTP()">WiFi (NTP) </button>
|
||||
<button type="submit" class="btn btn-primary mb-1" onclick="set_RTC_withBrowser()">Browser time </button>
|
||||
<button type="submit" class="btn btn-primary mb-1" onclick="set_RTC_with4G()" disabled>4G (NTP) </button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- UPDATE-->
|
||||
|
||||
<div class="col-lg-4 col-12">
|
||||
<h3 class="mt-4">Updates</h3>
|
||||
|
||||
<button type="submit" class="btn btn-primary" onclick="updateGitPull()">Update firmware</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JAVASCRIPT -->
|
||||
|
||||
<!-- Link Ajax locally -->
|
||||
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
||||
<!-- Link Bootstrap JS and Popper.js locally -->
|
||||
<script src="assets/js/bootstrap.bundle.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const elementsToLoad = [
|
||||
{ id: 'topbar', file: 'topbar.html' },
|
||||
{ id: 'sidebar', file: 'sidebar.html' },
|
||||
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
||||
];
|
||||
|
||||
elementsToLoad.forEach(({ id, file }) => {
|
||||
fetch(file)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.innerHTML = data;
|
||||
}
|
||||
})
|
||||
.catch(error => console.error(`Error loading ${file}:`, error));
|
||||
});
|
||||
});
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json'
|
||||
.then(response => response.json()) // Parse response as JSON
|
||||
.then(data => {
|
||||
console.log("Getting config file (onload)");
|
||||
//get device ID
|
||||
const deviceID = data.deviceID.trim().toUpperCase();
|
||||
//document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
|
||||
//get device Name
|
||||
const deviceName = data.deviceName;
|
||||
|
||||
console.log("Device Name: " + deviceName);
|
||||
console.log("Device ID: " + deviceID);
|
||||
|
||||
|
||||
|
||||
const elements = document.querySelectorAll('.sideBar_sensorName');
|
||||
elements.forEach((element) => {
|
||||
element.innerText = deviceName;
|
||||
});
|
||||
|
||||
//get BME check
|
||||
const checkbox = document.getElementById("check_bme280");
|
||||
checkbox.checked = data["BME280/get_data_v2.py"];
|
||||
|
||||
//get NPM-5channels check
|
||||
const checkbox_NPM_5channels = document.getElementById("check_NPM_5channels");
|
||||
checkbox_NPM_5channels.checked = data["NextPM_5channels"];
|
||||
|
||||
//get sonde Envea check
|
||||
const checkbox_envea = document.getElementById("check_envea");
|
||||
checkbox_envea.checked = data["envea/read_value_v2.py"];
|
||||
|
||||
//get RTC check
|
||||
const checkbox_RTC = document.getElementById("check_RTC");
|
||||
checkbox_RTC.checked = data.i2c_RTC;
|
||||
|
||||
|
||||
//device name
|
||||
const device_name = document.getElementById("device_name");
|
||||
device_name.value = data.deviceName;
|
||||
|
||||
//device ID
|
||||
const device_ID = document.getElementById("device_ID");
|
||||
device_ID.value = data.deviceID.toUpperCase();
|
||||
|
||||
//get system time and RTC module
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sys_RTC_module_time',
|
||||
dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
// Update the input fields with the received JSON data
|
||||
document.getElementById("sys_local_time").value = response.system_local_time;
|
||||
document.getElementById("sys_UTC_time").value = response.system_utc_time;
|
||||
document.getElementById("RTC_utc_time").value = response.rtc_module_time;
|
||||
|
||||
// Get the time difference
|
||||
const timeDiff = response.time_difference_seconds;
|
||||
|
||||
// Reference to the alert container
|
||||
const alertContainer = document.getElementById("alert_container");
|
||||
|
||||
// Remove any previous alert
|
||||
alertContainer.innerHTML = "";
|
||||
|
||||
// Add an alert based on time difference
|
||||
if (typeof timeDiff === "number") {
|
||||
if (timeDiff >= 0 && timeDiff <= 10) {
|
||||
alertContainer.innerHTML = `
|
||||
<div class="alert alert-success" role="alert">
|
||||
RTC and system time are in sync (Difference: ${timeDiff} sec).
|
||||
</div>`;
|
||||
} else if (timeDiff > 10) {
|
||||
alertContainer.innerHTML = `
|
||||
<div class="alert alert-danger" role="alert">
|
||||
RTC time is out of sync! (Difference: ${timeDiff} sec).
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
//get local RTC
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=RTC_time',
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log("Local RTC: " + response);
|
||||
const RTC_Element = document.getElementById("RTC_time");
|
||||
RTC_Element.textContent = response;
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
.catch(error => console.error('Error loading config.json:', error));
|
||||
}
|
||||
|
||||
|
||||
function update_config(param, value){
|
||||
console.log("Updating ",param," : ", value);
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=update_config¶m='+param+'&value='+value,
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
cache: false, // Prevent AJAX from caching
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateGitPull(){
|
||||
console.log("Updating device (git pull)");
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=git_pull',
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
|
||||
success: function(response) {
|
||||
// Handle success response if needed
|
||||
console.log(response);
|
||||
alert(response);
|
||||
// Reload the page after the device update
|
||||
location.reload(); // This will reload the page
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function set_RTC_withNTP(){
|
||||
console.log("Set RTC module with WIFI (NTP server)");
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=set_RTC_withNTP',
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
|
||||
success: function(response) {
|
||||
// Handle success response if needed
|
||||
console.log(response);
|
||||
alert(response);
|
||||
// Reload the page after the device update
|
||||
location.reload(); // This will reload the page
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function set_RTC_withBrowser(){
|
||||
console.log("Set RTC module with browser time");
|
||||
const browserTime = new Date(); // Get the current time in the browser
|
||||
const formattedTime = browserTime.toISOString(); // Convert to ISO string (UTC)
|
||||
console.log(formattedTime);
|
||||
|
||||
$.ajax({
|
||||
url: `launcher.php?type=set_RTC_withBrowser&time=${encodeURIComponent(formattedTime)}`,
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
dataType: 'json', // Specify that you expect a JSON response
|
||||
|
||||
success: function(response) {
|
||||
// Handle success response if needed
|
||||
console.log(response);
|
||||
if (response.success) {
|
||||
alert("RTC successfully updated!");
|
||||
} else {
|
||||
alert(`Error: ${response.message}`);
|
||||
} // Reload the page after the device update
|
||||
location.reload(); // This will reload the page
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4085
html/assets/css/bootstrap-grid.css
vendored
Normal file
4085
html/assets/css/bootstrap-grid.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/assets/css/bootstrap-grid.css.map
Normal file
1
html/assets/css/bootstrap-grid.css.map
Normal file
File diff suppressed because one or more lines are too long
6
html/assets/css/bootstrap-grid.min.css
vendored
Normal file
6
html/assets/css/bootstrap-grid.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/css/bootstrap-grid.min.css.map
Normal file
1
html/assets/css/bootstrap-grid.min.css.map
Normal file
File diff suppressed because one or more lines are too long
4084
html/assets/css/bootstrap-grid.rtl.css
vendored
Normal file
4084
html/assets/css/bootstrap-grid.rtl.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/assets/css/bootstrap-grid.rtl.css.map
Normal file
1
html/assets/css/bootstrap-grid.rtl.css.map
Normal file
File diff suppressed because one or more lines are too long
6
html/assets/css/bootstrap-grid.rtl.min.css
vendored
Normal file
6
html/assets/css/bootstrap-grid.rtl.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/css/bootstrap-grid.rtl.min.css.map
Normal file
1
html/assets/css/bootstrap-grid.rtl.min.css.map
Normal file
File diff suppressed because one or more lines are too long
597
html/assets/css/bootstrap-reboot.css
vendored
Normal file
597
html/assets/css/bootstrap-reboot.css
vendored
Normal file
@@ -0,0 +1,597 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2024 The Bootstrap Authors
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
:root,
|
||||
[data-bs-theme=light] {
|
||||
--bs-blue: #0d6efd;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #d63384;
|
||||
--bs-red: #dc3545;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #198754;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #0dcaf0;
|
||||
--bs-black: #000;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #0d6efd;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-success: #198754;
|
||||
--bs-info: #0dcaf0;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #dc3545;
|
||||
--bs-light: #f8f9fa;
|
||||
--bs-dark: #212529;
|
||||
--bs-primary-rgb: 13, 110, 253;
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--bs-success-rgb: 25, 135, 84;
|
||||
--bs-info-rgb: 13, 202, 240;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-light-rgb: 248, 249, 250;
|
||||
--bs-dark-rgb: 33, 37, 41;
|
||||
--bs-primary-text-emphasis: #052c65;
|
||||
--bs-secondary-text-emphasis: #2b2f32;
|
||||
--bs-success-text-emphasis: #0a3622;
|
||||
--bs-info-text-emphasis: #055160;
|
||||
--bs-warning-text-emphasis: #664d03;
|
||||
--bs-danger-text-emphasis: #58151c;
|
||||
--bs-light-text-emphasis: #495057;
|
||||
--bs-dark-text-emphasis: #495057;
|
||||
--bs-primary-bg-subtle: #cfe2ff;
|
||||
--bs-secondary-bg-subtle: #e2e3e5;
|
||||
--bs-success-bg-subtle: #d1e7dd;
|
||||
--bs-info-bg-subtle: #cff4fc;
|
||||
--bs-warning-bg-subtle: #fff3cd;
|
||||
--bs-danger-bg-subtle: #f8d7da;
|
||||
--bs-light-bg-subtle: #fcfcfd;
|
||||
--bs-dark-bg-subtle: #ced4da;
|
||||
--bs-primary-border-subtle: #9ec5fe;
|
||||
--bs-secondary-border-subtle: #c4c8cb;
|
||||
--bs-success-border-subtle: #a3cfbb;
|
||||
--bs-info-border-subtle: #9eeaf9;
|
||||
--bs-warning-border-subtle: #ffe69c;
|
||||
--bs-danger-border-subtle: #f1aeb5;
|
||||
--bs-light-border-subtle: #e9ecef;
|
||||
--bs-dark-border-subtle: #adb5bd;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-emphasis-color: #000;
|
||||
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||
--bs-secondary-color-rgb: 33, 37, 41;
|
||||
--bs-secondary-bg: #e9ecef;
|
||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||
--bs-tertiary-bg: #f8f9fa;
|
||||
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #0d6efd;
|
||||
--bs-link-color-rgb: 13, 110, 253;
|
||||
--bs-link-decoration: underline;
|
||||
--bs-link-hover-color: #0a58ca;
|
||||
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||
--bs-code-color: #d63384;
|
||||
--bs-highlight-color: #212529;
|
||||
--bs-highlight-bg: #fff3cd;
|
||||
--bs-border-width: 1px;
|
||||
--bs-border-style: solid;
|
||||
--bs-border-color: #dee2e6;
|
||||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||
--bs-border-radius: 0.375rem;
|
||||
--bs-border-radius-sm: 0.25rem;
|
||||
--bs-border-radius-lg: 0.5rem;
|
||||
--bs-border-radius-xl: 1rem;
|
||||
--bs-border-radius-xxl: 2rem;
|
||||
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||
--bs-border-radius-pill: 50rem;
|
||||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
--bs-focus-ring-width: 0.25rem;
|
||||
--bs-focus-ring-opacity: 0.25;
|
||||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||
--bs-form-valid-color: #198754;
|
||||
--bs-form-valid-border-color: #198754;
|
||||
--bs-form-invalid-color: #dc3545;
|
||||
--bs-form-invalid-border-color: #dc3545;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--bs-body-color: #dee2e6;
|
||||
--bs-body-color-rgb: 222, 226, 230;
|
||||
--bs-body-bg: #212529;
|
||||
--bs-body-bg-rgb: 33, 37, 41;
|
||||
--bs-emphasis-color: #fff;
|
||||
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
||||
--bs-secondary-color-rgb: 222, 226, 230;
|
||||
--bs-secondary-bg: #343a40;
|
||||
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
||||
--bs-tertiary-color-rgb: 222, 226, 230;
|
||||
--bs-tertiary-bg: #2b3035;
|
||||
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||
--bs-primary-text-emphasis: #6ea8fe;
|
||||
--bs-secondary-text-emphasis: #a7acb1;
|
||||
--bs-success-text-emphasis: #75b798;
|
||||
--bs-info-text-emphasis: #6edff6;
|
||||
--bs-warning-text-emphasis: #ffda6a;
|
||||
--bs-danger-text-emphasis: #ea868f;
|
||||
--bs-light-text-emphasis: #f8f9fa;
|
||||
--bs-dark-text-emphasis: #dee2e6;
|
||||
--bs-primary-bg-subtle: #031633;
|
||||
--bs-secondary-bg-subtle: #161719;
|
||||
--bs-success-bg-subtle: #051b11;
|
||||
--bs-info-bg-subtle: #032830;
|
||||
--bs-warning-bg-subtle: #332701;
|
||||
--bs-danger-bg-subtle: #2c0b0e;
|
||||
--bs-light-bg-subtle: #343a40;
|
||||
--bs-dark-bg-subtle: #1a1d20;
|
||||
--bs-primary-border-subtle: #084298;
|
||||
--bs-secondary-border-subtle: #41464b;
|
||||
--bs-success-border-subtle: #0f5132;
|
||||
--bs-info-border-subtle: #087990;
|
||||
--bs-warning-border-subtle: #997404;
|
||||
--bs-danger-border-subtle: #842029;
|
||||
--bs-light-border-subtle: #495057;
|
||||
--bs-dark-border-subtle: #343a40;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #6ea8fe;
|
||||
--bs-link-hover-color: #8bb9fe;
|
||||
--bs-link-color-rgb: 110, 168, 254;
|
||||
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||
--bs-code-color: #e685b5;
|
||||
--bs-highlight-color: #dee2e6;
|
||||
--bs-highlight-bg: #664d03;
|
||||
--bs-border-color: #495057;
|
||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||
--bs-form-valid-color: #75b798;
|
||||
--bs-form-valid-border-color: #75b798;
|
||||
--bs-form-invalid-color: #ea868f;
|
||||
--bs-form-invalid-border-color: #ea868f;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--bs-body-font-family);
|
||||
font-size: var(--bs-body-font-size);
|
||||
font-weight: var(--bs-body-font-weight);
|
||||
line-height: var(--bs-body-line-height);
|
||||
color: var(--bs-body-color);
|
||||
text-align: var(--bs-body-text-align);
|
||||
background-color: var(--bs-body-bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-top: var(--bs-border-width) solid;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
h6, h5, h4, h3, h2, h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1875em;
|
||||
color: var(--bs-highlight-color);
|
||||
background-color: var(--bs-highlight-bg);
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-code-color);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
a > code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1875rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-body-bg);
|
||||
background-color: var(--bs-body-color);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: var(--bs-secondary-color);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button:not(:disabled),
|
||||
[type=button]:not(:disabled),
|
||||
[type=reset]:not(:disabled),
|
||||
[type=submit]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
line-height: inherit;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
legend + * {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* rtl:raw:
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
direction: ltr;
|
||||
}
|
||||
*/
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
1
html/assets/css/bootstrap-reboot.css.map
Normal file
1
html/assets/css/bootstrap-reboot.css.map
Normal file
File diff suppressed because one or more lines are too long
6
html/assets/css/bootstrap-reboot.min.css
vendored
Normal file
6
html/assets/css/bootstrap-reboot.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/css/bootstrap-reboot.min.css.map
Normal file
1
html/assets/css/bootstrap-reboot.min.css.map
Normal file
File diff suppressed because one or more lines are too long
594
html/assets/css/bootstrap-reboot.rtl.css
vendored
Normal file
594
html/assets/css/bootstrap-reboot.rtl.css
vendored
Normal file
@@ -0,0 +1,594 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2024 The Bootstrap Authors
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
:root,
|
||||
[data-bs-theme=light] {
|
||||
--bs-blue: #0d6efd;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #d63384;
|
||||
--bs-red: #dc3545;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #198754;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #0dcaf0;
|
||||
--bs-black: #000;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #0d6efd;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-success: #198754;
|
||||
--bs-info: #0dcaf0;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #dc3545;
|
||||
--bs-light: #f8f9fa;
|
||||
--bs-dark: #212529;
|
||||
--bs-primary-rgb: 13, 110, 253;
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--bs-success-rgb: 25, 135, 84;
|
||||
--bs-info-rgb: 13, 202, 240;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-light-rgb: 248, 249, 250;
|
||||
--bs-dark-rgb: 33, 37, 41;
|
||||
--bs-primary-text-emphasis: #052c65;
|
||||
--bs-secondary-text-emphasis: #2b2f32;
|
||||
--bs-success-text-emphasis: #0a3622;
|
||||
--bs-info-text-emphasis: #055160;
|
||||
--bs-warning-text-emphasis: #664d03;
|
||||
--bs-danger-text-emphasis: #58151c;
|
||||
--bs-light-text-emphasis: #495057;
|
||||
--bs-dark-text-emphasis: #495057;
|
||||
--bs-primary-bg-subtle: #cfe2ff;
|
||||
--bs-secondary-bg-subtle: #e2e3e5;
|
||||
--bs-success-bg-subtle: #d1e7dd;
|
||||
--bs-info-bg-subtle: #cff4fc;
|
||||
--bs-warning-bg-subtle: #fff3cd;
|
||||
--bs-danger-bg-subtle: #f8d7da;
|
||||
--bs-light-bg-subtle: #fcfcfd;
|
||||
--bs-dark-bg-subtle: #ced4da;
|
||||
--bs-primary-border-subtle: #9ec5fe;
|
||||
--bs-secondary-border-subtle: #c4c8cb;
|
||||
--bs-success-border-subtle: #a3cfbb;
|
||||
--bs-info-border-subtle: #9eeaf9;
|
||||
--bs-warning-border-subtle: #ffe69c;
|
||||
--bs-danger-border-subtle: #f1aeb5;
|
||||
--bs-light-border-subtle: #e9ecef;
|
||||
--bs-dark-border-subtle: #adb5bd;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-emphasis-color: #000;
|
||||
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||
--bs-secondary-color-rgb: 33, 37, 41;
|
||||
--bs-secondary-bg: #e9ecef;
|
||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||
--bs-tertiary-bg: #f8f9fa;
|
||||
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #0d6efd;
|
||||
--bs-link-color-rgb: 13, 110, 253;
|
||||
--bs-link-decoration: underline;
|
||||
--bs-link-hover-color: #0a58ca;
|
||||
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||
--bs-code-color: #d63384;
|
||||
--bs-highlight-color: #212529;
|
||||
--bs-highlight-bg: #fff3cd;
|
||||
--bs-border-width: 1px;
|
||||
--bs-border-style: solid;
|
||||
--bs-border-color: #dee2e6;
|
||||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||
--bs-border-radius: 0.375rem;
|
||||
--bs-border-radius-sm: 0.25rem;
|
||||
--bs-border-radius-lg: 0.5rem;
|
||||
--bs-border-radius-xl: 1rem;
|
||||
--bs-border-radius-xxl: 2rem;
|
||||
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||
--bs-border-radius-pill: 50rem;
|
||||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
--bs-focus-ring-width: 0.25rem;
|
||||
--bs-focus-ring-opacity: 0.25;
|
||||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||
--bs-form-valid-color: #198754;
|
||||
--bs-form-valid-border-color: #198754;
|
||||
--bs-form-invalid-color: #dc3545;
|
||||
--bs-form-invalid-border-color: #dc3545;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--bs-body-color: #dee2e6;
|
||||
--bs-body-color-rgb: 222, 226, 230;
|
||||
--bs-body-bg: #212529;
|
||||
--bs-body-bg-rgb: 33, 37, 41;
|
||||
--bs-emphasis-color: #fff;
|
||||
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
||||
--bs-secondary-color-rgb: 222, 226, 230;
|
||||
--bs-secondary-bg: #343a40;
|
||||
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
||||
--bs-tertiary-color-rgb: 222, 226, 230;
|
||||
--bs-tertiary-bg: #2b3035;
|
||||
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||
--bs-primary-text-emphasis: #6ea8fe;
|
||||
--bs-secondary-text-emphasis: #a7acb1;
|
||||
--bs-success-text-emphasis: #75b798;
|
||||
--bs-info-text-emphasis: #6edff6;
|
||||
--bs-warning-text-emphasis: #ffda6a;
|
||||
--bs-danger-text-emphasis: #ea868f;
|
||||
--bs-light-text-emphasis: #f8f9fa;
|
||||
--bs-dark-text-emphasis: #dee2e6;
|
||||
--bs-primary-bg-subtle: #031633;
|
||||
--bs-secondary-bg-subtle: #161719;
|
||||
--bs-success-bg-subtle: #051b11;
|
||||
--bs-info-bg-subtle: #032830;
|
||||
--bs-warning-bg-subtle: #332701;
|
||||
--bs-danger-bg-subtle: #2c0b0e;
|
||||
--bs-light-bg-subtle: #343a40;
|
||||
--bs-dark-bg-subtle: #1a1d20;
|
||||
--bs-primary-border-subtle: #084298;
|
||||
--bs-secondary-border-subtle: #41464b;
|
||||
--bs-success-border-subtle: #0f5132;
|
||||
--bs-info-border-subtle: #087990;
|
||||
--bs-warning-border-subtle: #997404;
|
||||
--bs-danger-border-subtle: #842029;
|
||||
--bs-light-border-subtle: #495057;
|
||||
--bs-dark-border-subtle: #343a40;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #6ea8fe;
|
||||
--bs-link-hover-color: #8bb9fe;
|
||||
--bs-link-color-rgb: 110, 168, 254;
|
||||
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||
--bs-code-color: #e685b5;
|
||||
--bs-highlight-color: #dee2e6;
|
||||
--bs-highlight-bg: #664d03;
|
||||
--bs-border-color: #495057;
|
||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||
--bs-form-valid-color: #75b798;
|
||||
--bs-form-valid-border-color: #75b798;
|
||||
--bs-form-invalid-color: #ea868f;
|
||||
--bs-form-invalid-border-color: #ea868f;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--bs-body-font-family);
|
||||
font-size: var(--bs-body-font-size);
|
||||
font-weight: var(--bs-body-font-weight);
|
||||
line-height: var(--bs-body-line-height);
|
||||
color: var(--bs-body-color);
|
||||
text-align: var(--bs-body-text-align);
|
||||
background-color: var(--bs-body-bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-top: var(--bs-border-width) solid;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
h6, h5, h4, h3, h2, h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1875em;
|
||||
color: var(--bs-highlight-color);
|
||||
background-color: var(--bs-highlight-bg);
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-code-color);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
a > code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1875rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-body-bg);
|
||||
background-color: var(--bs-body-color);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: var(--bs-secondary-color);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button:not(:disabled),
|
||||
[type=button]:not(:disabled),
|
||||
[type=reset]:not(:disabled),
|
||||
[type=submit]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: right;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
line-height: inherit;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
legend + * {
|
||||
clear: right;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
direction: ltr;
|
||||
}
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
|
||||
1
html/assets/css/bootstrap-reboot.rtl.css.map
Normal file
1
html/assets/css/bootstrap-reboot.rtl.css.map
Normal file
File diff suppressed because one or more lines are too long
6
html/assets/css/bootstrap-reboot.rtl.min.css
vendored
Normal file
6
html/assets/css/bootstrap-reboot.rtl.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/css/bootstrap-reboot.rtl.min.css.map
Normal file
1
html/assets/css/bootstrap-reboot.rtl.min.css.map
Normal file
File diff suppressed because one or more lines are too long
5402
html/assets/css/bootstrap-utilities.css
vendored
Normal file
5402
html/assets/css/bootstrap-utilities.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/assets/css/bootstrap-utilities.css.map
Normal file
1
html/assets/css/bootstrap-utilities.css.map
Normal file
File diff suppressed because one or more lines are too long
6
html/assets/css/bootstrap-utilities.min.css
vendored
Normal file
6
html/assets/css/bootstrap-utilities.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/css/bootstrap-utilities.min.css.map
Normal file
1
html/assets/css/bootstrap-utilities.min.css.map
Normal file
File diff suppressed because one or more lines are too long
5393
html/assets/css/bootstrap-utilities.rtl.css
vendored
Normal file
5393
html/assets/css/bootstrap-utilities.rtl.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/assets/css/bootstrap-utilities.rtl.css.map
Normal file
1
html/assets/css/bootstrap-utilities.rtl.css.map
Normal file
File diff suppressed because one or more lines are too long
6
html/assets/css/bootstrap-utilities.rtl.min.css
vendored
Normal file
6
html/assets/css/bootstrap-utilities.rtl.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/css/bootstrap-utilities.rtl.min.css.map
Normal file
1
html/assets/css/bootstrap-utilities.rtl.min.css.map
Normal file
File diff suppressed because one or more lines are too long
12057
html/assets/css/bootstrap.css
vendored
Normal file
12057
html/assets/css/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/assets/css/bootstrap.css.map
Normal file
1
html/assets/css/bootstrap.css.map
Normal file
File diff suppressed because one or more lines are too long
6
html/assets/css/bootstrap.min.css
vendored
Normal file
6
html/assets/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/css/bootstrap.min.css.map
Normal file
1
html/assets/css/bootstrap.min.css.map
Normal file
File diff suppressed because one or more lines are too long
12030
html/assets/css/bootstrap.rtl.css
vendored
Normal file
12030
html/assets/css/bootstrap.rtl.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/assets/css/bootstrap.rtl.css.map
Normal file
1
html/assets/css/bootstrap.rtl.css.map
Normal file
File diff suppressed because one or more lines are too long
6
html/assets/css/bootstrap.rtl.min.css
vendored
Normal file
6
html/assets/css/bootstrap.rtl.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/css/bootstrap.rtl.min.css.map
Normal file
1
html/assets/css/bootstrap.rtl.min.css.map
Normal file
File diff suppressed because one or more lines are too long
4
html/assets/icons/arrow-clockwise.svg
Normal file
4
html/assets/icons/arrow-clockwise.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
|
||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 349 B |
32
html/assets/icons/bootstrap-icons.svg
Normal file
32
html/assets/icons/bootstrap-icons.svg
Normal file
@@ -0,0 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="house" viewBox="0 0 16 16">
|
||||
<path d="M8 3.293l6 6V14.5a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-2.5a1 1 0 0 0-2 0V14.5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9.293l6-6zM7.293 1a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1-1.414 1.414L8 2.414 1.707 8.707a1 1 0 1 1-1.414-1.414l7-7z"/>
|
||||
</symbol>
|
||||
<symbol id="info-circle" viewBox="0 0 16 16">
|
||||
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13A6 6 0 1 1 8 2a6 6 0 0 1 0 12z"/>
|
||||
<path d="M8.93 6.588a.5.5 0 0 0-.427-.255H8.5a.5.5 0 0 0-.5.5v3.99a.5.5 0 0 0 .5.5h.003a.5.5 0 0 0 .491-.41l.008-.09v-3.99a.5.5 0 0 0-.072-.246z"/>
|
||||
<circle cx="8" cy="4.5" r="1"/>
|
||||
</symbol>
|
||||
<symbol id="gear" viewBox="0 0 16 16">
|
||||
<path d="M8 1.5A2.5 2.5 0 1 1 5.5 4a2.5 2.5 0 0 1 2.5-2.5zM6.5 2a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0z"/>
|
||||
</symbol>
|
||||
<symbol id="telephone" viewBox="0 0 16 16">
|
||||
<path d="M3.654 1.328a.678.678 0 0 1 .493-.289c.295 0 .496.155.593.454l.028.115c.017.075.25 1.098.342 1.448.09.342.03.575-.103.725l-.05.065c-.084.11-.178.22-.276.326-.97.994-1.115 1.174-.614 2.171.475.963 2.042 3.032 3.224 3.564 1.224.554 1.572.456 2.18-.193.396-.414.495-.576.9-.522.305.042 1.122.387 1.447.524.465.197.582.34.541.676-.01.098-.035.268-.055.347-.158.614-.44 1.207-.788 1.504a2.727 2.727 0 0 1-1.336.538c-.27.037-.538.073-.852.073-.883 0-1.68-.29-2.343-.655a15.235 15.235 0 0 1-3.287-2.52A15.133 15.133 0 0 1 1.433 6.47a15.578 15.578 0 0 1-.654-2.343c-.032-.308.001-.582.073-.853a2.725 2.725 0 0 1 .538-1.336C1.39 1.946 1.982 1.664 2.596 1.506a15.57 15.57 0 0 1 .348-.055c.34-.041.48-.141.676-.54.138-.325.483-1.142.522-1.447.054-.406-.108-.504-.523-.9z"/>
|
||||
</symbol>
|
||||
<symbol id="thermometer-half" viewBox="0 0 16 16">
|
||||
<path d="M8 2a2 2 0 1 0-4 0v9.585A1.5 1.5 0 1 0 6.5 15v-3.5h1V15a1.5 1.5 0 1 0 2.5-1.415V2zm-3 .5a1 1 0 1 1 2 0v9h-2V2.5z"/>
|
||||
</symbol>
|
||||
<symbol id="router" viewBox="0 0 16 16">
|
||||
<path d="M7.5 5A1.5 1.5 0 0 1 9 3.5h3A1.5 1.5 0 0 1 13.5 5h-6zm2-2h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm3 4h-2a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1z"/>
|
||||
</symbol>
|
||||
<symbol id="wifi" viewBox="0 0 16 16">
|
||||
<path d="M8 12.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zm1.937-1.43A5.987 5.987 0 0 1 13.5 8a.5.5 0 0 1 1 0 6.987 6.987 0 0 0-4.563 2.57.5.5 0 0 1-.75 0z"/>
|
||||
</symbol>
|
||||
<symbol id="journal" viewBox="0 0 16 16">
|
||||
<path d="M3 0h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zM2 1v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V1a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"/>
|
||||
</symbol>
|
||||
<symbol id="person" viewBox="0 0 16 16">
|
||||
<path d="M10 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm4 8c0 1-2 2-5 2s-5-1-5-2 2-3 5-3 5 2 5 3z"/>
|
||||
</symbol>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
4
html/assets/icons/bootstrap-icons2.svg
Normal file
4
html/assets/icons/bootstrap-icons2.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wifi" viewBox="0 0 16 16">
|
||||
<path d="M15.384 6.115a.485.485 0 0 0-.047-.736A12.44 12.44 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.52.52 0 0 0 .668.05A11.45 11.45 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049"/>
|
||||
<path d="M13.229 8.271a.482.482 0 0 0-.063-.745A9.46 9.46 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.576 1.336c.206.132.48.108.653-.065m-2.183 2.183c.226-.226.185-.605-.1-.75A6.5 6.5 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.5 5.5 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.61-.091zM9.06 12.44c.196-.196.198-.52-.04-.66A2 2 0 0 0 8 11.5a2 2 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.707-.707z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 911 B |
BIN
html/assets/img/LogoNebuleAir.png
Normal file
BIN
html/assets/img/LogoNebuleAir.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
html/assets/img/logoModuleAirColor.png
Normal file
BIN
html/assets/img/logoModuleAirColor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
2
html/assets/jquery/jquery-3.7.1.min.js
vendored
Normal file
2
html/assets/jquery/jquery-3.7.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6314
html/assets/js/bootstrap.bundle.js
vendored
Normal file
6314
html/assets/js/bootstrap.bundle.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/assets/js/bootstrap.bundle.js.map
Normal file
1
html/assets/js/bootstrap.bundle.js.map
Normal file
File diff suppressed because one or more lines are too long
7
html/assets/js/bootstrap.bundle.min.js
vendored
Normal file
7
html/assets/js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/js/bootstrap.bundle.min.js.map
Normal file
1
html/assets/js/bootstrap.bundle.min.js.map
Normal file
File diff suppressed because one or more lines are too long
4447
html/assets/js/bootstrap.esm.js
vendored
Normal file
4447
html/assets/js/bootstrap.esm.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/assets/js/bootstrap.esm.js.map
Normal file
1
html/assets/js/bootstrap.esm.js.map
Normal file
File diff suppressed because one or more lines are too long
7
html/assets/js/bootstrap.esm.min.js
vendored
Normal file
7
html/assets/js/bootstrap.esm.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/js/bootstrap.esm.min.js.map
Normal file
1
html/assets/js/bootstrap.esm.min.js.map
Normal file
File diff suppressed because one or more lines are too long
4494
html/assets/js/bootstrap.js
vendored
Normal file
4494
html/assets/js/bootstrap.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
html/assets/js/bootstrap.js.map
Normal file
1
html/assets/js/bootstrap.js.map
Normal file
File diff suppressed because one or more lines are too long
7
html/assets/js/bootstrap.min.js
vendored
Normal file
7
html/assets/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/assets/js/bootstrap.min.js.map
Normal file
1
html/assets/js/bootstrap.min.js.map
Normal file
File diff suppressed because one or more lines are too long
20
html/assets/js/chart.js
Normal file
20
html/assets/js/chart.js
Normal file
File diff suppressed because one or more lines are too long
371
html/database.html
Normal file
371
html/database.html
Normal file
@@ -0,0 +1,371 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NebuleAir</title>
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#sidebar a.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#sidebar a.nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#sidebar a.nav-link svg {
|
||||
margin-right: 8px; /* Add spacing between icons and text */
|
||||
}
|
||||
#sidebar {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.offcanvas-backdrop {
|
||||
z-index: 1040;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Topbar -->
|
||||
<span id="topbar"></span>
|
||||
|
||||
<!-- Sidebar Offcanvas for Mobile -->
|
||||
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="sidebar_mobile">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<div class="row">
|
||||
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
|
||||
</aside>
|
||||
<!-- Main content -->
|
||||
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
|
||||
<h1 class="mt-4">Base de données</h1>
|
||||
<p>Le capteur enregistre en local les données de mesures. Vous pouvez ici les consulter et les télécharger.</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="card text-dark bg-light">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Consulter la base de donnée</h5>
|
||||
<!-- Dropdown to select number of records -->
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<label for="records_limit" class="form-label me-2">Nombre de mesures:</label>
|
||||
<select id="records_limit" class="form-select w-auto">
|
||||
<option value="10" selected>10 dernières</option>
|
||||
<option value="20">20 dernières</option>
|
||||
<option value="30">30 dernières</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM',getSelectedLimit(),false)">Mesures PM</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_BME280',getSelectedLimit(),false)">Mesures Temp/Hum</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM_5channels',getSelectedLimit(),false)">Mesures PM (5 canaux)</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_envea',getSelectedLimit(),false)">Sonde Cairsens</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="card text-dark bg-light">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Télécharger les données</h5>
|
||||
<!-- Date selection for download -->
|
||||
<div class="d-flex align-items-center gap-3 mb-3">
|
||||
<label for="start_date" class="form-label">Date de début:</label>
|
||||
<input type="date" id="start_date" class="form-control w-auto">
|
||||
<label for="end_date" class="form-label">Date de fin:</label>
|
||||
<input type="date" id="end_date" class="form-control w-auto">
|
||||
</div>
|
||||
|
||||
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM',10,true, getStartDate(), getEndDate())">Mesures PM</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_BME280',10,true, getStartDate(), getEndDate())">Mesures Temp/Hum</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM_5channels',10,true, getStartDate(), getEndDate())">Mesures PM (5 canaux)</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_envea',10,true, getStartDate(), getEndDate())">Sonde Cairsens</button>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<div class="row mt-2">
|
||||
<div id="table_data"></div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JAVASCRIPT -->
|
||||
|
||||
<!-- Link Ajax locally -->
|
||||
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
||||
<!-- Link Bootstrap JS and Popper.js locally -->
|
||||
<script src="assets/js/bootstrap.bundle.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
console.log("DOMContentLoaded");
|
||||
|
||||
const elementsToLoad = [
|
||||
{ id: 'topbar', file: 'topbar.html' },
|
||||
{ id: 'sidebar', file: 'sidebar.html' },
|
||||
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
||||
];
|
||||
|
||||
elementsToLoad.forEach(({ id, file }) => {
|
||||
fetch(file)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.innerHTML = data;
|
||||
}
|
||||
})
|
||||
.catch(error => console.error(`Error loading ${file}:`, error));
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
window.onload = function() {
|
||||
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json'
|
||||
.then(response => response.json()) // Parse response as JSON
|
||||
.then(data => {
|
||||
console.log("Getting config file (onload)");
|
||||
//get device ID
|
||||
const deviceID = data.deviceID.trim().toUpperCase();
|
||||
//document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
|
||||
|
||||
//get device Name
|
||||
const deviceName = data.deviceName;
|
||||
|
||||
const elements = document.querySelectorAll('.sideBar_sensorName');
|
||||
elements.forEach((element) => {
|
||||
element.innerText = deviceName;
|
||||
});
|
||||
|
||||
|
||||
//get local RTC
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=RTC_time',
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log("Local RTC: " + response);
|
||||
const RTC_Element = document.getElementById("RTC_time");
|
||||
RTC_Element.textContent = response;
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
.catch(error => console.error('Error loading config.json:', error));
|
||||
}
|
||||
|
||||
|
||||
|
||||
// TABLE PM
|
||||
function get_data_sqlite(table, limit, download , startDate = "", endDate = "") {
|
||||
console.log(`Getting data for table: ${table}, limit: ${limit}, download: ${download}, start: ${startDate}, end: ${endDate}`);
|
||||
// Construct URL parameters dynamically
|
||||
let url = `launcher.php?type=table_mesure&table=${table}&limit=${limit}&download=${download}`;
|
||||
|
||||
// Add date parameters if downloading
|
||||
if (download) {
|
||||
url += `&start_date=${startDate}&end_date=${endDate}`;
|
||||
}
|
||||
|
||||
console.log(url);
|
||||
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
|
||||
// If download is true, generate and trigger CSV download
|
||||
if (download) {
|
||||
downloadCSV(response, table);
|
||||
return; // Exit function after triggering download
|
||||
}
|
||||
|
||||
let rows = response.trim().split("\n");
|
||||
// Generate Bootstrap table
|
||||
|
||||
let tableHTML = `<table class="table table-striped table-bordered">
|
||||
<thead class="table-dark"><tr>`;
|
||||
|
||||
// Define column headers dynamically based on the table type
|
||||
if (table === "data_NPM") {
|
||||
tableHTML += `
|
||||
<th>Timestamp</th>
|
||||
<th>PM1</th>
|
||||
<th>PM2.5</th>
|
||||
<th>PM10</th>
|
||||
<th>Temperature (°C)</th>
|
||||
<th>Humidity (%)</th>
|
||||
`;
|
||||
} else if (table === "data_BME280") {
|
||||
tableHTML += `
|
||||
<th>Timestamp</th>
|
||||
<th>Temperature (°C)</th>
|
||||
<th>Humidity (%)</th>
|
||||
<th>Pressure (hPa)</th>
|
||||
`;
|
||||
} else if (table === "data_NPM_5channels") {
|
||||
tableHTML += `
|
||||
<th>Timestamp</th>
|
||||
<th>PM_ch1 (nb/L)</th>
|
||||
<th>PM_ch2 (nb/L)</th>
|
||||
<th>PM_ch3 (nb/L)</th>
|
||||
<th>PM_ch4 (nb/L)</th>
|
||||
<th>PM_ch5 (nb/L)</th>
|
||||
|
||||
`;
|
||||
}else if (table === "data_envea") {
|
||||
tableHTML += `
|
||||
<th>Timestamp</th>
|
||||
<th>NO2</th>
|
||||
<th>H2S</th>
|
||||
<th>NH3</th>
|
||||
<th>CO</th>
|
||||
<th>O3</th>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `</tr></thead><tbody>`;
|
||||
|
||||
// Loop through rows and create table rows
|
||||
rows.forEach(row => {
|
||||
let columns = row.replace(/[()]/g, "").split(", "); // Remove parentheses and split
|
||||
tableHTML += "<tr>";
|
||||
|
||||
if (table === "data_NPM") {
|
||||
tableHTML += `
|
||||
<td>${columns[0]}</td>
|
||||
<td>${columns[1]}</td>
|
||||
<td>${columns[2]}</td>
|
||||
<td>${columns[3]}</td>
|
||||
<td>${columns[4]}</td>
|
||||
<td>${columns[5]}</td>
|
||||
`;
|
||||
} else if (table === "data_BME280") {
|
||||
tableHTML += `
|
||||
<td>${columns[0]}</td>
|
||||
<td>${columns[1]}</td>
|
||||
<td>${columns[2]}</td>
|
||||
<td>${columns[3]}</td>
|
||||
`;
|
||||
}
|
||||
else if (table === "data_NPM_5channels") {
|
||||
tableHTML += `
|
||||
<td>${columns[0]}</td>
|
||||
<td>${columns[1]}</td>
|
||||
<td>${columns[2]}</td>
|
||||
<td>${columns[3]}</td>
|
||||
<td>${columns[4]}</td>
|
||||
<td>${columns[5]}</td>
|
||||
|
||||
`;
|
||||
} else if (table === "data_envea") {
|
||||
tableHTML += `
|
||||
<td>${columns[0]}</td>
|
||||
<td>${columns[1]}</td>
|
||||
<td>${columns[2]}</td>
|
||||
<td>${columns[3]}</td>
|
||||
<td>${columns[4]}</td>
|
||||
<td>${columns[5]}</td>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += "</tr>";
|
||||
});
|
||||
|
||||
tableHTML += `</tbody></table>`;
|
||||
|
||||
// Update the #table_data div with the generated table
|
||||
document.getElementById("table_data").innerHTML = tableHTML;
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function getSelectedLimit() {
|
||||
return document.getElementById("records_limit").value;
|
||||
}
|
||||
|
||||
function getStartDate() {
|
||||
return document.getElementById("start_date").value || "2025-01-01"; // Default to a safe date
|
||||
}
|
||||
|
||||
function getEndDate() {
|
||||
return document.getElementById("end_date").value || "2025-12-31"; // Default to a safe date
|
||||
}
|
||||
|
||||
function downloadCSV(response, table) {
|
||||
let rows = response.trim().split("\n");
|
||||
|
||||
let csvContent = "";
|
||||
|
||||
// Add headers based on table type
|
||||
if (table === "data_NPM") {
|
||||
csvContent += "TimestampUTC,PM1,PM2.5,PM10,Temperature_sensor,Humidity_sensor\n";
|
||||
} else if (table === "data_BME280") {
|
||||
csvContent += "TimestampUTC,Temperature (°C),Humidity (%),Pressure (hPa)\n";
|
||||
}
|
||||
else if (table === "data_NPM_5channels") {
|
||||
csvContent += "TimestampUTC,PM_ch1,PM_ch2,PM_ch3,PM_ch4,PM_ch5\n";
|
||||
}
|
||||
|
||||
// Format rows as CSV
|
||||
rows.forEach(row => {
|
||||
let columns = row.replace(/[()]/g, "").split(", ");
|
||||
csvContent += columns.join(",") + "\n";
|
||||
});
|
||||
|
||||
// Create a downloadable file
|
||||
let blob = new Blob([csvContent], { type: "text/csv" });
|
||||
let url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = table + "_data.csv"; // File name
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
433
html/index.html
Normal file
433
html/index.html
Normal file
@@ -0,0 +1,433 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NebuleAir</title>
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
<script src="assets/js/chart.js"></script> <!-- Local Chart.js -->
|
||||
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#sidebar a.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#sidebar a.nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#sidebar a.nav-link svg {
|
||||
margin-right: 8px; /* Add spacing between icons and text */
|
||||
}
|
||||
#sidebar {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.offcanvas-backdrop {
|
||||
z-index: 1040;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Topbar -->
|
||||
<span id="topbar"></span>
|
||||
|
||||
<!-- Sidebar Offcanvas for Mobile -->
|
||||
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="sidebar_mobile">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<div class="row">
|
||||
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
|
||||
</aside>
|
||||
<!-- Main content -->
|
||||
<main class="col-md-9 ms-sm-auto col-lg-10 offset-md-3 offset-lg-2 px-md-4">
|
||||
<h1 class="mt-4">Votre capteur</h1>
|
||||
<p>Bienvenue sur votre interface de configuration de votre capteur.</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
|
||||
<!-- Card NPM values -->
|
||||
<div class="col-sm-4 mt-2">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Mesures PM</h5>
|
||||
<canvas id="sensorPMChart" style="width: 100%; max-width: 600px; height: 200px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Linux Stats -->
|
||||
<div class="col-sm-4 mt-2">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Linux stats</h5>
|
||||
<p class="card-text">Disk usage (total size <span id="disk_size"></span> Gb) </p>
|
||||
<div id="disk_space"></div>
|
||||
<p class="card-text">Memory usage (total size <span id="memory_size"></span> Mb) </p>
|
||||
<div id="memory_space"></div>
|
||||
<p class="card-text"> Database size: <span id="database_size"></span> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="row mb-3">
|
||||
|
||||
<div class="col-sm-4 mt-2">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Mesures Temperature</h5>
|
||||
<canvas id="sensorBME_temp" style="width: 100%; max-width: 600px; height: 200px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
-->
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JAVASCRIPT -->
|
||||
|
||||
<!-- Link Ajax locally -->
|
||||
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
||||
<!-- Link Bootstrap JS and Popper.js locally -->
|
||||
<script src="assets/js/bootstrap.bundle.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const elementsToLoad = [
|
||||
{ id: 'topbar', file: 'topbar.html' },
|
||||
{ id: 'sidebar', file: 'sidebar.html' },
|
||||
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
||||
];
|
||||
|
||||
elementsToLoad.forEach(({ id, file }) => {
|
||||
fetch(file)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.innerHTML = data;
|
||||
}
|
||||
})
|
||||
.catch(error => console.error(`Error loading ${file}:`, error));
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json'
|
||||
.then(response => response.json()) // Parse response as JSON
|
||||
.then(data => {
|
||||
console.log("Getting config file (onload)");
|
||||
//get device ID
|
||||
const deviceID = data.deviceID.trim().toUpperCase();
|
||||
//document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
|
||||
|
||||
|
||||
//get device Name
|
||||
const deviceName = data.deviceName;
|
||||
|
||||
const elements = document.querySelectorAll('.sideBar_sensorName');
|
||||
elements.forEach((element) => {
|
||||
element.innerText = deviceName;
|
||||
});
|
||||
|
||||
//get local RTC
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=RTC_time',
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log("Local RTC: " + response);
|
||||
const RTC_Element = document.getElementById("RTC_time");
|
||||
RTC_Element.textContent = response;
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
//get database size
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=database_size',
|
||||
dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
|
||||
if (response.size_megabytes !== undefined) {
|
||||
// Extract and format the size in MB
|
||||
const databaseSizeMB = response.size_megabytes + " MB";
|
||||
|
||||
// Update the HTML element with the database size
|
||||
const databaseSizeElement = document.getElementById("database_size");
|
||||
databaseSizeElement.textContent = databaseSizeMB;
|
||||
|
||||
console.log("Database size:", databaseSizeMB);
|
||||
} else if (response.error) {
|
||||
// Handle errors from the PHP response
|
||||
console.error("Error from server:", response.error);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//get disk free space
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=linux_disk',
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log("Linux disk space: " + response);
|
||||
//1. disk size
|
||||
const disk_size = document.getElementById("disk_size");
|
||||
const firstNumber = response.match(/(?<!\w)(\d+(\.\d+)?)(?=\D)/)[1];
|
||||
|
||||
disk_size.innerHTML = firstNumber;
|
||||
//2. Free space
|
||||
const match = response.match(/(\d+)%/);
|
||||
const diskSpace = document.getElementById("disk_space");
|
||||
const percentage = match[1];
|
||||
|
||||
// Create the outer div with class and attributes
|
||||
const progressDiv = document.createElement('div');
|
||||
progressDiv.className = 'progress mb-3';
|
||||
progressDiv.setAttribute('role', 'progressbar');
|
||||
progressDiv.setAttribute('aria-label', 'Example with label');
|
||||
progressDiv.setAttribute('aria-valuenow', percentage);
|
||||
progressDiv.setAttribute('aria-valuemin', 0);
|
||||
progressDiv.setAttribute('aria-valuemax', 100);
|
||||
|
||||
// Create the inner progress bar div
|
||||
const progressBarDiv = document.createElement('div');
|
||||
progressBarDiv.className = 'progress-bar';
|
||||
progressBarDiv.style.width = `${percentage}%`; // Set the width dynamically
|
||||
progressBarDiv.textContent = `${percentage}%`; // Set the text dynamically
|
||||
|
||||
// Append the progress bar to the outer div
|
||||
progressDiv.appendChild(progressBarDiv);
|
||||
|
||||
// Append the entire progress bar to the body (or any other container)
|
||||
diskSpace.appendChild(progressDiv);
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
//get memory free space
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=linux_memory',
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log("Linux memory space: " + response);
|
||||
//1. memory size
|
||||
const memory_size = document.getElementById("memory_size");
|
||||
const memorySpace = document.getElementById("memory_space");
|
||||
|
||||
|
||||
const memLine = response.match(/Mem:\s+(\d+\.?\d*)Mi\s+(\d+\.?\d*)Mi/);
|
||||
const totalMemory = parseFloat(memLine[1]); // Total memory in MiB
|
||||
const usedMemory = parseFloat(memLine[2]); // Used memory in MiB
|
||||
|
||||
// Calculate the percentage
|
||||
const percentageUsed = ((usedMemory / totalMemory) * 100).toFixed(2);
|
||||
|
||||
console.log(totalMemory);
|
||||
|
||||
memory_size.innerHTML = totalMemory;
|
||||
|
||||
|
||||
console.log(usedMemory);
|
||||
console.log(percentageUsed);
|
||||
|
||||
// Create the outer div with class and attributes
|
||||
const progressDiv = document.createElement('div');
|
||||
progressDiv.className = 'progress mb-3';
|
||||
progressDiv.setAttribute('role', 'progressbar');
|
||||
progressDiv.setAttribute('aria-label', 'Example with label');
|
||||
progressDiv.setAttribute('aria-valuenow', percentageUsed);
|
||||
progressDiv.setAttribute('aria-valuemin', 0);
|
||||
progressDiv.setAttribute('aria-valuemax', 100);
|
||||
|
||||
// Create the inner progress bar div
|
||||
const progressBarDiv = document.createElement('div');
|
||||
progressBarDiv.className = 'progress-bar';
|
||||
progressBarDiv.style.width = `${percentageUsed}%`; // Set the width dynamically
|
||||
progressBarDiv.textContent = `${percentageUsed}%`; // Set the text dynamically
|
||||
|
||||
// Append the progress bar to the outer div
|
||||
progressDiv.appendChild(progressBarDiv);
|
||||
|
||||
// Append the entire progress bar to the body (or any other container)
|
||||
memorySpace.appendChild(progressDiv);
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// GET NPM SQLite values
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=get_npm_sqlite_data',
|
||||
dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
updatePMChart(response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
let chart; // Store the Chart.js instance globally
|
||||
|
||||
function updatePMChart(data) {
|
||||
const labels = data.map(d => d.timestamp);
|
||||
const PM1 = data.map(d => d.PM1);
|
||||
const PM25 = data.map(d => d.PM25);
|
||||
const PM10 = data.map(d => d.PM10);
|
||||
|
||||
const ctx = document.getElementById('sensorPMChart').getContext('2d');
|
||||
|
||||
if (!chart) {
|
||||
chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "PM1",
|
||||
data: PM1,
|
||||
borderColor: "rgba(0, 51, 153, 1)",
|
||||
backgroundColor: "rgba(0, 51, 153, 0.2)", // Very light blue background
|
||||
fill: true,
|
||||
tension: 0.4, // Smooth curves
|
||||
pointRadius: 2, // Larger points
|
||||
pointHoverRadius: 6 // Bigger hover points
|
||||
},
|
||||
{
|
||||
label: "PM2.5",
|
||||
data: PM25,
|
||||
borderColor: "rgba(30, 144, 255, 1)",
|
||||
backgroundColor: "rgba(30, 144, 255, 0.2)", // Very light medium blue background
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 2,
|
||||
pointHoverRadius: 6
|
||||
},
|
||||
{
|
||||
label: "PM10",
|
||||
data: PM10,
|
||||
borderColor: "rgba(135, 206, 250, 1)",
|
||||
backgroundColor: "rgba(135, 206, 250, 0.2)", // Very light blue background
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 2,
|
||||
pointHoverRadius: 6
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time (UTC)',
|
||||
font: {
|
||||
size: 16,
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
color: '#4A4A4A'
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 5,
|
||||
color: '#4A4A4A',
|
||||
callback: function(value, index) {
|
||||
// Access the correct label from the `labels` array
|
||||
const label = labels[index]; // Use the original `labels` array
|
||||
if (label && typeof label === 'string' && label.includes(' ')) {
|
||||
return label.split(' ')[1].slice(0, 5); // Extract "HH:MM"
|
||||
}
|
||||
return value; // Fallback for invalid labels
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
display: false // Remove gridlines for a cleaner look
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Values (µg/m³)',
|
||||
font: {
|
||||
size: 16,
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
color: '#4A4A4A'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
} else {
|
||||
chart.data.labels = labels;
|
||||
chart.data.datasets[0].data = PM1;
|
||||
chart.data.datasets[1].data = PM25;
|
||||
chart.data.datasets[2].data = PM10;
|
||||
chart.update();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//end fetch config
|
||||
})
|
||||
.catch(error => console.error('Error loading config.json:', error));
|
||||
//end windows on load
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
472
html/launcher.php
Normal file
472
html/launcher.php
Normal file
@@ -0,0 +1,472 @@
|
||||
<?php
|
||||
// ✅ Prevents caching → Adds headers to ensure fresh response.
|
||||
header("Content-Type: application/json");
|
||||
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
|
||||
header("Pragma: no-cache");
|
||||
|
||||
$type=$_GET['type'];
|
||||
|
||||
if ($type == "get_npm_sqlite_data") {
|
||||
$database_path = "/var/www/nebuleair_pro_4g/sqlite/sensors.db";
|
||||
//echo "Getting data from sqlite database";
|
||||
try {
|
||||
$db = new PDO("sqlite:$database_path");
|
||||
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
|
||||
// Fetch the last 30 records
|
||||
$stmt = $db->query("SELECT timestamp, PM1, PM25, PM10 FROM data_NPM ORDER BY timestamp DESC LIMIT 30");
|
||||
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
$reversedData = array_reverse($data); // Reverse the order
|
||||
|
||||
|
||||
echo json_encode($reversedData);
|
||||
} catch (PDOException $e) {
|
||||
echo json_encode(["error" => $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
|
||||
if ($type == "update_config") {
|
||||
echo "updating....";
|
||||
$param=$_GET['param'];
|
||||
$value=$_GET['value'];
|
||||
$configFile = '../config.json';
|
||||
// Convert value to boolean, integer, or string
|
||||
if ($value === "true") {
|
||||
$value = true; // Convert "true" string to boolean true
|
||||
} elseif ($value === "false") {
|
||||
$value = false; // Convert "false" string to boolean false
|
||||
} elseif (is_numeric($value)) {
|
||||
$value = $value + 0; // Convert numeric strings to int or float
|
||||
}
|
||||
$configData = json_decode(file_get_contents($configFile), true);
|
||||
$configData[$param] = $value;
|
||||
file_put_contents($configFile, json_encode($configData, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
|
||||
echo "Config updated!";
|
||||
}
|
||||
|
||||
if ($type == "getModem_busy") {
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/check_running.py';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "RTC_time") {
|
||||
$time = shell_exec("date '+%d/%m/%Y %H:%M:%S'");
|
||||
echo $time;
|
||||
}
|
||||
|
||||
if ($type == "sys_RTC_module_time") {
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/RTC/read.py';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "git_pull") {
|
||||
$command = 'sudo git pull';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "set_RTC_withNTP") {
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/RTC/set_with_NTP.py';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "set_RTC_withBrowser") {
|
||||
$time = $_GET['time'];
|
||||
// Validate time format
|
||||
if (!strtotime($time)) {
|
||||
echo json_encode(['success' => false, 'message' => 'Invalid time format']);
|
||||
exit;
|
||||
}
|
||||
// Convert to RTC-compatible format (e.g., 'YYYY-MM-DD HH:MM:SS')
|
||||
$rtc_time = date('Y-m-d H:i:s', strtotime($time));
|
||||
|
||||
// Execute Python script to update the RTC
|
||||
$command = escapeshellcmd("sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/RTC/set_with_browserTime.py '$rtc_time'");
|
||||
$output = shell_exec($command);
|
||||
if ($output === null) {
|
||||
echo json_encode(['success' => false, 'message' => 'Failed to update RTC']);
|
||||
} else {
|
||||
echo json_encode(['success' => true, 'message' => 'RTC updated successfully']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if ($type == "clear_loopLogs") {
|
||||
$command = 'truncate -s 0 /var/www/nebuleair_pro_4g/logs/loop.log';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "database_size") {
|
||||
|
||||
// Path to the SQLite database file
|
||||
$databasePath = '/var/www/nebuleair_pro_4g/sqlite/sensors.db';
|
||||
|
||||
// Check if the file exists
|
||||
if (file_exists($databasePath)) {
|
||||
try {
|
||||
// Connect to the SQLite database
|
||||
$db = new PDO("sqlite:$databasePath");
|
||||
|
||||
// Get the file size in bytes
|
||||
$fileSizeBytes = filesize($databasePath);
|
||||
|
||||
// Convert the file size to human-readable formats
|
||||
$fileSizeKilobytes = $fileSizeBytes / 1024; // KB
|
||||
$fileSizeMegabytes = $fileSizeKilobytes / 1024; // MB
|
||||
|
||||
|
||||
// Prepare the JSON response
|
||||
$data = [
|
||||
'path' => $databasePath,
|
||||
'size_bytes' => $fileSizeBytes,
|
||||
'size_kilobytes' => round($fileSizeKilobytes, 2),
|
||||
'size_megabytes' => round($fileSizeMegabytes, 2),
|
||||
];
|
||||
|
||||
// Output the JSON response
|
||||
echo json_encode($data, JSON_PRETTY_PRINT);
|
||||
} catch (PDOException $e) {
|
||||
// Handle database connection errors
|
||||
echo json_encode([
|
||||
'error' => 'Database query failed: ' . $e->getMessage()
|
||||
]);
|
||||
}
|
||||
} else {
|
||||
// Handle error if the file doesn't exist
|
||||
echo json_encode([
|
||||
'error' => 'Database file not found',
|
||||
'path' => $databasePath
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
if ($type == "linux_disk") {
|
||||
$command = 'df -h /';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "linux_memory") {
|
||||
$command = 'free -h';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "sshTunnel") {
|
||||
$ssh_port=$_GET['ssh_port'];
|
||||
$command = 'sudo ssh -i /var/www/.ssh/id_rsa -f -N -R "'.$ssh_port.':localhost:22" -p 50221 -o StrictHostKeyChecking=no "airlab_server1@aircarto.fr"';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "reboot") {
|
||||
$command = 'sudo reboot';
|
||||
$output = shell_exec($command);
|
||||
}
|
||||
|
||||
if ($type == "npm") {
|
||||
$port=$_GET['port'];
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/NPM/get_data.py ' . $port;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "envea") {
|
||||
$port=$_GET['port'];
|
||||
$name=$_GET['name'];
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/envea/read_value.py ' . $port;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "noise") {
|
||||
$command = '/var/www/nebuleair_pro_4g/sound_meter/sound_meter';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "BME280") {
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/BME280/read.py';
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
|
||||
if ($type == "table_mesure") {
|
||||
$table=$_GET['table'];
|
||||
$limit=$_GET['limit'];
|
||||
$download=$_GET['download'];
|
||||
|
||||
if ($download==="false") {
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/sqlite/read.py '.$table.' '.$limit;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
} else{
|
||||
$start_date=$_GET['start_date'];
|
||||
$end_date=$_GET['end_date'];
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/sqlite/read_select_date.py '.$table.' '.$start_date.' '.$end_date;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
# SARA R4 COMMANDS
|
||||
if ($type == "sara") {
|
||||
$port=$_GET['port'];
|
||||
$sara_command=$_GET['command'];
|
||||
$sara_command = escapeshellcmd($sara_command);
|
||||
$timeout=$_GET['timeout'];
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara.py ' . $port . ' ' . $sara_command . ' ' . $timeout;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
# SARA R4 COMMANDS (MQTT)
|
||||
if ($type == "sara_getMQTT_config") {
|
||||
$port=$_GET['port'];
|
||||
$timeout=$_GET['timeout'];
|
||||
$command = '/usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/MQTT/get_config.py ' . $port . ' ' . $timeout;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
# SARA R4 COMMANDS (MQTT)
|
||||
if ($type == "sara_getMQTT_login_logout") {
|
||||
$port=$_GET['port'];
|
||||
$timeout=$_GET['timeout'];
|
||||
$login_logout=$_GET['login_logout'];
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/MQTT/login_logout.py ' . $port . ' ' . $login_logout . ' ' . $timeout;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
# SARA R4 COMMANDS (MQTT -> publish)
|
||||
if ($type == "sara_MQTT_publish") {
|
||||
$port=$_GET['port'];
|
||||
$timeout=$_GET['timeout'];
|
||||
$message=$_GET['message'];
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/MQTT/publish.py ' . $port . ' ' . $message . ' ' . $timeout;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
#Connect to network
|
||||
if ($type == "sara_connectNetwork") {
|
||||
$port=$_GET['port'];
|
||||
$timeout=$_GET['timeout'];
|
||||
$networkID=$_GET['networkID'];
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara_connectNetwork.py ' . $port . ' ' . $networkID . ' ' . $timeout;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
#save to config.json
|
||||
$configFile = '/var/www/nebuleair_pro_4g/config.json';
|
||||
// Read the JSON file
|
||||
$jsonData = file_get_contents($configFile);
|
||||
// Decode JSON data into an associative array
|
||||
$config = json_decode($jsonData, true);
|
||||
// Check if decoding was successful
|
||||
if ($config === null) {
|
||||
die("Error: Could not decode JSON file.");
|
||||
}
|
||||
// Update the value of SARA_R4_networkID
|
||||
$config['SARA_R4_neworkID'] = $networkID; // Replace 42 with the desired value
|
||||
// Encode the array back to JSON with pretty printing
|
||||
$newJsonData = json_encode($config, JSON_PRETTY_PRINT);
|
||||
// Check if encoding was successful
|
||||
if ($newJsonData === false) {
|
||||
die("Error: Could not encode JSON data.");
|
||||
}
|
||||
|
||||
// Write the updated JSON back to the file
|
||||
if (file_put_contents($configFile, $newJsonData) === false) {
|
||||
die("Error: Could not write to JSON file.");
|
||||
}
|
||||
|
||||
echo "SARA_R4_networkID updated successfully.";
|
||||
|
||||
}
|
||||
|
||||
#SET THE URL for messaging (profile id 2)
|
||||
if ($type == "sara_setURL") {
|
||||
$port=$_GET['port'];
|
||||
$url=$_GET['url'];
|
||||
$profile_id = 2;
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara_setURL.py ' . $port . ' ' . $url . ' ' . $profile_id;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
#SET APN
|
||||
if ($type == "sara_APN") {
|
||||
$port=$_GET['port'];
|
||||
$timeout=$_GET['timeout'];
|
||||
$APN_address=$_GET['APN_address'];
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara_setAPN.py ' . $port . ' ' . $APN_address . ' ' . $timeout;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
#TO WRITE MESSAGE TO MEMORY
|
||||
if ($type == "sara_writeMessage") {
|
||||
$port=$_GET['port'];
|
||||
$message=$_GET['message'];
|
||||
$message = escapeshellcmd($message);
|
||||
$type2=$_GET['type2'];
|
||||
|
||||
if ($type2 === "write") {
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara_writeMessage.py ' . $port . ' ' . $message;
|
||||
$output = shell_exec($command);
|
||||
}
|
||||
if ($type2 === "read") {
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara_readMessage.py ' . $port . ' ' . $message;
|
||||
$output = shell_exec($command);
|
||||
}
|
||||
if ($type2 === "erase") {
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara_eraseMessage.py ' . $port . ' ' . $message;
|
||||
$output = shell_exec($command);
|
||||
}
|
||||
|
||||
echo $output;
|
||||
}
|
||||
|
||||
#Send the typed message to server (for ntfy notification)
|
||||
if ($type == "sara_sendMessage") {
|
||||
$port=$_GET['port'];
|
||||
$endpoint=$_GET['endpoint'];
|
||||
$endpoint = escapeshellcmd($endpoint);
|
||||
$profile_id = 2;
|
||||
$command = 'sudo /usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara_sendMessage.py ' . $port . ' ' . $endpoint. ' ' . $profile_id;
|
||||
$output = shell_exec($command);
|
||||
echo $output;
|
||||
}
|
||||
|
||||
if ($type == "internet") {
|
||||
//eth0
|
||||
$command = 'nmcli -g GENERAL.STATE device show eth0';
|
||||
$eth0_connStatus = shell_exec($command);
|
||||
$eth0_connStatus = str_replace("\n", "", $eth0_connStatus);
|
||||
$command = 'nmcli -g IP4.ADDRESS device show eth0';
|
||||
$eth0_IPAddr = shell_exec($command);
|
||||
$eth0_IPAddr = str_replace("\n", "", $eth0_IPAddr);
|
||||
|
||||
//wlan0
|
||||
$command = 'nmcli -g GENERAL.STATE device show wlan0';
|
||||
$wlan0_connStatus = shell_exec($command);
|
||||
$wlan0_connStatus = str_replace("\n", "", $wlan0_connStatus);
|
||||
$command = 'nmcli -g IP4.ADDRESS device show wlan0';
|
||||
$wlan0_IPAddr = shell_exec($command);
|
||||
$wlan0_IPAddr = str_replace("\n", "", $wlan0_IPAddr);
|
||||
|
||||
$data= array(
|
||||
"ethernet" => array(
|
||||
"connection" => $eth0_connStatus,
|
||||
"IP" => $eth0_IPAddr
|
||||
),
|
||||
"wifi" => array(
|
||||
"connection" => $wlan0_connStatus,
|
||||
"IP" => $wlan0_IPAddr
|
||||
)
|
||||
);
|
||||
$json_data = json_encode($data);
|
||||
|
||||
echo $json_data;
|
||||
}
|
||||
|
||||
# IMPORTANT
|
||||
# c'est ici que la connexion vers le WIFI du client s'effectue.
|
||||
if ($type == "wifi_connect") {
|
||||
$SSID=$_GET['SSID'];
|
||||
$PASS=$_GET['pass'];
|
||||
|
||||
echo "will try to connect to </br>";
|
||||
echo "SSID: " . $SSID;
|
||||
echo "</br>";
|
||||
echo "Password: " . $PASS;
|
||||
echo "</br>";
|
||||
echo "</br>";
|
||||
|
||||
echo "You will be disconnected. If connection is successfull you can find the device on your local network.";
|
||||
|
||||
$script_path = '/var/www/nebuleair_pro_4g/connexion.sh';
|
||||
$log_file = '/var/www/nebuleair_pro_4g/logs/app.log';
|
||||
shell_exec("$script_path $SSID $PASS >> $log_file 2>&1 &");
|
||||
|
||||
#$output = shell_exec('sudo nmcli connection down Hotspot');
|
||||
#$output2 = shell_exec('sudo nmcli device wifi connect "AirLab" password "123plouf"');
|
||||
|
||||
}
|
||||
|
||||
|
||||
if ($type == "wifi_scan") {
|
||||
|
||||
// Set the path to your CSV file
|
||||
$csvFile = '/var/www/nebuleair_pro_4g/wifi_list.csv';
|
||||
|
||||
// Initialize an array to hold the JSON data
|
||||
$jsonData = [];
|
||||
|
||||
// Open the CSV file for reading
|
||||
if (($handle = fopen($csvFile, 'r')) !== false) {
|
||||
// Get the headers from the first row
|
||||
$headers = fgetcsv($handle);
|
||||
|
||||
// Loop through the rest of the rows
|
||||
while (($row = fgetcsv($handle)) !== false) {
|
||||
// Combine headers with row data to create an associative array
|
||||
$jsonData[] = array_combine($headers, $row);
|
||||
}
|
||||
|
||||
// Close the file handle
|
||||
fclose($handle);
|
||||
}
|
||||
|
||||
// Set the content type to JSON
|
||||
header('Content-Type: application/json');
|
||||
|
||||
// Convert the array to JSON format and output it
|
||||
echo json_encode($jsonData, JSON_PRETTY_PRINT);
|
||||
|
||||
|
||||
}
|
||||
|
||||
if ($type == "wifi_scan_old") {
|
||||
|
||||
$output = shell_exec('nmcli device wifi list ifname wlan0');
|
||||
// Split the output into lines
|
||||
$lines = explode("\n", trim($output));
|
||||
|
||||
// Initialize an array to hold the results
|
||||
$wifiNetworks = [];
|
||||
|
||||
// Loop through each line and extract the relevant information
|
||||
foreach ($lines as $index => $line) {
|
||||
// Skip the header line
|
||||
if ($index === 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Split the line by whitespace and filter empty values
|
||||
$columns = preg_split('/\s+/', $line);
|
||||
|
||||
// If the line has enough columns, store the relevant data
|
||||
if (count($columns) >= 5) {
|
||||
$wifiNetworks[] = [
|
||||
'SSID' => $columns[2], // Network name
|
||||
'BARS' => $columns[8],
|
||||
'SIGNAL' => $columns[7], // Signal strength
|
||||
|
||||
];
|
||||
}
|
||||
}
|
||||
$json_data = json_encode($wifiNetworks);
|
||||
|
||||
echo $json_data;
|
||||
|
||||
}
|
||||
261
html/logs.html
Normal file
261
html/logs.html
Normal file
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NebuleAir</title>
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#sidebar a.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#sidebar a.nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#sidebar a.nav-link svg {
|
||||
margin-right: 8px; /* Add spacing between icons and text */
|
||||
}
|
||||
#sidebar {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.offcanvas-backdrop {
|
||||
z-index: 1040;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Topbar -->
|
||||
<span id="topbar"></span>
|
||||
|
||||
<!-- Sidebar Offcanvas for Mobile -->
|
||||
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="sidebar_mobile">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<div class="row">
|
||||
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
|
||||
</aside>
|
||||
<!-- Main content -->
|
||||
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
|
||||
<h1 class="mt-4">Le journal</h1>
|
||||
<p>Le journal des logs permet de savoir si les processus du capteur se déroulent correctement.</p>
|
||||
<div class="row">
|
||||
<!-- card 1 -->
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card" style="height: 80vh;">
|
||||
<div class="card-header">
|
||||
Master logs <button type="submit" class="btn btn-secondary btn-sm" onclick="clear_loopLogs()">Clear</button>
|
||||
<span id="script_running"></span>
|
||||
</div>
|
||||
<div class="card-body overflow-auto" id="card_loop_content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card 2 -->
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card" style="height: 80vh;">
|
||||
<div class="card-header">
|
||||
Boot logs
|
||||
</div>
|
||||
<div class="card-body overflow-auto" id="card_boot_content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JAVASCRIPT -->
|
||||
|
||||
<!-- Link Ajax locally -->
|
||||
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
||||
<!-- Link Bootstrap JS and Popper.js locally -->
|
||||
<script src="assets/js/bootstrap.bundle.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const elementsToLoad = [
|
||||
{ id: 'topbar', file: 'topbar.html' },
|
||||
{ id: 'sidebar', file: 'sidebar.html' },
|
||||
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
||||
];
|
||||
|
||||
elementsToLoad.forEach(({ id, file }) => {
|
||||
fetch(file)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.innerHTML = data;
|
||||
}
|
||||
})
|
||||
.catch(error => console.error(`Error loading ${file}:`, error));
|
||||
});
|
||||
|
||||
const loop_card_content = document.getElementById('card_loop_content');
|
||||
const boot_card_content = document.getElementById('card_boot_content');
|
||||
|
||||
fetch('../logs/master.log')
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch the log file.');
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then((data) => {
|
||||
const lines = data.split('\n');
|
||||
|
||||
// Format log content
|
||||
const formattedLog = lines
|
||||
.map((line) => line.trim()) // Remove extra whitespace
|
||||
.filter((line) => line) // Remove empty lines
|
||||
.join('<br>'); // Join formatted lines with line breaks
|
||||
|
||||
loop_card_content.innerHTML = `<pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">${formattedLog}</pre>`;
|
||||
loop_card_content.scrollTop = loop_card_content.scrollHeight; // Scroll to the bottom
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
loop_card_content.textContent = 'Error loading log file.';
|
||||
});
|
||||
|
||||
fetch('../logs/app.log')
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch the log file.');
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then((data) => {
|
||||
const lines = data.split('\n');
|
||||
|
||||
// Format log content
|
||||
const formattedLog = lines
|
||||
.map((line) => line.trim()) // Remove extra whitespace
|
||||
.filter((line) => line) // Remove empty lines
|
||||
.join('<br>'); // Join formatted lines with line breaks
|
||||
|
||||
boot_card_content.innerHTML = `<pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">${formattedLog}</pre>`;
|
||||
boot_card_content.scrollTop = loop_card_content.scrollHeight; // Scroll to the bottom
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
boot_card_content.textContent = 'Error loading log file.';
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
window.onload = function() {
|
||||
getModem_busy_status();
|
||||
setInterval(getModem_busy_status, 2000);
|
||||
|
||||
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json'
|
||||
.then(response => response.json()) // Parse response as JSON
|
||||
.then(data => {
|
||||
console.log("Getting config file (onload)");
|
||||
//get device ID
|
||||
const deviceID = data.deviceID.trim().toUpperCase();
|
||||
// document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
|
||||
//get device Name
|
||||
const deviceName = data.deviceName;
|
||||
|
||||
const elements = document.querySelectorAll('.sideBar_sensorName');
|
||||
elements.forEach((element) => {
|
||||
element.innerText = deviceName;
|
||||
});
|
||||
|
||||
|
||||
//get local RTC
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=RTC_time',
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log("Local RTC: " + response);
|
||||
const RTC_Element = document.getElementById("RTC_time");
|
||||
RTC_Element.textContent = response;
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
.catch(error => console.error('Error loading config.json:', error));
|
||||
}
|
||||
|
||||
|
||||
function clear_loopLogs(){
|
||||
console.log("Clearing loop logs");
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=clear_loopLogs',
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
// Handle success response if needed
|
||||
console.log(response);
|
||||
//alert(response);
|
||||
// Reload the page after the device update
|
||||
location.reload(); // This will reload the page
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getModem_busy_status() {
|
||||
//console.log("Getting modem busy status");
|
||||
|
||||
const script_is_running = document.getElementById("script_running");
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=getModem_busy',
|
||||
dataType: 'json', // Expecting JSON response
|
||||
method: 'GET',
|
||||
success: function(response) {
|
||||
//console.log(response);
|
||||
|
||||
if (response.running) {
|
||||
// Script is running → Show the Bootstrap spinner
|
||||
script_is_running.innerHTML = `
|
||||
<div class="spinner-border spinner-border-sm text-danger" role="status">
|
||||
<span class="visually-hidden">Modem is busy...</span>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
// Script is NOT running → Show a success message (no spinner)
|
||||
script_is_running.innerHTML = ``;
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
script_is_running.innerHTML = `<span class="text-warning">Error checking status ⚠️</span>`;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
725
html/saraR4.html
Normal file
725
html/saraR4.html
Normal file
@@ -0,0 +1,725 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NebuleAir</title>
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#sidebar a.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#sidebar a.nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#sidebar a.nav-link svg {
|
||||
margin-right: 8px; /* Add spacing between icons and text */
|
||||
}
|
||||
#sidebar {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.offcanvas-backdrop {
|
||||
z-index: 1040;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Topbar -->
|
||||
<span id="topbar"></span>
|
||||
|
||||
<!-- Sidebar Offcanvas for Mobile -->
|
||||
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="sidebar_mobile">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<div class="row">
|
||||
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
|
||||
</aside>
|
||||
<!-- Main content -->
|
||||
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
|
||||
<h1 class="mt-4">Modem 4G</h1>
|
||||
<p>Votre capteur est équipé d'un modem 4G et d'une carte SIM afin d'envoyer les mesures sur internet.</p>
|
||||
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="check_modem_configMode" onchange="update_modem_configMode('modem_config_mode',this.checked)">
|
||||
<label class="form-check-label" for="check_modem_configMode">Mode configuration</label>
|
||||
</div>
|
||||
|
||||
<span id="modem_status_message"></span>
|
||||
<h3>
|
||||
Status
|
||||
<span id="modem-status" class="badge">Loading...</span>
|
||||
</h3>
|
||||
|
||||
<div class="row mb-3">
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">General information. </p>
|
||||
<button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'ATI', 2)">Get Data</button>
|
||||
<div id="loading_ttyAMA2_ATI" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_ATI"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">SIM card information.</p>
|
||||
<button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+CCID?', 2)">Get Data</button>
|
||||
<div id="loading_ttyAMA2_AT_CCID_" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_AT_CCID_"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">Actual Network connection</p>
|
||||
<button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+COPS?', 2)">Get Data</button>
|
||||
<div id="loading_ttyAMA2_AT_COPS_" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_AT_COPS_"></div>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Signal strength </p>
|
||||
<button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+CSQ', 2)">Get Data</button>
|
||||
<div id="loading_ttyAMA2_AT_CSQ" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_AT_CSQ"></div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Connexion 4G Network</h3>
|
||||
|
||||
<div class="row mb-3">
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="card text-dark bg-light">
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">Network scan. Attention: 2 min scan.</p>
|
||||
<p class="card-text">Orange FR (20801), SFR (20810), Bouygues (20820)</p>
|
||||
|
||||
<button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+COPS=?', 120)">Scan</button>
|
||||
<div id="loading_ttyAMA2_AT_COPS__" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_AT_COPS__"></div>
|
||||
<div id="table-network"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card text-dark bg-light">
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text">Network connexion.</p>
|
||||
<div class="input-group input-group-sm mb-3">
|
||||
<span class="input-group-text" id="inputGroup-sizing-sm">Numeric Operator</span>
|
||||
<input type="text" id="messageInput_network" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="connectNetwork_saraR4('ttyAMA2', document.getElementById('messageInput_network').value, 60)">Connect</button>
|
||||
<div id="loading_ttyAMA2_AT_COPS_Connect" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_AT_COPS_Connect"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<div class="card text-dark bg-light">
|
||||
<div class="card-body">
|
||||
<p class="card-text">APN</p>
|
||||
<div class="input-group input-group-sm mb-3">
|
||||
<span class="input-group-text" id="inputGroup-sizing-sm">Address</span>
|
||||
<input type="text" id="messageInput_APN" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="connectAPN_saraR4('ttyAMA2', document.getElementById('messageInput_APN').value, 5)">Set APN</button>
|
||||
|
||||
<button class="btn btn-secondary" onclick="getData_saraR4('ttyAMA2','AT+CGDCONT?', 5)">Get APN</button>
|
||||
|
||||
<div id="loading_ttyAMA2_APN" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_APN"></div>
|
||||
|
||||
<div id="loading_ttyAMA2_AT_CGDCONT_" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_AT_CGDCONT_"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!--
|
||||
<h3>MQTT</h3>
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Get config.</p>
|
||||
<button class="btn btn-primary" onclick="mqtt_getConfig_saraR4('ttyAMA2', 2)">Get Data</button>
|
||||
<div id="loading_mqtt_getConfig" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_mqtt_getConfig"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Login / logout</p>
|
||||
|
||||
<button class="btn btn-success" onclick="mqtt_login_logout('ttyAMA2', 1, 6)">Login </button>
|
||||
<button class="btn btn-danger" onclick="mqtt_login_logout('ttyAMA2', 0, 6)">Logout </button>
|
||||
<div id="loading_mqtt_login_logout" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_mqtt_login_logout"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Send message (MQTT publish) .</p>
|
||||
<div class="input-group input-group-sm mb-3">
|
||||
<span class="input-group-text" id="inputGroup-sizing-sm">Text</span>
|
||||
<input type="text" id="MQTTmessageInput" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="mqtt_publish('ttyAMA2', document.getElementById('MQTTmessageInput').value, 2)">Send Message</button>
|
||||
<div id="loading_mqtt_publish" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_mqtt_publish"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<h3>Send message (test)</h3>
|
||||
<div class="row mb-3">
|
||||
<!-- SET URL -->
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Set url (HTTP).</p>
|
||||
<button class="btn btn-primary" onclick="setURL_saraR4('ttyAMA2', 'data.nebuleair.fr')">Set URL</button>
|
||||
<div id="loading_ttyAMA2_setURL" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_setURL"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WRITE MESSAGE to memory -->
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Write message (local storage).</p>
|
||||
<div class="input-group input-group-sm mb-3">
|
||||
<span class="input-group-text" id="inputGroup-sizing-sm">Text</span>
|
||||
<input type="text" id="messageInput" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="writeMessage_saraR4('ttyAMA2', document.getElementById('messageInput').value , 'write')">Write </button>
|
||||
<button class="btn btn-warning" onclick="writeMessage_saraR4('ttyAMA2', 'Hello', 'read')">Read </button>
|
||||
<button class="btn btn-danger" onclick="writeMessage_saraR4('ttyAMA2', 'Hello', 'erase')">Empty </button>
|
||||
<div id="loading_ttyAMA2_message_write" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_message_write"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Send MESSAGE -->
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Send message .</p>
|
||||
<button class="btn btn-primary" onclick="sendMessage_saraR4('ttyAMA2', '/pro_4G/notif_message.php')">Send Message</button>
|
||||
<div id="loading_ttyAMA2_message_send" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<div id="response_ttyAMA2_message_send"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JAVASCRIPT -->
|
||||
|
||||
<!-- Link Ajax locally -->
|
||||
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
||||
<!-- Link Bootstrap JS and Popper.js locally -->
|
||||
<script src="assets/js/bootstrap.bundle.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const elementsToLoad = [
|
||||
{ id: 'topbar', file: 'topbar.html' },
|
||||
{ id: 'sidebar', file: 'sidebar.html' },
|
||||
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
||||
];
|
||||
|
||||
elementsToLoad.forEach(({ id, file }) => {
|
||||
fetch(file)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.innerHTML = data;
|
||||
}
|
||||
})
|
||||
.catch(error => console.error(`Error loading ${file}:`, error));
|
||||
});
|
||||
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json'
|
||||
.then(response => response.json()) // Parse response as JSON
|
||||
.then(data => {
|
||||
console.log("Getting config file (onload)");
|
||||
//modem config mode
|
||||
const check_modem_configMode = document.getElementById("check_modem_configMode");
|
||||
check_modem_configMode.checked = data.modem_config_mode;
|
||||
console.log("Modem configuration: " + data.modem_config_mode);
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
function getData_saraR4(port, command, timeout){
|
||||
console.log("Data from SaraR4");
|
||||
console.log("Port: " + port );
|
||||
console.log("Command: " + command );
|
||||
console.log("Timeout: " + timeout );
|
||||
|
||||
const safeCommand = command.replace(/[?+=]/g, "_");
|
||||
console.log(safeCommand);
|
||||
|
||||
$("#loading_"+port+"_"+safeCommand).show();
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sara&port='+port+'&command='+encodeURIComponent(command)+'&timeout='+timeout,
|
||||
dataType:'text',
|
||||
//dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
//log response
|
||||
console.log(response);
|
||||
//hide spinning wheel
|
||||
$("#loading_"+port+"_"+safeCommand).hide();
|
||||
|
||||
// si on fait le scan de network on veut une liste des réseaux
|
||||
if (command == "AT+COPS=?") {
|
||||
// Extract data within parentheses
|
||||
const matches = response.match(/\(.*?\)/g); // Matches all `(...)` sections
|
||||
const container = document.getElementById('table-network'); // Bootstrap container
|
||||
// Check if matches exist
|
||||
if (matches) {
|
||||
const table = document.createElement('table');
|
||||
table.className = 'table table-striped'; // Add Bootstrap table styling
|
||||
const thead = document.createElement('thead');
|
||||
const tbody = document.createElement('tbody');
|
||||
|
||||
// Table header (you can customize this based on your data)
|
||||
const headerRow = document.createElement('tr');
|
||||
const header1 = document.createElement('th');
|
||||
header1.textContent = 'Status';
|
||||
const header2 = document.createElement('th');
|
||||
header2.textContent = 'Long oper';
|
||||
const header3 = document.createElement('th');
|
||||
header3.textContent = 'Short opeer';
|
||||
const header4 = document.createElement('th');
|
||||
header4.textContent = 'Numeric oper';
|
||||
const header5 = document.createElement('th');
|
||||
header5.textContent = 'AcT';
|
||||
headerRow.appendChild(header1);
|
||||
headerRow.appendChild(header2);
|
||||
headerRow.appendChild(header3);
|
||||
headerRow.appendChild(header4);
|
||||
headerRow.appendChild(header5);
|
||||
thead.appendChild(headerRow);
|
||||
table.appendChild(thead);
|
||||
|
||||
// Loop through each match and create a row in the table
|
||||
matches.forEach((item) => {
|
||||
// Skip empty sections
|
||||
if (item === "()") return;
|
||||
|
||||
const row = document.createElement('tr');
|
||||
const values = item.slice(1, -1).split(','); // Remove parentheses and split by commas
|
||||
|
||||
// Add table cells (td) for each value
|
||||
values.forEach((value) => {
|
||||
const cell = document.createElement('td');
|
||||
cell.textContent = value.trim(); // Remove extra spaces
|
||||
row.appendChild(cell);
|
||||
});
|
||||
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
// Add tbody to table and append the table to the container
|
||||
table.appendChild(tbody);
|
||||
container.appendChild(table);
|
||||
} else {
|
||||
console.error('No valid data found in response.');
|
||||
}
|
||||
} else{
|
||||
// si c'est une commande AT normale
|
||||
// Replace newline characters with <br> tags
|
||||
const formattedResponse = response.replace(/\n/g, "<br>");
|
||||
$("#response_"+port+"_"+safeCommand).html(formattedResponse);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function connectNetwork_saraR4(port, networkID, timeout){
|
||||
console.log(" Connect to network (port "+port+" and network id "+networkID+"):");
|
||||
$("#loading_"+port+"_AT_COPS_Connect").show();
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sara_connectNetwork&port='+port+'&networkID='+encodeURIComponent(networkID)+'&timeout='+timeout,
|
||||
dataType:'text',
|
||||
//dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
$("#loading_"+port+"_AT_COPS_Connect").hide();
|
||||
// Replace newline characters with <br> tags
|
||||
const formattedResponse = response.replace(/\n/g, "<br>");
|
||||
$("#response_"+port+"_AT_COPS_Connect").html(formattedResponse);
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function mqtt_getConfig_saraR4(port, timeout){
|
||||
console.log("GET MQTT config (port "+port+"):");
|
||||
$("#loading_mqtt_getConfig").show();
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sara_getMQTT_config&port='+port+'&timeout='+timeout,
|
||||
dataType:'text',
|
||||
//dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
$("#loading_mqtt_getConfig").hide();
|
||||
// Replace newline characters with <br> tags
|
||||
const formattedResponse = response.replace(/\n/g, "<br>");
|
||||
$("#response_mqtt_getConfig").html(formattedResponse);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function mqtt_login_logout(port, login_logout, timeout){
|
||||
console.log("GET MQTT login / logout (port "+port+"):");
|
||||
$("#loading_mqtt_login_logout").show();
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sara_getMQTT_login_logout&port='+port+'&login_logout='+login_logout+'&timeout='+timeout,
|
||||
dataType:'text',
|
||||
//dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
$("#loading_mqtt_login_logout").hide();
|
||||
const formattedResponse = response.replace(/\n/g, "<br>");
|
||||
$("#response_mqtt_login_logout").html(formattedResponse);
|
||||
|
||||
const regex = /^\+UMQTTC:\s*(\d+),(\d+)/m; // Match "+UMQTTC:", followed by two numbers separated by a comma
|
||||
const match = response.match(regex);
|
||||
|
||||
if (match) {
|
||||
const firstNumber = match[1]; // The first number after ":"
|
||||
const secondNumber = match[2]; // The second number after the ","
|
||||
if (firstNumber == 0) {
|
||||
console.log("MQTT LOGOUT:");
|
||||
$("#response_mqtt_login_logout").append("<p>logout</p>");
|
||||
}
|
||||
if (firstNumber == 1) {
|
||||
console.log("MQTT LOGIN:");
|
||||
$("#response_mqtt_login_logout").append("<p>login</p>");
|
||||
}
|
||||
if (secondNumber == 0) {
|
||||
console.log("ERROR");
|
||||
$("#response_mqtt_login_logout").append("<p>error</p>");
|
||||
}
|
||||
if (secondNumber == 1) {
|
||||
console.log("SUCCESS");
|
||||
$("#response_mqtt_login_logout").append("<p>success</p>");
|
||||
}
|
||||
|
||||
} else {
|
||||
console.log("No matching line found");
|
||||
}
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function mqtt_publish(port, message, timeout){
|
||||
console.log(" MQTT publish (port "+port+"):");
|
||||
$("#loading_mqtt_publish").show();
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sara_MQTT_publish&port='+port+'&timeout='+timeout+'&message='+message,
|
||||
dataType: 'text',
|
||||
//dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
$("#loading_mqtt_publish").hide();
|
||||
// Replace newline characters with <br> tags
|
||||
const formattedResponse = response.replace(/\n/g, "<br>");
|
||||
$("#response_mqtt_publish").html(formattedResponse);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setURL_saraR4(port, url){
|
||||
console.log("Set URL for HTTP (port "+port+" and URL "+url+"):");
|
||||
$("#loading_"+port+"_setURL").show();
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sara_setURL&port='+port+'&url='+encodeURIComponent(url),
|
||||
dataType: 'text',
|
||||
//dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
$("#loading_"+port+"_setURL").hide();
|
||||
// Replace newline characters with <br> tags
|
||||
const formattedResponse = response.replace(/\n/g, "<br>");
|
||||
$("#response_"+port+"_setURL").html(formattedResponse);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function writeMessage_saraR4(port, message, type){
|
||||
console.log(type +" message to SARA R4 memory (port "+port+" and message "+message+"):");
|
||||
$("#loading_"+port+"_message_write").show();
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sara_writeMessage&port='+port+'&message='+encodeURIComponent(message)+'&type2='+type,
|
||||
dataType: 'text',
|
||||
//dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
$("#loading_"+port+"_message_write").hide();
|
||||
// Replace newline characters with <br> tags
|
||||
const formattedResponse = response.replace(/\n/g, "<br>");
|
||||
$("#response_"+port+"_message_write").html(formattedResponse);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function sendMessage_saraR4(port, endpoint){
|
||||
|
||||
console.log("Send message from SaraR4 (port "+port+" and endpoint "+endpoint+"):");
|
||||
|
||||
$("#loading_"+port+"_message_send").show();
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sara_sendMessage&port='+port+'&endpoint='+encodeURIComponent(endpoint),
|
||||
dataType: 'text',
|
||||
//dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
$("#loading_"+port+"_message_send").hide();
|
||||
// Replace newline characters with <br> tags
|
||||
const formattedResponse = response.replace(/\n/g, "<br>");
|
||||
$("#response_"+port+"_message_send").html(formattedResponse);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function connectAPN_saraR4(port, APN_address, timeout){
|
||||
|
||||
console.log(" Set APN (port "+port+" and adress "+APN_address+"):");
|
||||
|
||||
$("#loading_"+port+"_APN").show();
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=sara_APN&port='+port+'&APN_address='+encodeURIComponent(APN_address)+'&timeout='+timeout,
|
||||
//dataType: 'json', // Specify that you expect a JSON response
|
||||
dataType: 'text',
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
$("#loading_"+port+"_APN").hide();
|
||||
// Replace newline characters with <br> tags
|
||||
const formattedResponse = response.replace(/\n/g, "<br>");
|
||||
$("#response_"+port+"_APN").html(formattedResponse);
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getModem_busy_status() {
|
||||
//console.log("Getting modem busy status");
|
||||
|
||||
const SARA_busy_message = document.getElementById("modem_status_message");
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=getModem_busy',
|
||||
dataType: 'json', // Expecting JSON response
|
||||
method: 'GET',
|
||||
success: function(response) {
|
||||
//console.log(response);
|
||||
|
||||
if (response.running) {
|
||||
// Script is running → Red button, "Modem is busy"
|
||||
|
||||
SARA_busy_message.innerHTML= ` <div class="alert alert-warning" role="alert">
|
||||
Le modem 4G est en cours d'utilisation! L'utilisation des boutons ci-dessous peut entrainer des erreurs. Veuillez mettre le modem en mode configuration.
|
||||
</div>`
|
||||
} else {
|
||||
// Script is NOT running → Green button, "Modem is available"
|
||||
|
||||
SARA_busy_message.innerHTML= ` <div class="alert alert-primary" role="alert">
|
||||
Veuillez vous assurer de mettre le modem en mode configuration avant de cliquer sur les boutons ci-dessous. <br>
|
||||
Une fois terminé veillez à bien désactiver le mode configuration.
|
||||
</div>`
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
SARA_busy_status.textContent = "Error checking status";
|
||||
SARA_busy_status.className = "btn text-bg-warning"; // Yellow button for errors
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function update_modem_configMode(param, checked){
|
||||
console.log("updating modem config mode to :" + checked);
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=update_config¶m='+param+'&value='+checked,
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
cache: false, // Prevent AJAX from caching
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.onload = function() {
|
||||
getModem_busy_status();
|
||||
setInterval(getModem_busy_status, 1000);
|
||||
|
||||
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json'
|
||||
.then(response => response.json()) // Parse response as JSON
|
||||
.then(data => {
|
||||
//get device ID
|
||||
const deviceID = data.deviceID.trim().toUpperCase();
|
||||
//document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
|
||||
|
||||
//get device Name
|
||||
const deviceName = data.deviceName;
|
||||
|
||||
const elements = document.querySelectorAll('.sideBar_sensorName');
|
||||
elements.forEach((element) => {
|
||||
element.innerText = deviceName;
|
||||
});
|
||||
|
||||
|
||||
//get SARA_R4 connection status
|
||||
const SARA_statusElement = document.getElementById("modem-status");
|
||||
console.log("SARA R4 is: " + data.SARA_R4_network_status);
|
||||
|
||||
if (data.SARA_R4_network_status === "connected") {
|
||||
SARA_statusElement.textContent = "Connected";
|
||||
SARA_statusElement.className = "badge text-bg-success";
|
||||
} else if (data.SARA_R4_network_status === "disconnected") {
|
||||
SARA_statusElement.textContent = "Disconnected";
|
||||
SARA_statusElement.className = "badge text-bg-danger";
|
||||
} else {
|
||||
SARA_statusElement.textContent = "Unknown";
|
||||
SARA_statusElement.className = "badge text-bg-secondary";
|
||||
}
|
||||
|
||||
//get local RTC
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=RTC_time',
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log("Local RTC: " + response);
|
||||
const RTC_Element = document.getElementById("RTC_time");
|
||||
RTC_Element.textContent = response;
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
.catch(error => console.error('Error loading config.json:', error));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
404
html/sensors.html
Normal file
404
html/sensors.html
Normal file
@@ -0,0 +1,404 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NebuleAir</title>
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#sidebar a.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#sidebar a.nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#sidebar a.nav-link svg {
|
||||
margin-right: 8px; /* Add spacing between icons and text */
|
||||
}
|
||||
#sidebar {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.offcanvas-backdrop {
|
||||
z-index: 1040;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Topbar -->
|
||||
<span id="topbar"></span>
|
||||
|
||||
<!-- Sidebar Offcanvas for Mobile -->
|
||||
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="sidebar_mobile">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<div class="row">
|
||||
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
|
||||
</aside>
|
||||
<!-- Main content -->
|
||||
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
|
||||
<h1 class="mt-4">Les sondes de mesure</h1>
|
||||
<p>Votre capteur NebuleAir est équipé de une ou plusieurs sondes qui permettent de mesurer certaines variables environnementales. La mesure
|
||||
est automatique mais vous pouvez ici vous assurer de leur bon fonctionnement.
|
||||
</p>
|
||||
<div class="row mb-3" id="card-container"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JAVASCRIPT -->
|
||||
|
||||
<!-- Link Ajax locally -->
|
||||
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
||||
<!-- Link Bootstrap JS and Popper.js locally -->
|
||||
<script src="assets/js/bootstrap.bundle.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const elementsToLoad = [
|
||||
{ id: 'topbar', file: 'topbar.html' },
|
||||
{ id: 'sidebar', file: 'sidebar.html' },
|
||||
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
||||
];
|
||||
|
||||
elementsToLoad.forEach(({ id, file }) => {
|
||||
fetch(file)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.innerHTML = data;
|
||||
}
|
||||
})
|
||||
.catch(error => console.error(`Error loading ${file}:`, error));
|
||||
});
|
||||
});
|
||||
|
||||
function getNPM_values(port){
|
||||
console.log("Data from NPM (port "+port+"):");
|
||||
$("#loading_"+port).show();
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=npm&port='+port,
|
||||
dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
const tableBody = document.getElementById("data-table-body_"+port);
|
||||
tableBody.innerHTML = "";
|
||||
|
||||
$("#loading_"+port).hide();
|
||||
// Create an array of the desired keys
|
||||
const keysToShow = ["PM1", "PM25", "PM10"];
|
||||
// Error messages mapping
|
||||
const errorMessages = {
|
||||
"notReady": "Sensor is not ready",
|
||||
"fanError": "Fan malfunction detected",
|
||||
"laserError": "Laser malfunction detected",
|
||||
"heatError": "Heating system error",
|
||||
"t_rhError": "Temperature/Humidity sensor error",
|
||||
"memoryError": "Memory failure detected",
|
||||
"degradedState": "Sensor in degraded state"
|
||||
};
|
||||
// Add only the specified elements to the table
|
||||
keysToShow.forEach(key => {
|
||||
if (response[key] !== undefined) { // Check if the key exists in the response
|
||||
const value = response[key];
|
||||
$("#data-table-body_"+port).append(`
|
||||
<tr>
|
||||
<td>${key}</td>
|
||||
<td>${value} µg/m³</td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
// Check for errors and add them to the table
|
||||
Object.keys(errorMessages).forEach(errorKey => {
|
||||
if (response[errorKey] === 1) {
|
||||
$("#data-table-body_" + port).append(`
|
||||
<tr class="error-row">
|
||||
<td><b>${errorKey}</b></td>
|
||||
<td style="color: red;">⚠ ${errorMessages[errorKey]}</td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getENVEA_values(port, name){
|
||||
console.log("Data from Envea "+ name+" (port "+port+"):");
|
||||
$("#loading_envea"+name).show();
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=envea&port='+port+'&name='+name,
|
||||
dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
const tableBody = document.getElementById("data-table-body_envea"+name);
|
||||
tableBody.innerHTML = "";
|
||||
|
||||
$("#loading_envea"+name).hide();
|
||||
// Create an array of the desired keys
|
||||
// Create an array of the desired keys
|
||||
const keysToShow = [name];
|
||||
// Add only the specified elements to the table
|
||||
keysToShow.forEach(key => {
|
||||
if (response !== undefined) { // Check if the key exists in the response
|
||||
const value = response;
|
||||
$("#data-table-body_envea"+name).append(`
|
||||
<tr>
|
||||
<td>${key}</td>
|
||||
<td>${value} ppb</td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getNoise_values(){
|
||||
console.log("Data from I2C Noise Sensor:");
|
||||
$("#loading_noise").show();
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=noise',
|
||||
dataType: 'text',
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
const tableBody = document.getElementById("data-table-body_noise");
|
||||
tableBody.innerHTML = "";
|
||||
$("#loading_noise").hide();
|
||||
|
||||
// Create an array of the desired keys
|
||||
const keysToShow = ["Noise"];
|
||||
// Add only the specified elements to the table
|
||||
keysToShow.forEach(key => {
|
||||
if (response !== undefined) { // Check if the key exists in the response
|
||||
const value = response;
|
||||
$("#data-table-body_noise").append(`
|
||||
<tr>
|
||||
<td>${key}</td>
|
||||
<td>${value} DB</td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getBME280_values(){
|
||||
console.log("Data from I2C BME280:");
|
||||
$("#loading_BME280").show();
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=BME280',
|
||||
dataType: 'text',
|
||||
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
|
||||
const tableBody = document.getElementById("data-table-body_BME280");
|
||||
tableBody.innerHTML = "";
|
||||
$("#loading_BME280").hide();
|
||||
|
||||
// Parse the JSON response
|
||||
const data = JSON.parse(response);
|
||||
const keysToShow = ["temp", "hum", "press"];
|
||||
|
||||
|
||||
// Add only the specified elements to the table
|
||||
keysToShow.forEach(key => {
|
||||
if (response !== undefined) { // Check if the key exists in the response
|
||||
const value = data[key];
|
||||
const unit = key === "temp" ? "°C"
|
||||
: key === "hum" ? "%"
|
||||
: key === "press" ? "hPa"
|
||||
: ""; // Add appropriate units
|
||||
|
||||
$("#data-table-body_BME280").append(`
|
||||
<tr>
|
||||
<td>${key.charAt(0).toUpperCase() + key.slice(1)}</td>
|
||||
<td>${value} ${unit}</td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
window.onload = function() {
|
||||
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json'
|
||||
.then(response => response.json()) // Parse response as JSON
|
||||
.then(data => {
|
||||
//get device ID
|
||||
const deviceID = data.deviceID.trim().toUpperCase();
|
||||
//document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
|
||||
//get device Name
|
||||
const deviceName = data.deviceName;
|
||||
|
||||
const elements = document.querySelectorAll('.sideBar_sensorName');
|
||||
elements.forEach((element) => {
|
||||
element.innerText = deviceName;
|
||||
});
|
||||
|
||||
|
||||
|
||||
//get local RTC
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=RTC_time',
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log("Local RTC: " + response);
|
||||
const RTC_Element = document.getElementById("RTC_time");
|
||||
RTC_Element.textContent = response;
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
const container = document.getElementById('card-container'); // Conteneur des cartes
|
||||
|
||||
//creates NPM cards
|
||||
const NPM_ports = data.NextPM_ports; // Récupère les ports
|
||||
NPM_ports.forEach((port, index) => {
|
||||
const cardHTML = `
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Port UART ${port.replace('ttyAMA', '')}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">NextPM ${String.fromCharCode(65 + index)}</h5>
|
||||
<p class="card-text">Capteur particules fines.</p>
|
||||
<button class="btn btn-primary" onclick="getNPM_values('${port}')">Get Data</button>
|
||||
<div id="loading_${port}" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<table class="table table-striped-columns">
|
||||
<tbody id="data-table-body_${port}"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
container.innerHTML += cardHTML; // Ajouter la carte au conteneur
|
||||
});
|
||||
|
||||
//creates ENVEA cards
|
||||
const ENVEA_sensors = data.envea_sondes.filter(sonde => sonde.connected); // Filter only connected sondes
|
||||
|
||||
ENVEA_sensors.forEach((sensor, index) => {
|
||||
const port = sensor.port; // Port from the sensor object
|
||||
const name = sensor.name; // Port from the sensor object
|
||||
const coefficient = sensor.coefficient;
|
||||
const cardHTML = `
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Port UART ${port.replace('ttyAMA', '')}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Sonde Envea ${name}</h5>
|
||||
<p class="card-text">Capteur gas.</p>
|
||||
<button class="btn btn-primary" onclick="getENVEA_values('${port}','${name}','${coefficient}')">Get Data</button>
|
||||
<div id="loading_envea${name}" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<table class="table table-striped-columns">
|
||||
<tbody id="data-table-body_envea${name}"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
container.innerHTML += cardHTML; // Ajouter la carte au conteneur
|
||||
});
|
||||
|
||||
//creates i2c BME280 card
|
||||
if (data.i2c_BME) {
|
||||
const i2C_BME_HTML = `
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Port I2C
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">BME280 Temp/Hum sensor</h5>
|
||||
<p class="card-text">Capteur température et humidité sur le port I2C.</p>
|
||||
<button class="btn btn-primary mb-1" onclick="getBME280_values()">Get Data</button>
|
||||
<br>
|
||||
<div id="loading_BME280" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<table class="table table-striped-columns">
|
||||
<tbody id="data-table-body_BME280"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
container.innerHTML += i2C_BME_HTML; // Add the I2C card if condition is met
|
||||
}
|
||||
|
||||
//creates i2c sound card
|
||||
if (data.i2C_sound) {
|
||||
const i2C_HTML = `
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Port I2C
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Decibel Meter</h5>
|
||||
<p class="card-text">Capteur bruit sur le port I2C.</p>
|
||||
<button class="btn btn-primary mb-1" onclick="getNoise_values()">Get Data</button>
|
||||
<br>
|
||||
<button class="btn btn-success" onclick="startNoise()">Start recording</button>
|
||||
<button class="btn btn-danger" onclick="stopNoise()">Stop recording</button>
|
||||
<div id="loading_noise" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
|
||||
<table class="table table-striped-columns">
|
||||
<tbody id="data-table-body_noise"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
container.innerHTML += i2C_HTML; // Add the I2C card if condition is met
|
||||
}
|
||||
|
||||
})
|
||||
.catch(error => console.error('Error loading config.json:', error));
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
58
html/sidebar.html
Normal file
58
html/sidebar.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!-- Sidebar -->
|
||||
<nav class="nav flex-column">
|
||||
<a class="nav-link text-white mt-4" href="index.html">
|
||||
<svg class="bi me-2" width="16" height="16" fill="currentColor" aria-hidden="true">
|
||||
<use xlink:href="assets/icons/bootstrap-icons.svg#house"></use>
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-link text-white" href="sensors.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-thermometer-sun" viewBox="0 0 16 16">
|
||||
<path d="M5 12.5a1.5 1.5 0 1 1-2-1.415V2.5a.5.5 0 0 1 1 0v8.585A1.5 1.5 0 0 1 5 12.5"/>
|
||||
<path d="M1 2.5a2.5 2.5 0 0 1 5 0v7.55a3.5 3.5 0 1 1-5 0zM3.5 1A1.5 1.5 0 0 0 2 2.5v7.987l-.167.15a2.5 2.5 0 1 0 3.333 0L5 10.486V2.5A1.5 1.5 0 0 0 3.5 1m5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5m4.243 1.757a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 1 1-.708-.708l.708-.707a.5.5 0 0 1 .707 0M8 5.5a.5.5 0 0 1 .5-.5 3 3 0 1 1 0 6 .5.5 0 0 1 0-1 2 2 0 0 0 0-4 .5.5 0 0 1-.5-.5M12.5 8a.5.5 0 0 1 .5-.5h1a.5.5 0 1 1 0 1h-1a.5.5 0 0 1-.5-.5m-1.172 2.828a.5.5 0 0 1 .708 0l.707.708a.5.5 0 0 1-.707.707l-.708-.707a.5.5 0 0 1 0-.708M8.5 12a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5"/>
|
||||
</svg>
|
||||
Capteurs
|
||||
</a>
|
||||
<a class="nav-link text-white" href="database.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-database" viewBox="0 0 16 16">
|
||||
<path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313M13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A5 5 0 0 0 13 5.698M14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A5 5 0 0 0 13 8.698m0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525"/>
|
||||
</svg>
|
||||
|
||||
DataBase
|
||||
</a>
|
||||
<a class="nav-link text-white" href="saraR4.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reception-4" viewBox="0 0 16 16">
|
||||
<path d="M0 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
Modem 4G
|
||||
</a>
|
||||
<a class="nav-link text-white" href="wifi.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wifi" viewBox="0 0 16 16">
|
||||
<path d="M15.384 6.115a.485.485 0 0 0-.047-.736A12.44 12.44 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.52.52 0 0 0 .668.05A11.45 11.45 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049"/>
|
||||
<path d="M13.229 8.271a.482.482 0 0 0-.063-.745A9.46 9.46 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.576 1.336c.206.132.48.108.653-.065m-2.183 2.183c.226-.226.185-.605-.1-.75A6.5 6.5 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.5 5.5 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.61-.091zM9.06 12.44c.196-.196.198-.52-.04-.66A2 2 0 0 0 8 11.5a2 2 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.707-.707z"/>
|
||||
</svg>
|
||||
WIFI
|
||||
</a>
|
||||
<a class="nav-link text-white" href="logs.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708m-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708"/>
|
||||
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2"/>
|
||||
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z"/>
|
||||
</svg>
|
||||
Logs
|
||||
</a>
|
||||
<a class="nav-link text-white" href="admin.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z"/>
|
||||
</svg>
|
||||
Admin
|
||||
</a>
|
||||
|
||||
<!-- New content at the bottom -->
|
||||
<div class="sidebar-footer text-center text-white">
|
||||
<hr>
|
||||
<span class="sideBar_sensorName"> NebuleAir</span>
|
||||
</div>
|
||||
|
||||
|
||||
</nav>
|
||||
18
html/topbar.html
Normal file
18
html/topbar.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!-- Topbar -->
|
||||
<nav class="navbar navbar-dark fixed-top" style="background-color: #8d8d8f;" id="topbar">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="assets/img/LogoNebuleAir.png" alt="Logo" height="30" class="d-inline-block align-text-top">
|
||||
</a>
|
||||
<div class="d-flex">
|
||||
<button class="btn btn-outline-light d-md-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas" aria-controls="sidebarOffcanvas" aria-label="Toggle Sidebar">☰</button>
|
||||
|
||||
<!-- Centered text -->
|
||||
<!--
|
||||
<span id="pageTitle_plus_ID" class="position-absolute top-50 start-50 translate-middle">Texte au milieu</span>
|
||||
-->
|
||||
|
||||
<button type="button" class="btn btn-outline-light" id="RTC_time">loading...</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
344
html/wifi.html
Normal file
344
html/wifi.html
Normal file
@@ -0,0 +1,344 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NebuleAir</title>
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#sidebar a.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#sidebar a.nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#sidebar a.nav-link svg {
|
||||
margin-right: 8px; /* Add spacing between icons and text */
|
||||
}
|
||||
#sidebar {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.offcanvas-backdrop {
|
||||
z-index: 1040;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Topbar -->
|
||||
<span id="topbar"></span>
|
||||
|
||||
<!-- Sidebar Offcanvas for Mobile -->
|
||||
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body" id="sidebar_mobile">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<div class="row">
|
||||
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
|
||||
</aside>
|
||||
<!-- Main content -->
|
||||
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
|
||||
<h1 class="mt-4">Connection WIFI</h1>
|
||||
<p>La connexion WIFI n'est pas obligatoire mais elle vous permet d'effectuer des mises à jour et d'activer le contrôle à distance.</p>
|
||||
|
||||
<h3>Status
|
||||
<span id="wifi-status" class="badge">Loading...</span>
|
||||
</h3>
|
||||
|
||||
<div class="row mb-3">
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="card text-dark bg-light">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">WIFI / Ethernet</h5>
|
||||
<p class="card-text">General information.</p>
|
||||
<button class="btn btn-primary" onclick="get_internet()">Get Data</button>
|
||||
<table class="table table-striped-columns">
|
||||
<tbody id="data-table-body_internet_general"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="card text-dark bg-light">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Wifi Scan</h5>
|
||||
<p class="card-text">Scan des réseaux WIFI disponibles.</p>
|
||||
<button class="btn btn-primary" onclick="wifi_scan()">Scan</button>
|
||||
<table class="table">
|
||||
<tbody id="data-table-body_wifi_scan"></tbody>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal WIFI PASSWORD -->
|
||||
<!-- filled with JS -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="myModalLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="myModalBody">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer" id="myModalFooter">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JAVASCRIPT -->
|
||||
|
||||
<!-- Link Ajax locally -->
|
||||
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
||||
<!-- Link Bootstrap JS and Popper.js locally -->
|
||||
<script src="assets/js/bootstrap.bundle.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
console.log("DOMContentLoaded");
|
||||
|
||||
const elementsToLoad = [
|
||||
{ id: 'topbar', file: 'topbar.html' },
|
||||
{ id: 'sidebar', file: 'sidebar.html' },
|
||||
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
||||
];
|
||||
|
||||
elementsToLoad.forEach(({ id, file }) => {
|
||||
fetch(file)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.innerHTML = data;
|
||||
}
|
||||
})
|
||||
.catch(error => console.error(`Error loading ${file}:`, error));
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
function get_internet(){
|
||||
console.log("Getting internet general infos");
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=internet',
|
||||
dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
let tableBody = document.getElementById('data-table-body_internet_general');
|
||||
tableBody.innerHTML = ''; // Clear existing table content
|
||||
|
||||
// Iterate through the data and create rows
|
||||
for (let key in response) {
|
||||
let row = `
|
||||
<tr>
|
||||
<td>${key}</td>
|
||||
<td>${response[key].connection}</td>
|
||||
<td>${response[key].IP ? response[key].IP : "No IP"}</td>
|
||||
</tr>
|
||||
`;
|
||||
tableBody.innerHTML += row; // Append row to table body
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function wifi_connect(SSID, PASS){
|
||||
console.log("Connecting to wifi");
|
||||
console.log(SSID);
|
||||
console.log(PASS);
|
||||
if (typeof PASS === 'undefined') {
|
||||
console.log("Need to add password");
|
||||
//open bootstrap modal to ask for password
|
||||
var myModal = new bootstrap.Modal(document.getElementById('myModal'));
|
||||
//modifiy modal title
|
||||
document.getElementById('myModalLabel').innerHTML = "Enter password for "+SSID;
|
||||
//add input field to modal body
|
||||
document.getElementById('myModalBody').innerHTML = "<input type='text' id='wifi_pass' class='form-control' placeholder='Password'>";
|
||||
//add button to modal footer
|
||||
document.getElementById('myModalFooter').innerHTML = "<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button><button type='button' class='btn btn-primary' onclick='wifi_connect(\""+SSID+"\", document.getElementById(\"wifi_pass\").value)'>Se connecter</button>";
|
||||
myModal.show();
|
||||
} else {
|
||||
console.log("Will try to connect to "+SSID+" with password "+PASS);
|
||||
console.log("Start PHP script:");
|
||||
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=wifi_connect&SSID='+SSID+'&pass='+PASS,
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function wifi_scan(){
|
||||
console.log("Scanning Wifi");
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=wifi_scan',
|
||||
dataType: 'json', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
const tableBody = document.getElementById("data-table-body_wifi_scan");
|
||||
|
||||
// Clear the existing table body
|
||||
tableBody.innerHTML = "";
|
||||
|
||||
// Loop through the wifiNetworks array and create rows
|
||||
response.forEach(network => {
|
||||
const row = document.createElement("tr");
|
||||
|
||||
// Create and append cells for SSID, BARS, and SIGNAL
|
||||
const ssidCell = document.createElement("td");
|
||||
// Truncate SSID to 25 characters
|
||||
const truncatedSSID = network.SSID.length > 20 ? network.SSID.substring(0, 20) + '...' : network.SSID;
|
||||
ssidCell.textContent = truncatedSSID;
|
||||
row.appendChild(ssidCell);
|
||||
|
||||
/*
|
||||
const signalCell = document.createElement("td");
|
||||
signalCell.textContent = network.SIGNAL;
|
||||
row.appendChild(signalCell);
|
||||
*/
|
||||
|
||||
// Create a button
|
||||
const buttonCell = document.createElement("td");
|
||||
const button = document.createElement("button");
|
||||
button.textContent = "Connect"; // Button text
|
||||
button.classList.add("btn", "btn-primary"); // Bootstrap button classes
|
||||
|
||||
// Determine button color based on SIGNAL value
|
||||
const signalValue = parseInt(network.SIGNAL, 10); // Assuming SIGNAL is a numeric value
|
||||
// Calculate color based on the signal strength
|
||||
let buttonColor;
|
||||
if (signalValue >= 100) {
|
||||
buttonColor = "success"; // Green for strong signal
|
||||
} else if (signalValue >= 50) {
|
||||
buttonColor = "warning"; // Yellow for moderate signal
|
||||
} else {
|
||||
buttonColor = "danger"; // Red for weak signal
|
||||
}
|
||||
// Add Bootstrap button classes along with color
|
||||
button.classList.add("btn", `btn-${buttonColor}`);
|
||||
|
||||
|
||||
//Trigger function as soon as the button is clicked
|
||||
button.addEventListener("click", () => wifi_connect(network.SSID));
|
||||
|
||||
|
||||
// Append the button to the button cell
|
||||
buttonCell.appendChild(button);
|
||||
row.appendChild(buttonCell);
|
||||
|
||||
// Append the row to the table body
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function confirmSubmit() {
|
||||
// You can display a simple confirmation message or customize the behavior
|
||||
return confirm("Are you sure you want to connect to this Wi-Fi network?");
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
fetch('../config.json') // Replace 'deviceID.txt' with 'config.json'
|
||||
.then(response => response.json()) // Parse response as JSON
|
||||
.then(data => {
|
||||
console.log("Getting config file (onload)");
|
||||
//get device ID
|
||||
const deviceID = data.deviceID.trim().toUpperCase();
|
||||
//document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
|
||||
|
||||
//get device Name
|
||||
const deviceName = data.deviceName;
|
||||
|
||||
const elements = document.querySelectorAll('.sideBar_sensorName');
|
||||
elements.forEach((element) => {
|
||||
element.innerText = deviceName;
|
||||
});
|
||||
|
||||
|
||||
//get wifi connection status
|
||||
const WIFI_statusElement = document.getElementById("wifi-status");
|
||||
console.log("WIFI is: " + data.WIFI_status);
|
||||
|
||||
if (data.WIFI_status === "connected") {
|
||||
WIFI_statusElement.textContent = "Connected";
|
||||
WIFI_statusElement.className = "badge text-bg-success";
|
||||
} else if (data.WIFI_status === "hotspot") {
|
||||
WIFI_statusElement.textContent = "Hotspot";
|
||||
WIFI_statusElement.className = "badge text-bg-warning";
|
||||
} else {
|
||||
WIFI_statusElement.textContent = "Unknown";
|
||||
WIFI_statusElement.className = "badge text-bg-secondary";
|
||||
}
|
||||
|
||||
//get local RTC
|
||||
$.ajax({
|
||||
url: 'launcher.php?type=RTC_time',
|
||||
dataType: 'text', // Specify that you expect a JSON response
|
||||
method: 'GET', // Use GET or POST depending on your needs
|
||||
success: function(response) {
|
||||
console.log("Local RTC: " + response);
|
||||
const RTC_Element = document.getElementById("RTC_time");
|
||||
RTC_Element.textContent = response;
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('AJAX request failed:', status, error);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
.catch(error => console.error('Error loading config.json:', error));
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user