From 357ff5e776d681422f95e86635243a78abf7a90f Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Wed, 24 Jun 2020 00:55:15 +0100
Subject: [PATCH] changed the result list to include icons added the ability to
 edit result tags made sure tag filters save when refreshed

---
 public/css/style.scss |  65 ++++++++++++++++++
 public/index.html     |  34 ++++-----
 public/js/account.js  | 156 +++++++++++++++++++++++++++++++++++++++++-
 public/js/script.js   |   2 +-
 4 files changed, 232 insertions(+), 25 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 4cd28f2ed..c0afba9b4 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -148,6 +148,60 @@ a:hover {
 }
 
 
+#resultEditTagsPanelWrapper{
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+  #resultEditTagsPanel{
+    background: var(--bg-color);
+    border-radius: var(--roundness);
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+    width: 500px;
+    .buttons{
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+    .button{
+      display: block;
+      color: var(--text-color);
+      cursor: pointer;
+      transition: .25s;
+      padding: .2rem .5rem;
+      border-radius: var(--roundness);
+
+      background: rgba(0,0,0,.1);
+      text-align: center;
+      -webkit-user-select: none;
+      display: grid;
+      align-content: center;
+      height: min-content;
+      height: -moz-min-content;
+      &.active{
+        background: var(--main-color);
+        color: var(--bg-color);
+      }
+      &:hover,&:focus{
+        color: var(--bg-color);
+        background: var(--main-color);
+        outline: none;
+      }
+    }
+  }
+}
+
+
 #versionHistoryWrapper{
   width: 100%;
   height: 100%;
@@ -1493,6 +1547,17 @@ key {
     tbody tr:nth-child(odd) td{
       background: rgba(0, 0, 0, 0.1); 
     }
+    td.infoIcons span{
+      margin: 0 .1rem;
+    }
+  }
+  #resultEditTags{
+    transition: .25s;
+  }
+  #resultEditTags:hover{
+    cursor: pointer;
+    color: var(--text-color);
+    opacity: 1 !important;
   }
 }
 
diff --git a/public/index.html b/public/index.html
index e987469a8..4dec857fb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Monkey Type</title>
   <link rel="stylesheet" href="css/fa.css">
+  <link rel="stylesheet" href="css/balloon.css">
   <link rel="stylesheet" href="css/style.css?v=18">
   <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme">
   <link id="favicon" rel="shortcut icon" href="fav.png">
@@ -40,6 +41,15 @@
       <div class="button"><i class="fas fa-plus"></i></div>
     </div>
   </div>
+  <div id="resultEditTagsPanelWrapper" class="hidden">
+    <div id="resultEditTagsPanel" resultid="">
+      <div class="buttons">
+        <div class="button tag">asdf</div>
+        <div class="button active tag">asdf</div>
+      </div>
+      <div class="button confirmButton"><i class="fas fa-check"></i></div>
+    </div>
+  </div>
   <div id="versionHistoryWrapper" class="hidden">
     <div id="versionHistory">
       <div class="tip">Click anywhere to dismiss</div>
@@ -73,26 +83,6 @@
   <div id="timerWrapper">
     <div id="timer"></div>
   </div>
-  <div id="resultScreenshot" class="">
-    <div class="stats">
-      <div class="group">
-        <div class="top">wpm</div>
-        <div class="bottom">100</div>
-      </div>
-      <div class="group">
-        <div class="top">key</div>
-        <div class="bottom">100/2</div>
-      </div>
-      <div class="group">
-        <div class="top">acc</div>
-        <div class="bottom">100%</div>
-      </div>
-    </div>
-    <div class="logo">
-      <!--     <div class="top">monkey-see</div> -->
-      <div class="bottom">monkey-type.com</div>
-    </div>
-  </div>
   <div id="centerContent" class="hidden">
     <div id="top">
       <div class="logo">
@@ -671,8 +661,8 @@
                   <td>incorrect<br>chars</td>
                   <td>mode</td>
                   <!-- <td>punctuation</td> -->
-                  <td>difficulty</td>
-                  <td>language</td>
+                  <td>info</td>
+                  <td>tags</td>
                   <td>date</td>
                 </tr>
               </thead>
