lgallet/makethisplaylist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ RoomID is fully implemented

Browse Source
This commit is contained in:
Louis Gallet
2024-07-01 17:13:37 +02:00
parent 8b8579e988
commit 6e5e141372
7 changed files with 246 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
templates/add.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fête de la musique</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{{ bootstrap.load_css() }}
</head>
<body>
<div>
<div>
<script>
Swal.fire({
title:"{{ response }}",
text: "{{ comment }}",
icon: "{{ type }}",
confirmButtonText: "Add another track",
}).then(function() {
window.location = "/search/{{ roomid }}";
})
</script>
</div>
</div>
</body>
</html>

35
templates/create.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fête de la musique</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{{ bootstrap.load_css() }}
</head>
<body>
<div>
<div>
<script>
if ("{{type}}" === "error") {
Swal.fire({
title: "{{ response }}",
text: "{{ comment }}",
icon: "{{ type }}",
confirmButtonText: "Try again",
}).then(function() {
window.location = "/";
})
}
Swal.fire({
title:"{{ response }}",
text: "{{ comment }}",
icon: "{{ type }}",
imageUrl: "data:image/png;base64, {{ image }}",
confirmButtonText: "Add some music!",
}).then(function() {
window.location = "/search/{{ roomid }}";
})
</script>
</div>
</div>
</body>

56
templates/found.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Results</title>
{{ bootstrap.load_css() }}
</head>
<body>
<div class="container text-center">
<h2>Welcome</h2>
<p>Choose the music that will play tonight.</p>
<p>Info: You're in room: <b>{{ roomid }} </b>, the playlist is called: <b>{{ playlistName }} </b></p>
<form action="{{spotifyURL}}">
<button class="btn btn-success">Open in Spotify</button>
</form>
<form method="POST">
<div class="form-group">
<div class="form-inline text-center">
<label>Enter here the music that you want:</label>
<label>
<input type="text" name="search" class="form-control" />
</label>
</div>
</div>
<div class="text-center">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
<div class="alert alert-primary" role="alert">
Here's the music I found. If it doesn't match, try the query again in more detail.
</div>
<div class="container text-center">
<div class="row">
{% for track in tracks %}
<div class="col">
<div class="card" style="width: 21rem;">
<img class="card-img-top" src="{{ track[4] }}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"> {{ track[0] }} </h5>
<p class="card-text">{{ track[1] }} - {{ track[2] }}</p>
<audio controls><source src="{{ track[3] }}"></audio>
<form method="GET" action="/add/{{roomid}}/{{playlistID}}/{{track[5]}}">
<input type="hidden" name="track" value="{{ track[5] }}">
<input type="submit" value="Add to the playlist" class="btn btn-primary">
</form>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
</html>

64
templates/index.html Normal file
View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fête de la musique</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{{ bootstrap.load_css() }}
</head>
<body>
<div class="container">
<h1>Make this playlist</h1>
<p>You too, choose the music that will play tonight.</p>
<div class="row">
<div class="col-sm">
<h2>Join a room</h2>
<form method="POST" >
<div class="form-group">
<label for="roomID">Enter here the room id:</label>
<input type="text" class="form-control" name="roomID" placeholder="00000000" maxlength="8" minlength="8" />
<small id="roomIDHelp" class="form-text text-muted">If you don't have a room id, you can create one.</small>
</div>
<button type="submit" class="btn btn-primary">Join</button>
</form>
</div>
<div class="col-sm">
<h2>Create a room</h2>
<form method="POST" action="/create">
<div class="form-group">
<label for="roomName">Enter here the room name:</label>
<input type="text" class="form-control" name="roomName" placeholder="Room name" />
<small id="roomNameHelp" class="form-text text-muted">This will be the playlist name</small>
</div>
<button type="submit" class="btn btn-success">Create (require a Spotify account)</button>
</form>
</div>
</div>
</div>
<div class="sweetalert">
<script>
if ("{{ type }}" !== "") {
if ("{{ type }}" === "success") {
Swal.fire({
title: "{{ response }}",
text: "{{ comment }}",
icon: "{{ type }}",
confirmButtonText: "Let's get in!",
}).then(function() {
window.location = "/search/{{ roomid }}";
})
} else {
Swal.fire({
title: "{{ response }}",
text: "{{ comment }}",
icon: "{{ type }}",
confirmButtonText: "Try again",
}).then(function() {
window.location = "/";
})
}
}
</script>
</div>
</body>
</html>

32
templates/search.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fête de la musique</title>
{{ bootstrap.load_css() }}
</head>
<body>
<div class="container text-center">
<h2>Welcome</h2>
<p>Choose the music that will play tonight.</p>
<p>Info: You're in room: <b>{{ roomid }} </b>, the playlist is called: <b>{{ playlistName }} </b></p>
<form action="{{spotifyURL}}">
<button class="btn btn-success">Open in Spotify</button>
</form>
<form method="POST">
<div class="form-group">
<div class="form-inline text-center">
<label>Enter here the music that you want:</label>
<label>
<input type="text" name="search" class="form-control" />
</label>
</div>
</div>
<div class="text-center">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
</body>
</html>