export results to csv

Corporate Identity, Slack OAuth, etc.

.gitea/workflows/build-push-image.yml

@@ -0,0 +1,55 @@
+name: release-tag
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  release-image:
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+    env:
+      DOCKER_ORG: matthias
+      DOCKER_LATEST: latest
+      RUNNER_TOOL_CACHE: /toolcache
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker BuildX
+        uses: docker/setup-buildx-action@v2
+        with:
+          config-inline: |
+            [registry."git.matsewe.de"] 
+              http = true
+              insecure = true            
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          registry: git.matsewe.de
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          
+      - name: Get Meta
+        id: meta
+        run: |
+          echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
+          echo REPO_VERSION=$(git describe --tags --always | sed 's/^v//') >> $GITHUB_OUTPUT                
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: |
+            linux/amd64                 
+          push: true
+          tags: |
+            git.matsewe.de/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ steps.meta.outputs.REPO_VERSION }}
+            git.matsewe.de/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ env.DOCKER_LATEST }}

.gitignore

@@ -1,3 +1,5 @@
 __pycache__
 .venv
-.vscode
+.vscode
+.env
+data

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.11
+
+WORKDIR /code
+
+COPY ./requirements.txt /tmp/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /tmp/requirements.txt
+
+COPY ./app /code/app
+COPY ./static /code/static
+COPY ./templates /code/templates
+
+RUN echo "first_run" > "/tmp/first_run"
+
+CMD ["fastapi", "run", "app/main.py", "--proxy-headers", "--port", "80"]

Dockerfile-dev

@@ -0,0 +1,11 @@
+FROM python:3.11
+
+WORKDIR /code
+
+COPY ./requirements.txt /tmp/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /tmp/requirements.txt
+
+RUN echo "first_run" > "/tmp/first_run"
+
+CMD ["fastapi", "run", "app/main.py", "--proxy-headers", "--port", "80", "--reload"]

app/crud.py

@@ -1,9 +1,8 @@
 import app.models as models
-from sqlalchemy import func, and_
 from sqlalchemy.orm.attributes import flag_modified
-from starlette_context import context
-from starlette_context.header_keys import HeaderKeys
 
+from sqlalchemy.sql import text
+import pickle
 
 def get_songs_and_vote_for_session(db, session_name) -> list[models.Song]:
     session_entry = activate_session(db, session_name)
@@ -17,19 +16,31 @@ def get_songs_and_vote_for_session(db, session_name) -> list[models.Song]:
 
     return songs_and_votes
 
+def get_all_songs_and_votes(db) -> list:
+    res = db.execute(text("""SELECT 
+    songs.og_artist,
+    songs.aca_artist,
+    songs.title,
+    songs.url,
+    songs.categories,
+    COUNT(vote) FILTER (where vote = -1) as "nein" ,
+    COUNT(vote) FILTER (where vote = 0) as "neutral", 
+    COUNT(vote) FILTER (where vote = 1) as "ja"
+    FROM votes INNER JOIN songs ON votes.song_id = songs.id
+    GROUP BY song_id ORDER BY song_id
+    """)).fetchall()
 
-def get_all_songs_and_votes(db) -> dict[int, dict[int, int]]:
-    _v = db.query(models.Vote.song_id, models.Vote.vote, func.count(
-        models.Vote.song_id)).group_by(models.Vote.song_id, models.Vote.vote).all()
+    def process_row(r):
+        e = dict(r._mapping)
+        c = pickle.loads(e["categories"])
+        c = {k : bool(v) for k, v in c.items()}
+        e["categories"] = c
 
-    votes = {}
+        return e
 
-    for v in _v:
-        if v[0] not in votes:
-            votes[v[0]] = {-1: 0, 0: 0, 1: 0}
-        votes[v[0]][v[1]] = v[2]
+    res = [process_row(r) for r in res]
 
