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

bugfixes, refactor, code removal

Browse Source
This commit is contained in:
NoobishSVK
2024-03-25 23:23:14 +01:00
parent fc52b211b7
commit 7f483770f2
20 changed files with 342 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/css/buttons.css
View File

@@ -143,7 +143,6 @@ input[type="range"]::-moz-range-track {
border: 0;
}
/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
/* removing default appearance */
-webkit-appearance: none;
@@ -151,11 +150,14 @@ input[type="range"]::-webkit-slider-thumb {
/* creating a custom design */
height: 48px;
width: 48px;
background-color: var(--color-4);
border-radius: 10px;
border: 2px solid var(--color-4);
background: url('../images/speaker.svg') center no-repeat, var(--color-5);
background-position: center;
background-size: 20px;
border-radius: 30px;
outline: 4px solid var(--color-5);
outline-offset: -3px;
/* slider progress trick */
box-shadow: -407px 0 0 400px var(--color-4);
box-shadow: -420px 0 0 400px var(--color-4);
}
/* Thumb: Firefox */

2
web/css/helpers.css
View File

@@ -217,7 +217,7 @@
.text-big {
font-size: 40px;
display: block;
margin-top: -25px;
margin-top: 0;
}
.text-big#data-ps {
margin: 0;

0
web/favicon2.png → web/favicon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

26
web/index.ejs
View File

@@ -7,12 +7,12 @@
<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 rel="icon" type="image/png" href="favicon2.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="FM-DX WebServer [<%= tunerName %>]">
<meta property="og:type" content="website">
<meta property="og:image" content="favicon2.png">
<meta property="og:image" content="favicon.png">
<meta property="og:description" content="Server description: <%= tunerDescMeta %>.">
<script src="js/init.js"></script>
@@ -26,22 +26,9 @@
<script src="js/3las/fallback/formats/3las.formatreader.wav.js"></script>
<script src="js/3las/util/3las.websocketclient.js"></script>
<script src="js/3las/fallback/3las.fallback.js"></script>
<script src="js/3las/3las.webrtc.js"></script>
<script src="js/3las/3las.js"></script>
<script src="js/3las/main.js"></script>
<script type="text/javascript">
var RtcConfig = {
iceServers: [
{
urls: "turns:turnserver.example.org",
},
{
urls: "stun.l.google.com:19302"
}
]
};
var AudioTagId = "audioTag";
window.addEventListener('load', Init, false);
document.ontouchmove = function(e){
e.preventDefault();
@@ -49,7 +36,6 @@
</script>
</head>
<body>
<audio id="audioTag"></audio>
<div id="wrapper">
<div class="panel-100 no-bg tuner-info">
<h1 id="tuner-name"><%= tunerName %>
@@ -169,7 +155,7 @@
<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;">
<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>
<% } %>
@@ -442,10 +428,10 @@
</div>
</div>
<div class="modal-panel-content">
<div class="hover-brighten br-0" style="height: 50px;padding:12px;" onclick="window.open('https://buymeacoffee.com/noobish')">
<div class="hover-brighten br-0 bg-color-1" style="height: 50px;padding:12px;" onclick="window.open('https://buymeacoffee.com/noobish')">
<strong>Support</strong> the developer!
</div>
<div class="hover-brighten br-0" style="height: 50px;padding:12px;" onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
<div class="hover-brighten br-0 bg-color-1" style="height: 50px;padding:12px;" onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
Join our <strong>OpenRadio Discord</strong> community!
</div>
</div>
@@ -459,7 +445,7 @@
<input type="text" id="chat-nickname" name="chat-nickname" placeholder="Nickname">
<button class="br-0 w-100 top-10" style="height: 44px" id="chat-nickname-save">Save</button>
<p style="margin: 5px;">
Current identity: <span style="color: lime;" id="chat-admin"></span> <strong id="chat-identity-nickname">Anonymous User</strong>
Current identity: <span style="color: #bada55;" id="chat-admin"></span> <strong id="chat-identity-nickname">Anonymous User</strong>
</p>
</div>

66
web/js/3las/3las.js
View File