diff --git a/public/js/account.js b/public/js/account.js
index a12495a93..f5a0652bc 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -165,6 +165,12 @@ firebase.auth().onAuthStateChanged(function(user) {
       updateFilterTags();
       updateCommandsTagsList();
       loadActiveTagsFromCookie();
+      updateResultEditTagsPanelButtons();
+      config.resultFilters.forEach(filter => {
+        if(filter.substring(0,4) === "tag_" && filter !== "tag_notag"){
+          toggleFilterButton(filter);
+        }
+      })
     });
     var displayName = user.displayName;
     var email = user.email;
@@ -483,6 +489,53 @@ function loadMoreLines(){
     if (raw == undefined){
       raw = '-';
     }
+
+
+    let icons = `<span aria-label="${result.language.replace('_',' ')}" data-balloon-pos="up"><i class="fas fa-fw fa-globe-americas"></i></span>`;
+
+    if(diff === 'normal'){
+      icons += `<span aria-label="${result.difficulty}" data-balloon-pos="up"><i class="far fa-fw fa-star"></i></span>`;
+    }else if(diff === "expert"){
+      icons += `<span aria-label="${result.difficulty}" data-balloon-pos="up"><i class="fas fa-fw fa-star-half-alt"></i></span>`;
+    }else if(diff === "master"){
+      icons += `<span aria-label="${result.difficulty}" data-balloon-pos="up"><i class="fas fa-fw fa-star"></i></span>`;
+    }
+
+    if(result.punctuation){
+      icons += `<span aria-label="punctuation" data-balloon-pos="up"><i class="fas fa-fw fa-quote-right"></i></span>`;
+    }
+
+    if(result.blindMode){
+      icons += `<span aria-label="blind mode" data-balloon-pos="up"><i class="fas fa-fw fa-eye-slash"></i></span>`;
+    }
+
+    let tagNames = "";
+
+    if(result.tags !== undefined && result.tags.length > 0){
+      result.tags.forEach(tag => {
+        dbSnapshot.tags.forEach(snaptag => {
+          if(tag === snaptag.id){
+            tagNames += snaptag.name + ", ";
+          }
+        })
+      })
+      tagNames = tagNames.substring(0, tagNames.length - 2);
+    }
+
+    // if(tagNames !== ""){
+    //   icons += `<span aria-label="${tagNames}" data-balloon-pos="up"><i class="fas fa-fw fa-tag"></i></span>`;
+    // }
+
+    let tagIcons = `<span id="resultEditTags" resultId="${result.id}" tags='${JSON.stringify(result.tags)}' style="opacity: .25"><i class="fas fa-fw fa-tag"></i></span>`;
+
+    if(tagNames !== ""){
+      if(result.tags !== undefined && result.tags.length > 1){
+        tagIcons = `<span id="resultEditTags" resultId="${result.id}" tags='${JSON.stringify(result.tags)}' aria-label="${tagNames}" data-balloon-pos="up"><i class="fas fa-fw fa-tags"></i></span>`;
+      }else{
+        tagIcons = `<span id="resultEditTags" resultId="${result.id}" tags='${JSON.stringify(result.tags)}' aria-label="${tagNames}" data-balloon-pos="up"><i class="fas fa-fw fa-tag"></i></span>`;
+      }
+    }
+
     
     $(".pageAccount .history table tbody").append(`
     <tr>
@@ -492,8 +545,8 @@ function loadMoreLines(){
     <td>${result.correctChars}</td>
     <td>${result.incorrectChars}</td>
     <td>${result.mode} ${result.mode2}${withpunc}</td>
-    <td>${diff}</td>
-    <td>${result.language.replace('_','<br>')}</td>
+    <td class="infoIcons">${icons}</td>
+    <td>${tagIcons}</td>
     <td>${moment(result.timestamp).format('DD MMM YYYY<br>HH:mm')}</td>
     </tr>`);
   }
@@ -806,3 +859,102 @@ function refreshAccountPage() {
     cont();
   }
 }
