Add JS logic for filter

js/filter.js

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+
+const initFilter = element => {
+  const index = JSON.parse(element.getAttribute('data-index'));
+
+  const filter = new Vue({
+    el: element,
+    template: element.outerHTML,
+    data: {
+      ring: 'all',
+      index,
+    },
+    methods: {
+      setRing(ring, event) {
+        if (event) event.preventDefault()
+        this.ring = ring;
+      },
+      isRingVisible(ring) {
+        return this.ring === 'all' || ring === this.ring;
+      },
+      isGroupVisible(letter) {
+        const itemsInLetter = this.index[letter] || [];
+        const visibleItems = itemsInLetter.filter((item) => this.isRingVisible(item.attributes.ring));
+        return visibleItems.length > 0;
+      },
+    },
+  });
+};
+
+export default initFilter;

js/radar.js

@@ -1,3 +1,8 @@
-const add = (x, y) => x + y;
+import filter from './filter';
 
-add(1, 4);
+const enhanceComponent = (selector, enhancer) => {
+  const $filter = [].slice.call(document.querySelectorAll(selector));
+  $filter.map(enhancer);
+}
+
+enhanceComponent('.js--filter', filter);