tags.html: Add history panel

diff --git a/.ci/tags.html b/.ci/tags.html
index 20965b6d69e3cff86486896b3f15b6ae03f469b0..feae5bab9ef8c803804be6f633d29769cb542423 100644 (file)
--- a/.ci/tags.html
+++ b/.ci/tags.html
@@ -31,14 +31,22 @@
           <button>Add</button>
         </form>
       </div>
-      <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;">
-
+      <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
+      <div class="panel-tile" style="max-height: 100px; overflow: scroll;">
+        <label>History</label>
+          <div v-if="isEdited">
+            <p style="font-size: 10pt;" v-for="item in history">{{ item }}</p>
+          </div>
+          <div v-else>
+            <p style="font-size: 10pt;">No changes</p>
+          </div>
       </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>
       </div>
-      <div v-if="isEdited" id="edited-panel">Edited</div>
+
     </div>
 
     <div class="item" v-for="family in sortedFamilies" :key="family.Family">
@@ -46,7 +54,7 @@
         <b>{{ family.Family }}</b>
       </div>
       <div style="float: left; width: 100px;">
-        <input style="width: 50px;" v-model.lazy="family.Weight" @input="edited" placeholder="family.Weight">
+        <input style="width: 50px;" v-model.lazy="family.Weight" @change="edited(family)" placeholder="family.Weight">
         <button @click="removeFamily(family)">X</button>
       </div>
       <div v-if="ready" :style="familyStyle(family)" contenteditable="true">
@@ -91,6 +99,7 @@
           ["Tamil", "மனிதக் குடும்பத்தினைச் சேர்ந்த யாவரதும் உள்ளார்ந்த"],
         ]),
         FamilyScripts: new Map(),
+        history: [],
       };
     },
     created() {
@@ -115,8 +124,9 @@
       familyPangram(family) {
         return this.Pangrams.get(this.FamilyScripts.get(family.Family));
       },
-      edited() {
+      edited(family) {
         this.isEdited = true;
+        this.history.push(`* ${family.Family},${family["Group/Tag"]},${family.Weight}`);
       },
       parseUnicode(str) {
         let ranges = str.split(",");
@@ -180,11 +190,15 @@
       },
       AddFamily() {
         this.isEdited = true;
-        this.Families.push({ Weight: this.newWeight, Family: this.newFamily, "Group/Tag": this.CurrentCategory });
+        let newFamily = { Weight: this.newWeight, Family: this.newFamily, "Group/Tag": this.CurrentCategory }
+        this.Families.push(newFamily);
+        
+        this.history.push(`+ ${newFamily.Family},${newFamily["Group/Tag"]},${newFamily.Weight}`);
       },
       removeFamily(Family) {
         this.isEdited = true;
-        this.Families = this.Families.filter((t) => t !== Family)
+        this.Families = this.Families.filter((t) => t !== Family);
+        this.history.push(`- ${Family.Family},${Family["Group/Tag"]},${Family.Weight}`);
       },
       saveCSV() {
         this.Families = this.Families.filter((t) => t.Family !== "");