kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-02-26 22:13:53 +01:00
Code Issues Activity

toasts, freq bugfixes, ui changes

Browse Source
This commit is contained in:
NoobishSVK
2024-09-11 23:48:46 +02:00
parent 3ea9b8cb82
commit 5261f95dfe
13 changed files with 134 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/css/breadcrumbs.css
View File

@@ -63,7 +63,6 @@ label {
font-weight: bold;
text-transform: uppercase;
display: block;
text-align: left;
color: var(--color-4);
}

7
web/css/dropdown.css
View File

@@ -4,6 +4,7 @@
background: var(--color-4);
position: relative;
margin-right: 20px;
border-radius: 15px;
/*border-bottom: 4px solid var(--color-2);*/
}
@media (max-width: 400px) {
@@ -47,9 +48,13 @@
background-color: var(--color-main-bright);
}
.dropdown.opened > input {
.dropdown.opened.dropdown-up > input {
border-radius: 0 0 15px 15px;
}
.dropdown.opened > input {
border-radius: 15px 15px 0 0;
}
.dropdown input:focus {
outline: none;
}

1
web/css/entry.css
View File

@@ -3,6 +3,7 @@
@import url("main.css"); /* Root stuff that affects the entire webpage (body, wrapper etc.) */
@import url("breadcrumbs.css"); /* Stuff that applies to random elements only once/twice */
@import url("buttons.css"); /* Buttons, inputs, select boxes, checkboxes... */
@import url("toast.css"); /* Toast notifications */
@import url("dropdown.css"); /* Custom dropdown menus */
@import url("panels.css"); /* Different panels and their sizes */
@import url("modal.css"); /* Modal window */

22
web/index.ejs
View File

@@ -124,7 +124,7 @@
</div>
<% if (antennas.enabled == true) { %>
<div class="panel-50 no-bg h-100 br-0 m-0 dropdown" id="data-ant" style="margin-right: 25px;">
<div class="panel-50 no-bg h-100 br-0 m-0 dropdown dropdown-up" id="data-ant" style="margin-right: 25px;">
<input type="text" placeholder="Ant A" readonly tabindex="0">
<ul class="options open-top" tabindex="-1">
<% if(antennas.ant1.enabled == true) { %><li data-value="0" class="option" tabindex="0"><%= antennas.ant1.name %></li><% } %>
@@ -164,7 +164,7 @@
</span>
<% } %>
<% if (device == 'tef' && bwSwitch == true) { %>
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 25px;">
<input type="text" placeholder="Auto BW" readonly tabindex="0">
<ul class="options open-top" tabindex="-1">
<li data-value="0" class="option" tabindex="0">Auto</li>
@@ -188,7 +188,7 @@
<% } %>
<% if (device == 'xdr' && bwSwitch == true) { %>
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 25px;">
<input type="text" placeholder="Auto BW" readonly tabindex="0">
<ul class="options open-top" tabindex="-1">
<li data-value="0" data-value2="-1" class="option" tabindex="0">Auto</li>
@@ -213,7 +213,7 @@
<% } %>
<% if (device == 'sdr' && bwSwitch == true) { %>
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 25px;">
<input type="text" placeholder="Auto BW" readonly tabindex="0">
<ul class="options open-top" tabindex="-1">
<li data-value="0" class="option" tabindex="0">Auto</li>
@@ -233,6 +233,9 @@
</ul>
</div>
<% } %>
<!--<button class="tooltip bg-color-4" id="log-fmlist"
data-tooltip="<strong>LOG TO FMLIST</strong><br>Clicking this button logs the current station to FMLIST's visual logbook." aria-label="Chatbox"
style="width: 80px; height: 48px;margin-left: 15px;"><i class="fa-solid fa-flag fa-lg"></i></button>-->
</div>
</div>
</div>
@@ -321,7 +324,7 @@
<h1 class="top-25">Settings</h1>
<div class="form-group top-25">
<label for="themes"><i class="fa-solid fa-palette"></i> Theme:</label>
<label for="themes"><i class="fa-solid fa-palette"></i> Theme</label>
<div class="dropdown" id="theme-selector">
<input type="text" placeholder="Default" readonly tabindex="0">
<ul class="options" tabindex="-1">
@@ -340,7 +343,7 @@
<% if (device !== 'sdr') { %>
<div class="form-group top-25">
<label for="signal"><i class="fa-solid fa-signal"></i> Signal units:</label>
<label for="signal"><i class="fa-solid fa-signal"></i> Signal units</label>
<div class="dropdown" id="signal-selector">
<input type="text" placeholder="dBf" readonly tabindex="0">
<ul class="options" tabindex="-1">
@@ -362,7 +365,7 @@
</div>
<div class="form-group bottom-20 hide-desktop" style="float: none;">
<label for="users-online"><i class="fa-solid fa-user"></i> Users online:</label>
<label for="users-online"><i class="fa-solid fa-user"></i> Users online</label>
<span class="users-online" name="users-online">0</span>
</div>
@@ -391,8 +394,7 @@
</div>
<% } else { %>
<form action="./login" method="post" id="login-form" class="top-25">
<label for="password">Password:</label>
<input type="password" id="password" name="password" style="width: 145px;" required>
<input type="password" id="password" name="password" placeholder="Password" style="width: 145px;" required>
<button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
<i class="fa-solid fa-right-to-bracket"></i>
</button>
@@ -488,7 +490,7 @@
</div>
</div>
</div>
<div id="toast-container" style="position: fixed; top: 20px; right: 96px; z-index: 9999;"></div>
<script src="js/websocket.js"></script>
<script src="js/webserver.js"></script>
<% if (!noPlugins) { %>

2
web/js/dropdown.js
View File

@@ -24,7 +24,7 @@ $(document).ready(function() {
switch($currentDropdown.attr('id')) {
case 'data-ant':
socket.send("Z" + $(event.currentTarget).attr('data-value'));
tuneTo(getCurrentFreq()); // Reset RDS when change antenna input
resetRDS(getCurrentFreq()); // Reset RDS when change antenna input
break;
case 'data-bw':
legacyBwValue = $(event.currentTarget).attr('data-value2') || "";

43
web/js/main.js
View File

@@ -240,7 +240,7 @@ function sendPingRequest() {
socket = new WebSocket(socketAddress);
socket.onopen = () => {
console.log("Main/UI reconnected successfully.");
sendToast('info', 'Connected', 'Reconnected successfully!', false, false);
};
socket.onmessage = (event) => {
handleWebSocketMessage(event);
@@ -421,18 +421,31 @@ function updateCanvas(parsedData, signalChart) {
}, 1000 / 15);
}
let reconnectTimer = null;
let dataTimeout = null;
const TIMEOUT_DURATION = 5000; // 5 seconds timeout for lost connection
const resetDataTimeout = () => {
clearTimeout(dataTimeout);
dataTimeout = setTimeout(() => {
sendToast('warning', 'Connection lost', 'Attempting to reconnect...', false, false);
}, TIMEOUT_DURATION);
};
socket.onmessage = (event) => {
if (event.data == 'KICK') {
console.log('Kick initiated.')
if (event.data === 'KICK') {
console.log('Kick initiated.');
setTimeout(() => {
window.location.href = '/403';
window.location.href = '/403';
}, 500);
return;
}
parsedData = JSON.parse(event.data);
resetDataTimeout();
updatePanels(parsedData);
const sum = signalData.reduce((acc, strNum) => acc + parseFloat(strNum), 0);
const averageSignal = sum / signalData.length;
data.push(averageSignal);
@@ -582,6 +595,10 @@ function tuneTo(freq) {
socket.send("T" + ((freq).toFixed(1) * 1000));
}
function resetRDS(freq) {
socket.send("T" + ((freq).toFixed(3) * 1000));
}
async function copyPs() {
var frequency = $('#data-frequency').text();
var pi = $('#data-pi').text();
@@ -653,11 +670,13 @@ function copyToClipboard(textToCopy) {
}
function findOnMaps() {
var frequency = parseFloat($('#data-frequency').text()).toFixed(1);
var frequency = parseFloat($('#data-frequency').text());
var pi = $('#data-pi').text();
var latitude = localStorage.getItem('qthLongitude');
var longitude = localStorage.getItem('qthLatitude');
frequency > 74 ? frequency = frequency.toFixed(1) : null;
var url = `https://maps.fmdx.org/#qth=${longitude},${latitude}&freq=${frequency}&findPi=${pi}`;
window.open(url, "_blank");
}
@@ -991,3 +1010,17 @@ function fillPresets() {
});
}
}
//FMLIST logging
$('#log-fmlist').on('click', function() {
$.ajax({
url: './log_fmlist',
method: 'GET',
success: function(response) {
sendToast('success', 'Log successful', response, false, true);
},
error: function(xhr) {
sendToast('error', 'Log failed', xhr.statusText, false, true);
}
});
});

10
web/js/settings.js
View File

@@ -79,7 +79,9 @@ $(document).ready(() => {
data: $(this).serialize(),
success: function (data) {
// Update the content on the page with the message from the response
$('#login-message').text(data.message);
sendToast('success', 'Login success!', data.message, false, true);
//$('#login-message').text(data.message);
setTimeout(function () {
location.reload(true);
}, 1750);
@@ -88,7 +90,7 @@ $(document).ready(() => {
// Handle error response
if (xhr.status === 403) {
// Update the content on the page with the message from the error response
$('#login-message').text(xhr.responseJSON.message);
sendToast('error', 'Login failed!', xhr.responseJSON.message, false, true);
} else {
// Handle other types of errors if needed
console.error('Error:', status, error);
@@ -105,7 +107,7 @@ $(document).ready(() => {
type: 'GET', // Assuming the logout is a GET request, adjust accordingly
url: './logout',
success: function (data) {
$('#login-message').text(data.message);
sendToast('success', 'Logout success!', data.message, false, true);
setTimeout(function () {
location.reload(true);
}, 1000);
@@ -114,7 +116,7 @@ $(document).ready(() => {
// Handle error response
if (xhr.status === 403) {
// Update the content on the page with the message from the error response
$('#login-message').text(xhr.responseJSON.message);
sendToast('error', 'Logout failed!', xhr.responseJSON.message, false, true);
} else {
// Handle other types of errors if needed
console.error('Error:', status, error);

3
web/js/webserver.js
View File

@@ -2,4 +2,5 @@ $.getScript('./js/main.js');
$.getScript('./js/dropdown.js');
$.getScript('./js/modal.js');
$.getScript('./js/settings.js');
$.getScript('./js/chat.js');
$.getScript('./js/chat.js');
$.getScript('./js/toast.js');

1
web/setup.ejs
View File

@@ -12,6 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>
<div id="wrapper-outer" class="wrapper-outer-static">
<div id="wrapper" class="setup-wrapper">
<% if (isAdminAuthenticated) { %>

1
web/wizard.ejs
View File

@@ -12,6 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>
<div id="wrapper-outer">
<div id="wrapper" class="setup-wrapper">
<% if (isAdminAuthenticated) { %>