matthias/liederwahl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up

Browse Source
This commit is contained in:
matthias@matsewe.de
2024-05-24 15:51:07 +02:00
parent 3780e870a8
commit 70c4609252
7 changed files with 49 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/.gitignore vendored
View File

@@ -1 +0,0 @@
secrets.py

17
app/main.py
View File

@@ -22,13 +22,16 @@ app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
@app.get("/", response_class=HTMLResponse)
async def root(request: Request, session_id : str = "", db: Annotated[Session, Depends(get_db)] = None):
if session_id == "":
@app.get("/")
async def root(request: Request) -> HTMLResponse:
return templates.TemplateResponse(
request=request, name="landing.html"
)
else:
@app.get("/vote")
async def vote(request: Request, session_id : str, db: Annotated[Session, Depends(get_db)]) -> HTMLResponse:
songs = [Song(**s.__dict__, vote=v) for s, v in get_songs_and_vote_for_session(db, session_id)]
songs_by_category = {}
@@ -45,9 +48,3 @@ async def root(request: Request, session_id : str = "", db: Annotated[Session, D
"session_id": session_id
}
)
#@app.get("/vote", response_class=HTMLResponse)
#async def vote(request: Request, session_id : str = ""):
# return templates.TemplateResponse(
# request=request, name="voting-old.html"
# )

90
static/colors.css
View File

@@ -1,90 +0,0 @@
.cat-1 {
--main-color: #1f77b4;
}
.cat-2 {
--main-color: #ff7f0e;
}
.cat-3 {
--main-color: #2ca02c;
}
.cat-4 {
--main-color: #d62728;
}
.cat-5 {
--main-color: #9467bd;
}
.cat-6 {
--main-color: #8c564b;
}
.cat-7 {
--main-color: #e377c2;
}
.cat-8 {
--main-color: #7f7f7f;
}
.cat-9 {
--main-color: #bcbd22;
}
.cat-10 {
--main-color: #17becf;
}
.cat-11 {
--main-color: #a1c9f4;
}
.cat-12 {
--main-color: #ffb482;
}
.cat-13 {
--main-color: #8de5a1;
}
.cat-14 {
--main-color: #ff9f9b;
}
.cat-15 {
--main-color: #d0bbff;
}
.cat-16 {
--main-color: #debb9b;
}
.cat-17 {
--main-color: #fab0e4;
}
.cat-18 {
--main-color: #cfcfcf;
}
.cat-19 {
--main-color: #fffea3;
}
.cat-20 {
--main-color: #b9f2f0;
}
.cat-21 {
--main-color: #001c7f;
}
.cat-22 {
--main-color: #b1400d;
}
.cat-23 {
--main-color: #12711c;
}
.cat-24 {
--main-color: #8c0800;
}
.cat-25 {
--main-color: #591e71;
}
.cat-26 {
--main-color: #592f0d;
}
.cat-27 {
--main-color: #a23582;
}
.cat-28 {
--main-color: #3c3c3c;
}
.cat-29 {
--main-color: #b8850a;
}
.cat-30 {
--main-color: #006374;
}

9
static/landing_script.js
View File

@@ -1,9 +0,0 @@
$(document).ready(function () {
var s_id = localStorage.getItem('session_id')
if (s_id === null) {
s_id = window.crypto.randomUUID();
localStorage.setItem('session_id', s_id)
}
$('.vote-from-existing').attr('href', '?session_id=' + s_id);
window.location.href = "/?session_id=" + s_id;
});

222
static/voting_script.js
View File