-    return votes
+    return res
 
 
 def create_song(db,
@@ -101,33 +112,25 @@ def create_or_update_comment(db, song_id, session_name, comment):
 
 
 def activate_session(db, session_name):
-    ip = context.data[HeaderKeys.forwarded_for]
-    user_agent = context.data[HeaderKeys.user_agent]
 
-    session_entry = db.query(models.Session).filter(and_(
-        models.Session.session_name == session_name)).first() # , models.Session.ip == ip, models.Session.user_agent == user_agent
+    session_entry = db.query(models.Session).filter(
+        models.Session.session_name == session_name).first() # , models.Session.ip == ip, models.Session.user_agent == user_agent
     if session_entry:
-        if ip not in session_entry.ips:
-            session_entry.ips.append(ip)
         session_entry.active = True
     else:
         session_entry = models.Session(
-            session_name=session_name, active=True, ips=[ip]) # , ip=ip, user_agent=user_agent
+            session_name=session_name, active=True) # , ip=ip, user_agent=user_agent
         db.add(session_entry)
 
     flag_modified(session_entry, "active")
-    flag_modified(session_entry, "ips")
     db.commit()
 
     return session_entry
 
 
 def deactivate_session(db, session_name):
-    ip = context.data[HeaderKeys.forwarded_for]
-    user_agent = context.data[HeaderKeys.user_agent]
-
-    session_entry = db.query(models.Session).filter(and_(
-        models.Session.session_name == session_name)).first() # , models.Session.ip == ip, models.Session.user_agent == user_agent
+    session_entry = db.query(models.Session).filter(
+        models.Session.session_name == session_name).first() # , models.Session.ip == ip, models.Session.user_agent == user_agent
     if session_entry:
         session_entry.active = False
         flag_modified(session_entry, "active")

app/main.py

@@ -1,4 +1,4 @@
-from fastapi import FastAPI, Request, Depends, Cookie, Security
+from fastapi import FastAPI, Request, Depends, Security
 from app.routers import admin, songs, session
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import HTMLResponse
@@ -6,26 +6,26 @@ from fastapi.templating import Jinja2Templates
 from app.database import engine, Base, get_db, SessionLocal
 from app.crud import get_songs_and_vote_for_session, get_setting
 from sqlalchemy.orm import Session
-from typing import Annotated
 from app.schemas import Song
-import json
 import os
 import asyncio
-from jose import JWTError, jwt
 from app.security import get_current_user
 
 from starlette.middleware import Middleware
 
-from starlette_context import context, plugins
+from starlette_context import plugins
 from starlette_context.middleware import RawContextMiddleware
 
-if os.path.isfile("first_run") and (os.environ.get("RELOAD_ON_FIRST_RUN").lower() == "true"):
+from hashlib import sha384
+
+Base.metadata.create_all(engine)
+
+if os.path.isfile("/tmp/first_run") and (os.environ.get("RELOAD_ON_FIRST_RUN", "").lower() == "true"):
     print("First run ... load data")
     with SessionLocal() as db:
         asyncio.run(admin.create_upload_file(include_non_singable=True, db=db))
-    os.remove("first_run")
+    os.remove("/tmp/first_run")
 
