From b1ba54194f33fe0cd3d5dda96adc15bc9944b8bb Mon Sep 17 00:00:00 2001
From: matsewe <git@matsewe.de>
Date: Wed, 3 Jul 2024 17:06:25 +0200
Subject: [PATCH] remove jquery dependency

---
 templates/voting.html | 149 ++++++++++++++++++------------------------
 1 file changed, 65 insertions(+), 84 deletions(-)

diff --git a/templates/voting.html b/templates/voting.html
index 74d4acc..2d0d92b 100644
--- a/templates/voting.html
+++ b/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,8 +168,10 @@
         abgeben.
     </div>
     {% else %}
-    <h1 id="title"><img id="title-logo" src="https://choriosity.de/assets/images/logo-choriosity_weiss.svg"> Liederwahl</h1>
-    <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.
+    <h1 id="title"><img id="title-logo" src="https://choriosity.de/assets/images/logo-choriosity_weiss.svg"> Liederwahl
+    </h1>
+    <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">