@@ -1,222 +0,0 @@
function makeScroll() {
const eles = document.getElementsByClassName('categories');
Array.prototype.forEach.call(eles, ele => {
//ele.style.cursor = 'grab';
let pos = { top: 0, left: 0, x: 0, y: 0 };
const mouseDownHandler = function (e) {
ele.style.cursor = 'grabbing';
ele.style.userSelect = 'none';
pos = {
left: ele.scrollLeft,
top: ele.scrollTop,
// Get the current mouse position
x: e.clientX,
y: e.clientY,
};
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
// How far the mouse has been moved
const dx = e.clientX - pos.x;
const dy = e.clientY - pos.y;
// Scroll the element
ele.scrollTop = pos.top - dy;
ele.scrollLeft = pos.left - dx;
};
const mouseUpHandler = function () {
ele.style.cursor = 'grab';
ele.style.removeProperty('user-select');
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
// Attach the handler
ele.addEventListener('mousedown', mouseDownHandler);
});
}
function vote(song_id, vote) {
var session_id = getQueryParameter("session_id");
no_button = $("#song-" + song_id).find(".button-no")
yes_button = $("#song-" + song_id).find(".button-yes")
neutral_button = $("#song-" + song_id).find(".button-neutral")
no_button.removeClass("selected")
yes_button.removeClass("selected")
neutral_button.removeClass("selected")
switch (vote) {
case 0:
neutral_button.addClass("selected")
break;
case 1:
yes_button.addClass("selected")
break;
case -1:
no_button.addClass("selected")
default:
break;
}
$.ajax({
url: "/songs/" + song_id + "/vote?" + $.param({ user_id: session_id, vote: vote }),
method: "POST"
})
}
const getQueryParameter = (param) => new URLSearchParams(document.location.search.substring(1)).get(param);
var all_songs = {}
$(document).ready(function () {
var session_id = getQueryParameter("session_id");
var songTemplate = $('script[data-template="song"]').text().split(/\$\{(.+?)\}/g);
function render(props) {
return function (tok, i) { return (i % 2) ? props[tok] : tok; };
}
$.ajax({
url: "/songs/",
data: { user_id: session_id }
}).then(function (songs) {
song_list = {}
cat_to_id = {}
$.each(songs, function (key, song) {
all_songs[song.id] = song;
var mc = song.main_category;
if (!song.is_aca) {
mc = "Wildcard"
}
if (!(mc in song_list)) {
song_list[mc] = ""
}
var cats = ""
var cat_id = 1
$.each(song.categories, function (cat_name, is_cat) {
if (is_cat) {
cats = cats + '<span class="cat-' + cat_id + '">' + cat_name + '</span>';
}
cat_to_id[cat_name] = cat_id
cat_id += 1
});
cat_to_id["Wildcard"] = cat_id
artist = "";
if (song.og_artist) {
artist += song.og_artist;
if (song.aca_artist && (song.aca_artist !== song.og_artist)) {
artist += " / ";
artist += song.aca_artist;
}
} else {
artist = song.aca_artist;
}
var s = songTemplate.map(render({
"id": song.id,
"title": song.title,
"artist": artist, //song.og_artist + ": " + song.aca_artist
"cover_image": song.thumbnail,
"no_selected": (song.vote == -1) ? "selected" : "",
"neutral_selected": (song.vote == 0) ? "selected" : "",
"yes_selected": (song.vote == 1) ? "selected" : "",
"play_button": (song.yt_id || song.spfy_id) ? "play" : "open",
"categories": cats
})).join('')
song_list[mc] += s
});
$.each(cat_to_id, function (cat_name, cat_id) {
if (cat_name in song_list) {
$('#songs').append("<h1 class=\"cat-" + cat_id + "\">" + cat_name + "</h1>");
$('#songs').append(song_list[cat_name]);
}
});
makeScroll();
});
});
var is_playing = -1;
var spotify_embed_controller;
window.onSpotifyIframeApiReady = (IFrameAPI) => {
const element = document.getElementById('spotify-embed');
const options = {
width: '640',
height: '360'
};
const callback = (EmbedController) => {
spotify_embed_controller = EmbedController;
};
IFrameAPI.createController(element, options, callback);
};
function stop() {
$("#song-" + is_playing + " .cover-container .overlay img").attr("src", "/static/play.svg");
$("#yt-player").css("display", "none");
$("#spotify-player").css("display", "none");
$("#close-player").css("display", "none");
$("#yt-player").html("");
spotify_embed_controller.pause();
is_playing = -1;
}
function play(id) {
if (is_playing == id) {
stop();
} else {
stop();
is_playing = id;
$("#song-" + id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
song = all_songs[id];
yt_id = song.yt_id
spotify_id = song.spfy_id
if (yt_id) {
$("#yt-player").css("display", "flex");
$("#close-player").css("display", "block");
iframe_code = '<iframe src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1" title="" width="640" height="360" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>';
$("#yt-player").html(iframe_code);
}
else if (spotify_id) {
$("#spotify-player").css("display", "flex");
$("#close-player").css("display", "block");
spotify_embed_controller.loadUri("spotify:track:" + spotify_id);
spotify_embed_controller.play();
}
else {
stop();
$("#song-" + id + " .cover-container .overlay img").attr("src", "/static/open.svg");
window.open(song.url, '_blank').focus();
}
}
}

19
templates/landing.html
View File

@@ -1,15 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Liederwahl</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/static/landing_script.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var s_id = localStorage.getItem('session_id')
if (s_id === null) {
s_id = window.crypto.randomUUID();
localStorage.setItem('session_id', s_id)
}
$('.vote').attr('href', 'vote?session_id=' + s_id);
window.location.href = "/vote?session_id=" + s_id;
});
</script>
</head>
<body>
<div>
<p><a href="" class="vote-from-existing">Abstimmen</a></p>
<!--<p>Fange eine neue Abstimmung an<a href="">Abstimmen</a></p>-->
<p><a href="" class="vote">Abstimmen</a></p>
</div>
</body>
</html>

