update

static/voting_script.js

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function () {
+function makeScroll() {
     const eles = document.getElementsByClassName('categories');
     Array.prototype.forEach.call(eles, ele => {
 
@@ -44,27 +44,88 @@ document.addEventListener('DOMContentLoaded', function () {
         // 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);
 
 $(document).ready(function () {
     var session_id = getQueryParameter("session_id");
 
-    $(".greeting-id").append(session_id);
-    $(".greeting-id").append("Foo");
+    var songTemplate = $('script[data-template="song"]').text().split(/\$\{(.+?)\}/g);
+
+    function render(props) {
+        return function(tok, i) { return (i % 2) ? props[tok] : tok; };
+    }
+
+    song_list = {}
+
     $.ajax({
-        url: "/songs"
-    }).then(function (user_list) {
-        $('.greeting-id').append(user_list.total);
-        localStorage.setItem("test-storage", user_list.total);
-        var users = [];
-        $.each(user_list.data, function (key, user) {
-            users.push("<li id='" + user.id + "'>" + user.first_name + "</li>");
+        url: "/songs",
+        data: { user_id: session_id }
+    }).then(function (songs) {
+        $.each(songs, function (key, song) {
+
+            var mc = song.main_category;
+
+            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_id += 1
+            });
+
+            
+            var s = songTemplate.map(render({
+                "id" : song.id,
+                "title" : song.og_artist + ": " + song.title,
+                "cover_image" : "cover.jpg",
+                "no_selected" : (song.vote == -1) ? "selected" : "",
+                "neutral_selected" : (song.vote == 0) ? "selected" : "",
+                "yes_selected" : (song.vote == 1) ? "selected" : "",
+                "categories" : cats
+            })).join('')
+
+            song_list[mc] += s
+        });
+        $.each(song_list, function(mc, s) {
+            $('body').append("<h1>" + mc + "</h1>");
+            $('body').append(s);
         });
-        $("<ul/>", {
-            "class": "my-new-list",
-            html: users.join("")
-        }).appendTo("body");
     });
 });