-# Base.metadata.create_all(engine)
 
 middleware = [
     Middleware(
@@ -60,7 +60,7 @@ async def vote(request: Request, session_id: str | None = None , unordered: bool
                db: Session = Depends(get_db)) -> HTMLResponse:
 
     if not session_id:
-        session_id = user["sub"]
+        session_id = sha384(str.encode(user["sub"])).hexdigest() #CryptContext(schemes=["bcrypt"], deprecated="auto").hash(user["sub"])
 
     #print(user)
 

app/models.py

@@ -32,7 +32,6 @@ class Session(Base):
     id: Mapped[int] = mapped_column(primary_key=True)
     session_name: Mapped[str]
     active: Mapped[bool]
-    ips: Mapped[list[str]]
     first_seen: Mapped[datetime] = mapped_column(server_default=func.now())
     last_seen: Mapped[Optional[datetime]
                          ] = mapped_column(onupdate=func.now())

app/routers/admin.py

@@ -3,12 +3,14 @@ import numpy as np
 import re
 import requests
 import os
-from fastapi import APIRouter, Security, Depends
+from fastapi import APIRouter, Security, Depends, HTTPException, Response
+from fastapi.responses import JSONResponse
 from sqlalchemy.orm import Session
 
 from app.database import get_db, engine, Base
 from app.security import get_current_user
-from app.crud import create_song, get_setting, set_setting
+from app.crud import create_song, get_setting, set_setting, get_all_songs_and_votes
+from typing import Any
 
 router = APIRouter(
     prefix="/admin",
@@ -79,11 +81,12 @@ async def create_upload_file(include_non_singable: bool = False, db: Session = D
     category_names = list(song_list.iloc[0][8:17])
 
     for i, row in song_list[1:].iterrows():
-        if (row[17] == "nein") and not include_non_singable:
-            continue
 
         row = np.array(row)
 
+        if (row[17] == "nein") and not include_non_singable:
+            continue
+
         if not row[2]: # no title
             continue
 
@@ -126,3 +129,16 @@ async def toggle_veto_mode(db: Session = Depends(get_db)) -> bool:
     else:
         set_setting(db, "veto_mode", True)
         return True
+
+
+@router.get("/results")
+async def get_evaluation(format: str = "json", db = Depends(get_db)) -> Any:
+    res = get_all_songs_and_votes(db)
+    if format == "json":
+        return JSONResponse(content=res)
+    elif format == "csv":
+        df = pd.json_normalize(res)
+        df.columns = [c.split(".")[-1] for c in df.columns]
+        return Response(content=df.to_csv(), media_type="application/csv", headers={'Content-Disposition': 'attachment; filename="results.csv"'})
+    else:
+        raise HTTPException(status_code=404, detail="format must be json or csv")

app/routers/songs.py

@@ -1,11 +1,10 @@
 from typing import Annotated
-from fastapi import APIRouter, Depends, Request
+from fastapi import APIRouter, Depends
 from sqlalchemy.orm import Session
 
-import app.models as models
 from app.database import get_db
 from app.schemas import Song
-from app.crud import get_songs_and_vote_for_session, create_or_update_vote, get_all_songs_and_votes, create_or_update_comment
+from app.crud import get_songs_and_vote_for_session, create_or_update_vote, create_or_update_comment
 
 router = APIRouter(
     prefix="/songs",
@@ -28,6 +27,3 @@ async def comment(song_id: str, session_id: str, comment: str, db: Annotated[Ses
     create_or_update_comment(db, song_id, session_id, comment)
     #create_or_update_vote(db, song_id, session_id, vote)
 
-@router.get("/evaluation")
-async def get_evaluation(db: Annotated[Session, Depends(get_db)] = None) -> dict[int, dict[int, int]]:
-    return get_all_songs_and_votes(db)

app/security.py

@@ -1,8 +1,6 @@
-from typing import Annotated
-
-from fastapi import  HTTPException, Cookie, status, Request
+from fastapi import  HTTPException, status, Request
 from fastapi.security import SecurityScopes
-from jose import JWTError, jwt
+from jose import JWTError
 from pydantic import ValidationError
 import os
 
@@ -11,7 +9,7 @@ import os
 # openssl rand -hex 32
 
 scopes_db = {
-    os.environ['ADMIN_EMAIL'] : ["admin"]
+    os.environ.get('ADMIN_EMAIL', "") : ["admin"]
 }
 
 credentials_exception = HTTPException(
@@ -22,6 +20,10 @@ credentials_exception = HTTPException(
 async def get_current_user(
     security_scopes: SecurityScopes, request: Request
     ):
+
+    if os.environ.get("NO_LOGIN", "").lower() == "true":
+        return {"sub": "test"}
+    
     try:
         username: str = request.headers.get("x-auth-request-user")  # type: ignore
         if username is None:

docker-compose.yml

@@ -0,0 +1,21 @@
+version: "3.7"
+
+services:
+  liederwahl-dev:
+    build: 
+      context: .
+      dockerfile: Dockerfile-dev
+    container_name: liederwahl-dev
+    restart: unless-stopped
+    volumes:
+      - .:/code
+      - liederwahl-dev:/data
+    ports: 
+      - 80:80
+    environment:
+      - LIST_URL=${LIST_URL}
+      - NO_LOGIN=true
+      - RELOAD_ON_FIRST_RUN=true
+
+volumes:
+  liederwahl-dev:

static/site.css

@@ -1,8 +1,73 @@
+:root {
+    --color-white-100: white;
+    --color-white-90: #e6e6e6;
+    --color-white-80: #cccccc;
+    --color-white-70: #b3b3b3;
+    --color-white-10: #191919;
+    --color-choriosity-red: #be0519;
+    --color-choriosity-red--medium: #990514;
+    --color-choriosity-red--darker: #66030d;
+    --color-choriosity-red--rgba: 190, 5, 25;
+    --color-choriosity-red--light: #faeaea;
+    --color-background: #fffffa;
+    --color-tap: var(--color-choriosity-red--darker);
+    --color-callout-bg: var(--color-background);
+  }
+
+
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-Regular.woff2) format("woff2");
+    font-weight: 400;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-Italic.woff2) format("woff2");
+    font-weight: 400;
+    font-style: italic;
+  }
+  
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-Medium.woff2) format("woff2");
+    font-weight: 500;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-SemiBold.woff2) format("woff2");
+    font-weight: 600;
+    font-style: normal;
+  }
+
+  
+
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    font-family: sans-serif;
+    font-family: Fira Sans, Helvetica, Arial, sans-serif;
+}
+
+html {
+    background: var(--color-background);
+}
+
+header {
+    background-color: var(--color-choriosity-red);
+    height: 80px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: 40px;
+}
+
+::selection {
+    background: var(--color-choriosity-red);
+    color: var(--color-white-100);
 }
 
 .vote-buttons,
@@ -26,11 +91,11 @@
     }
 }
 
