allow multiple categories

diff --git a/tagger2/TagsByCategory.js b/tagger2/TagsByCategory.js
deleted file mode 100644 (file)
index a5166b2..0000000
--- a/tagger2/TagsByCategory.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
-  props: ['tags', 'category'],
-  computed: {
-    filteredTags() {
-      // Assumes each tag has a property 'tagName' for category
-      return this.tags.filter(tag => tag.tagName === this.category);
-    }
-  },
-  template: `
-    <div>
-      <h3>Tags for category: {{ category }}</h3>
-      <ul>
-        <li v-for="tag in filteredTags" :key="tag.family.name + tag.tagName">
-          {{ tag.family.name }} (Score: {{ tag.score }})
-        </li>
-      </ul>
-    </div>
-  `
-};

diff --git a/tagger2/index.html b/tagger2/index.html
index 455a3d44954a8e6996a74cd34efcba933717e42c..e8216b8aa5f7298582580cd9496ef4d41c7fc10f 100644 (file)
--- a/tagger2/index.html
+++ b/tagger2/index.html
@@ -11,16 +11,16 @@
     <div v-for="font in fontView" :key="font">
       <tags-by-font :tags="tags.items" :font="font"></tags-by-font>
     </div>
-    <tags-by-category :tags="tags.items" category="/Expressive/Loud"></tags-by-category>
+    <tags-by-categories :tags="tags.items" :categories="categoryView"></tags-by-category>
     
   </div>
   <script type="module">
     import { GF, Tags } from './models.js';
     import TagsByFont from "./TagsByFont.js";
-    import TagsByCategory from "./TagsByCategory.js";
+    import TagsByCategories from "./TagsByCategories.js";
 
     Vue.component('tags-by-font', TagsByFont);
-    Vue.component('tags-by-category', TagsByCategory);
+    Vue.component('tags-by-categories', TagsByCategories);
     
     var app = new Vue({
       el: '#app',
@@ -28,6 +28,7 @@
         gf: null,
         tags: null,
         fontView: ["Maven Pro", "Roboto"],
+        categoryView: ["/Expressive/Loud", "/Expressive/Childlike"],
       },
       async created() {
         // Load the GF and Tags classes