summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDennis Kobert <dennis@kobert.dev>2020-03-13 11:38:14 +0100
committerDennis Kobert <dennis@kobert.dev>2020-03-13 11:38:14 +0100
commit1d68281dca016c63ef5cb96a2dceed8f3dbdc950 (patch)
tree612c08a653b111a073ff1df49bb97fbfe32ce106
parentee4519e95550d80d27860d56e939ff8a894f98e6 (diff)
Add placeholder eleements to text fieldHEADmaster
Diffstat
-rw-r--r--dist/button.html16
-rw-r--r--dist/callback.html196
2 files changed, 105 insertions, 107 deletions
diff --git a/dist/button.html b/dist/button.html
deleted file mode 100644
index da99833..0000000
--- a/dist/button.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
- <h1>Spotify Intersect</h1>
- <button onclick="click_button()">Connect to Spotify</button>
- <script>
- function click_button() {
- console.log("test");
- //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);
- window.location = "https://kobert.dev/spotify-api/token/" + token;
- }
- </script>
-</body>
-</html>
diff --git a/dist/callback.html b/dist/callback.html
index 43e2aa5..f212b5f 100644
--- a/dist/callback.html
+++ b/dist/callback.html
@@ -1,76 +1,89 @@
<!DOCTYPE html>
<html>
+
<head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<style>
-body {
- font-family: "Lato", sans-serif;
-}
+ <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;
+ }
+
+ .sidenav a {
+ padding: 6px 8px 6px 16px;
+ text-decoration: none;
+ font-size: 25px;
+ color: #818181;
+ display: block;
+ }
-.sidenav {
- height: 100%;
- width: 160px;
- position: fixed;
- z-index: 1;
- top: 0;
- left: 0;
- background-color: #111;
- padding-top: 20px;
- overflow-wrap: break-word;
-}
+ .sidenav h1 {
+ padding: 6px 8px 6px 16px;
+ text-decoration: none;
+ font-size: 14px;
+ color: #FFFFFF;
+ display: block;
+ }
-.sidenav a {
- padding: 6px 8px 6px 16px;
- text-decoration: none;
- font-size: 25px;
- color: #818181;
- display: block;
-}
-.sidenav h1 {
- padding: 6px 8px 6px 16px;
- text-decoration: none;
- font-size: 14px;
- color: #FFFFFF;
- display: block;
-}
+ .sidenav a:hover {
+ color: #f1f1f1;
+ }
-.sidenav a:hover {
- color: #f1f1f1;
-}
+ .main {
+ margin-left: 162px;
+ /* Same as the width of the sidenav */
+ font-size: 28px;
+ /* Increased text to enable scrolling */
+ padding: 0px 10px;
+ }
-.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 */
-}
+ .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>
+ @media screen and (max-height: 450px) {
+ .sidenav {
+ padding-top: 15px;
+ }
+
+ .sidenav a {
+ font-size: 18px;
+ }
+ }
+ </style>
</head>
+
<body onload="populate_users()">
<div class="sidenav">
- <a>Current Users</a>
- <h1 id="userlist"></h1>
-</div>
-<div class="main">
- <h1>Spotify Intersect</h1>
- <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>
- <input type="text" id="name1" value="First name">
- <input type="text" id="name2" value="Second name">
- <button id="Match_button" onclick="match_users()">Match users</button>
-</div>
-<div class="out">
- <p id="output"></p>
-</div>
+ <a>Current Users</a>
+ <h1 id="userlist"></h1>
+ </div>
+ <div class="main">
+ <h1>Spotify Intersect</h1>
+ <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>
+ <input type="text" id="name1" placeholder="First name">
+ <input type="text" id="name2" placeholder="Second name">
+ <button id="Match_button" onclick="match_users()">Match users</button>
+ </div>
+ <div class="out">
+ <p id="output"></p>
+ </div>
<script>
function getParameterByName(name) {
let url = window.location.href;
@@ -94,16 +107,16 @@ body {
document.getElementById("Load_button").disabled = false;
}
fetch("https://kobert.dev/spotify-api/user")
- .then(function(response) {
- if (!response.ok) {
- document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`;
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- response.text().then(function(message) {
- document.getElementById("userlist").innerHTML = '<p>' + message.replace(/\n/g, '</p>\n<p>') + '</p>';
+ .then(function (response) {
+ if (!response.ok) {
+ document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`;
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ response.text().then(function (message) {
+ document.getElementById("userlist").innerHTML = '<p>' + message.replace(/\n/g, '</p>\n<p>') + '</p>';
+ });
});
- });
-
+
}
function load_songs() {
@@ -112,31 +125,32 @@ body {
document.getElementById("Load_button").disabled = true;
let token = sessionStorage.getItem('token');
fetch("https://kobert.dev/spotify-api/callback/" + token + "/" + getParameterByName("code"))
- .then(function(response) {
- if (!response.ok) {
- document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`;
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- document.getElementById("status").innerHTML = "Loaded songs";
- populate_users();
- });
+ .then(function (response) {
+ if (!response.ok) {
+ document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`;
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ document.getElementById("status").innerHTML = "Loaded songs";
+ populate_users();
+ });
//window.location = "https://kobert.dev/spotify-api/token/" + token;
}
-function match_users() {
- let name1 = document.getElementById("name1").value;
- let name2 = document.getElementById("name2").value;
+ function match_users() {
+ let name1 = document.getElementById("name1").value;
+ let name2 = document.getElementById("name2").value;
fetch("https://kobert.dev/spotify-api/match/" + name1 + "/" + name2)
- .then(function(response) {
- if (!response.ok) {
- document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`;
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- response.text().then(function(message) {
- document.getElementById("output").innerHTML = message.replace(/\n/g, '<br>\n');
+ .then(function (response) {
+ if (!response.ok) {
+ document.getElementById("status").innerHTML = `Error occured while loading songs: ${response.status}`;
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ response.text().then(function (message) {
+ document.getElementById("output").innerHTML = message.replace(/\n/g, '<br>\n');
+ });
});
- });
-}
+ }
</script>
</body>
+
</html>
generated by cgit v1.2.3-70-g09d2 (git 2.47.1) at 2024-12-25 07:00:58 +0000