Compare, begin components

app/pods/protected/compare/select-form/component.js

@@ -0,0 +1,49 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  characteristics: null,
+  strains: null,
+
+  "on-search": null,
+
+  selectedStrains: null,
+  selectedCharacteristics: null,
+
+  actions: {
+    search: function() {
+      const query = {
+        strain_ids: this.get('selectedStrains'),
+        characteristic_ids: this.get('selectedCharacteristics'),
+      };
+      this.attrs['on-search'](query);
+    },
+
+    selectAllStrains: function() {
+      const strains = this.get('strains');
+      const strain_ids = [];
+      strains.forEach((strain) => {
+        strain_ids.push(strain.get('id'));
+      });
+      this.set('selectedStrains', strain_ids.join(","));
+    },
+
+    deselectAllStrains: function() {
+      this.set('selectedStrains', '');
+    },
+
+    selectAllCharacteristics: function() {
+      const chars = this.get('characteristics');
+      const char_ids = [];
+      chars.forEach((char) => {
+        char_ids.push(char.get('id'));
+      });
+      this.set('selectedCharacteristics', char_ids.join(","));
+    },
+
+    deselectAllCharacteristics: function() {
+      this.set('selectedCharacteristics', '');
+    },
+  },
+});

app/pods/protected/compare/select-form/template.hbs

@@ -0,0 +1,53 @@
+<div class="span-1">
+  <fieldset>
+    <form {{action 'search' on='submit'}}>
+      <ul>
+        <li>
+          <label>Strains</label>
+          {{
+            select-2
+            multiple=true
+            content=strains
+            value=selectedStrains
+            optionValuePath="id"
+            optionLabelPath="fullNameMU"
+            placeholder="Select one or more strains"
+          }}
+        </li>
+        <li>
+          <button class="action button-green smaller right" {{action 'selectAllStrains'}}>
+            Select All
+          </button>
+          <button class="action button-red smaller right" {{action 'deselectAllStrains'}}>
+            Deselect All
+          </button>
+        </li>
+        <li>
+          <label>Characteristics</label>
+          {{
+            select-2
+            multiple=true
+            content=characteristics
+            value=selectedCharacteristics
+            optionValuePath="id"
+            optionLabelPath="characteristicName"
+            placeholder="Select one or more characteristics"
+          }}
+        </li>
+        <li>
+          <button class="action button-green smaller right" {{action 'selectAllCharacteristics'}}>
+            Select All
+          </button>
+          <button class="action button-red smaller right" {{action 'deselectAllCharacteristics'}}>
+            Deselect All
+          </button>
+        </li>
+        <li>
+          <button type="submit" class="action button-gray smaller right">
+            Search
+          </button>
+        </li>
+      </ul>
+    </form>
+  </fieldset>
+</div>