diff options
Diffstat (limited to 'dist')
| -rw-r--r-- | dist/callback.html | 32 | ||||
| -rw-r--r-- | dist/landing.html | 91 |
2 files changed, 115 insertions, 8 deletions
diff --git a/dist/callback.html b/dist/callback.html index f212b5f..79ac83c 100644 --- a/dist/callback.html +++ b/dist/callback.html @@ -74,6 +74,7 @@ </div> <div class="main"> <h1>Spotify Intersect</h1> + <input type="text" id="username" placeholder="Username"> <button id="Connect_button" onclick="connect_button()">Connect to Spotify</button> <button id="Load_button" onclick="load_songs()" disabled=true>Load songs to database</button> <p id="status"></p> @@ -85,6 +86,11 @@ <p id="output"></p> </div> <script> + const host = "http://127.0.0.1:8000"; + const api = host + ""; + //const host = "https://kobert.dev"; + //const api = host + "/spotify-api"; + let lobby = null; function getParameterByName(name) { let url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); @@ -98,15 +104,27 @@ //http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript let token = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); sessionStorage.setItem('token', token); + sessionStorage.setItem('lobby', lobby); document.getElementById("Connect_button").disabled = true; - window.location = "https://kobert.dev/spotify-api/token/" + token; + window.location = api + "/token/" + token; } function populate_users() { - if (getParameterByName("code") != null) { + lobby = getParameterByName("lobby"); + if (!lobby) { + lobby = sessionStorage.getItem('lobby'); + } + let code = getParameterByName("code"); + if (code !== null) { document.getElementById("Connect_button").disabled = true; document.getElementById("Load_button").disabled = false; } - fetch("https://kobert.dev/spotify-api/user") + if (lobby === null) { + document.getElementById("status").innerHTML = `Error: this is no valid lobby, please create a lobby first`; + document.getElementById("Connect_button").disabled = true; + document.getElementById("Load_button").disabled = true; + return; + } + fetch(api + "/user/" + lobby) .then(function (response) { if (!response.ok) { document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`; @@ -116,15 +134,13 @@ document.getElementById("userlist").innerHTML = '<p>' + message.replace(/\n/g, '</p>\n<p>') + '</p>'; }); }); - } - function load_songs() { console.log("loading songs"); document.getElementById("status").innerHTML = "Loading songs"; document.getElementById("Load_button").disabled = true; let token = sessionStorage.getItem('token'); - fetch("https://kobert.dev/spotify-api/callback/" + token + "/" + getParameterByName("code")) + fetch(api + `/callback/${token}/${lobby}/` + getParameterByName("code")) .then(function (response) { if (!response.ok) { document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`; @@ -133,13 +149,13 @@ document.getElementById("status").innerHTML = "Loaded songs"; populate_users(); }); - //window.location = "https://kobert.dev/spotify-api/token/" + token; + //window.location = api + "/token/" + token; } function match_users() { let name1 = document.getElementById("name1").value; let name2 = document.getElementById("name2").value; - fetch("https://kobert.dev/spotify-api/match/" + name1 + "/" + name2) + fetch(api + `/match/${lobby}/${name1},${name2}`) .then(function (response) { if (!response.ok) { document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`; diff --git a/dist/landing.html b/dist/landing.html new file mode 100644 index 0000000..2858718 --- /dev/null +++ b/dist/landing.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> + +<head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + body { + font-family: "Lato", sans-serif; + } + + .sidenav { + height: 100%; + width: 160px; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: #111; + padding-top: 20px; + overflow-wrap: break-word; + } + .main { + margin-left: 162px; + /* Same as the width of the sidenav */ + font-size: 28px; + /* Increased text to enable scrolling */ + padding: 0px 10px; + } + + .out { + margin-left: 162px; + /* Same as the width of the sidenav */ + font-size: 16px; + /* Increased text to enable scrolling */ + } + + @media screen and (max-height: 450px) { + .sidenav { + padding-top: 15px; + } + + .sidenav a { + font-size: 18px; + } + } + </style> +</head> + +<body> + <div class="sidenav"> + <a>Public Lobbys:</a> + <h1 id="userlist"></h1> + </div> + <div class="main"> + <h1>Spotify Intersect</h1> + + <input type="text" id="lobby_name" placeholder="Lobby name"> + <button id="lobby_button" onclick="lobby_button()">Create a new lobby</button> + <p id="status"></p> + </div> + <script> + //const host = "https://kobert.dev"; + const host = "http://127.0.0.1:8000"; + const api = host + ""; + //const api = host + "/spotify-api"; + function getParameterByName(name) { + let url = window.location.href; + name = name.replace(/[\[\]]/g, "\\$&"); + var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), + results = regex.exec(url); + if (!results) return null; + if (!results[2]) return ''; + return decodeURIComponent(results[2].replace(/\+/g, " ")); + } + function lobby_button() { + let lobby_name = document.getElementById("lobby_name").value; + fetch(api + "/lobby/" + lobby_name, {method: 'POST'}) + .then(function (response) { + if (!response.ok) { + document.getElementById("status").innerHTML = `Error occured while generating new lobby: ${response.status}`; + throw new Error(`HTTP error! status: ${response.status}`); + } + response.text().then(function (message) { + window.location = host + "/callback.html?lobby=" + message; + }); + }); + } + </script> +</body> + +</html> |