@@ -2,7 +2,6 @@ var _3LAS_Settings = /** @class */ (function () {
function _3LAS_Settings() {
this.SocketHost = document.location.hostname ? document.location.hostname : "127.0.0.1";
this.SocketPath = "/";
this.WebRTC = new WebRTC_Settings();
this.Fallback = new Fallback_Settings();
}
return _3LAS_Settings;
@@ -14,24 +13,16 @@ var _3LAS = /** @class */ (function () {
this.Logger = new Logging(null, null);
}
this.Settings = settings;
try {
this.WebRTC = new WebRTC(this.Logger, this.Settings.WebRTC);
this.WebRTC.ActivityCallback = this.OnActivity.bind(this);
this.WebRTC.DisconnectCallback = this.OnSocketDisconnect.bind(this);
this.Fallback = new Fallback(this.Logger, this.Settings.Fallback);
this.Fallback.ActivityCallback = this.OnActivity.bind(this);
}
catch (_a) {
this.WebRTC = null;
catch (_b) {
this.Fallback = null;
}
if (this.WebRTC == null || this.WebRTC !== null) {
try {
this.Fallback = new Fallback(this.Logger, this.Settings.Fallback);
this.Fallback.ActivityCallback = this.OnActivity.bind(this);
}
catch (_b) {
this.Fallback = null;
}
}
if (this.WebRTC == null && this.Fallback == null) {
if (this.Fallback == null) {
this.Logger.Log('3LAS: Browser does not support either media handling methods.');
throw new Error();
}
@@ -41,31 +32,20 @@ var _3LAS = /** @class */ (function () {
}
Object.defineProperty(_3LAS.prototype, "Volume", {
get: function () {
if (this.WebRTC)
return this.WebRTC.Volume;
else
return this.Fallback.Volume;
},
set: function (value) {
if (this.WebRTC)
this.WebRTC.Volume = value;
else
this.Fallback.Volume = value;
},
enumerable: false,
configurable: true
});
_3LAS.prototype.CanChangeVolume = function () {
if (this.WebRTC)
return this.WebRTC.CanChangeVolume();
else
return true;
};
_3LAS.prototype.Start = function () {
this.ConnectivityFlag = false;
// This is stupid, but required for iOS/iPadOS... thanks Apple :(
if (this.Settings && this.Settings.WebRTC && this.Settings.WebRTC.AudioTag)
this.Settings.WebRTC.AudioTag.play();
// This is stupid, but required for Android.... thanks Google :(
if (this.WakeLock)
this.WakeLock.Begin();
@@ -100,14 +80,6 @@ var _3LAS = /** @class */ (function () {
this.Logger.Log("WakeLock stopped.");
}
// Reset WebRTC if it exists
if (this.WebRTC) {
this.WebRTC.OnSocketDisconnect();
this.WebRTC.Reset();
this.WebRTC.Stop();
this.Logger.Log("WebRTC reset.");
}
// Reset Fallback if it exists
if (this.Fallback) {
this.Fallback.OnSocketDisconnect();
@@ -141,31 +113,16 @@ var _3LAS = /** @class */ (function () {
// Callback function from socket connection
_3LAS.prototype.OnSocketError = function (message) {
this.Logger.Log("Network error: " + message);
if (this.WebRTC)
this.WebRTC.OnSocketError(message);
else
this.Fallback.OnSocketError(message);
this.Fallback.OnSocketError(message);
};
_3LAS.prototype.OnSocketConnect = function () {
this.Logger.Log("Established connection with server.");
if (this.WebRTC)
this.WebRTC.OnSocketConnect();
else
this.Fallback.OnSocketConnect();
if (this.WebRTC)
this.WebRTC.Init(this.WebSocket);
else
this.Fallback.Init(this.WebSocket);
};
_3LAS.prototype.OnSocketDisconnect = function () {
this.Logger.Log("Lost connection to server.");
if (this.WebRTC)
this.WebRTC.OnSocketDisconnect();
else
this.Fallback.OnSocketDisconnect();
if (this.WebRTC)
this.WebRTC.Reset();
else
this.Fallback.Reset();
if (this.ConnectivityFlag) {
this.ConnectivityFlag = false;
@@ -175,10 +132,7 @@ var _3LAS = /** @class */ (function () {
this.Start();
};
_3LAS.prototype.OnSocketDataReady = function (data) {
if (this.WebRTC)
this.WebRTC.OnSocketDataReady(data);
else
this.Fallback.OnSocketDataReady(data);
this.Fallback.OnSocketDataReady(data);
};
return _3LAS;
}());

177
web/js/3las/3las.webrtc.js
View File

@@ -1,177 +0,0 @@
/*
RTC live audio is part of 3LAS (Low Latency Live Audio Streaming)
https://github.com/JoJoBond/3LAS
*/
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var WebRTC_Settings = /** @class */ (function () {
function WebRTC_Settings() {
}
return WebRTC_Settings;
}());
var WebRTC = /** @class */ (function () {
function WebRTC(logger, settings) {
this.Logger = logger;
if (!this.Logger) {
this.Logger = new Logging(null, null);
}
this.AudioTag = settings.AudioTag;
// Create RTC peer connection
if (typeof RTCPeerConnection !== "undefined")
this.RtcPeer = new RTCPeerConnection(settings.RtcConfig);
else if (typeof webkitRTCPeerConnection !== "undefined")
this.RtcPeer = new webkitRTCPeerConnection(settings.RtcConfig);
else if (typeof mozRTCPeerConnection !== "undefined")
this.RtcPeer = new mozRTCPeerConnection(settings.RtcConfig);
else {
this.Logger.Log('3LAS: Browser does not support "WebRTC".');
throw new Error();
}
this.Logger.Log("Using WebRTC");
this.RtcPeer.addTransceiver('audio');
this.RtcPeer.ontrack = this.OnTrack.bind(this);
this.RtcPeer.oniceconnectionstatechange = this.OnConnectionStateChange.bind(this);
}
Object.defineProperty(WebRTC.prototype, "Volume", {
get: function () {
if (!this.CanChangeVolume()) {
if (this.AudioTag.muted == true)
return 0.0;
else
return 1.0;
}
return this.AudioTag.volume;
},
set: function (value) {
if (!this.CanChangeVolume()) {
if (value <= 0.0)
this.AudioTag.muted = true;
else
this.AudioTag.muted = false;
return;
}
this.AudioTag.volume = value;
},
enumerable: false,
configurable: true
});
WebRTC.prototype.CanChangeVolume = function () {
return !(isIOS || isIPadOS);
};
WebRTC.prototype.Init = function (webSocket) {
this.WebSocket = webSocket;
this.WebSocket.Send(JSON.stringify({
"type": "webrtc",
"data": null
}));
this.ActivityTimer = setInterval(this.OnActivityTimerTick.bind(this), 1000);
};
WebRTC.prototype.OnActivityTimerTick = function () {
if ((this.RtcPeer.iceConnectionState == "connected" || this.RtcPeer.iceConnectionState == "completed") && this.ActivityCallback)
this.ActivityCallback();
};
WebRTC.prototype.OnConnectionStateChange = function () {
if ((this.RtcPeer.iceConnectionState == "closed" ||
this.RtcPeer.iceConnectionState == "disconnected" ||
this.RtcPeer.iceConnectionState == "failed") && this.DisconnectCallback)
this.DisconnectCallback();
};
WebRTC.prototype.OnTrack = function (event) {
if (event.streams != null && event.streams.length > 0)
this.AudioTag.srcObject = event.streams[0];
else if (event.track != null)
this.AudioTag.srcObject = new MediaStream([event.track]);
this.AudioTag.play();
};
WebRTC.prototype.OnSocketError = function (message) {
};
WebRTC.prototype.OnSocketConnect = function () {
};
WebRTC.prototype.OnSocketDisconnect = function () {
};
WebRTC.prototype.Reset = function () {
if (this.ActivityTimer) {
clearInterval(this.ActivityTimer);
this.ActivityTimer = 0;
}
if (this.RtcPeer) {
this.RtcPeer.close();
delete this.RtcPeer;
this.RtcPeer = null;
}
this.WebSocket = null;
};
WebRTC.prototype.OnSocketDataReady = function (data) {
return __awaiter(this, void 0, void 0, function () {
var message, answer;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
message = JSON.parse(data.toString());
if (!(message.type == "offer")) return [3 /*break*/, 4];
return [4 /*yield*/, this.RtcPeer.setRemoteDescription(new RTCSessionDescription(message.data))];
case 1:
_a.sent();
return [4 /*yield*/, this.RtcPeer.createAnswer()];
case 2:
answer = _a.sent();
return [4 /*yield*/, this.RtcPeer.setLocalDescription(new RTCSessionDescription(answer))];
case 3:
_a.sent();
this.WebSocket.Send(JSON.stringify({
"type": "answer",
"data": answer
}));
return [3 /*break*/, 5];
case 4:
if (message.type == "candidate") {
(function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.RtcPeer.addIceCandidate(message.data)];
case 1: return [2 /*return*/, _a.sent()];
}
}); }); })();
}
_a.label = 5;
case 5: return [2 /*return*/];
}
});
});
};
return WebRTC;
}());

51
web/js/3las/main.js
View File

@@ -1,57 +1,42 @@
var Stream;
var DefaultVolume = 0.5;
const DefaultVolume = 0.5;
let Stream;
function Init(_ev) {
// Load default settings
var settings = new _3LAS_Settings();
if (typeof RtcConfig == 'undefined')
RtcConfig = {};
settings.WebRTC.RtcConfig = RtcConfig;
if (typeof SocketPort != 'undefined')
settings.SocketPort = SocketPort;
if (typeof SocketPath != 'undefined')
settings.SocketPath = SocketPath;
if (typeof AudioTagId == 'undefined')
settings.WebRTC.AudioTag = null;
else
settings.WebRTC.AudioTag = document.getElementById(AudioTagId);
try {
const settings = new _3LAS_Settings();
Stream = new _3LAS(null, settings);
}
catch (_ex) {
console.log(_ex);
} catch (error) {
console.log(error);
return;
}
Stream.ConnectivityCallback = OnConnectivityCallback;
$(".playbutton").on('click', OnPlayButtonClick);
$("#volumeSlider").on("change", updateVolume);
$("#volumeSlider").on("input", updateVolume);
}
function OnConnectivityCallback(isConnected) {
if (isConnected) {
Stream.Volume = 1.0;
}
Stream.Volume = isConnected ? 1.0 : DefaultVolume;
}
function OnPlayButtonClick(_ev) {
try {
if (Stream.ConnectivityFlag) {
Stream.Stop();
$('.playbutton').find('.fa-solid').removeClass('fa-pause').addClass('fa-play');
} else {
Stream.Start();
$('.playbutton').find('.fa-solid').removeClass('fa-play').addClass('fa-stop');
$('.playbutton').addClass('bg-gray');
$('.playbutton').prop('disabled', true);
setTimeout(function() {
$('.playbutton').removeClass('bg-gray');
$('.playbutton').prop('disabled', false);
const $playbutton = $('.playbutton');
$playbutton.find('.fa-solid').toggleClass('fa-play fa-stop');
$playbutton.addClass('bg-gray').prop('disabled', true);
setTimeout(() => {
$playbutton.removeClass('bg-gray').prop('disabled', false);
}, 3000);
}
}
catch (_ex) {
} catch (error) {
console.error(error);
}
}
function updateVolume() {
Stream.Volume = $(this).val();
}
}

155
web/js/chat.js
View File

@@ -1,105 +1,88 @@
var chatUrl = new URL('chat', window.location.href);
chatUrl.protocol = chatUrl.protocol.replace('http', 'ws');
var chatSocketAddress = chatUrl.href;
var chatSocket = new WebSocket(chatSocketAddress);
let chatMessageCount = 0;
$(document).ready(function() {
chatSocket.onopen = function() {
};
const chatSocket = new WebSocket(`ws://${window.location.host}/chat`);
let chatMessageCount = 0;
const chatMessages = $('#chat-chatbox');
const chatMessagesCount = $('.chat-messages-count');
const chatButton = $('.chatbutton');
const chatSendInput = $('#chat-send-message');
const chatIdentityNickname = $('#chat-identity-nickname');
const chatNicknameInput = $('#chat-nickname');
const chatNicknameSave = $('#chat-nickname-save');
chatSocket.onmessage = function(event) {
var messages = $('#chat-chatbox');
let messageData = JSON.parse(event.data); // Parse event.data to access its properties
let isAdmin = messageData.admin ? '<span style="color: lime">[ADMIN]</span>' : ''; // Add '[ADMIN] ' if messageData.admin is true, otherwise empty string
// Check if the message type is 'clientIp'
if (messageData.type === 'clientIp') {
// Fill the client IP into the element with ID #chat-ip
$('#chat-admin').html(isAdmin);
$('#chat-identity-nickname').attr('title', messageData.ip)
} else {
let chatMessage = `
<span class="color-2">[${messageData.time}]</span>
${isAdmin} <strong class="color-5" title="IP Address: ${messageData.ip}">${messageData.nickname}</strong>: <span style="color: var(--color-text-2);">${$('<div/>').text(messageData.message).html()}</span><br>
`;
const messageData = JSON.parse(event.data);
const isAdmin = messageData.admin ? '<span style="color: lime">[ADMIN]</span>' : '';
messages.append(chatMessage);
if($('#chat-chatbox').is(':visible')) {
setTimeout(function() {
$('#chat-chatbox').scrollTop($('#chat-chatbox')[0].scrollHeight);
}, 100)
if (messageData.type === 'clientIp') {
chatIdentityNickname.html(isAdmin + " " + savedNickname.length > 0 ? savedNickname : 'Anonymous User');
chatIdentityNickname.attr('title', messageData.ip);
} else {
if(messageData.history !== true) {
chatMessageCount++;
$('.chat-messages-count').text(chatMessageCount);
$('.chatbutton').removeClass('bg-color-2').addClass('bg-color-4');
const chatMessage = `
<span class="color-2">[${messageData.time}]</span>
${isAdmin} <strong class="color-5" title="IP Address: ${messageData.ip}">${messageData.nickname}</strong>:
<span style="color: var(--color-text-2);">${$('<div/>').text(messageData.message).html()}</span><br>
`;
chatMessages.append(chatMessage);
if (chatMessages.is(':visible')) {
setTimeout(function() {
chatMessages.scrollTop(chatMessages[0].scrollHeight);
}, 100);
} else {
if (!messageData.history) {
chatMessageCount++;
chatMessagesCount.text(chatMessageCount);
chatButton.removeClass('bg-color-2').addClass('bg-color-4');
}
}
}
}
};
};
$('.chat-send-message-btn').click(function() {
sendMessage();
$('.chat-send-message-btn').click(sendMessage);
chatNicknameSave.click(function() {
const currentNickname = chatNicknameInput.val();
localStorage.setItem('nickname', currentNickname);
chatIdentityNickname.text(currentNickname.length > 0 ? currentNickname : 'Anonymous User');
chatNicknameInput.blur();
});
chatButton.click(function() {
chatMessageCount = 0;
chatMessagesCount.text(chatMessageCount);
chatButton.removeClass('bg-color-4').addClass('bg-color-2');
chatSendInput.focus();
setTimeout(function() {
chatMessages.scrollTop(chatMessages[0].scrollHeight);
}, 100);
});
$('#chat-nickname-save').click(function() {
let currentNickname = $('#chat-nickname').val();
localStorage.setItem('nickname', currentNickname);
$('#chat-identity-nickname').text(localStorage.getItem('nickname'));
$('#chat-nickname').blur();
chatNicknameInput.keypress(function(event) {
if (event.which === 13) {
chatNicknameSave.trigger('click');
}
});
$('.chatbutton').click(function() {
chatMessageCount = 0;
$('.chat-messages-count').text(chatMessageCount);
$('.chatbutton').removeClass('bg-color-4').addClass('bg-color-2');
$('#chat-send-message').focus();
setTimeout(function() {
$('#chat-chatbox').scrollTop($('#chat-chatbox')[0].scrollHeight);
}, 100)
chatSendInput.keypress(function(event) {
if (event.which === 13) {
sendMessage();
}
});
$('#chat-nickname').keypress(function(event) {
if (event.which == 13) { // 13 is the keycode for Enter key
$('#chat-nickname-save').trigger('click');
}
});
$('#chat-send-message').keypress(function(event) {
if (event.which == 13) { // 13 is the keycode for Enter key
sendMessage();
}
});
if(localStorage.getItem('nickname')) {
$('#chat-nickname').val(localStorage.getItem('nickname'));
$('#chat-identity-nickname').text(localStorage.getItem('nickname'));
// Load nickname from localStorage on page load
const savedNickname = localStorage.getItem('nickname');
if (savedNickname) {
chatNicknameInput.val(savedNickname);
}
});
function sendMessage() {
var input = $('#chat-send-message');
var nickname = localStorage.getItem('nickname');
if (nickname && nickname.length > 1) {
// Only assign the nickname if it exists in localStorage and is longer than one character
nickname = nickname;
} else {
// Otherwise, use the default nickname
nickname = 'Anonymous user';
}
if (input.val().trim() !== '') {
var messageData = {
nickname: nickname,
message: input.val()
};
const nickname = chatNicknameInput.val().trim() || 'Anonymous user';
const message = chatSendInput.val().trim();
if (message) {
const messageData = { nickname, message };
chatSocket.send(JSON.stringify(messageData));
input.val('');
}
}
chatSendInput.val('');
}
}

2
web/js/dropdown.js
View File

@@ -52,7 +52,5 @@ const closeDropdownFromOutside = (event) => {
// Event Listeners
$(document).on('click', closeDropdownFromOutside);
$listOfOptions.on('click', selectOption);
$dropdowns.on('click', toggleDropdown);

7
web/js/init.js
View File

@@ -1,3 +1,10 @@
var currentDate = new Date('March 25, 2024 23: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.1.8 [' + formattedDate + ']';
getInitialSettings();
function getInitialSettings() {

1
web/js/main.js
View File

@@ -139,7 +139,6 @@ $(document).ready(function () {
var piCodeContainer = $('#pi-code-container')[0];
var freqContainer = $('#freq-container')[0];
var txContainer = $('#data-station-container')[0];
var stereoContainer = $('#stereo-container')[0];
$("#data-eq").click(function () {
toggleButtonState("eq");

61
web/js/modal.js
View File

@@ -3,54 +3,49 @@ $(document).ready(function() {
var modal = $("#myModal");
var modalPanel = $(".modal-panel");
var chatPanel = $(".modal-panel-chat");
var chatOpenBtn = $(".chatbutton");
var openBtn = $("#settings");
var closeBtn = $(".closeModal, .closeModalButton");
// Function to open the modal
function openModal() {
function openModal(panel) {
modal.css("display", "block");
modalPanel.css("display", "block");
panel.css("display", "block");
setTimeout(function() {
modal.css("opacity", 1);
}, 10);
}
function openChat() {
modal.css("display", "block");
chatPanel.css("display", "block");
// Function to close the modal
function closeModal() {
modal.css("opacity", 0);
setTimeout(function() {
modal.css("opacity", 1);
}, 10);
modal.css("display", "none");
modalPanel.add(chatPanel).css("display", "none");
}, 300);
}
// Event listeners for the open and close buttons
openBtn.on("click", function() {
openModal(modalPanel);
});
// Function to close the modal
function closeModal() {
modal.css("opacity", 0);
setTimeout(function() {
modal.css("display", "none");
modalPanel.css("display", "none");
chatPanel.css("display", "none");
}, 300);
}
$(".chatbutton").on("click", function() {
openModal(chatPanel);
});
// Event listeners for the open and close buttons
openBtn.on("click", openModal);
chatOpenBtn.on("click", openChat);
closeBtn.on("click", closeModal);
closeBtn.on("click", closeModal);
// Close the modal when clicking outside of it
$(document).on("click", function(event) {
if ($(event.target).is(modal)) {
closeModal();
}
});
// Close the modal when clicking outside of it
$(document).on("click", function(event) {
if ($(event.target).is(modal)) {
closeModal();
}
});
// Close the modal when pressing ESC key
$(document).on("keydown", function(event) {
if (event.key === "Escape") {
closeModal();
}
});
// Close the modal when pressing ESC key
$(document).on("keydown", function(event) {
if (event.key === "Escape") {
closeModal();
}
});
});

350
web/js/settings.js
View File

@@ -1,189 +1,181 @@
var currentDate = new Date('March 24, 2024 19: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.1.7 [' + formattedDate + ']';
/**
* Themes
* @param first color
* @param second color
* @param text color
*/
const themes = {
theme1: ['rgba(32, 34, 40, 1)', 'rgba(88, 219, 171, 1)', 'rgba(255, 255, 255, 1)' ], // Retro (Default)
theme2: [ 'rgba(21, 32, 33, 1)', 'rgba(203, 202, 165, 1)', 'rgba(255, 255, 255, 1)' ], // Cappuccino
theme3: [ 'rgba(18, 18, 12, 1)', 'rgba(169, 255, 112, 1)', 'rgba(255, 255, 255, 1)' ], // Nature
theme4: [ 'rgba(12, 28, 27, 1)', 'rgba(104, 247, 238, 1)', 'rgba(255, 255, 255, 1)' ], // Ocean
theme5: [ 'rgba(23, 17, 6, 1)', 'rgba(245, 182, 66, 1)', 'rgba(255, 255, 255, 1)' ], // Terminal
theme6: [ 'rgba(33, 9, 29, 1)', 'rgba(250, 82, 141, 1)', 'rgba(255, 255, 255, 1)' ], // Nightlife
theme7: [ 'rgba(13, 11, 26, 1)', 'rgba(128, 105, 250, 1)', 'rgba(255, 255, 255, 1)' ], // Blurple
theme8: [ 'rgba(252, 186, 3, 1)', 'rgba(0, 0, 0, 1)', 'rgba(0, 0, 0, 1)' ], // Construction
theme9: [ 'rgba(0, 0, 0, 1)', 'rgba(204, 204, 204, 1)', 'rgba(255, 255, 255, 1)' ], // AMOLED
};
// Signal Units
const signalUnits = {
dbf: ['dBf'],
dbuv: ['dBµV'],
dbm: ['dBm'],
};
$(document).ready(() => {
// Theme Selector
const themeSelector = $('#theme-selector');
const savedTheme = localStorage.getItem('theme');
const defaultTheme = localStorage.getItem('defaultTheme');
const savedUnit = localStorage.getItem('signalUnit');
/**
* Themes
* @param first color
* @param second color
* @param text color
*/
const themes = {
theme1: ['rgba(32, 34, 40, 1)', 'rgba(88, 219, 171, 1)', 'rgba(255, 255, 255, 1)' ], // Retro (Default)
theme2: [ 'rgba(21, 32, 33, 1)', 'rgba(203, 202, 165, 1)', 'rgba(255, 255, 255, 1)' ], // Cappuccino
theme3: [ 'rgba(18, 18, 12, 1)', 'rgba(169, 255, 112, 1)', 'rgba(255, 255, 255, 1)' ], // Nature
theme4: [ 'rgba(12, 28, 27, 1)', 'rgba(104, 247, 238, 1)', 'rgba(255, 255, 255, 1)' ], // Ocean
theme5: [ 'rgba(23, 17, 6, 1)', 'rgba(245, 182, 66, 1)', 'rgba(255, 255, 255, 1)' ], // Terminal
theme6: [ 'rgba(33, 9, 29, 1)', 'rgba(250, 82, 141, 1)', 'rgba(255, 255, 255, 1)' ], // Nightlife
theme7: [ 'rgba(13, 11, 26, 1)', 'rgba(128, 105, 250, 1)', 'rgba(255, 255, 255, 1)' ], // Blurple
theme8: [ 'rgba(252, 186, 3, 1)', 'rgba(0, 0, 0, 1)', 'rgba(0, 0, 0, 1)' ], // Construction
theme9: [ 'rgba(0, 0, 0, 1)', 'rgba(204, 204, 204, 1)', 'rgba(255, 255, 255, 1)' ], // AMOLED
};
if(defaultTheme && themes[defaultTheme]) {
setTheme(defaultTheme);
}
// Signal Units
const signalUnits = {
dbf: ['dBf'],
dbuv: ['dBµV'],
dbm: ['dBm'],
};
if (savedTheme && themes[savedTheme]) {
setTheme(savedTheme);
themeSelector.find('input').val(themeSelector.find('.option[data-value="' + savedTheme + '"]').text());
}
$(document).ready(() => {
// Theme Selector
const themeSelector = $('#theme-selector');
const savedTheme = localStorage.getItem('theme');
const defaultTheme = localStorage.getItem('defaultTheme');
const savedUnit = localStorage.getItem('signalUnit');
if(defaultTheme && themes[defaultTheme]) {
setTheme(defaultTheme);
}
if (savedTheme && themes[savedTheme]) {
setTheme(savedTheme);
themeSelector.find('input').val(themeSelector.find('.option[data-value="' + savedTheme + '"]').text());
}
themeSelector.on('click', '.option', (event) => {
const selectedTheme = $(event.target).data('value');
setTheme(selectedTheme);
themeSelector.find('input').val($(event.target).text()); // Set the text of the clicked option to the input
localStorage.setItem('theme', selectedTheme);
setBg();
});
// Signal Selector
const signalSelector = $('#signal-selector');
if (localStorage.getItem('signalUnit')) {
signalSelector.find('input').val(signalSelector.find('.option[data-value="' + savedUnit + '"]').text());
}
signalSelector.on('click', '.option', (event) => {
const selectedSignalUnit = $(event.target).data('value');
signalSelector.find('input').val($(event.target).text()); // Set the text of the clicked option to the input
localStorage.setItem('signalUnit', selectedSignalUnit);
});
$('#login-form').submit(function (event) {
event.preventDefault();
// Perform an AJAX request to the /login endpoint
$.ajax({
type: 'POST',
url: './login',
data: $(this).serialize(),
success: function (data) {
// Update the content on the page with the message from the response
$('#login-message').text(data.message);
setTimeout(function () {
location.reload(true);
}, 1750);
},
error: function (xhr, status, error) {
// 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);
} else {
// Handle other types of errors if needed
console.error('Error:', status, error);
}
}
});
});
// Assuming you have an anchor tag with id 'logout-link'
$('.logout-link').click(function (event) {
event.preventDefault();
// Perform an AJAX request to the /logout endpoint
$.ajax({
type: 'GET', // Assuming the logout is a GET request, adjust accordingly
url: './logout',
success: function (data) {
// Update the content on the page with the message from the response
$('#login-message').text(data.message);
setTimeout(function () {
location.reload(true);
}, 1750);
},
error: function (xhr, status, error) {
// 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);
} else {
// Handle other types of errors if needed
console.error('Error:', status, error);
}
}
});
});
var extendedFreqRange = localStorage.getItem("extendedFreqRange");
if (extendedFreqRange === "true") {
$("#extended-frequency-range").prop("checked", true);
}
// Save the value of the checkbox into local storage when its state changes
$("#extended-frequency-range").change(function() {
var isChecked = $(this).is(":checked");
localStorage.setItem("extendedFreqRange", isChecked);
});
var extendedFreqRange = localStorage.getItem("psUnderscores");
if (extendedFreqRange === "true") {
$("#ps-underscores").prop("checked", true);
}
var smoothSignal = localStorage.getItem("smoothSignal");
if (smoothSignal === "true") {
$("#smooth-signal").prop("checked", true);
}
// Save the value of the checkbox into local storage when its state changes
$("#ps-underscores").change(function() {
var isChecked = $(this).is(":checked");
localStorage.setItem("psUnderscores", isChecked);
});
$("#smooth-signal").change(function() {
var isChecked = $(this).is(":checked");
localStorage.setItem("smoothSignal", isChecked);
});
$('.version-string').text(currentVersion);
themeSelector.on('click', '.option', (event) => {
const selectedTheme = $(event.target).data('value');
setTheme(selectedTheme);
themeSelector.find('input').val($(event.target).text()); // Set the text of the clicked option to the input
localStorage.setItem('theme', selectedTheme);
setBg();
});
// Signal Selector
const signalSelector = $('#signal-selector');
function setTheme(themeName) {
const themeColors = themes[themeName];
if (themeColors) {
// Extracting the RGBA components and opacity value
const rgbaComponents = themeColors[2].match(/(\d+(\.\d+)?)/g);
const opacity = parseFloat(rgbaComponents[3]);
// Calculating 80% of the opacity
const newOpacity = opacity * 0.75;
// Constructing the new RGBA string with the adjusted opacity
const textColor2 = `rgba(${rgbaComponents[0]}, ${rgbaComponents[1]}, ${rgbaComponents[2]}, ${newOpacity})`;
$(':root').css('--color-main', themeColors[0]);
$(':root').css('--color-main-bright', themeColors[1]);
$(':root').css('--color-text', themeColors[2]);
$(':root').css('--color-text-2', textColor2);
}
if (localStorage.getItem('signalUnit')) {
signalSelector.find('input').val(signalSelector.find('.option[data-value="' + savedUnit + '"]').text());
}
function setBg() {
if(localStorage.getItem('bgImage').length > 1 && localStorage.getItem('theme') != 'theme8') {
$('body').css('background', 'url(' + localStorage.getItem('bgImage') + ') top center / cover fixed no-repeat var(--color-main)');
} else {
$('body').css('background', 'var(--color-main)');
}
}
signalSelector.on('click', '.option', (event) => {
const selectedSignalUnit = $(event.target).data('value');
signalSelector.find('input').val($(event.target).text()); // Set the text of the clicked option to the input
localStorage.setItem('signalUnit', selectedSignalUnit);
});
$('#login-form').submit(function (event) {
event.preventDefault();
// Perform an AJAX request to the /login endpoint
$.ajax({
type: 'POST',
url: './login',
data: $(this).serialize(),
success: function (data) {
// Update the content on the page with the message from the response
$('#login-message').text(data.message);
setTimeout(function () {
location.reload(true);
}, 1750);
},
error: function (xhr, status, error) {
// 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);
} else {
// Handle other types of errors if needed
console.error('Error:', status, error);
}
}
});
});
// Assuming you have an anchor tag with id 'logout-link'
$('.logout-link').click(function (event) {
event.preventDefault();
// Perform an AJAX request to the /logout endpoint
$.ajax({
type: 'GET', // Assuming the logout is a GET request, adjust accordingly
url: './logout',
success: function (data) {
// Update the content on the page with the message from the response
$('#login-message').text(data.message);
setTimeout(function () {
location.reload(true);
}, 1750);
},
error: function (xhr, status, error) {
// 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);
} else {
// Handle other types of errors if needed
console.error('Error:', status, error);
}
}
});
});
var extendedFreqRange = localStorage.getItem("extendedFreqRange");
if (extendedFreqRange === "true") {
$("#extended-frequency-range").prop("checked", true);
}
// Save the value of the checkbox into local storage when its state changes
$("#extended-frequency-range").change(function() {
var isChecked = $(this).is(":checked");
localStorage.setItem("extendedFreqRange", isChecked);
});
var extendedFreqRange = localStorage.getItem("psUnderscores");
if (extendedFreqRange === "true") {
$("#ps-underscores").prop("checked", true);
}
var smoothSignal = localStorage.getItem("smoothSignal");
if (smoothSignal === "true") {
$("#smooth-signal").prop("checked", true);
}
// Save the value of the checkbox into local storage when its state changes
$("#ps-underscores").change(function() {
var isChecked = $(this).is(":checked");
localStorage.setItem("psUnderscores", isChecked);
});
$("#smooth-signal").change(function() {
var isChecked = $(this).is(":checked");
localStorage.setItem("smoothSignal", isChecked);
});
$('.version-string').text(currentVersion);
setBg();
});
function setTheme(themeName) {
const themeColors = themes[themeName];
if (themeColors) {
// Extracting the RGBA components and opacity value
const rgbaComponents = themeColors[2].match(/(\d+(\.\d+)?)/g);
const opacity = parseFloat(rgbaComponents[3]);
// Calculating 80% of the opacity
const newOpacity = opacity * 0.75;
// Constructing the new RGBA string with the adjusted opacity
const textColor2 = `rgba(${rgbaComponents[0]}, ${rgbaComponents[1]}, ${rgbaComponents[2]}, ${newOpacity})`;
$(':root').css('--color-main', themeColors[0]);
$(':root').css('--color-main-bright', themeColors[1]);
$(':root').css('--color-text', themeColors[2]);
$(':root').css('--color-text-2', textColor2);
}
}
function setBg() {
if(localStorage.getItem('bgImage').length > 1 && localStorage.getItem('theme') != 'theme8') {
$('body').css('background', 'url(' + localStorage.getItem('bgImage') + ') top center / cover fixed no-repeat var(--color-main)');
} else {
$('body').css('background', 'var(--color-main)');
}
}

2
web/setup.ejs
View File

@@ -8,7 +8,7 @@
<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="favicon2.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

2
web/wizard.ejs
View File

@@ -8,7 +8,7 @@
<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="favicon2.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>