54
templates/voting-old.html
View File

@@ -1,54 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Liederwahl</title>
<link rel="stylesheet" type="text/css" href="/static/colors.css">
<link rel="stylesheet" type="text/css" href="/static/site.css">
<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/static/voting_script.js"></script>
<script type="text/template" data-template="song">
<div class="song" id="song-${id}">
<div class="cover-container">
<img src="${cover_image}" class="cover">
<div class="overlay" onclick="play(${id})"><img src="/static/${play_button}.svg"></div>
</div>
<div class="song-title">${title}</div>
<div class="song-artist">${artist}</div>
<div class="categories" id="container">
${categories}<span style="--main-color: transparent;">&nbsp;</span>
</div>
<div class="vote-buttons">
<div class="button button-no ${no_selected}" onmousedown="vote(${id}, -1); return false;" onclick="return false;"><img src="/static/no.svg"></div><div class="button button-neutral ${neutral_selected}" onmousedown="vote(${id}, 0)"><img src="/static/neutral.svg"></div><div class="button button-yes ${yes_selected}" onmousedown="vote(${id}, 1)"><img src="/static/yes.svg"></div>
</div>
<div class="clear"></div>
</div>
</script>
</head>
<body>
<h1 style="--main-color: #888888; ">Hallo :)</h1>
<div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen.</div>
<div id="songs"></div>
<div id="spotify-player"><div id="spotify-embed"></div></div>
<div id="yt-player"></div>
<div id="close-player" onclick="stop(); return false;"><img src="/static/no.svg"></div>
<!--<div class="song">
<div class="cover-container">
<img src="{{ url_for('static', path='/cover.jpg') }}" class="cover">
<div class="overlay"><img src="{{ url_for('static', path='/play.svg') }}"></div>
</div>
<div class="song-data">VoicePlay: In The Air Tonight</div>
<div class="categories" id="container">
<span class="cat-1">Ballade</span><span class="cat-2">&lt; 90er Remake</span><span class="cat-3">Something else </span><span class="cat-4">Something else </span>
</div>
<div class="vote-buttons">
<div class="button button-no"><img src="{{ url_for('static', path='/no.svg') }}"></div><div class="button button-neutral"><img src="{{ url_for('static', path='/neutral.svg') }}"></div><div class="button button-yes selected"><img src="{{ url_for('static', path='/yes.svg') }}"></div>
</div>
<div class="clear"></div>
</div>-->
</body>
</html>