-
 .text {
     padding: 0.3em;
     margin-bottom: 0.7em;
     display: inline-block;
+    font-size: 1.25rem;
 }
 
 .clear {
@@ -38,16 +103,18 @@
 }
 
 .song {
-    background-color: #f0f0f0;
+    background-color: var(--color-choriosity-red--light);
+    background-color: var(--color-white-100);
+    border: 1px solid var(--color-choriosity-red);
+    box-shadow: 4px 4px 8px var(--color-white-90);
     padding: 0.4em;
     border-radius: 0.5em;
     width: 30em;
-    font-family: sans-serif;
     margin-bottom: 1rem;
     margin-left: 0.5em;
+    float: left;
 }
 
-
 .cover-container {
     position: relative;
     width: 10.67em;
@@ -71,7 +138,6 @@
     transition: .3s ease;
 }
 
-
 .overlay {
     position: absolute;
     top: 0;
@@ -113,7 +179,6 @@
     height: 60%;
 }
 
-
 .vote-buttons {
     display: inline-block;
 }
@@ -163,11 +228,11 @@
 }
 
 .button:not(.selected):not(:hover) {
-    background-color: #b0b0b0;
+    background-color: var(--color-white-90);
 }
 
 .button:hover {
-    filter: drop-shadow(2px 2px 2px) brightness(95%);
+    filter: drop-shadow(2px 2px 2px var(--color-white-70)) brightness(95%);
     cursor: pointer;
 }
 
@@ -188,7 +253,6 @@
 }
 
 .categories {
-    width: 60%;
     overflow: hidden;
     /*cursor: grab;*/
     white-space: nowrap;
@@ -201,6 +265,7 @@
     border-radius: 1.2em;
     padding: 0 0.5em 0 0.5em;
     margin-right: 0.4em;
+    margin-top: 0.5em;
     display: inline-block;
     color: white;
     max-width: 10em;
@@ -210,7 +275,10 @@
 }
 
 .vote-buttons {
-    margin-top: 0.5em;
+    margin-top: 1em;
+    width: 100%;
+    display: inline-flex;
+    justify-content: center;
 }
 
 .song-title,
