added popup for adding tags

public/css/style.scss

@@ -75,6 +75,54 @@ a:hover {
   top: -5rem;
 }
 
+
+#tagsWrapper{
+  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;
+  #tagsEdit{
+    background: var(--bg-color);
+    border-radius: var(--roundness);
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+    .button{
+      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%;

public/index.html

@@ -32,6 +32,13 @@
     Important information about your account. Please click this message.
   </div>
   <div class="notification">Signed in</div>
+  <div id="tagsWrapper" class="hidden">
+    <div id="tagsEdit" action="">
+      <div class="title"></div>
+      <input type="text">
+      <div class="button"><i class="fas fa-plus"></i></div>
+    </div>
+  </div>
   <div id="versionHistoryWrapper" class="hidden">
     <div id="versionHistory">
       <div class="tip">Click anywhere to dismiss</div>

public/js/script.js

@@ -32,6 +32,8 @@ let accuracyStats = {
 let customText = "The quick brown fox jumps over the lazy dog";
 
 const testCompleted = firebase.functions().httpsCallable('testCompleted');
+const addTag = firebase.functions().httpsCallable('addTag');
+
 
 function showNotification(text, time) {
   let noti = $(".notification");
@@ -1262,6 +1264,66 @@ function applyExtraTestColor(tc){
   }
 }
 
+function showEditTags(action){
+  if(action === "add"){
+    $("#tagsWrapper #tagsEdit").attr('action','add');
+    $("#tagsWrapper #tagsEdit .title").html('Add new tag');
+    $("#tagsWrapper #tagsEdit .button").html(`<i class="fas fa-plus"></i>`);
+  }
+  if ($("#tagsWrapper").hasClass("hidden")) {
+    $("#tagsWrapper")
+    .stop(true, true)
+    .css("opacity", 0)
+    .removeClass("hidden")
+    .animate(
+        {
+            opacity: 1
+        },
+        100
+        );
+    }
+}
+
+function hideEditTags(){
+  if (!$("#tagsWrapper").hasClass("hidden")) {
+    $("#tagsWrapper")
+    .stop(true, true)
+    .css("opacity", 1)
+    .animate(
+        {
+            opacity: 0
+        },100,e => {
+          $("#tagsWrapper").addClass('hidden');
+        });
+    }
+}
+
+$("#tagsWrapper").click(e => {
+  if($(e.target).attr('id') === "tagsWrapper"){
+    hideEditTags();
+  }
+})
+
+$("#tagsWrapper #tagsEdit .button").click(e => {
+  let action = $("#tagsWrapper #tagsEdit").attr('action');
+  let inputVal = $("#tagsWrapper #tagsEdit input").val();
+  hideEditTags();
+  addTag({uid:firebase.auth().currentUser.uid,name:inputVal}).then(e => {
+    let status = e.data.status;
+    if(status === 1){
+      showNotification('Tag added',2000);
+      dbSnapshot.tags.push({
+        name: inputVal,
+        id: e.data.id
+      })
+    }else if(status === -1){
+      showNotification('Invalid tag name',3000);
+    }else if(status < -1){
+      showNotification('Unknown error',3000);
+    }
+  })
+})
+
 
 $(document).on("click", "#top .logo", (e) => {
   changePage('test');

public/js/settings.js

@@ -331,3 +331,11 @@ $(document).on("click",".pageSettings .section.tags .tagsList .tag .active",e =>
     }
     updateActiveTags();
 })
+
+$(document).on("click",".pageSettings .section.tags .addTagButton",e => {
+    showEditTags('add');
+})
+
+$(document).on("click",".pageSettings .section.tags .tagsList .tag .editButton",e => {
+    let tagid = $(e.currentTarget).parent('.tag').attr('id');
+})