kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-07-29 16:29:19 +02:00
Code Issues Activity

fmlist integration, new admin panel, bugfixes

Browse Source
This commit is contained in:
NoobishSVK
2024-09-15 00:00:42 +02:00
parent acc0c4fb16
commit ab000412fa
22 changed files with 834 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/breadcrumbs.css
+14 -32
View File
@@ -191,40 +191,22 @@ label {
}
.checkbox label {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
}
.checkbox label:before {
content:'';
appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: 2px solid var(--color-4);
padding: 10px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}
.form-group input:checked + label:before {
background-color: var(--color-4);
}
.form-group input:checked + label:after {
content: '✓';
display: block;
position: absolute;
font-size: 18px;
top: -1px;
left: 5px;
width: 18px;
height: 18px;
user-select: none;
padding: 7px 20px;
border-radius: 15px;
text-align: center;
border: 2px solid var(--color-4);
box-sizing: border-box;
transition: 0.35s ease background-color, 0.35s ease color;
}
.checkbox label:hover {
background-color: var(--color-2);
}
.form-group input:checked + label {
background-color: var(--color-4);
color: var(--color-main);
}
web/css/buttons.css
+4
View File
@@ -18,6 +18,10 @@ button:hover {
opacity: 0.6;
}
.cursor-disabled {
cursor: not-allowed;
}
.btn-next {
width: 200px;
padding: 10px;
web/css/helpers.css
+4
View File
@@ -190,6 +190,10 @@
padding: 10px;
}
.p-20 {
padding: 20px;
}
.p-left-10 {
padding-left: 10px;
}
web/css/main.css
+13 -1
View File
@@ -73,7 +73,6 @@ body {
.wrapper-outer-static {
display: block !important;
padding-top: 10px;
padding-bottom: 10px;
}
#wrapper {
@@ -84,6 +83,8 @@ body {
margin: auto;
position: static;
transform: none;
width: calc(100% - 420px);
margin-left: 420px;
}
a {
@@ -141,4 +142,15 @@ hr {
margin: 50px auto;
width: 100%;
}
}
@media (max-width: 768px) {
#wrapper.setup-wrapper {
width: 100%;
margin-left: 0;
}
.setup-wrapper h2 {
display: initial;
}
}
web/css/panels.css
+13
View File
@@ -52,6 +52,19 @@
width: 98%;
}
.panel-100-real {
width: 100%;
}
.panel-full {
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: 100% !important;
transition: 0.35s ease;
box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
.panel-75 {
width: 90%;
web/css/setup.css
+85 -25
View File
@@ -10,14 +10,13 @@
}
.setup-wrapper h2 {
font-size: 32px;
font-size: 42px;
font-weight: 300;
padding: 10px;
text-transform: uppercase;
padding: 20px 15px;
text-align: left;
}
.setup-wrapper textarea {
#wrapper textarea {
width: 100%;
max-width: 768px;
background-color: var(--color-2);
@@ -26,34 +25,92 @@
padding-top: 10px;
}
.sidenav {
background-color: var(--color-main);
}
.sidenav li a:focus {
outline: none;
}
.sidenav-content {
flex: 1;
position: relative;
overflow-y: auto;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.sidenav h1 {
font-size: 42px;
text-transform: initial;
font-weight: 300;
text-align: center;
}
ul.nav {
list-style-type: none;
padding: 15px 0;
background: var(--color-2);
border-radius: 15px;
}
ul.nav li {
display: inline;
padding: 15px;
padding: 12px 20px;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease;
user-select: none;
}
ul.nav li:hover {
color: var(--color-main);
background-color: var(--color-4);
ul.nav li a {
color: var(--color-5) !important;
}
li.active {
ul.nav li:hover {
background-color: var(--color-3);
}
ul.nav li:hover a {
color: var(--color-main) !important;
}
ul.nav li.active a {
color: var(--color-main) !important;
font-weight: bold;
}
li.active {
background-color: var(--color-4);
}
.tab-content {
display: none;
}
#navigation {
position: fixed;
top: 0;
left: 0;
width: 420px; /* Width of the sidenav */
height: 100%;
z-index: 1000; /* Ensure it's above other content */
transition: margin-left 0.3s ease; /* Smooth transition */
}
.admin-wrapper {
transition: margin-left 0.3s ease, width 0.3s ease;
}
.admin-wrapper > .panel-full > .panel-full {
min-height: 100vh;
}
#map {
height:400px;
width:100%;
@@ -66,6 +123,12 @@ li.active {
.setup-wrapper h3 {
font-weight: 300;
margin: 8px;
font-size: 36px;
color: var(--color-5)
}
.setup-wrapper h4 {
color: var(--color-4);
}
@@ -87,18 +150,15 @@ li.active {
}
@media only screen and (max-width: 768px) {
ul.nav {
display: flex;
overflow-y: scroll;
background: transparent;
}
ul.nav li {
background-color: var(--color-4);
color: var(--color-main);
margin: 0px 10px;
padding: 15px 35px;
border-radius: 15px;
min-width: fit-content;
.setup-wrapper .panel-33, .setup-wrapper .panel-50 {
background: var(--color-1-transparent);
}
#navigation {
width: 100vw; /* You can make the sidenav full width on mobile if you want */
}
.admin-wrapper {
margin-left: 0;
width: 100%;
}
}
web/css/toast.css
+19 -2
View File
@@ -1,4 +1,11 @@
/* Basic Toast Styling */
#toast-container {
position: fixed;
top: 20px;
right: 96px;
z-index: 9999;
}
.toast {
padding: 15px;
margin-top: 10px;
@@ -8,7 +15,7 @@
position: relative;
transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
transform: translateY(-10px); /* Initial animation state */
backdrop-filter: blur(10px);
backdrop-filter: blur(50px);
}
.toast:hover {
@@ -87,4 +94,14 @@
font-size: 16px;
color: #fff;
cursor: pointer;
}
}
@media only screen and (max-width: 768px) {
#toast-container {
left: 0;
right: 0;
}
.toast {
margin: auto;
}
}
web/index.ejs
+13 -17
View File
@@ -157,17 +157,11 @@
<div class="panel-33 hide-phone no-bg">
<div class="flex-container">
<% if(device === 'other' || bwSwitch == false) { %>
<span class="panel-100 m-0 h-100" style="height: 48px;width: 100%;">
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" aria-label="Volume slider">
</span>
<% } else { %>
<span class="panel-100 m-0" style="margin-right: 15px !important;height: 48px;">
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" aria-label="Volume slider">
</span>
<% } %>
<span class="panel-100-real m-0" style="height: 48px;">
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" aria-label="Volume slider">
</span>
<% if (device == 'tef' && bwSwitch == true) { %>
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" 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: 15px !important;">
<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>
@@ -191,7 +185,7 @@
<% } %>
<% if (device == 'xdr' && bwSwitch == true) { %>
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" 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: 15px !important;">
<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>
@@ -216,7 +210,7 @@
<% } %>
<% if (device == 'sdr' && bwSwitch == true) { %>
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" 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: 15px !important;">
<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>
@@ -236,9 +230,11 @@
</ul>
</div>
<% } %>
<!--<button class="tooltip bg-color-4" id="log-fmlist"
<% if (fmlist_integration == true) { %>
<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>-->
style="width: 80px; height: 48px;margin-left: 15px !important;"><i class="fa-solid fa-flag fa-lg"></i></button>
<% } %>
</div>
</div>
</div>
@@ -360,11 +356,11 @@
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="extended-frequency-range" aria-label="Add decimals manually">
<label for="extended-frequency-range">Add decimals manually</label>
<label for="extended-frequency-range" class="tooltip" data-tooltip="Enabling this will allow you to enter the decimal point manually.<br>Useful for servers that use upconverters.">Manual decimal entry</label>
</div>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="ps-underscores" aria-label="Add underscores to RDS PS">
<label for="ps-underscores">Add underscores to RDS PS</label>
<label for="ps-underscores" class="tooltip" data-tooltip="Enabling this option replaces spaces in RDS PS with underscores.">Underscores in RDS PS</label>
</div>
<div class="form-group bottom-20 hide-desktop" style="float: none;">
@@ -493,7 +489,7 @@
</div>
</div>
</div>
<div id="toast-container" style="position: fixed; top: 20px; right: 96px; z-index: 9999;"></div>
<div id="toast-container"></div>
<script src="js/websocket.js"></script>
<script src="js/webserver.js"></script>
<% if (!noPlugins) { %>
web/js/confighandler.js
+11 -1
View File
@@ -77,6 +77,9 @@ function submitData() {
plugins.push($(this).data('name'));
});
const fmlistIntegration = $("#fmlist-integration").is(":checked") || false;
const fmlistOmid = $('#fmlist-omid').val();
const publicTuner = $("#tuner-public").is(":checked");
const lockToAdmin = $("#tuner-lock").is(":checked");
const autoShutdown = $("#shutdown-tuner").is(":checked") || false;
@@ -143,6 +146,10 @@ function submitData() {
tunePass,
adminPass,
},
extras: {
fmlistIntegration,
fmlistOmid,
},
plugins,
device,
publicTuner,
@@ -164,7 +171,7 @@ function submitData() {
contentType: 'application/json',
data: JSON.stringify(data),
success: function (message) {
alert(message);
sendToast('success', 'Data saved!', message, true, true);
},
error: function (error) {
console.error(error);
@@ -307,6 +314,9 @@ function submitData() {
});
}
}
$("#fmlist-integration").prop("checked", data.extras ? data.extras?.fmlist_integration : "true");
$('#fmlist-omid').val(data.extras?.fmlist_omid);
})
.catch(error => {
console.error('Error fetching data:', error.message);
web/js/init.js
+6 -7
View File
@@ -1,9 +1,9 @@
var currentDate = new Date('Sep 12, 2024 21:30:00');
var currentDate = new Date('Sep 15, 2024 00:00:00');
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1
var year = currentDate.getFullYear();
var formattedDate = day + '/' + month + '/' + year;
var currentVersion = 'v1.2.8.1 [' + formattedDate + ']';
var currentVersion = 'v1.3.0 [' + formattedDate + ']';
getInitialSettings();
removeUrlParameters(); // Call this function to remove URL parameters
@@ -30,9 +30,8 @@ function getInitialSettings() {
}
function removeUrlParameters() {
// Get the current URL without the query parameters
var urlWithoutParams = window.location.protocol + "//" + window.location.host + window.location.pathname;
// Replace the current URL with the new one, without reloading the page
window.history.replaceState({ path: urlWithoutParams }, '', urlWithoutParams);
if (window.location.pathname === "/") {
var urlWithoutParams = window.location.protocol + "//" + window.location.host + window.location.pathname;
window.history.replaceState({ path: urlWithoutParams }, '', urlWithoutParams);
}
}
web/js/main.js
+7 -1
View File
@@ -828,12 +828,18 @@ const updateDataElements = throttle(function(parsedData) {
updateTextIfChanged($('#data-station-pol'), parsedData.txInfo.pol);
updateTextIfChanged($('#data-station-distance'), parsedData.txInfo.dist);
updateHtmlIfChanged($('#data-station-azimuth'), parsedData.txInfo.azi + '°');
updateHtmlIfChanged($('#data-regular-pi'), parsedData.txInfo.reg === true ? parsedData.txInfo.pi : '&nbsp;');
$dataStationContainer.css('display', 'block');
} else {
$dataStationContainer.removeAttr('style');
}
if(parsedData.txInfo.tx.length > 1 && parsedData.txInfo.dist > 150 && parsedData.txInfo.dist < 4000) {
$('#log-fmlist').attr('disabled', 'false').removeClass('btn-disabled cursor-disabled');
} else {
$('#log-fmlist').attr('disabled', 'true').addClass('btn-disabled cursor-disabled');
}
updateHtmlIfChanged($('#data-regular-pi'), parsedData.txInfo.reg === true ? parsedData.txInfo.pi : '&nbsp;');
updateCounter++;
if (updateCounter % 8 === 0) {
$dataTp.html(parsedData.tp === 0 ? "<span class='opacity-half'>TP</span>" : "TP");
web/js/setup.js
+47 -1
View File
@@ -153,6 +153,7 @@ $(document).ready(function() {
updateTabFocus(currentTabIndex);
$tabs.on('keydown', handleKeyDown);
//toggleNav();
});
function MapCreate() {
@@ -188,4 +189,49 @@ function MapCreate() {
// Add active class to the corresponding li element
$('.nav li[data-panel="' + panelId + '"]').addClass('active');
}
}
if(window.location.hash.length == 0) {
$('.nav li[data-panel="dashboard"]').addClass('active');
}
}
function toggleNav() {
const navOpen = $("#navigation").css('margin-left') === '0px';
const isMobile = window.innerWidth <= 768; // Define mobile screen width threshold (you can adjust this as needed)
if (navOpen) {
// Close the navigation
if (isMobile) {
// Do nothing to .admin-wrapper on mobile (since we're overlaying)
$(".admin-wrapper").css({
'margin-left': '0',
'width': '100%' // Reset content to full width on close
});
$("#navigation").css('margin-left', 'calc(64px - 100vw)');
} else {
// On desktop, adjust the content margin and width
$(".admin-wrapper").css({
'margin-left': '64px',
'width': 'calc(100% - 64px)'
});
$("#navigation").css('margin-left', '-356px');
}
$(".sidenav-close").html('<i class="fa-solid fa-chevron-right"></i>');
} else {
// Open the navigation
$("#navigation").css('margin-left', '0');
if (isMobile) {
// On mobile, overlay the navigation
$(".admin-wrapper").css({
'margin-left': '0', // Keep content in place when sidenav is open
'width': '100%' // Keep content at full width
});
} else {
// On desktop, push the content
$(".admin-wrapper").css({
'margin-left': '420px',
'width': 'calc(100% - 420px)'
});
}
$(".sidenav-close").html('<i class="fa-solid fa-chevron-left"></i>');
}
}
web/js/toast.js
+1 -1
View File
@@ -18,7 +18,7 @@ function sendToast(type, title, message, persistent, important) {
// Create the toast element
var $toast = $(`
<div class="toast ${type} flex-container ${important ? 'important' : ''}" id="${toastId}">
<div class="toast ${type} flex-container flex-phone ${important ? 'important' : ''}" id="${toastId}">
<div class="toast-icon"><i class="fa-solid ${iconClass}"></i></div>
<div>
<div class="toast-title">${toastTitle}</div>
web/login.ejs
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Login - FM-DX Webserver</title>
<link href="css/entry.css" type="text/css" rel="stylesheet">
<link href="css/flags.min.css" type="text/css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="toast-container"></div>
<div id="wrapper-outer">
<div id="wrapper">
<div class="panel-100 no-bg">
<img class="top-25" src="../favicon.png" height="64px">
<p>You are currently not logged in as an administrator and therefore can't change the settings.</p>
<p>Please login below.</p>
</div>
<div class="panel-100 p-bottom-20">
<h1 class="text-light">Login</h1>
<form action="./login" method="post" id="login-form">
<input type="password" id="password" name="password" placeholder="Password" style="width: 250px; background-color: var(--color-2);" required>
<button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: -4px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
<i class="fa-solid fa-right-to-bracket"></i>
</button>
</form>
</div>
</div>
</div>
<script src="js/settings.js"></script>
<script src="js/toast.js"></script>
</body>
</html>
web/setup.ejs
+395 -347
View File
@@ -12,268 +12,244 @@
<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="toast-container"></div>
<div id="wrapper-outer" class="wrapper-outer-static">
<div id="wrapper" class="setup-wrapper">
<% if (isAdminAuthenticated) { %>
<div class="panel-100 no-bg">
<img class="top-10" src="./images/openradio_logo_neutral.png" height="64px">
<h2 class="text-monospace text-light">[ADMIN PANEL]</h2>
</div>
<div class="panel-100" style="border-radius: 15px 15px 0 0;">
<ul class="nav" role="tablist" style="border-radius: 15px 15px 0 0;">
<li role="presentation" data-panel="dashboard" aria-selected="true">
<a href="#" role="tab" tabindex="0" aria-controls="dashboard">Dashboard</a>
</li>
<li role="presentation" data-panel="tuner">
<a href="#" role="tab" tabindex="-1" aria-controls="tuner">Tuner</a>
</li>
<li role="presentation" data-panel="connection">
<a href="#" role="tab" tabindex="-1" aria-controls="connection">Connection</a>
</li>
<li role="presentation" data-panel="audio">
<a href="#" role="tab" tabindex="-1" aria-controls="audio">Audio</a>
</li>
<li role="presentation" data-panel="webserver">
<a href="#" role="tab" tabindex="-1" aria-controls="webserver">Webserver</a>
</li>
<li role="presentation" data-panel="plugins">
<a href="#" role="tab" tabindex="-1" aria-controls="plugins">Plugins</a>
</li>
<li role="presentation" data-panel="identification">
<a href="#" role="tab" tabindex="-1" aria-controls="identification">Info & Map</a>
</li>
<li role="presentation" class="logout-link text-gray">
<a href="./logout"><i class="fas fa-sign-out"></i></a>
</li>
</ul>
</div>
<div id="navigation" class="sidenav flex-container flex-phone">
<div class="sidenav-content">
<h1 class="top-25">Settings</h1>
<ul class="nav" role="tablist" style="border-radius: 15px 15px 0 0;">
<li role="presentation" data-panel="dashboard" aria-selected="true">
<a href="#" role="tab" tabindex="0" aria-controls="dashboard"><i class="fa-solid fa-fw fa-chart-line"></i> Dashboard</a>
</li>
<li role="presentation" data-panel="tuner">
<a href="#" role="tab" tabindex="-1" aria-controls="tuner"><i class="fa-solid fa-fw fa-radio"></i> Tuner</a>
</li>
<li role="presentation" data-panel="audio">
<a href="#" role="tab" tabindex="-1" aria-controls="audio"><i class="fa-solid fa-fw fa-volume-high"></i> Audio</a>
</li>
<li role="presentation" data-panel="webserver">
<a href="#" role="tab" tabindex="-1" aria-controls="webserver"><i class="fa-solid fa-fw fa-server"></i> Webserver</a>
</li>
<li role="presentation" data-panel="plugins">
<a href="#" role="tab" tabindex="-1" aria-controls="plugins"><i class="fa-solid fa-fw fa-puzzle-piece"></i> Plugins</a>
</li>
<li role="presentation" data-panel="identification">
<a href="#" role="tab" tabindex="-1" aria-controls="identification"><i class="fa-solid fa-fw fa-circle-info"></i> Identification & Map</a>
</li>
<li role="presentation" data-panel="extras">
<a href="#" role="tab" tabindex="-1" aria-controls="extras"><i class="fa-solid fa-fw fa-star"></i> Extras</a>
</li>
<div class="panel-100" style="margin-top: -20px; border-radius: 0 0 15px 15px;">
<div class="panel-100 tab-content no-bg no-bg" id="dashboard" role="tabpanel">
<div class="admin-quick-dashboard top-25">
<div class="icon tooltip" role="button" aria-label="Go back to the main screen" tabindex="0" data-tooltip="Go back to the main screen" onclick="document.location.href='./'">
<i class="fa-solid fa-arrow-left"></i>
</div>
<div class="icon tooltip" id="submit-config" role="button" aria-label="Save settings" tabindex="0" data-tooltip="Save settings" onclick="submitData()">
<i class="fa-solid fa-save"></i>
</div>
<div class="icon tooltip logout-link" role="button" aria-label="Sign out" tabindex="0" data-tooltip="Sign out">
<i class="fa-solid fa-sign-out"></i>
</div>
</div>
<hr>
<div class="panel-100 no-bg">
<p class="color-4">Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong class="color-5"><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p>
<a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank" class="text-small">Version: <span class="version-string color-4"></span></a>
</div>
</ul>
</div>
<div class="sidenav-close text-medium-big hover-brighten flex-center color-4 modal-panel-sidebar" role="button" onclick="toggleNav()" aria-label="Toggle navigation" tabindex="0"><i class="fa-solid fa-chevron-left"></i></div>
</div>
<div id="wrapper" class="setup-wrapper admin-wrapper panel-full">
<div class="panel-full" style="margin-top: -20px; border-radius: 0; padding-left: 20px;padding-right: 20px;">
<div class="panel-full tab-content no-bg m-0" id="dashboard" role="tabpanel">
<h2>Dashboard</h2>
<div class="panel-100 flex-container auto p-bottom-20">
<div class="panel-33 no-bg">
<div class="flex-container">
<div class="panel-33 p-20">
<span class="text-medium-big color-5"><%= onlineUsers %></span>
<p class="m-0">Online users</p>
<p>Online users</p>
</div>
<div class="panel-33 no-bg">
<div class="panel-33 p-20">
<span class="text-medium-big color-5"><%= memoryUsage %></span>
<p class="m-0">Memory usage</p>
<p>Memory usage</p>
</div>
<div class="panel-33 no-bg">
<div class="panel-33 p-20">
<span class="text-medium-big color-5"><%= processUptime %></span>
<p class="m-0">Uptime</p>
<p >Uptime</p>
</div>
</div>
<h3>Current users</h3>
<table class="table-big">
<thead>
<tr>
<th>IP Address</th>
<th>Location</th>
<th>Online since</th>
<th></th>
</tr>
</thead>
<tbody>
<% if (connectedUsers.length > 0) { %>
<% connectedUsers.forEach(user => { %>
<div class="flex-container">
<div class="panel-50 p-bottom-20">
<h3>Current users</h3>
<table class="table-big">
<thead>
<tr>
<td><a href="https://dnschecker.org/ip-location.php?ip=<%= user.ip %>" target="_blank"><%= user.ip %></a></td>
<td><%= user.location %></td>
<td><%= user.time %></td>
<td><a href="./kick?ip=<%= user.ip %>">Kick</a></td>
<th>IP Address</th>
<th>Location</th>
<th>Online since</th>
<th></th>
</tr>
<% }); %>
<% } else { %>
<tr>
<td colspan="4" style="text-align: center">No users online</td>
</tr>
<% } %>
</tbody>
</table>
<h3>Maintenance</h3>
<div class="flex-container flex-center" style="margin: 30px;">
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="tuner-public" aria-label="Public tuner (no password)">
<label for="tuner-public">Public tuner (no password)</label>
</thead>
<tbody>
<% if (connectedUsers.length > 0) { %>
<% connectedUsers.forEach(user => { %>
<tr>
<td><a href="https://dnschecker.org/ip-location.php?ip=<%= user.ip %>" target="_blank"><%= user.ip %></a></td>
<td><%= user.location %></td>
<td><%= user.time %></td>
<td><a href="./kick?ip=<%= user.ip %>">Kick</a></td>
</tr>
<% }); %>
<% } else { %>
<tr>
<td colspan="4" style="text-align: center">No users online</td>
</tr>
<% } %>
</tbody>
</table>
</div>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="tuner-lock" aria-label="Admin lock (only admins can tune)">
<label for="tuner-lock">Admin lock (only admins can tune)</label>
</div>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="shutdown-tuner" aria-label="Auto shutdown">
<label for="shutdown-tuner">Auto-shutdown</label>
</div><br>
</div>
<div class="form-group">
<label for="tune-pass">Tune password:</label>
<input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
</div>
<div class="form-group">
<label for="admin-pass">Admin setup password:</label>
<input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
</div><br>
<h3>Console</h3>
<% if (consoleOutput && consoleOutput.length > 0) { %>
<div class="panel-100 br-5 p-10 text-small text-left top-10" id="console-output">
<% consoleOutput.forEach(function(log) { %>
<pre class="m-0" style="white-space:pre-wrap;"><%= log %></pre>
<% }); %>
</div>
<% } else { %>
<p>No console output available.</p>
<% } %>
<p class="text-small">Version: <span class="version-string color-4"></span></p>
<p><a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank">Check for the latest source code</a> • <a href="https://buymeacoffee.com/noobish" target="_blank">Support the developer</a></p>
</div>
<div class="panel-100 tab-content no-bg" id="connection" role="tabpanel">
<h2>Connection settings</h2>
<p>You can set up your connection settings here. Changing these settings requires a server restart.</p>
<h3>Tuner connection:</h3>
<div style="width: 300px;" class="auto top-10">
<label class="toggleSwitch nolabel" onclick="">
<input id="connection-type-toggle" type="checkbox" tabindex="0" aria-label="Connection type"/>
<a></a>
<span>
<span class="left-span">Direct</span>
<span class="right-span">TCP/IP</span>
</span>
</label>
</div>
<div id="tuner-usb" class="top-25">
<div class="form-group">
<label for="com-devices"><i class="fa-brands fa-usb"></i> USB Device:</label>
<div class="dropdown" style="width: 300px;margin-right: 0;">
<input id="com-devices" type="text" name="com-devices" placeholder="Choose your USB device" readonly tabindex="0" />
<ul class="options" tabindex="-1" id="deviceList">
<% serialPorts.forEach(serialPort => { %>
<li data-value="<%= serialPort.path %>" class="option" tabindex="0"><%= serialPort.path %> - <%= serialPort.friendlyName %></li>
<% }); %>
</ul>
<div class="panel-50 p-bottom-20">
<h3>Quick settings</h3>
<div class="flex-container flex-center" style="margin: 30px;">
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="tuner-public" aria-label="Public tuner (no password)">
<label for="tuner-public">Tune lock</label>
</div>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="tuner-lock" aria-label="Admin lock (only admins can tune)">
<label for="tuner-lock">Admin lock</label>
</div><br>
</div>
<div class="form-group">
<label for="tune-pass">Tune password:</label>
<input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
</div>
<div class="form-group">
<label for="admin-pass">Admin setup password:</label>
<input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
</div><br>
</div>
</div>
<div id="tuner-wireless">
<p class="text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
<div class="form-group">
<label for="xdrd-ip">xdrd ip address:</label>
<input class="input-text w-150" type="text" name="xdrd-ip" id="xdrd-ip" placeholder="127.0.0.1">
</div>
<div class="form-group">
<label for="xdrd-port">xdrd port:</label>
<input class="input-text w-100" type="text" name="xdrd-port" id="xdrd-port" placeholder="7373">
</div>
<div class="form-group">
<label for="xdrd-password">xdrd server password:</label>
<input class="input-text w-150" type="password" name="xdrd-password" id="xdrd-password">
</div>
<div class="flex-container">
<div class="panel-100-real p-bottom-20 bottom-20">
<h3>Console</h3>
<% if (consoleOutput && consoleOutput.length > 0) { %>
<div class="panel-100 auto br-5 p-10 text-small text-left top-10" id="console-output">
<% consoleOutput.forEach(function(log) { %>
<pre class="m-0" style="white-space:pre-wrap;"><%= log %></pre>
<% }); %>
</div>
<% } else { %>
<p>No console output available.</p>
<% } %>
</div>
</div>
<br class="top-25">
<h3>Webserver connection:</h3>
<p class="text-gray">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>Don't enter your public IP here.</p>
<div class="form-group">
<label for="webserver-ip">Webserver IP:</label>
<input class="input-text w-150" type="text" name="webserver-ip" id="webserver-ip" placeholder="0.0.0.0">
</div>
<div class="form-group">
<label for="webserver-port">Webserver port:</label>
<input class="input-text w-100" type="text" name="webserver-port" id="webserver-port" placeholder="8080">
</div>
<br>
</div>
<div class="panel-100 tab-content no-bg" id="audio" role="tabpanel">
<div class="panel-full tab-content no-bg m-0" id="audio" role="tabpanel">
<h2>Audio settings</h2>
<p>You can set up your audio settings here. Changing these settings requires a server restart.</p>
<div class="panel-100 p-bottom-20">
<div class="form-group">
<p class="text-left">Your audio device port.<br>
<span class="text-gray">This is where your tuner is plugged in.</span>
</p>
<label for="audio-devices"><i class="fa-solid fa-headphones"></i> STREAM AUDIO FROM:</label>
<div class="dropdown" style="width: 300px;">
<input id="audio-devices" type="text" name="audio-devices" placeholder="Choose your audio device" readonly tabindex="0" />
<ul class="options" tabindex="-1" id="deviceList">
<% videoDevices.forEach(device => { %>
<li data-value="<%= device.name %>" class="option" tabindex="0"><%= device.name %></li>
<% }); %>
<% audioDevices.forEach(device => { %>
<li data-value="<%= device.name %>" class="option" tabindex="0"><%= device.name %></li>
<% }); %>
</ul>
<div class="flex-container">
<div class="panel-33 p-bottom-20">
<h3>Device</h3>
<div class="form-group">
<p class="text-left">Your audio device port.<br>
<span class="text-gray">This is where your tuner is plugged in.</span>
</p>
<label for="audio-devices"><i class="fa-solid fa-headphones"></i> STREAM AUDIO FROM:</label>
<div class="dropdown" style="width: 300px;">
<input id="audio-devices" type="text" name="audio-devices" placeholder="Choose your audio device" readonly tabindex="0" />
<ul class="options" tabindex="-1" id="deviceList">
<% videoDevices.forEach(device => { %>
<li data-value="<%= device.name %>" class="option" tabindex="0"><%= device.name %></li>
<% }); %>
<% audioDevices.forEach(device => { %>
<li data-value="<%= device.name %>" class="option" tabindex="0"><%= device.name %></li>
<% }); %>
</ul>
</div>
</div>
</div>
</div>
<div class="form-group">
<p class="text-left">Audio channel count.<br>
<span class="text-gray">Choose between Mono / Stereo.</span>
</p>
<label for="audio-devices"><i class="fa-solid fa-microphone-lines"></i> Audio channels:</label>
<div class="dropdown" style="width: 300px;">
<input id="audio-channels" type="text" name="audio-channels" placeholder="Stereo" readonly tabindex="0" />
<ul class="options" tabindex="-1">
<li data-value="2" class="option" tabindex="0">Stereo</li>
<li data-value="1" class="option" tabindex="0">Mono</li>
</ul>
<div class="panel-33 p-bottom-20">
<h3>Channels</h3>
<div class="form-group">
<p class="text-left">Audio channel count.<br>
<span class="text-gray">Choose between Mono / Stereo.</span>
</p>
<label for="audio-devices"><i class="fa-solid fa-microphone-lines"></i> Audio channels:</label>
<div class="dropdown" style="width: 300px;">
<input id="audio-channels" type="text" name="audio-channels" placeholder="Stereo" readonly tabindex="0" />
<ul class="options" tabindex="-1">
<li data-value="2" class="option" tabindex="0">Stereo</li>
<li data-value="1" class="option" tabindex="0">Mono</li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-group">
<p class="text-left">The bitrate of the mp3 audio.<br>
<span class="text-gray">Minimum: 64 Kbps • Maximum: 320 Kbps</span>
</p>
<label for="audio-quality"><i class="fa-solid fa-wave-square"></i> Audio quality:</label>
<div class="dropdown" style="width: 300px;">
<input id="audio-quality" type="text" name="audio-quality" placeholder="128k (standard)" readonly tabindex="0" />
<ul class="options" tabindex="-1">
<li data-value="64k" class="option" tabindex="0">64k (lowest quality)</li>
<li data-value="96k" class="option" tabindex="0">96k (low quality)</li>
<li data-value="128k" class="option" tabindex="0">128k (standard)</li>
<li data-value="192k" class="option" tabindex="0">192k (higher quality)</li>
<li data-value="256k" class="option" tabindex="0">256k (very high quality)</li>
<li data-value="320k" class="option" tabindex="0">320k (ultra quality)</li>
</ul>
<div class="panel-33 p-bottom-20">
<h3>Bitrate</h3>
<div class="form-group">
<p class="text-left">The bitrate of the mp3 audio.<br>
<span class="text-gray">Minimum: 64 Kbps • Maximum: 320 Kbps</span>
</p>
<label for="audio-quality"><i class="fa-solid fa-wave-square"></i> Audio quality:</label>
<div class="dropdown" style="width: 300px;">
<input id="audio-quality" type="text" name="audio-quality" placeholder="128k (standard)" readonly tabindex="0" />
<ul class="options" tabindex="-1">
<li data-value="64k" class="option" tabindex="0">64k (lowest quality)</li>
<li data-value="96k" class="option" tabindex="0">96k (low quality)</li>
<li data-value="128k" class="option" tabindex="0">128k (standard)</li>
<li data-value="192k" class="option" tabindex="0">192k (higher quality)</li>
<li data-value="256k" class="option" tabindex="0">256k (very high quality)</li>
<li data-value="320k" class="option" tabindex="0">320k (ultra quality)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="form-group checkbox bottom-20">
<input type="checkbox" tabindex="0" id="audio-software-mode" aria-label="ALSA Software mode (plughw) - Linux only">
<label for="audio-software-mode">ALSA software mode (plughw) - LINUX ONLY</label>
</div>
<div class="flex-container">
<div class="panel-100-real p-bottom-20">
<h3>Miscellaneous</h3>
<div class="form-group checkbox bottom-20">
<input type="checkbox" tabindex="0" id="audio-software-mode" aria-label="ALSA Software mode (plughw) - Linux only">
<label for="audio-software-mode">Toggle ALSA software mode</label>
</div>
</div>
</div>
</div>
<div class="panel-100 tab-content no-bg" id="webserver" role="tabpanel">
<div class="panel-full m-0 tab-content no-bg" id="webserver" role="tabpanel">
<h2>Webserver settings</h2>
<div class="flex-container">
<div class="panel-50 no-bg">
<div class="panel-100 no-bg">
<h3>Background image</h3>
<div class="panel-33 p-bottom-20" style="padding-left: 20px; padding-right: 20px;">
<h3>Connection</h3>
<p class="text-gray">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>Don't enter your public IP here.</p>
<div class="form-group">
<label for="webserver-ip">Webserver IP:</label>
<input class="input-text w-150" type="text" name="webserver-ip" id="webserver-ip" placeholder="0.0.0.0">
</div>
<div class="form-group">
<label for="webserver-port">Webserver port:</label>
<input class="input-text w-100" type="text" name="webserver-port" id="webserver-port" placeholder="8080">
</div>
<br>
</div>
<div class="panel-33 p-bottom-20">
<h3>Design</h3>
<h4>Background image</h4>
<div class="form-group">
<label for="bg-image">Image link:</label>
<input class="input-text w-200" type="text" placeholder="" name="bg-image" id="bg-image">
</div>
</div>
<div class="panel-100 no-bg">
<h3>Themes</h3>
<h4>Themes</h4>
<div class="form-group">
<label for="themes"><i class="fa-solid fa-palette"></i> Default server theme:</label>
<div class="dropdown" id="server-theme-selector" style="margin-right: 0;">
@@ -291,10 +267,9 @@
</ul>
</div>
</div>
</div>
</div>
<div class="panel-50 no-bg">
<h3>Antenna options</h3>
<div class="panel-33 p-bottom-20">
<h3>Antennas</h3>
<div class="form-group checkbox bottom-20">
<input type="checkbox" tabindex="0" id="antenna-switch" aria-label="Antenna switch">
<label for="antenna-switch">Enable the antenna switch</label>
@@ -302,16 +277,16 @@
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="ant1-enabled" aria-label="Enable antenna 1">
<label for="ant1-enabled"></label>
<label for="ant1-enabled"><i class="fa-solid fa-check"></i></label>
</div>
<div class="form-group">
<label for="ant1-name">Antenna 1 name:</label>
<input class="input-text w-100" type="text" placeholder="Ant A" name="ant1-name" id="ant1-name">
</div><br>
</div>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="ant2-enabled" aria-label="Enable antenna 2">
<label for="ant2-enabled"></label>
<label for="ant2-enabled"><i class="fa-solid fa-check"></i></label>
</div>
<div class="form-group">
<label for="ant2-name">Antenna 2 name:</label>
@@ -320,16 +295,16 @@
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="ant3-enabled" aria-label="Enable antenna 3">
<label for="ant3-enabled"></label>
<label for="ant3-enabled"><i class="fa-solid fa-check"></i></label>
</div>
<div class="form-group">
<label for="ant3-name">Antenna 3 name:</label>
<input class="input-text w-100" type="text" placeholder="Ant C" name="ant3-name" id="ant3-name">
</div><br>
</div>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="ant4-enabled" aria-label="Enable antenna 4">
<label for="ant4-enabled"></label>
<label for="ant4-enabled"><i class="fa-solid fa-check"></i></label>
</div>
<div class="form-group">
<label for="ant4-name">Antenna 4 name:</label>
@@ -338,19 +313,10 @@
</div>
</div>
<br><hr>
<div class="flex-container">
<div class="panel-50 no-bg">
<div class="panel-50">
<h3>Tuning options</h3>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="default-freq-enable" aria-label="Enable deafult frequency for first client">
<label for="default-freq-enable">Enable default frequency for first client</label>
</div><br>
<div class="form-group">
<label for="default-freq">Default frequency:</label>
<input class="input-text w-150" type="text" placeholder="87.5" name="default-freq" id="default-freq">
</div>
<p>If you want to limit which frequencies the users can tune to,<br>you can set the lower and upper limit here.<br>
<span class="text-gray">Enter frequencies in MHz.</span>
</p>
@@ -368,14 +334,7 @@
</div>
</div>
<div class="panel-50 no-bg">
<h3>RDS Mode</h3>
<p>You can switch between American (RBDS) / Global (RDS) mode here.</p>
<div class="form-group checkbox bottom-20">
<input type="checkbox" tabindex="0" id="rds-mode" aria-label="Enable american RDS mode (RBDS)">
<label for="rds-mode">Enable American Mode (RBDS)</label>
</div>
<div class="panel-50 p-bottom-20">
<h3>Presets</h3>
<p>You can set up to 4 presets.<br>These presets are accessible with the F1-F4 buttons.<br>
<span class="text-gray">Enter frequencies in MHz.</span></p>
@@ -398,9 +357,16 @@
</div>
</div>
<br><hr>
<div class="panel-100 no-bg">
<div class="flex-container p-bottom-20">
<div class="panel-33 p-bottom-20" style="padding-left: 20px; padding-right: 20px;">
<h3>RDS Mode</h3>
<p>You can switch between American (RBDS) / Global (RDS) mode here.</p>
<div class="form-group checkbox bottom-20">
<input type="checkbox" tabindex="0" id="rds-mode" aria-label="Enable american RDS mode (RBDS)">
<label for="rds-mode">Enable American Mode (RBDS)</label>
</div>
</div>
<div class="panel-33">
<h3>Chat options</h3>
<div class="form-group checkbox bottom-20">
<input type="checkbox" tabindex="0" id="chat-switch" aria-label="Enable chat">
@@ -408,7 +374,7 @@
</div>
</div>
<div class="panel-100 no-bg">
<div class="panel-33 p-bottom-20" style="padding-left: 20px; padding-right: 20px;">
<h3>Banlist</h3>
<p>If you have users that don't behave on your server, you can choose to ban them by their IP address.<br>
<span class="text-gray">You can see their IP address by hovering over their nickname. One IP per row.</span></p>
@@ -417,67 +383,153 @@
<textarea id="ip-addresses" placeholder="123.45.67.8"></textarea>
</div>
</div>
</div>
<div class="panel-100 tab-content no-bg" id="plugins" role="tabpanel">
<h2>Plugins</h2>
<p>Any compatible <strong>.js</strong> plugin, which is in the "plugins" folder, will be listed here.<br>
Click on the individual plugins to enable/disable them.</p>
<select id="plugin-list" class="multiselect" multiple>
<% plugins.forEach(function(plugin) { %>
<option data-name="<%= plugin.frontEndPath %>" title="<%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]">
<%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]
</option>
<% }); %>
</select><br><br>
<a href="https://github.com/NoobishSVK/fm-dx-webserver/wiki/Plugin-List" target="_blank">Download new plugins here!</a>
<hr>
<h3>Plugin settings</h3>
<div id="plugin-settings"></div>
</div>
<div class="panel-100 tab-content no-bg" id="tuner" role="tabpanel">
<h2>Tuner Specific Settings</h2>
<div class="form-group">
<label for="themes"><i class="fa-solid fa-radio"></i> Device:</label>
<div class="dropdown" id="device-selector" style="margin-right: 0;">
<input type="text" placeholder="TEF6686 / TEA685x" id="device-type" readonly tabindex="0">
<ul class="options" tabindex="0">
<li class="option" tabindex="0" data-value="tef">TEF668x / TEA685x</li>
<li class="option" tabindex="0" data-value="xdr">XDR (F1HD / S10HDiP)</li>
<li class="option" tabindex="0" data-value="sdr">SDR (RTL-SDR / AirSpy)</li>
<li class="option" tabindex="0" data-value="other">Other</li>
</ul>
</div>
</div><br>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="toggle-bw" aria-label="Toggle bandwidth switch">
<label for="toggle-bw">Toggle bandwidth switch</label>
</div><br>
<h3>Startup Volume</h3>
<div class="panel-50 bg-color-2 auto" style="padding: 20px;">
<div class="panel-75 auto" style="height: 48px;">
<input type="range" id="startup-volume" min="0" max="1" step="0.01" value="1" aria-label="Startup Volume slider">
</div>
<h3 class="top-25" id="volume-percentage-value"></h3>
</div>
</div>
<div class="panel-full m-0 tab-content no-bg" id="plugins" role="tabpanel">
<h2>Plugins</h2>
<div class="panel-100 p-bottom-20">
<h3>Plugin list</h3>
<p>Any compatible <strong>.js</strong> plugin, which is in the "plugins" folder, will be listed here.<br>
Click on the individual plugins to enable/disable them.</p>
<select id="plugin-list" class="multiselect" multiple>
<% plugins.forEach(function(plugin) { %>
<option data-name="<%= plugin.frontEndPath %>" title="<%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]">
<%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]
</option>
<% }); %>
</select><br><br>
<a href="https://github.com/NoobishSVK/fm-dx-webserver/wiki/Plugin-List" target="_blank">Download new plugins here!</a>
</div>
<div class="panel-100 p-bottom-20">
<h3>Plugin settings</h3>
<div id="plugin-settings">No plugin settings are available.</div>
</div>
</div>
<div class="panel-full m-0 tab-content no-bg" id="tuner" role="tabpanel">
<h2>Tuner settings</h2>
<div class="flex-container">
<div class="panel-33 p-bottom-20">
<h3>Device type</h3>
<div class="form-group">
<label for="themes"><i class="fa-solid fa-radio"></i> Device</label>
<div class="dropdown" id="device-selector" style="margin-right: 0;">
<input type="text" placeholder="TEF6686 / TEA685x" id="device-type" readonly tabindex="0">
<ul class="options" tabindex="0">
<li class="option" tabindex="0" data-value="tef">TEF668x / TEA685x</li>
<li class="option" tabindex="0" data-value="xdr">XDR (F1HD / S10HDiP)</li>
<li class="option" tabindex="0" data-value="sdr">SDR (RTL-SDR / AirSpy)</li>
<li class="option" tabindex="0" data-value="other">Other</li>
</ul>
</div>
</div><br>
</div>
<div class="panel-33 p-bottom-20" style="padding-right: 20px; padding-left: 20px;">
<h3>Connection type</h3>
<p class="text-gray">If you want to choose the COM port directly, choose "Direct".<br>If you use xdrd or your receiver is connected via Wi-Fi, choose TCP/IP.</p>
<div style="width: 300px;" class="auto top-10">
<label class="toggleSwitch nolabel" onclick="">
<input id="connection-type-toggle" type="checkbox" tabindex="0" aria-label="Connection type"/>
<a></a>
<span>
<span class="left-span">Direct</span>
<span class="right-span">TCP/IP</span>
</span>
</label>
</div>
</div>
<div class="panel-33 p-bottom-20">
<h3>Device / Server</h3>
<div id="tuner-usb">
<p class="text-gray">Choose your desired <strong>COM port</strong><br>&nbsp;</p>
<div class="form-group">
<label for="com-devices"><i class="fa-brands fa-usb"></i> USB Device:</label>
<div class="dropdown" style="width: 300px;margin-right: 0;">
<input id="com-devices" type="text" name="com-devices" placeholder="Choose your USB device" readonly tabindex="0" />
<ul class="options" tabindex="-1" id="deviceList">
<% serialPorts.forEach(serialPort => { %>
<li data-value="<%= serialPort.path %>" class="option" tabindex="0"><%= serialPort.path %> - <%= serialPort.friendlyName %></li>
<% }); %>
</ul>
</div>
</div>
</div>
<div class="panel-100 tab-content no-bg" id="identification" role="tabpanel">
<div id="tuner-wireless">
<p class="text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
<div class="form-group">
<label for="xdrd-ip">xdrd ip address:</label>
<input class="input-text w-150" type="text" name="xdrd-ip" id="xdrd-ip" placeholder="127.0.0.1">
</div>
<div class="form-group">
<label for="xdrd-port">xdrd port:</label>
<input class="input-text w-100" type="text" name="xdrd-port" id="xdrd-port" placeholder="7373">
</div>
<div class="form-group">
<label for="xdrd-password">xdrd server password:</label>
<input class="input-text w-150" type="password" name="xdrd-password" id="xdrd-password">
</div>
</div>
</div>
</div>
<div class="flex-container">
<div class="panel-50 p-bottom-20">
<h3>Startup</h3>
<h4>Startup volume</h4>
<div class="panel-75 auto" style="height: 48px;">
<input type="range" id="startup-volume" min="0" max="1" step="0.01" value="1" aria-label="Startup Volume slider">
</div>
<h4 class="top-10 text-gray" id="volume-percentage-value"></h4>
<hr>
<h4 class="bottom-20">Default frequency</h4>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="default-freq-enable" aria-label="Enable deafult frequency for first client">
<label for="default-freq-enable">Enable default frequency for first client</label>
</div><br>
<div class="form-group">
<label for="default-freq">Default frequency</label>
<input class="input-text w-150" type="text" placeholder="87.5" name="default-freq" id="default-freq">
</div>
</div>
<div class="panel-50 p-bottom-20">
<h3>Miscellaneous</h3>
<div class="flex-container">
<div class="panel-50 no-bg">
<h4>Bandwidth switch</h4>
<p>Bandwidth switch allows the user to set the bandwidth manually.</p>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="toggle-bw" aria-label="Toggle bandwidth switch">
<label for="toggle-bw">Toggle bandwidth switch</label>
</div><br>
</div>
<div class="panel-50 no-bg">
<h4>Automatic shutdown</h4>
<p>Toggling this option will put the tuner to sleep when no clients are connected.</p>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="shutdown-tuner" aria-label="Auto shutdown">
<label for="shutdown-tuner">Toggle Auto-shutdown</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-full m-0 tab-content no-bg" id="identification" role="tabpanel">
<h2>Identification & Map</h2>
<div class="flex-container">
<div class="panel-50 no-bg">
<div class="panel-50 p-bottom-20">
<h3>Basic info</h3>
<p class="text-gray">Set your tuner name and description here.<br>This info will be visible to anyone who tunes in. </p>
<div class="panel-100 no-bg" style="padding-left: 20px; padding-right: 20px;">
<p>Set your tuner name and description here.<br>This info will be visible to anyone who tunes in. </p>
<div class="panel-full no-bg" style="padding-left: 20px; padding-right: 20px;">
<label for="webserver-name" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label>
<input style="width: 100%; max-width: 768px;" class="input-text" type="text" name="webserver-name" id="webserver-name" placeholder="Fill your server name here." maxlength="32">
<br>
@@ -486,9 +538,9 @@
</div>
</div>
<div class="panel-50 no-bg">
<div class="panel-50">
<h3>Online map</h3>
<p class="m-0 text-gray">If your location information is filled,<br>you can add your tuner to a public list.</p>
<p>If your location information is filled,<br>you can add your tuner to a public list.</p>
<p></p>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="broadcast-tuner" aria-label="Broadcast to map">
@@ -504,52 +556,48 @@
</div>
<p>Check your tuner at <strong><a href="https://servers.fmdx.org" target="_blank" class="color-4">servers.fmdx.org</a></strong>.</p>
<p class="text-small text-gray">By activating the <strong>Broadcast to map</strong> option,<br>you agree to the <a href="https://fmdx.org/projects/webserver.php#rules" target="_blank">Terms of Service</a>.</p>
</div>
</div>
<br>
<hr>
<h3>Location:</h3>
<p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
<div class="form-group">
<label for="lat">Latitude:</label>
<input class="input-text" type="text" name="lat" id="lat">
</div>
<div class="form-group">
<label for="lng">Longitude:</label>
<input class="input-text" type="text" name="lng" id="lng">
<div class="panel-100">
<h3>Location</h3>
<p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
<div class="form-group">
<label for="lat">Latitude:</label>
<input class="input-text" type="text" name="lat" id="lat">
</div>
<div class="form-group">
<label for="lng">Longitude:</label>
<input class="input-text" type="text" name="lng" id="lng">
</div>
<div id="map"></div>
<br>
</div>
<div id="map"></div>
<br>
</div>
<button id="submit-config" style="height:48px; width: 200px;margin:20px;" onclick="submitData();">Save settings</button>
</div>
<div class="panel-100 no-bg">
<p>Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p>
</div>
<div class="panel-full m-0 tab-content no-bg" id="extras" role="tabpanel">
<h2>Extras</h2>
<div class="panel-100 p-bottom-20">
<h3>FMLIST Integration</h3>
<p>FMLIST integration allows you to get potential DXes logged on the <a href="http://fmlist.org/fm_logmap.php?hours=900" target="_blank" class="text-bold color-4">FMLIST Visual Logbook</a>.<br>
Your server also needs to have a valid UUID, which is obtained by registering on maps in the <strong>Identification & Map</strong> tab.</p>
<div class="form-group checkbox">
<input type="checkbox" tabindex="0" id="fmlist-integration" aria-label="FMLIST integration">
<label for="fmlist-integration">Toggle FMLIST integration</label>
</div><br>
<p>You can also fill in your OMID from FMLIST.org, if you want the logs to be saved to your account.</p>
<div class="form-group">
<label for="fmlist-omid">OMID</label>
<input class="input-text w-100" type="text" name="fmlist-omid" id="fmlist-omid" maxlength="5">
</div>
</div>
</div>
<button onclick="document.location.href='./'" id="back-btn" aria-label="Go back to tuning"><i class="fa-solid fa-arrow-left"></i></button>
<% } else { %>
<div class="panel-100 no-bg">
<img class="top-10" src="./images/openradio_logo_neutral.png" height="64px">
<h2 class="text-monospace text-light">[ADMIN PANEL]</h2>
<p>You are currently not logged in as an administrator and therefore can't change the settings.</p>
<p>Please login below.</p>
</div>
<div class="panel-100 p-bottom-20">
<h2>LOGIN</h2>
<form action="./login" method="post" id="login-form">
<input type="password" id="password" name="password" placeholder="Password" style="width: 250px;" required>
<button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: -2px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
<i class="fa-solid fa-right-to-bracket"></i>
</button>
</form>
</div>
<% } %>
</div>
</div>
<script src="js/init.js"></script>
web/wizard.ejs
+49 -57
View File
@@ -14,8 +14,7 @@
<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) { %>
<div id="wrapper">
<div class="panel-100 no-bg">
<img class="top-10" src="../images/openradio_logo_neutral.png" height="64px">
<h2 class="text-monospace text-light text-gray">[SETUP WIZARD]</h2>
@@ -55,19 +54,20 @@
<h3>Tuner type:</h3>
<p class="text-gray">Settings a proper device type ensures that the correct interface and settings will load.</p>
<div class="form-group">
<label for="themes"><i class="fa-solid fa-radio"></i> Device</label>
<div class="dropdown" id="device-selector" style="margin-right: 0;">
<input type="text" placeholder="TEF6686 / TEA685x" id="device-type" readonly>
<ul class="options">
<li class="option" data-value="tef">TEF668x / TEA685x</li>
<li class="option" data-value="xdr">XDR (F1HD / S10HDiP)</li>
<li class="option" data-value="sdr">SDR (RTL-SDR / AirSpy)</li>
<li class="option" data-value="other">Other</li>
</ul>
<div class="panel-100 no-bg text-center">
<div class="form-group" style="float: none;">
<label for="device-selector"><i class="fa-solid fa-radio"></i> Device</label>
<div class="dropdown" id="device-selector" style="margin: auto;">
<input type="text" placeholder="TEF6686 / TEA685x" id="device-type" readonly>
<ul class="options">
<li class="option" data-value="tef">TEF668x / TEA685x</li>
<li class="option" data-value="xdr">XDR (F1HD / S10HDiP)</li>
<li class="option" data-value="sdr">SDR (RTL-SDR / AirSpy)</li>
<li class="option" data-value="other">Other</li>
</ul>
</div>
</div>
</div>
<h3>Tuner connection:</h3>
<div style="width: 300px;" class="auto top-10">
<label class="toggleSwitch nolabel" onclick="">
@@ -120,7 +120,7 @@
Choose the audio port your tuner is connected to and desired audio settings here.</p>
<p class="text-gray">Recommended defaults have already been set for the audio quality, you can keep them as-is.</p>
<div class="panel-100 p-bottom-20">
<div class="panel-100 p-bottom-20 flex-container flex-center">
<div class="form-group">
<label for="audio-devices"><i class="fa-solid fa-headphones"></i> Stream audio from</label>
<div class="dropdown" style="width: 300px;">
@@ -177,14 +177,16 @@
<h3>Location:</h3>
<p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
<div class="form-group">
<label for="lat">Latitude:</label>
<input class="input-text" type="text" name="lat" id="lat">
</div>
<div class="form-group">
<label for="lng">Longitude:</label>
<input class="input-text" type="text" name="lng" id="lng">
<div class="panel-100 no-bg flex-container flex-center">
<div class="form-group">
<label for="lat">Latitude:</label>
<input class="input-text" type="text" name="lat" id="lat">
</div>
<div class="form-group">
<label for="lng">Longitude:</label>
<input class="input-text" type="text" name="lng" id="lng">
</div>
</div>
<div id="map"></div>
@@ -193,18 +195,23 @@
<p class="m-0">The list is available at <strong><a href="https://servers.fmdx.org" target="_blank" class="color-4">servers.fmdx.org</a></strong>.</p>
<p class="text-gray">Only fill up your broadcast address if you are using a proxy. If you don't know what a proxy is, leave it empty.</p>
<div class="form-group checkbox">
<input type="checkbox" id="broadcast-tuner" aria-label="Broadcast to map">
<label for="broadcast-tuner">Show my tuner on the public list</label>
<div class="panel-100 flex-container flex-center">
<div class="form-group checkbox">
<input type="checkbox" id="broadcast-tuner" aria-label="Broadcast to map">
<label for="broadcast-tuner">Show my tuner on the public list</label>
</div>
<div class="form-group checkbox">
<input type="checkbox" id="tuner-public" aria-label="Allow tuning wihtout password">
<label for="tuner-public">Allow tuning without password</label>
</div>
</div>
<div class="form-group checkbox">
<input type="checkbox" id="tuner-public" aria-label="Allow tuning wihtout password">
<label for="tuner-public">Allow tuning without password</label>
</div>
<br>
<div class="form-group">
<label for="broadcast-address">Broadcast address:</label>
<input class="input-text" type="text" name="broadcast-address" id="broadcast-address">
<div class="panel-100 flex-container flex-center">
<div class="form-group">
<label for="broadcast-address">Broadcast address:</label>
<input class="input-text" type="text" name="broadcast-address" id="broadcast-address">
</div>
</div>
</div>
</div>
@@ -215,14 +222,16 @@
<p>We are at the last and final step of the settings.</p>
<p class="text-gray">Here we can set the password. Tune password is optional.<br>Setting an admin password allows you to change settings later and setting one up is mandatory.</p>
<div class="form-group">
<label for="tune-pass">Tune password:</label>
<input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
<div class="flex-container flex-center">
<div class="form-group">
<label for="tune-pass">Tune password:</label>
<input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
</div>
<div class="form-group">
<label for="admin-pass">Admin setup password:</label>
<input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
</div>
</div>
<div class="form-group">
<label for="admin-pass">Admin setup password:</label>
<input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
</div><br>
<p>You can now click the <strong>save button</strong> to save your settings.</p>
</div>
@@ -232,23 +241,6 @@
<div class="panel-100 no-bg">
<p>Feel free to contact us on <a href="https://discord.gg/ZAVNdS74mC" target="_blank"><strong><i class="fa-brands fa-discord"></i> Discord</strong></a> for community support.</p>
</div>
<% } else { %>
<div class="panel-100 no-bg">
<img class="top-25" src="../images/openradio_logo_neutral.png" height="64px">
<h2 class="text-monospace text-light">[Wizard]</h2>
<p>You are currently not logged in as an administrator and therefore can't change the settings.</p>
<p>Please login below.</p>
</div>
<div class="panel-100 p-bottom-20">
<h2>LOGIN</h2>
<form action="./login" method="post" id="login-form">
<input type="password" id="password" name="password" placeholder="Password" style="width: 250px; background-color: var(--color-2);" required>
<button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: -4px;border-radius: 0 15px 15px 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
<i class="fa-solid fa-right-to-bracket"></i>
</button>
</form>
</div>
<% } %>
</div>
</div>
<script src="js/init.js"></script>