+
+
+function showResultEditTagsPanel(){
+  if ($("#resultEditTagsPanelWrapper").hasClass("hidden")) {
+    $("#resultEditTagsPanelWrapper")
+    .stop(true, true)
+    .css("opacity", 0)
+    .removeClass("hidden")
+    .animate({opacity: 1},125);
+  }
+}
+
+function hideResultEditTagsPanel(){
+  if (!$("#resultEditTagsPanelWrapper").hasClass("hidden")) {
+    $("#resultEditTagsPanelWrapper")
+    .stop(true, true)
+    .css("opacity", 1)
+    .animate(
+        {
+            opacity: 0
+        },100,e => {
+          $("#resultEditTagsPanelWrapper").addClass('hidden');
+        });
+    }
+}
+
+$(document).on('click','.pageAccount .group.history #resultEditTags',f => {
+  let resultid = $(f.target).parents('span').attr('resultid');
+  let tags = $(f.target).parents('span').attr('tags');
+  $("#resultEditTagsPanel").attr('resultid',resultid);
+  $("#resultEditTagsPanel").attr('tags',tags);
+  updateActiveResultEditTagsPanelButtons(JSON.parse(tags));
+  showResultEditTagsPanel();
+})
+
+$(document).on('click','#resultEditTagsPanelWrapper .button.tag',f => {
+  $(f.target).toggleClass('active');
+})
+
+$("#resultEditTagsPanelWrapper").click(e => {
+  if($(e.target).attr('id') === "resultEditTagsPanelWrapper"){
+    hideResultEditTagsPanel();
+  }
+})
+
+function updateResultEditTagsPanelButtons(){
+  $("#resultEditTagsPanel .buttons").empty();
+  dbSnapshot.tags.forEach(tag => {
+    $("#resultEditTagsPanel .buttons").append(`<div class="button tag" tagid="${tag.id}">${tag.name}</div>`);
+  })
+}
+
+function updateActiveResultEditTagsPanelButtons(active){
+  if(active === []) return;
+  $.each($("#resultEditTagsPanel .buttons .button"), (index,obj) => {
+    let tagid = $(obj).attr('tagid');
+    if(active.includes(tagid)){
+      $(obj).addClass('active');
+    }else{
+      $(obj).removeClass('active');
+    }
+    // active.forEach(activetagid => {
+    //   if(activetagid === tagid){
+    //     $(obj).addClass('active');
+    //   }else{
+    //     $(obj).removeClass('active');
+    //   }
+    // })
+  });
+}
+
+$("#resultEditTagsPanel .confirmButton").click(f => {
+  let resultid = $("#resultEditTagsPanel").attr('resultid');
+  let oldtags = JSON.parse($("#resultEditTagsPanel").attr('tags'));
+
+  let newtags = [];
+  $.each($("#resultEditTagsPanel .buttons .button"), (index,obj) => {
+    let tagid = $(obj).attr('tagid');
+    if($(obj).hasClass('active')){
+      newtags.push(tagid);
+    }
+  });
+  showBackgroundLoader();
+  hideResultEditTagsPanel();
+  updateResultTags({uid:firebase.auth().currentUser.uid,tags:newtags,resultid:resultid}).then(r=>{
+    hideBackgroundLoader();
+    if(r.data.resultCode === 1){
+      showNotification('Tags updated',1000);
+      dbSnapshot.results.forEach(result => {
+        if(result.id === resultid){
+          result.tags = newtags;
+        }
+      })
+      refreshAccountPage();
+    }else{
+      showNotification('Error updating tags',3000);
+    }
+  });
+})
\ No newline at end of file
diff --git a/public/js/script.js b/public/js/script.js
index 60715139a..d38742ce9 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -34,7 +34,7 @@ const testCompleted = firebase.functions().httpsCallable('testCompleted');
 const addTag = firebase.functions().httpsCallable('addTag');
 const editTag = firebase.functions().httpsCallable('editTag');
 const removeTag = firebase.functions().httpsCallable('removeTag');
-
+const updateResultTags = firebase.functions().httpsCallable('updateResultTags');
 
 function showNotification(text, time) {
   let noti = $(".notification");