@@ -225,21 +293,44 @@
 }
 
 h1 {
-    font-family: sans-serif;
+    font-size: 2rem;
+    color: white;
+    clear: both;
+}
+
+h1#title {
+    margin-top: 30px;
+}
+
+h2 {
     padding: 0.1em;
     padding-left: 0.2em;
     margin-bottom: 1rem;
-    font-size: 1.5em;
+    padding-top: 1.5rem;
+    font-size: 1.25rem;
+    clear: both;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
 }
 
-#songs h1 {
-    background-color: color-mix(in srgb, hsl(calc(var(--hue) * 360), 100%, 40%) 50%, transparent);
-    border-bottom: 0.3rem solid hsl(calc(var(--hue) * 360), 100%, 40%);
+h2:after {
+    content: '';
+    border-top: 2px solid hsl(calc(var(--hue) * 360), 100%, 40%);
+    flex: 1 0 20px;
+    margin: 0 0 0 10px;
 }
 
-body>h1 {
-    background-color: color-mix(in srgb, hsl(0, 0%, 40%) 50%, transparent);
-    border-bottom: 0.3rem solid hsl(0, 0%, 40%);
+h2:before {
+    content: '';
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    border-radius: 7.5px;
+    background-color: hsl(calc(var(--hue) * 360), 100%, 40%);
+    margin-right: 0.3em;
+    margin-left: 0.3em;
 }
 
 #yt-player,
@@ -278,4 +369,11 @@ body>h1 {
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: 1.5em;
+}
+
+#title-logo {
+    vertical-align: middle;
+    height: 6rem;
+    filter: drop-shadow(0 0 1px var(--color-choriosity-red--medium));
+    margin: 30px 1em 0 1em;
 }

templates/voting.html

@@ -27,37 +27,9 @@
     {% endif %}
 
     <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 type="text/javascript">
         const session_id = "{{ session_id }}";
 
