content_playlist.handlebars

<section>
  <script>
    function addComment() {
      //alert("{{genre}}");
      $.ajax({
        url: "/addComment",
        type: "post",
        data: {
          "comments": $("#comments").val(),
          "genre": $("#genre").val(),
          "genretitle": $("#genretitle").val(),
        }
      });
      load_content("content_playlist", "{{genre}}")
    }


    function deleteComment(ID) {
      $.ajax({
        url: "/deleteComment",
        type: "post",
        data: {
          "commentID": ID
        }
      });
      load_content("content_playlist", "{{genre}}")
    }

    function setPlaylistRating(ev) {
      let span = ev;
      let parent = $(ev).parent();
      let stars = parent.children();
      let match = false;
      let num = 0;
      stars.each(function (index, star) {
        if (match) {
          star.classList.remove('rated');
        } else {
          star.classList.add('rated');
        }
        if (star === span) {
          match = true;
          num = index + 1;
        }
      });
      $.ajax({
        url: "/playlistRating",
        type: "post",
        data: {
          "num": num,
          "playlistId": parent.parent()[0].classList[0]
        }
      });
      parent.parent()[0].setAttribute('data-rating', num);
    }

    function setCommentRating(ev) {
      let span = ev;
      let parent = $(ev).parent();
      let stars = parent.children();
      let match = false;
      let num = 0;
      stars.each(function (index, star) {
        if (match) {
          star.classList.remove('rated');
        } else {
          star.classList.add('rated');
        }
        if (star === span) {
          match = true;
          num = index + 1;
        }
      });
      $.ajax({
        url: "/commentRating",
        type: "post",
        data: {
          "num": num,
          "commentId": parent.parent()[0].classList[0]
        }
      });
      parent.parent()[0].setAttribute('data-rating', num);
    }
    function setRating(ev) {
      let span = ev;
      let parent = $(ev).parent();
      let stars = parent.children();
      let match = false;
      let num = 0;
      stars.each(function (index, star) {
        if (match) {
          star.classList.remove('rated');
        } else {
          star.classList.add('rated');
        }
        if (star === span) {
          match = true;
          num = index + 1;
        }
      });
      $.ajax({
        url: "/audioRating",
        type: "post",
        data: {
          "num": num,
          "audioId": parent.parent()[0].classList[0]
        }
      });
      parent.parent()[0].setAttribute('data-rating', num);
    }

    /* This function changes the source for the HTML5 Audio player, allowing it to be changed by the user */
    function cs_change_music(music) {
      document.getElementById("my-audio").pause();
      document.getElementById("my-audio").setAttribute('src', music);
      document.getElementById("my-audio").load();
      document.getElementById("my-audio").play();

    }

  </script>
  <h2 class="footer_ram">
    {{genretitle}}
    <section class="{{genre}}">
      <p class="small_text">
        <span class="star" onclick=setPlaylistRating(this)>&nbsp;</span>
        <span class="star" onclick=setPlaylistRating(this)>&nbsp;</span>
        <span class="star" onclick=setPlaylistRating(this)>&nbsp;</span>
        <span class="star" onclick=setPlaylistRating(this)>&nbsp;</span>
        <span class="star" onclick=setPlaylistRating(this)>&nbsp;</span>
        {{genrerating}}
      </p>
    </section>
  </h2>
  <input id="genretitle" name="genretitle" type="hidden" value="{{genretitle}}">
  <input id="genre" name="genre" type="hidden" value="{{genre}}">
  <table>
    <tr>
      <th>Track Name</th>
      <th>Artist</th>
      <th>Album</th>
      <th>Uploaded by</th>
      <th>Delete Track</th>
      <th>Rating</th>
    </tr>
    {{#each playlistTracks}}
    <tr>
      <td> <button onclick="cs_change_music('audio/{{this.name}}.mp3');">{{this.name}}</button></td>
      <td>{{this.artist}}</td>
      <td>{{this.album}}</td>
      <td>{{this.user}}</td>
      <td> <button data-trackname="{{this.name}}" data-trackid="{{this.uploadID}}" data-trackuser="{{this.user}}"
          onclick=OnClickDeleteTrack(this)>Delete this track</button>
      </td>
      <td>
        <section class="{{this.uploadID}}">
          <p>
            <span class="star" onclick=setRating(this)>&nbsp;</span>
            <span class="star" onclick=setRating(this)>&nbsp;</span>
            <span class="star" onclick=setRating(this)>&nbsp;</span>
            <span class="star" onclick=setRating(this)>&nbsp;</span>
            <span class="star" onclick=setRating(this)>&nbsp;</span>
            {{this.rating}}
          </p>
        </section>
      </td>
    </tr>
    {{/each}}
  </table>

</section>

<section id="commentInput">
  <center>
    <form data-genre-title="{{genretitle}}" onsubmit="addComment(); return false;">
      <input type="text" placeholder="Enter Comment" name="comments" id="comments">
      <button type="submit">Add</button>
    </form>
  </center>
</section>

<section id="commentDisplay" class="grid-container2 font_" style="text-align: center;">

  <table>
    <tr>
      <th>User</th>
      <th>Comment</th>
      <th>Delete comment</th>
      <th>Rating</th>
    </tr>
    {{#each playlistcomments}}
    <tr>
      <td>{{this.user}}</td>
      <td>{{this.comments}}</td>
      <td>
        <button class="btnDeleteComment" data-genre-title="{{genretitle}}"
          onclick=deleteComment({{this.commentID}})>Delete comment</button>
      </td>
      <td> 
         <section class="{{this.commentID}}">
          <p>
            <span class="star" onclick=setCommentRating(this)>&nbsp;</span>
            <span class="star" onclick=setCommentRating(this)>&nbsp;</span>
            <span class="star" onclick=setCommentRating(this)>&nbsp;</span>
            <span class="star" onclick=setCommentRating(this)>&nbsp;</span>
            <span class="star" onclick=setCommentRating(this)>&nbsp;</span>
            {{this.rating}}
          </p>
      </td>
    </tr>
    {{/each}}
  </table>
  <script>
    $(document).ready(function () {
    });
  </script>
</section>

<section id="previousPage" class="grid-container3 font_" style="text-align: center;">
  <button type="button" id="btn_loadcontent" style="display: none;" class="btn3 custom_center"
    onclick=load_content("content_listen","listen")>Previous page</button>
</section>