tags.html: Add ability to add a tag

diff --git a/.ci/tags.html b/.ci/tags.html
index 36b9c4706f0cd65a3ff9ca7cb32c2b44a46010c3..dd4cee7deab22f302785a36db497bbd76965a405 100644 (file)
--- a/.ci/tags.html
+++ b/.ci/tags.html
@@ -21,11 +21,19 @@
 
         <label>Current tag:</label>
         <select v-model="CurrentCategory" style="max-width: 300px;">
-          <option v-for="category in sortedCategories" :key="category" :value="category">
+          <option v-for="category in sortedCategories()" :key="category" :value="category">
             {{ category }}
           </option>
         </select>
       </div>
+      <div class="panel-tile">
+        <form @submit.prevent="AddTag">
+          <label>Add Tag:</label>
+          <input v-model="newTag" required placeholder="Tag Name">
+          <button>Add</button>
+        </form>
+      </div>
+      <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
 
       <div class="panel-tile">
         <form @submit.prevent="AddFamily">
@@ -49,6 +57,7 @@
           </div>
       </div>
       <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
+      <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
       <div class="panel-tile">
         <button @click="prCSV">Open Pull Request</button>
         <button style="float: right;" @click="saveCSV">Save CSV</button>
@@ -56,6 +65,9 @@
 
     </div>
 
+    <div v-if="sortedFamilies.length === 0">
+      <p>No families found for this tag. Please add some</p>
+    </div>
     <div class="item" v-for="family in sortedFamilies" :key="family.Family">
       <div style="float: left; width: 150px;">
         <b>{{ family.Family }}</b>
@@ -84,6 +96,7 @@
         ready: false,
         isEdited: false,
         commit: "refs/heads/main",
+        newTag: "",
         newFamily: '',
         newWeight: '',
         CurrentCategory: "/Expressive/Calm",
@@ -116,7 +129,7 @@
       },
       CurrentCategory(newCategory) {
         this.updateURL();
-      }
+      },
     },
     created() {
       this.loadCSV();
@@ -144,11 +157,11 @@
       uniqueFamilies() {
         return Array.from(new Set(this.Families.map((family) => family.Family)));
       },
-      sortedCategories() {
-        return Array.from(this.Categories).sort();
-      }
     },
     methods: {
+      sortedCategories() {
+        return Array.from(this.Categories).sort();
+      },
       updateURL() {
         const url = new URL(window.location);
         if (this.commit && this.commit !== "refs/heads/main") {
@@ -230,6 +243,12 @@
       familyStyle(Family) {
         return `font-family: "${Family.Family}", "Adobe NotDef"; font-size: 32pt;`
       },
+      AddTag() {
+        this.isEdited = true;
+        this.Categories.add(this.newTag);
+        this.history.push(`+ Tag added "${this.newTag}"`);
+        this.CurrentCategory = this.newTag;
+      },
       AddFamily() {
         this.isEdited = true;
         let newFamily = { Weight: this.newWeight, Family: this.newFamily, "Group/Tag": this.CurrentCategory }