-        function activate_session() {
-            $.ajax({
-                url: "/session/" + session_id,
-                method: "PUT"
-            })
-        }
-
-        function deactivate_session() {
-            $.ajax({
-                url: "/session/" + session_id,
-                method: "DELETE"
-            })
-        }
-
-        $(window).on("load", activate_session);
-
-        $(window).on("beforeunload", deactivate_session);
-        $(window).on("unload", deactivate_session);
-        $(window).on("pagehide", deactivate_session);
-        $(document).on('visibilitychange', function () {
-            if (document.visibilityState == 'hidden') {
-                deactivate_session();
-            } else {
-                activate_session()
-            }
-        });
-
         var spotify_embed_controller;
 
         window.onSpotifyIframeApiReady = (IFrameAPI) => {
@@ -75,12 +47,15 @@
         var is_playing = -1;
 
         function stop() {
-            $("#song-" + is_playing + " .cover-container .overlay img").attr("src", "/static/play.svg");
+            if (is_playing !== -1) {
+                document.querySelector("#song-" + is_playing + " .cover-container .overlay img").setAttribute("src", "/static/play.svg");
+            }
+
+            document.querySelector("#yt-player").style.display = "none";
+            document.querySelector("#spotify-player").style.display = "none";
+            document.querySelector("#close-player").style.display = "none";
+            document.querySelector("#yt-player").innerHTML = "";
 
-            $("#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;
         }
@@ -93,12 +68,13 @@
 
                 is_playing = song_id;
 
-                $("#song-" + song_id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
+                document.querySelector("#song-" + song_id + " .cover-container .overlay img").setAttribute("src", "/static/stop.svg");
+
+                document.querySelector("#yt-player").style.display = "flex";
+                document.querySelector("#close-player").style.display = "block";
 
-                $("#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);
+                document.querySelector("#yt-player").innerHTML = iframe_code;
             }
         }
 
@@ -110,10 +86,10 @@
 
                 is_playing = song_id;
 
-                $("#song-" + song_id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
+                document.querySelector("#song-" + song_id + " .cover-container .overlay img").setAttribute("src", "/static/stop.svg");
 
-                $("#spotify-player").css("display", "flex");
-                $("#close-player").css("display", "block");
+                document.querySelector("#spotify-player").style.display = "flex";
+                document.querySelector("#close-player").style.display = "block";
                 spotify_embed_controller.loadUri("spotify:track:" + spfy_id);
                 spotify_embed_controller.play();
             }
@@ -124,59 +100,62 @@
             window.open(url, '_blank').focus();
         }
 
-        function vote(song_id, vote) {
-
-            $.ajax({
-                url: "/songs/" + song_id + "/vote?" + $.param({ session_id: session_id, vote: vote }),
-                method: "POST",
-                success: function (data, textStatus) {
-
-                    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")
-                            {% if veto_mode %}
-                            $("#song-" + song_id).removeClass("not_singable")
-                            {% endif %}
-                            break;
-                        case 1:
-                            yes_button.addClass("selected")
-                            {% if veto_mode %}
-                            $("#song-" + song_id).removeClass("not_singable")
-                            {% endif %}
-                            break;
-                        case -1:
-                            no_button.addClass("selected")
-                            {% if veto_mode %}
-                            $("#song-" + song_id).addClass("not_singable")
-                            {% endif %}
-                            break;
-                        default:
-                            break;
-                    }
+        async function vote(song_id, vote) {
 
+            response = await fetch(
+                "/songs/" + song_id + "/vote?session_id=" + encodeURIComponent(session_id) + "&vote=" + vote, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
                 }
             });
 
+            if (response.ok) {
+                no_button = document.querySelector("#song-" + song_id + " .button-no");
+                yes_button = document.querySelector("#song-" + song_id + " .button-yes");
+                neutral_button = document.querySelector("#song-" + song_id + " .button-neutral");
 
+                no_button.classList.remove("selected")
+                yes_button.classList.remove("selected")
+                neutral_button.classList.remove("selected")
 
+                switch (vote) {
+                    case 0:
+                        neutral_button.classList.add("selected")
+                        {% if veto_mode %}
+                        document.querySelector("#song-" + song_id).classList.remove("not_singable")
+                        {% endif %}
+                        break;
+                    case 1:
+                        yes_button.classList.add("selected")
+                        {% if veto_mode %}
+                        document.querySelector("#song-" + song_id).classList.remove("not_singable")
+                        {% endif %}
+                        break;
+                    case -1:
+                        no_button.classList.add("selected")
+                        {% if veto_mode %}
+                        document.querySelector("#song-" + song_id).classList.add("not_singable")
+                        {% endif %}
+                        break;
+                    default:
+                        break;
+                }
 
+            }
         }
 
         {% if veto_mode %}
-        function updateComment(song_id, el) {
+        async function updateComment(song_id, el) {
             comment = el.value
-            $.ajax({
-                url: "/songs/" + song_id + "/comment?" + $.param({ session_id: session_id, comment: comment }),
-                method: "POST"
-            })
+
+            response = await fetch(
+                "/songs/" + song_id + "/comment?session_id=" + encodeURIComponent(session_id) + "&comment=" + encodeURIComponent(comment), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
         }
         {% endif %}
     </script>
@@ -189,13 +168,18 @@
         abgeben.
     </div>
     {% else %}
-    <h1>Hallo :)</h1>
-    <div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen.
+    <header>
+        <img id="title-logo" src="https://choriosity.de/assets/images/logo-choriosity_weiss.svg">
+        <h1 id="title">Liederwahl</h1>
+    </header>
+
+    <div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen. Mit
+        einem Klick auf das Thumbnail kannst du das Lied abspielen.
     </div>
     {% endif %}
     <div id="songs">
         {% for main_category, songs in songs_by_category.items() %}
-        <h1 style="--hue: {{ all_categories[main_category] / all_categories|length }};">{{ main_category }}</h1>
+        <h2 style="--hue: {{ all_categories[main_category] / all_categories|length }};">{{ main_category }}</h2>
         {% for song in songs -%}
         <div class="song{% if (song.vote == -1) or (not song.vote and not song.singable) %} not_singable{% endif %}"
             id="song-{{ song.id }}">