From 7f483770f229c061206ac0f8bbf70aa78a931faf Mon Sep 17 00:00:00 2001 From: NoobishSVK Date: Mon, 25 Mar 2024 23:23:14 +0100 Subject: [PATCH] bugfixes, refactor, code removal --- package-lock.json | 41 +--- package.json | 7 +- server/index.js | 8 +- server/stream/3las.server.js | 95 +------- server/stream/index.js | 14 +- web/css/buttons.css | 12 +- web/css/helpers.css | 2 +- web/{favicon2.png => favicon.png} | Bin web/index.ejs | 26 +-- web/js/3las/3las.js | 66 +----- web/js/3las/3las.webrtc.js | 177 --------------- web/js/3las/main.js | 51 ++--- web/js/chat.js | 155 ++++++------- web/js/dropdown.js | 2 - web/js/init.js | 7 + web/js/main.js | 1 - web/js/modal.js | 61 +++--- web/js/settings.js | 350 +++++++++++++++--------------- web/setup.ejs | 2 +- web/wizard.ejs | 2 +- 20 files changed, 342 insertions(+), 737 deletions(-) rename web/{favicon2.png => favicon.png} (100%) delete mode 100644 web/js/3las/3las.webrtc.js diff --git a/package-lock.json b/package-lock.json index 5cae562..c1be744 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "fm-dx-webserver", - "version": "1.1.7", + "version": "1.1.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "fm-dx-webserver", - "version": "1.1.7", + "version": "1.1.8", "license": "ISC", "dependencies": { "@mapbox/node-pre-gyp": "1.0.11", @@ -14,14 +14,13 @@ "ejs": "3.1.9", "express": "4.18.3", "express-session": "1.18.0", - "ffmpeg-static": "^5.2.0", + "ffmpeg-static": "5.2.0", "http": "0.0.1-security", "http-proxy": "1.18.1", "https": "1.0.0", "koffi": "2.7.2", "net": "1.0.2", "serialport": "12.0.0", - "wrtc": "0.4.7", "ws": "8.14.2" } }, @@ -659,16 +658,6 @@ "node": ">=8" } }, - "node_modules/domexception": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz", - "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==", - "deprecated": "Use your platform's native DOMException instead", - "optional": true, - "dependencies": { - "webidl-conversions": "^4.0.2" - } - }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -1893,12 +1882,6 @@ "node": ">= 0.8" } }, - "node_modules/webidl-conversions": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", - "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==", - "optional": true - }, "node_modules/whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", @@ -1926,24 +1909,6 @@ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, - "node_modules/wrtc": { - "version": "0.4.7", - "resolved": "https://registry.npmjs.org/wrtc/-/wrtc-0.4.7.tgz", - "integrity": "sha512-P6Hn7VT4lfSH49HxLHcHhDq+aFf/jd9dPY7lDHeFhZ22N3858EKuwm2jmnlPzpsRGEPaoF6XwkcxY5SYnt4f/g==", - "bundleDependencies": [ - "node-pre-gyp" - ], - "hasInstallScript": true, - "dependencies": { - "node-pre-gyp": "^0.13.0" - }, - "engines": { - "node": "^8.11.2 || >=10.0.0" - }, - "optionalDependencies": { - "domexception": "^1.0.1" - } - }, "node_modules/ws": { "version": "8.14.2", "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz", diff --git a/package.json b/package.json index e76380a..662a11e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "fm-dx-webserver", - "version": "1.1.7", - "description": "", + "version": "1.1.8", + "description": "FM DX Webserver", "main": "index.js", "scripts": { "debug": "node index.js --debug", @@ -17,14 +17,13 @@ "ejs": "3.1.9", "express": "4.18.3", "express-session": "1.18.0", - "ffmpeg-static": "^5.2.0", + "ffmpeg-static": "5.2.0", "http": "0.0.1-security", "http-proxy": "1.18.1", "https": "1.0.0", "koffi": "2.7.2", "net": "1.0.2", "serialport": "12.0.0", - "wrtc": "0.4.7", "ws": "8.14.2" } } diff --git a/server/index.js b/server/index.js index 4b7740b..6b38518 100644 --- a/server/index.js +++ b/server/index.js @@ -34,7 +34,7 @@ console.log(`\x1b[32m |_| |_| |_| |____/_/\\_\\ \\_/\\_/ \\___|_.__/|___/\\___|_| \\_/ \\___|_| `); console.log('\x1b[0mFM-DX-Webserver', pjson.version); -console.log('\x1b[90m======================================================'); +console.log('\x1b[90m―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――'); // Start ffmpeg require('./stream/index'); @@ -83,7 +83,7 @@ function connectToSerial() { serialport.write('C0\n'); serialport.write('I0,0\n'); - if(serverConfig.defaultFreq) { + if(serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true) { serialport.write('T' + Math.round(serverConfig.defaultFreq * 1000) +'\n'); dataHandler.initialData.freq = Number(serverConfig.defaultFreq).toFixed(3); dataHandler.dataToSend.freq = Number(serverConfig.defaultFreq).toFixed(3); @@ -160,7 +160,9 @@ function connectToXdrd() { if (authFlags.authMsg && authFlags.firstClient) { client.write('x\n'); - client.write(serverConfig.defaultFreq ? 'T' + Math.round(serverConfig.defaultFreq * 1000) + '\n' : 'T87500\n'); + client.write(serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true ? 'T' + Math.round(serverConfig.defaultFreq * 1000) + '\n' : 'T87500\n'); + dataHandler.initialData.freq = serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true ? (serverConfig.defaultFreq).toFixed(3) : (87.5).toFixed(3); + dataHandler.dataToSend.freq = serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true ? (serverConfig.defaultFreq).toFixed(3) : (87.5).toFixed(3); client.write('A0\n'); client.write(serverConfig.audio.startupVolume ? 'Y' + (serverConfig.audio.startupVolume * 100).toFixed(0) + '\n' : 'Y100\n'); client.off('data', authDataHandler); diff --git a/server/stream/3las.server.js b/server/stream/3las.server.js index 5637ab2..e12bbef 100644 --- a/server/stream/3las.server.js +++ b/server/stream/3las.server.js @@ -39,54 +39,8 @@ Object.defineProperty(exports, "__esModule", { value: true }); const fs_1 = require("fs"); const child_process_1 = require("child_process"); const ws = __importStar(require("ws")); -const wrtc = require('wrtc'); const Settings = JSON.parse((0, fs_1.readFileSync)('server/stream/settings.json', 'utf-8')); const FFmpeg_command = ffmpegStaticPath; -class RtcProvider { - constructor() { - this.RtcDistributePeer = new wrtc.RTCPeerConnection(Settings.RtcConfig); - this.RtcDistributePeer.addTransceiver('audio'); - this.RtcDistributePeer.ontrack = this.OnTrack.bind(this); - this.RtcDistributePeer.onicecandidate = this.OnIceCandidate_Distribute.bind(this); - this.RtcSourcePeer = new wrtc.RTCPeerConnection(Settings.RtcConfig); - this.RtcSourceMediaSource = new wrtc.nonstandard.RTCAudioSource(); - this.RtcSourceTrack = this.RtcSourceMediaSource.createTrack(); - this.RtcSourcePeer.addTrack(this.RtcSourceTrack); - this.RtcSourcePeer.onicecandidate = this.OnIceCandidate_Source.bind(this); - this.Init(); - } - Init() { - return __awaiter(this, void 0, void 0, function* () { - let offer = yield this.RtcSourcePeer.createOffer(); - yield this.RtcSourcePeer.setLocalDescription(new wrtc.RTCSessionDescription(offer)); - yield this.RtcDistributePeer.setRemoteDescription(offer); - let answer = yield this.RtcDistributePeer.createAnswer(); - yield this.RtcDistributePeer.setLocalDescription(new wrtc.RTCSessionDescription(answer)); - yield this.RtcSourcePeer.setRemoteDescription(new wrtc.RTCSessionDescription(answer)); - }); - } - OnTrack(event) { - this.RtcDistributeTrack = event.track; - } - OnIceCandidate_Distribute(e) { - if (!e.candidate) - return; - (() => __awaiter(this, void 0, void 0, function* () { return yield this.RtcSourcePeer.addIceCandidate(e.candidate); }))(); - } - OnIceCandidate_Source(e) { - if (!e.candidate) - return; - (() => __awaiter(this, void 0, void 0, function* () { return yield this.RtcDistributePeer.addIceCandidate(e.candidate); }))(); - } - InsertMediaData(data) { - if (!this.RtcSourceMediaSource) - return; - this.RtcSourceMediaSource.onData(data); - } - GetTrack() { - return this.RtcDistributeTrack; - } -} class StreamClient { constructor(server, socket) { this.Server = server; @@ -102,10 +56,7 @@ class StreamClient { try { let request = JSON.parse(message.toString()); if (request.type == "answer") { - (() => __awaiter(this, void 0, void 0, function* () { return yield this.RtcPeer.setRemoteDescription(new wrtc.RTCSessionDescription(request.data)); }))(); - } - else if (request.type == "webrtc") { - this.Server.SetWebRtc(this); + } else if (request.type == "fallback") { this.Server.SetFallback(this, request.data); @@ -137,17 +88,6 @@ class StreamClient { } catch (ex) { } - if (this.RtcSender && this.RtcPeer) - this.RtcPeer.removeTrack(this.RtcSender); - if (this.RtcSender) - this.RtcSender = null; - if (this.RtcTrack) - this.RtcTrack = null; - if (this.RtcPeer) { - this.RtcPeer.close(); - delete this.RtcPeer; - this.RtcPeer = null; - } } SendBinary(buffer) { if (this.Socket.readyState != ws.OPEN) { @@ -163,28 +103,6 @@ class StreamClient { } this.Socket.send(text); } - StartRtc(track) { - return __awaiter(this, void 0, void 0, function* () { - this.RtcPeer = new wrtc.RTCPeerConnection(Settings.RtcConfig); - this.RtcTrack = track; - this.RtcSender = this.RtcPeer.addTrack(this.RtcTrack); - this.RtcPeer.onconnectionstatechange = this.OnConnectionStateChange.bind(this); - this.RtcPeer.onicecandidate = this.OnIceCandidate.bind(this); - let offer = yield this.RtcPeer.createOffer(); - yield this.RtcPeer.setLocalDescription(new wrtc.RTCSessionDescription(offer)); - this.SendText(JSON.stringify({ - "type": "offer", - "data": offer - })); - }); - } - OnConnectionStateChange(e) { - if (!this.RtcPeer) - return; - let state = this.RtcPeer.connectionState; - if (state != "new" && state != "connecting" && state != "connected") - this.OnError(null); - } OnIceCandidate(e) { if (e.candidate) { this.SendText(JSON.stringify({ @@ -199,9 +117,7 @@ class StreamServer { this.Port = port; this.Channels = channels; this.SampleRate = sampleRate; - this.RtcProvider = new RtcProvider(); this.Clients = new Set(); - this.RtcClients = new Set(); this.FallbackClients = { "wav": new Set(), "mp3": new Set() @@ -246,7 +162,6 @@ class StreamServer { "channelCount": this.Channels, "numberOfFrames": this.SamplesCount, }; - this.RtcProvider.InsertMediaData(data); this.Samples = new Int16Array(this.Channels * this.SamplesCount); this.SamplesPosition = 0; } @@ -266,30 +181,22 @@ class StreamServer { this.FallbackClients[format].add(client); this.FallbackProvider[format].PrimeClient(client); } - SetWebRtc(client) { - this.RtcClients.add(client); - client.StartRtc(this.RtcProvider.GetTrack()); - } DestroyClient(client) { this.FallbackClients["mp3"].delete(client); this.FallbackClients["wav"].delete(client); - this.RtcClients.delete(client); this.Clients.delete(client); client.Destroy(); } GetStats() { - let rtc = this.RtcClients.size; let fallback = { "wav": (this.FallbackClients["wav"] ? this.FallbackClients["wav"].size : 0), "mp3": (this.FallbackClients["mp3"] ? this.FallbackClients["mp3"].size : 0), }; - let total = rtc; for (let format in fallback) { total += fallback[format]; } return { "Total": total, - "Rtc": rtc, "Fallback": fallback, }; } diff --git a/server/stream/index.js b/server/stream/index.js index 6de5d4a..b5fbb64 100644 --- a/server/stream/index.js +++ b/server/stream/index.js @@ -8,7 +8,7 @@ function enableAudioStream() { var ffmpegParams; var ffmpegCommand; serverConfig.webserver.webserverPort = Number(serverConfig.webserver.webserverPort); -const ffmpegPath = "\"" + ffmpeg.replace(/\\/g, '\\\\') + "\""; + const flags = `-fflags +nobuffer+flush_packets -flags low_delay -rtbufsize 6192 -probesize 32`; const codec = `-acodec pcm_s16le -ar 48000 -ac ${serverConfig.audio.audioChannels}`; const output = `-f s16le -fflags +nobuffer+flush_packets -packetsize 384 -flush_packets 1 -bufsize 960`; @@ -23,11 +23,12 @@ const ffmpegPath = "\"" + ffmpeg.replace(/\\/g, '\\\\') + "\""; ffmpegParams = `${flags} -f alsa -i "${serverConfig.audio.softwareMode && serverConfig.audio.softwareMode == true ? 'plug' : ''}${serverConfig.audio.audioDevice}" ${codec} ${output} pipe:1 | node server/stream/3las.server.js -port ${serverConfig.webserver.webserverPort + 10} -samplerate 48000 -channels ${serverConfig.audio.audioChannels}`; } - consoleCmd.logInfo("Using audio device: " + serverConfig.audio.audioDevice); - consoleCmd.logInfo(`Launching audio stream on internal port ${serverConfig.webserver.webserverPort + 10}.`); + logInfo("Trying to start audio stream on device: \x1b[35m" + serverConfig.audio.audioDevice); + logInfo(`Using internal audio network port ${serverConfig.webserver.webserverPort + 10}.`); // If an audio device is configured, start the stream if(serverConfig.audio.audioDevice.length > 2) { + let startupSuccess = false; const childProcess = spawn(ffmpegCommand, [ffmpegParams], { shell: true }); childProcess.stdout.on('data', (data) => { @@ -36,6 +37,13 @@ const ffmpegPath = "\"" + ffmpeg.replace(/\\/g, '\\\\') + "\""; childProcess.stderr.on('data', (data) => { logFfmpeg(`stderr: ${data}`); + if(data.includes('I/O error')) { + logError('Audio device \x1b[35m' + serverConfig.audio.audioDevice + '\x1b[0m failed to start. Start server with the command \x1b[33mnode . --ffmpegdebug \x1b[0mfor more info.') + } + if(data.includes('size=') && startupSuccess === false) { + logInfo('Audio stream started up successfully.'); + startupSuccess = true; + } }); childProcess.on('close', (code) => { diff --git a/web/css/buttons.css b/web/css/buttons.css index abbdacc..23a20e3 100644 --- a/web/css/buttons.css +++ b/web/css/buttons.css @@ -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 */ diff --git a/web/css/helpers.css b/web/css/helpers.css index 3b62ea1..caa0ae3 100644 --- a/web/css/helpers.css +++ b/web/css/helpers.css @@ -217,7 +217,7 @@ .text-big { font-size: 40px; display: block; - margin-top: -25px; + margin-top: 0; } .text-big#data-ps { margin: 0; diff --git a/web/favicon2.png b/web/favicon.png similarity index 100% rename from web/favicon2.png rename to web/favicon.png diff --git a/web/index.ejs b/web/index.ejs index 22ab61f..cb2ad13 100644 --- a/web/index.ejs +++ b/web/index.ejs @@ -7,12 +7,12 @@ - + - + @@ -26,22 +26,9 @@ - -

