aboutsummaryrefslogtreecommitdiff
path: root/web/client.html
diff options
context:
space:
mode:
authorgammelalf <gammelalf@hopfen.space>2022-12-27 17:52:00 +0100
committerFlorian Fischer <florian.fischer@muhq.space>2023-02-24 12:47:40 +0100
commit1904fdcdbc6bbff4d931737ebcb6ca289c10879b (patch)
tree1816be1737d8b4f434d1f91e705b1c090a19b13d /web/client.html
parent1ca647ffd4f5170a3d8e732d515f6c1d2ec47c3a (diff)
downloadWRMS-1904fdcdbc6bbff4d931737ebcb6ca289c10879b.tar.gz
WRMS-1904fdcdbc6bbff4d931737ebcb6ca289c10879b.zip
Fixed IDE warnings
Including: - implicit type coersions in == - undeclared variables - let which could be const
Diffstat (limited to 'web/client.html')
-rw-r--r--web/client.html76
1 files changed, 33 insertions, 43 deletions
diff --git a/web/client.html b/web/client.html
index 87ca51a..34a5b54 100644
--- a/web/client.html
+++ b/web/client.html
@@ -1,29 +1,16 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WRMS</title>
<style>
- .vote {
- display: inline-block;
- cursor: pointer;
- color: #687074
- }
-
- .vote.on {
- color: #f48024
- }
-
- .searchResult:hover {
- background-color: #999;
- }
</style>
<script>
/*
- @licstart The following is the entire license notice for the
+ @licstart The following is the entire license notice for the
JavaScript code in this page.
Copyright (C) 2022 Florian Fischer
@@ -40,7 +27,7 @@
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
- through which recipients can access the Corresponding Source.
+ through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
@@ -49,25 +36,25 @@
</script>
<script>
- let HttpClient = function() {
+ const HttpClient = function() {
function newRequest(callback) {
- let request = new XMLHttpRequest();
- request.onreadystatechange = function() {
- if (request.readyState == 4 && request.status == 200)
+ const request = new XMLHttpRequest();
+ request.onreadystatechange = function() {
+ if (request.readyState === 4 && request.status === 200)
callback(request.responseText);
}
return request;
}
this.get = function(url, callback) {
- let request = newRequest(callback);
- request.open("GET", url, true);
+ const request = newRequest(callback);
+ request.open("GET", url, true);
request.send(null);
}
this.post = function(url, data, callback) {
- let request = newRequest(callback);
- request.open("POST", url, true);
+ const request = newRequest(callback);
+ request.open("POST", url, true);
request.send(data);
}
}
@@ -83,24 +70,24 @@
}
function renderPlaylist() {
- playlist = document.getElementById("playlist");
+ const playlist = document.getElementById("playlist");
playlist.innerHTML = "";
songs.sort(function(a, b) {return b.weight - a.weight});
for (const song of songs) {
- let listItem = document.createElement("li");
+ const listItem = document.createElement("li");
const btnHTML = "<svg width='36' height='36'><path d='M2 10h32L18 26 2 10z' fill='currentColor'></path></svg>";
- let upvoteBtn = document.createElement("span");
- let downvoteBtn = document.createElement("span");
+ const upvoteBtn = document.createElement("span");
+ const downvoteBtn = document.createElement("span");
upvoteBtn.innerHTML = downvoteBtn.innerHTML = btnHTML;
upvoteBtn.className = downvoteBtn.className = "vote";
upvoteBtn.style.transform = 'rotate(180deg)';
if (votes.has(song.uri)) {
- if (votes.get(song.uri) == "up")
+ if (votes.get(song.uri) === "up")
upvoteBtn.classList.toggle("on");
else
downvoteBtn.classList.toggle("on");
@@ -109,10 +96,10 @@
function onVote(event) {
const btn = event.currentTarget;
btn.classList.toggle("on");
- const isUpvoteBtn = btn == upvoteBtn;
+ const isUpvoteBtn = btn === upvoteBtn;
const isVote = btn.classList.contains("on");
- let url = "";
-
+
+ let url;
if (isVote) {
if (isUpvoteBtn) {
downvoteBtn.classList.remove("on")
@@ -159,7 +146,7 @@
function handleUpdate(updated) {
for (const updated_song of updated) {
- songs[songs.findIndex(function(s) {return s.uri == updated_song.uri})] = updated_song;
+ songs[songs.findIndex(function(s) {return s.uri === updated_song.uri})] = updated_song;
}
renderPlaylist();
}
@@ -176,9 +163,12 @@
function handlePlay(currentSong) {
document.getElementById("ppbutton").innerHTML = 'Pause';
- idx = -1;
- songs.forEach(function(s, i, a) { if (s.uri == currentSong.uri) idx = i; });
- if (idx != -1) {
+ let idx = -1;
+ songs.forEach(function(song, index) {
+ if (song.uri === currentSong.uri)
+ idx = index;
+ });
+ if (idx !== -1) {
songs.splice(idx, 1);
renderPlaylist();
}
@@ -190,13 +180,13 @@
playing.appendChild(songLabel);
}
- let socket = new WebSocket("ws://localhost:8080/ws");
+ const socket = new WebSocket("ws://localhost:8080/ws");
console.log("Attempting Connection...");
socket.onopen = () => {
console.log("Successfully Connected");
};
-
+
socket.onclose = event => {
console.log("Socket Closed Connection: ", event);
};
@@ -242,17 +232,17 @@
}
function showSearchResults(responseText) {
- response = JSON.parse(responseText)
+ const response = JSON.parse(responseText)
if (!response)
return
- let searchResultsOverlay = document.getElementById("searchResultsOverlay");
+ const searchResultsOverlay = document.getElementById("searchResultsOverlay");
- let searchResults = document.getElementById("searchResults");
+ const searchResults = document.getElementById("searchResults");
// Clear search Results
searchResults.innerHTML = "";
for (const song of response.songs) {
- let listItem = document.createElement("li");
+ const listItem = document.createElement("li");
listItem.addEventListener("click", function() {
addSong(song);
searchResultsOverlay.style.display = "none";
@@ -279,7 +269,7 @@
<h2>Add your song</h2>
<div id="add">
<form id="searchForm" onsubmit="return submitSearch()">
- <input id="searchInput" name="pattern" type="text" value="Title/Artist/Album/...">
+ <label><input id="searchInput" name="pattern" type="text" value="Title/Artist/Album/..."></label>
<button id="searchButton">Search</button>
</form>
</div>