AddTags wip

diff --git a/tagger2/AddTags.js b/tagger2/AddTags.js
index 4c5f9d26645f123137dfb816f8263af3111f00a6..678b8ea301ac0648e5a4d5904c7b8b49f3af3d00 100644 (file)
--- a/tagger2/AddTags.js
+++ b/tagger2/AddTags.js
@@ -1,28 +1,78 @@
 export default {
+    
+    schema: {
+        categories: ["a", "b", "c"],
+        lowTag: {
+            filters: [],
+            score: 10
+        },
+        highTag: {
+            filters: [],
+            score: 100
+        }
+    },
+
     props: ["categories"],
     data: function() {
         return {
+            currentCategories: [],
             currentAxis: "",
             currentPosition: 0,
             currentOp: "",
+            currentScore: 0,
             filters: [],
         }
     },
     methods: {
         addFilter() {
-            filters.push(
-                {axis: this.currentAxis, op: this.currentOp, value: this.currentPosition}
+            this.filters.push(
+                {
+                    axis: this.currentAxis,
+                    op: this.currentOp,
+                    value: this.currentPosition,
+                    score: this.currentScore
+                }
             )
+        },
+        addTags() {
+            const filterSet = {
+                categories: this.currentCategories,
+                filters: this.filters
+            };
+            this.$emit('tags-added', filterSet);
+            this.filters = [];
         }
     },
     template: `
-        <input type="text" v-model="currentAxis" placeholder="Axis name" />
-        <input type="number" v-model="currentPosition" placeholder="Position" />
-        <select v-model="currentOp">
-            <option value="<=">&lt;=</option>
-            <option value=">=">&gt;=</option>
-            <option value="=">=</option>
-        </select>
-        <button @click="addFilter">Add Filter</button>
+    <div>
+        <h3>Add Tags</h3>
+        <h3>Category</h3>
+            <select v-model="currentCategories" multiple>
+                <option v-for="category in categories" :key="category">
+                    {{ category }}
+                </option>
+            </select>
+        <div>
+            <input type="text" v-model="currentAxis" placeholder="Axis name" />
+            <input type="number" v-model="currentPosition" placeholder="Position" />
+            <select v-model="currentOp">
+                <option value="<=">&lt;=</option>
+                <option value=">=">&gt;=</option>
+                <option value="=">=</option>
+            </select>
+            <input type="number" v-model="currentScore" placeholder="Score" />
+            <button @click="addFilter">Add Filter</button>
+        </div>
+        <div>
+            <h3>Current Filters</h3>
+            <ul>
+                <li v-for="filter in filters" :key="filter.axis + filter.value">
+                    {{ filter.axis }} {{ filter.op }} {{ filter.value }}
+                    <button @click="filters.splice(filters.indexOf(filter), 1)">Remove</button>
+                </li>
+            </ul>
+        </div>
+        <button @click="addTags">Add Tags</button>
+    </div>
     `
 }
\ No newline at end of file

diff --git a/tagger2/index.html b/tagger2/index.html
index c9db07d5cc3e2bda6291f05152ca1ce52ff20357..ed266274128f3c835c4dd52a1e1d592cc2641014 100644 (file)
--- a/tagger2/index.html
+++ b/tagger2/index.html
@@ -15,6 +15,7 @@
     <button @click="addFontPanel('Maven Pro')">Add Font View</button>
     <button @click="addCategoriesPanel(['/Expressive/Loud'])">Add Tag View</button>
     <add-tag :categories="categories" @tag-added="addTag"></add-tag>
+    <add-tags :categories="categories" @tags-added="addTags"></add-tags>
     <add-category @category-added="addCategory"></add-category>
     <div style="display: flex; flex-direction: row; width: 100vw; min-height: 100vh;">
       <div v-for="(panel, idx) in panels" :key="idx" :style="{ flex: '1 1 0', minWidth: 0, borderRight: idx < panels.length - 1 ? '1px solid #eee' : 'none', height: '100vh', overflow: 'auto' }">
@@ -37,6 +38,7 @@
     import AddCategory from "./AddCategory.js";
     import VFView from "./VFView.js";
     import { linter } from "./linter.js";
+    import AddTags from "./AddTags.js";
     import AddCategory from "./AddCategory.js";
     import VFView from "./VFView.js";
 
@@ -85,6 +87,25 @@
           tag.family = family
           this.tags.items.push(tag);
         },
+        addTags(filterSet) {
+            let tags = []
+            let filteredFamilies = []
+            for (let family of this.gf.families) {
+              let includeFamily = false;
+              for (let axis of family.axes) {
+                if (
+                  filterSet.filters.map(f => f.axis).includes(axis.tag) &&
+                  axis.min <= filterSet.filters.find(f => f.axis === axis.tag).value &&
+                  axis.max >= filterSet.filters.find(f => f.axis === axis.tag).value) {
+                    includeFamily = true;
+                  }
+              }
+              if (includeFamily) {
+                console.log("Including family:", family);
+              }
+              includeFamily = false;
+            }
+        },
         addCategory(category) {
           console.log("Adding category", category);
           if (!this.tags.categories.includes(category)) {
@@ -106,6 +127,8 @@
         this.gf.linter = linter;
         this.tags = new Tags(this.gf);
         this.tags.sortCategories();
+
+        // Subscribe to events
         this.$root.$on("remove-tag", this.removeTag);
       }
     });