Reimplemented current frontend in svelte

1 files changed, 0 insertions, 294 deletions

diff --git a/web/client.html b/web/client.html
deleted file mode 100644
index 2fbc4fd..0000000
--- a/web/client.html
+++ /dev/null
@@ -1,294 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>WRMS</title>
-
-    <script>
-      /*
-      @licstart  The following is the entire license notice for the
-      JavaScript code in this page.
-
-      Copyright (C) 2022  Florian Fischer
-
-      The JavaScript code in this page is free software: you can
-      redistribute it and/or modify it under the terms of the GNU
-      General Public License (GNU GPL) as published by the Free Software
-      Foundation, either version 3 of the License, or (at your option)
-      any later version.  The code is distributed WITHOUT ANY WARRANTY;
-      without even the implied warranty of MERCHANTABILITY or FITNESS
-      FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
-
-      As additional permission under GNU GPL version 3 section 7, you
-      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.
-
-
-      @licend  The above is the entire license notice
-      for the JavaScript code in this page.
-      */
-    </script>
-
-    <script>
-      let PLAY_PAUSE;
-
-      const HttpClient = function() {
-        function newRequest(callback) {
-          const request = new XMLHttpRequest();
-          request.onreadystatechange = function() {
-            if (request.readyState === 4 && request.status === 200)
-              callback(request.responseText);
-          }
-          return request;
-        }
-
-        this.get = function(url, callback) {
-          const request = newRequest(callback);
-          request.open("GET", url, true);
-          request.send(null);
-        }
-
-        this.post = function(url, data, callback) {
-          const request = newRequest(callback);
-          request.open("POST", url, true);
-          request.send(data);
-        }
-      }
-
-      let songs = [];
-      let playing = {};
-      let votes = new Map();
-
-      function formatSong(song) {
-        if (song.artist)
-          return song.artist + ' - ' + song.title
-        return song.title
-      }
-
-      function renderPlaylist() {
-        const playlist = document.getElementById("playlist");
-        playlist.innerHTML = "";
-
-        songs.sort(function(a, b) {return b.weight - a.weight});
-
-        for (const song of songs) {
-          const listItem = document.createElement("li");
-
-          const btnHTML = "<svg width='36' height='36'><path d='M2 10h32L18 26 2 10z' fill='currentColor'></path></svg>";
-          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")
-              upvoteBtn.classList.toggle("on");
-            else
-              downvoteBtn.classList.toggle("on");
-          }
-
-          function onVote(event) {
-            const btn = event.currentTarget;
-            btn.classList.toggle("on");
-            const isUpvoteBtn = btn === upvoteBtn;
-            const isVote = btn.classList.contains("on");
-
-            let url;
-            if (isVote) {
-              if (isUpvoteBtn) {
-                downvoteBtn.classList.remove("on")
-                votes.set(song.uri, "up")
-              } else {
-                upvoteBtn.classList.remove("on")
-                votes.set(song.uri, "down")
-              }
-
-              url = "/" + (isUpvoteBtn ? "up" : "down") + "?song=" + encodeURIComponent(song.uri);
-            } else {
-              votes.delete(song.uri);
-              url = "/unvote?song=" + encodeURIComponent(song.uri);
-            }
-
-            console.log("Get " + url);
-            new HttpClient().get(url, console.log);
-          }
-          upvoteBtn.addEventListener("click", onVote);
-          downvoteBtn.addEventListener("click", onVote);
-
-          listItem.appendChild(upvoteBtn);
-          listItem.appendChild(downvoteBtn);
-
-          listItem.appendChild(document.createTextNode(song.weight + ' ' + formatSong(song)));
-          const sourceLabel = document.createElement("SMALL");
-          sourceLabel.innerHTML = " (" + song.source + ")";
-          listItem.appendChild(sourceLabel);
-          playlist.appendChild(listItem);
-        }
-      }
-
-      function handleAdd(added) {
-        songs = songs.concat(added);
-        renderPlaylist();
-      }
-
-      function handleVotes(direction, votedSongs) {
-        for (const song of votedSongs) {
-          votes.set(song.uri, direction)
-        }
-        renderPlaylist();
-      }
-
-      function handleUpdate(updated) {
-        for (const updated_song of updated) {
-          songs[songs.findIndex(function(s) {return s.uri === updated_song.uri})] = updated_song;
-        }
-        renderPlaylist();
-      }
-
-      function handlePause() {
-        PLAY_PAUSE.classList.remove("pause");
-        PLAY_PAUSE.classList.add("play");
-      }
-
-      function handleStop() {
-        PLAY_PAUSE.classList.remove("pause");
-        PLAY_PAUSE.classList.add("play");
-        playing = document.getElementById("playing").innerHTML = "";
-      }
-
-      function handlePlay(currentSong) {
-        PLAY_PAUSE.classList.remove("play");
-        PLAY_PAUSE.classList.add("pause");
-
-        let idx = -1;
-        songs.forEach(function(song, index) {
-          if (song.uri === currentSong.uri)
-            idx = index;
-        });
-        if (idx !== -1) {
-          songs.splice(idx, 1);
-          renderPlaylist();
-        }
-
-        const songLabel = document.createTextNode(formatSong(currentSong));
-
-        playing = document.getElementById("playing");
-        playing.innerHTML = "";
-        playing.appendChild(songLabel);
-      }
-
-      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);
-      };
-
-      socket.onmessage = message => {
-        console.log("Socket Received Message: ", message);
-        const cmd = JSON.parse(message.data);
-        switch (cmd.cmd) {
-          case "add":
-            handleAdd(cmd.songs)
-            break;
-          case "update":
-            handleUpdate(cmd.songs)
-            break;
-          case "pause":
-            handlePause()
-            break;
-          case "play":
-            handlePlay(cmd.songs[0])
-            break;
-          case "upvoted":
-            handleVotes("up", cmd.songs)
-            break;
-          case "downvoted":
-            handleVotes("down", cmd.songs)
-            break;
-        }
-      };
-
-      socket.onerror = error => {
-        console.log("Socket Error: ", error);
-      };
-
-      function submitSearch() {
-        const form = new FormData(document.getElementById("searchForm"));
-        const pattern = new URLSearchParams(form).toString();
-        new HttpClient().get("/search?" + pattern, showSearchResults);
-        return false;
-      }
-
-      function addSong(song) {
-        new HttpClient().post("/add", JSON.stringify(song), console.log);
-      }
-
-      function showSearchResults(responseText) {
-        const response = JSON.parse(responseText)
-        if (!response)
-          return
-
-        const searchResults = document.getElementById("searchResults");
-
-        // Clear search Results
-        searchResults.innerHTML = "";
-
-        for (const song of response.songs) {
-          const listItem = document.createElement("div");
-          listItem.className = "flex-row";
-
-          listItem.innerHTML = "<button class='icon-button'><img src='static/add.svg' alt='Add'></button>" + formatSong(song) + " <small>(" + song.source + ")</small>";
-          listItem.querySelector("button").addEventListener("click", () => addSong(song));
-
-          searchResults.appendChild(listItem);
-        }
-      }
-
-      window.onload = function() {
-        PLAY_PAUSE = document.getElementById("play-pause");
-        PLAY_PAUSE.addEventListener("click", function() {
-          new HttpClient().get("/playpause", console.log);
-        });
-      }
-    </script>
-
-    <link rel="stylesheet" href="static/client.css">
-  </head>
-
-  <body>
-    <div class="flex-column">
-      <h2>Currently Playing</h2>
-      <p id='playing'>Nothing</p>
-      <div id='controls'>
-        <button id="play-pause" class="icon-button play">
-          <img src="static/play.svg" alt="Play">
-          <img src="static/pause.svg" alt="Pause">
-        </button>
-      </div>
-
-      <h2>Add your song</h2>
-      <div id="add">
-        <form id="searchForm" onsubmit="return submitSearch()">
-          <label><input id="searchInput" name="pattern" type="text" placeholder="Title/Artist/Album/..."></label>
-          <button id="searchButton">Search</button>
-        </form>
-      </div>
-
-      <div id="searchResults" class="flex-column">
-      </div>
-
-      <h2>Playlist</h2>
-      <ul id='playlist'></ul>
-    </div>
-  </body>
-</html>