<%= tunerName %> @@ -169,7 +155,7 @@ <% } else { %> - + <% } %> @@ -442,10 +428,10 @@

-
+
Support the developer!
-
+
Join our OpenRadio Discord community!
@@ -459,7 +445,7 @@

- Current identity: Anonymous User + Current identity: Anonymous User

diff --git a/web/js/3las/3las.js b/web/js/3las/3las.js index 022a5d4..3ec297f 100644 --- a/web/js/3las/3las.js +++ b/web/js/3las/3las.js @@ -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; }()); \ No newline at end of file diff --git a/web/js/3las/3las.webrtc.js b/web/js/3las/3las.webrtc.js deleted file mode 100644 index b84b327..0000000 --- a/web/js/3las/3las.webrtc.js +++ /dev/null @@ -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; -}()); \ No newline at end of file diff --git a/web/js/3las/main.js b/web/js/3las/main.js index 16ccf05..8d6ae5f 100644 --- a/web/js/3las/main.js +++ b/web/js/3las/main.js @@ -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(); -} \ No newline at end of file +} diff --git a/web/js/chat.js b/web/js/chat.js index 34e492a..80a79af 100644 --- a/web/js/chat.js +++ b/web/js/chat.js @@ -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 ? '[ADMIN]' : ''; // 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 = ` - [${messageData.time}] - ${isAdmin} ${messageData.nickname}: ${$('
').text(messageData.message).html()}
- `; + const messageData = JSON.parse(event.data); + const isAdmin = messageData.admin ? '[ADMIN]' : ''; - 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 = ` + [${messageData.time}] + ${isAdmin} ${messageData.nickname}: + ${$('
').text(messageData.message).html()}
+ `; + 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(''); - } - } \ No newline at end of file + chatSendInput.val(''); + } +} \ No newline at end of file diff --git a/web/js/dropdown.js b/web/js/dropdown.js index 8a98524..1632655 100644 --- a/web/js/dropdown.js +++ b/web/js/dropdown.js @@ -52,7 +52,5 @@ const closeDropdownFromOutside = (event) => { // Event Listeners $(document).on('click', closeDropdownFromOutside); - $listOfOptions.on('click', selectOption); - $dropdowns.on('click', toggleDropdown); diff --git a/web/js/init.js b/web/js/init.js index 888a7d0..9df432b 100644 --- a/web/js/init.js +++ b/web/js/init.js @@ -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() { diff --git a/web/js/main.js b/web/js/main.js index 6e666e5..2cdc34b 100644 --- a/web/js/main.js +++ b/web/js/main.js @@ -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"); diff --git a/web/js/modal.js b/web/js/modal.js index 953ac9f..2638635 100644 --- a/web/js/modal.js +++ b/web/js/modal.js @@ -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(); + } + }); }); \ No newline at end of file diff --git a/web/js/settings.js b/web/js/settings.js index 64f3dda..9778827 100644 --- a/web/js/settings.js +++ b/web/js/settings.js @@ -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)'); - } - } \ No newline at end of file + 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)'); + } +} \ No newline at end of file diff --git a/web/setup.ejs b/web/setup.ejs index 9935cbd..b04ac66 100644 --- a/web/setup.ejs +++ b/web/setup.ejs @@ -8,7 +8,7 @@ - + diff --git a/web/wizard.ejs b/web/wizard.ejs index a3baaeb..7c4bf85 100644 --- a/web/wizard.ejs +++ b/web/wizard.ejs @@ -8,7 +8,7 @@ - +