From 63d02aa3a7f98b9d51bc6e73ce169c3ec6b62c28 Mon Sep 17 00:00:00 2001
From: joe fleming <joe.fleming@gmail.com>
Date: Fri, 31 Aug 2018 13:37:53 -0700
Subject: [PATCH] feat: even more site functionality

---
 packages/search-site/src/index.ejs | 350 +++++++++++++++++++----------
 packages/search-site/src/index.mjs |   8 +-
 2 files changed, 240 insertions(+), 118 deletions(-)
diff --git a/packages/search-site/src/index.ejs b/packages/search-site/src/index.ejs
index cae9890..074bae9 100644
--- a/packages/search-site/src/index.ejs
+++ b/packages/search-site/src/index.ejs
@@ -1,146 +1,264 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
-    <title>Strain Search</title>
-  </head>
 
-  <body>
-    <noscript><h1>You're going to want to enable JavaScript</h1></noscript>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
+  <title>Strain Search</title>
+  <style>
+    .tag:not(body).is-indica {
+      background-color: hsl(217, 71%, 53%);
+      color: #fff;
+    }
 
-    <section class="section">
-      <form id="search-form" @submit.prevent="handleSubmit">
-        <div class="container">
-          <h1 class="title">
+    .tag:not(body).is-sativa {
+      background-color: hsl(348, 100%, 61%);
+      color: #fff;
+    }
+
+    .tag:not(body).is-hybrid {
+      background-color: hsl(271, 100%, 71%);
+      color: #fff;
+    }
+
+    #strain-list .cards {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    #strain-list .cards .card {
+      width: 100%;
+      margin: 12px;
+    }
+
+    @media screen and (min-width: 769px) {
+      #strain-list .cards .card {
+        width: 45%;
+      }
+    }
+
+    @media screen and (min-width: 1280px) {
+      #strain-list .cards .card {
+        width: 30%;
+      }
+    }
+
+    #search-form .filters .select {
+      display: block;
+    }
+
+    #search-form .filters .select select[multiple] {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <noscript><h1>You're going to want to enable JavaScript</h1></noscript>
+
+  <section class="section">
+    <form id="search-form" @submit.prevent="handleSubmit">
+      <div class="container">
+        <h1 class="title">
           Strain Search
-          </h1>
+        </h1>
 
-          <!-- Name Search Input -->
-          <div class="field">
-            <label class="label">Search By Name</label>
-            <div class="control">
-              <input ref="name" class="input" type="text" placeholder="Text input">
-            </div>
+        <!-- Name Search Input -->
+        <div class="field">
+          <label class="label">Search By Name</label>
+          <div class="control">
+            <input ref="name" class="input" type="text" placeholder="Text input">
           </div>
+        </div>
 
-          <!-- Multi-Selects -->
-          <div class="columns">
-            <div class="column">
-              <div class="columns is-mobile">
-                <div class="column">
-                  <div class="field">
-                    <label class="label">Desired Effects</label>
-                    <div class="select is-multiple">
-                      <select ref="effects" multiple size="6">
-                        <option value="Happy">Happy</option>
-                        <option value="Euphoric">Euphoric</option>
-                        <option value="Sleepy">Sleepy</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="column">
-                  <div class="field">
-                    <label class="label">Medical Use</label>
-                    <div class="select is-multiple">
-                      <select ref="uses" multiple size="6">
-                        <option value="Pain">Pain</option>
-                        <option value="Depression">Depression</option>
-                        <option value="Insomnia">Insomnia</option>
-                      </select>
-                    </div>
+        <!-- Multi-Selects -->
+        <div class="columns filters">
+          <div class="column is-half">
+            <div class="columns is-mobile">
+              <div class="column is-half">
+                <div class="field">
+                  <label class="label">Desired Effects</label>
+                  <div class="select is-multiple">
+                    <select ref="effects" multiple size="6">
+                      <option v-for="effect in effects" :value="effect">{{effect | capitalize}}</option>
+                    </select>
                   </div>
                 </div>
               </div>
-            </div>
-
-            <div class="column">
-              <div class="columns is-mobile">
-                <div class="column">
-                  <div class="field">
-                    <label class="label">Condition</label>
-                    <div class="select is-multiple">
-                      <select ref="conditions" multiple size="6">
-                        <option value="PTSD">PTSD</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="column">
-                  <div class="field">
-                    <label class="label">Flavor</label>
-                    <div class="select is-multiple">
-                      <select ref="flavors" multiple size="6">
-                        <option value="Sweet">Sweet</option>
-                        <option value="Woody">Woody</option>
-                      </select>
-                    </div>
+              <div class="column is-half">
+                <div class="field">
+                  <label class="label">Medical Use</label>
+                  <div class="select is-multiple">
+                    <select ref="uses" multiple size="6">
+                      <option v-for="use in uses" :value="use">{{use | capitalize}}</option>
+                    </select>
                   </div>
                 </div>
               </div>
             </div>
           </div>
 
-          <!-- Form Submits  -->
-          <div class="field is-grouped">
-            <div class="control">
-              <button type="submit" class="button is-link">Submit</button>
-            </div>
-            <div class="control">
-              <button type="button" class="button is-text" @click.prevent="resetForm">Clear</button>
+          <div class="column is-half">
+            <div class="columns is-mobile">
+              <div class="column is-half">
+                <div class="field">
+                  <label class="label">Condition</label>
+                  <div class="select is-multiple">
+                    <select ref="conditions" multiple size="6">
+                      <option v-for="condition in conditions" :value="condition">{{condition | capitalize}}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <div class="column is-half">
+                <div class="field">
+                  <label class="label">Flavor</label>
+                  <div class="select is-multiple">
+                    <select ref="flavors" multiple size="6">
+                      <option v-for="flavor in flavors" :value="flavor">{{flavor | capitalize}}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-      </form>
-    </section>
 
-    <section class="section">
-      <div class="container" id="strain"></div>
-    </section>
+        <!-- Form Submits  -->
+        <div class="field is-grouped">
+          <div class="control">
+            <button type="submit" class="button is-link">Submit</button>
+          </div>
+          <div class="control">
+            <button type="button" class="button is-text" @click.prevent="resetForm">Clear</button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </section>
 
-    <script src="https://unpkg.com/lunr@2.3.1/lunr.js"></script>
-    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
-    <script src="https://unpkg.com/mitt@1.1.3/dist/mitt.umd.js"></script>
-    <script>
-      // lunr = window.lunr
-      // mitt = window.mitt
-      (function ({ mitt, lunr }) {
-        const data = <%- data %>;
-        const emitter = mitt();
+  <section class="section" id="strain-list">
+    <div v-if="strains.length === 0" class="container">
+      <p>NO MATCHING STRAINS :(</p>
+    </div>
 
-        // debugging...
-        const target = document.querySelector('#strain').textContent = data.strains[20].name;
+    <div v-if="strains.length > 0" class="container cards">
+      <div v-for="strain in strains" class="card">
+        <header class="card-header">
+          <p class="card-header-title">{{strain.name | capitalize}}</p>
+          <div class="tags" style="margin: 0 12px;">
+            <span class="tag is-rounded is-light">{{strain.rating | round}} ({{strain.rating_count}})</span>
+          </div>
+        </header>
+        <div class="card-content">
+          <span v-if="strain.category === 'indica'" class="tag is-rounded is-indica">{{strain.category}}</span>
+          <span v-if="strain.category === 'sativa'" class="tag is-rounded is-sativa">{{strain.category}}</span>
+          <span v-if="strain.category === 'hybrid'" class="tag is-rounded is-hybrid">{{strain.category}}</span>
+        </div>
+      </div>
+    </div>
+  </section>
 
-        // helpers
-        const getMultiValues = node => Array.from(node.selectedOptions).map(o => o.value);
+  <script src="https://unpkg.com/lunr@2.3.1/lunr.js"></script>
+  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
+  <script src="https://unpkg.com/mitt@1.1.3/dist/mitt.umd.js"></script>
+  <script>
+    // lunr = window.lunr
+    // mitt = window.mitt
+    (function ({ mitt, lunr }) {
+      const data = <%- data %>;
+      const emitter = mitt();
 
-        // form handler
-        new Vue({
-          el: '#search-form',
-          data() {
-            return {};
+      // helpers
+      const getMultiValues = node => Array.from(node.selectedOptions).map(o => o.value);
+
+      // vue helpers
+      Vue.filter('capitalize', value => {
+        if (!value) return '';
+        const v = value.toString();
+        return v.charAt(0).toUpperCase() + v.slice(1);
+      });
+
+      Vue.filter('round', (value, digits = 2) => {
+        const v = parseFloat(value, 10);
+        return Math.round(v * (10 * digits)) / (10 * digits);
+      });
+
+      // form handler
+      new Vue({
+        el: '#search-form',
+        data() {
+          return {
+            effects: data.effects,
+            uses: data.uses,
+            conditions: data.conditions,
+            flavors: data.flavors,
+          };
+        },
+        methods: {
+          handleSubmit() {
+            const requirements = {
+              name: this.$refs.name.value,
+              effects: getMultiValues(this.$refs.effects),
+              uses: getMultiValues(this.$refs.uses),
+              conditions: getMultiValues(this.$refs.conditions),
+              flavors: getMultiValues(this.$refs.flavors),
+            }
+            emitter.emit('search', requirements)
           },
-          methods: {
-            handleSubmit() {
-              const requirements = {
-                name: this.$refs.name.value,
-                effects: getMultiValues(this.$refs.effects),
-                uses: getMultiValues(this.$refs.uses),
-                conditions: getMultiValues(this.$refs.conditions),
-                flavors: getMultiValues(this.$refs.flavors),
-              }
-              console.log(requirements)
+          resetForm() {
+            this.$el.reset();
+          }
+        },
+      });
+
+      new Vue({
+        el: '#strain-list',
+        data() {
+          return {
+            all_strains: data.strains,
+            strains: [],
+            requirements: {
+              name: '',
+              effects: [],
+              uses: [],
+              conditions: [],
+              flavors: [],
             },
-            resetForm() {
-              this.$el.reset();
+          };
+        },
+        created() {
+          emitter.on('search', this.setRequirements);
+          this.updateStrains();
+        },
+        beforeDestroy() {
+          emitter.off('search', this.setRequirements);
+        },
+        methods: {
+          setRequirements(reqs) {
+            // this.requirements = reqs;
+            reqs => console.log('search params', reqs);
+          },
+          updateStrains(limit = 20) {
+            const hasName = this.requirements.name.length > 0;
+            const hasFilters =
+              this.requirements.effects.length > 0 ||
+              this.requirements.uses.length > 0 ||
+              this.requirements.conditions.length > 0 ||
+              this.requirements.flavors.length > 0;
+
+            if (!hasName && !hasFilters) {
+              this.strains = this.all_strains.slice(0, limit);
             }
           }
-        })
-      })(this);
-    </script>
-  </body>
+        },
+      });
+
+    })(this);
+  </script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/packages/search-site/src/index.mjs b/packages/search-site/src/index.mjs
index 009b8e0..c7ac391 100644
--- a/packages/search-site/src/index.mjs
+++ b/packages/search-site/src/index.mjs
@@ -9,7 +9,7 @@ function getData() {
   return new Promise((resolve, reject) => {
     fs.readFile('../scraper/db.json', (err, str) => {
       if (err) reject(err);
-      else resolve(str);
+      else resolve(JSON.parse(str));
     });
   });
 }
@@ -17,9 +17,13 @@ function getData() {
 async function build() {
   const data = await getData();
   const options = {};
+  data.strains = data.strains.sort((n, strain) => {
+    if (strain.rating === n.rating) return 0;
+    return strain.rating < n.rating ? -1 : 1;
+  });
 
   return new Promise((resolve, reject) => {
-    ejs.renderFile(srcFile, { data }, options, (err, str) => {
+    ejs.renderFile(srcFile, { data: JSON.stringify(data) }, options, (err, str) => {
       if (err) reject(err);
       else {
         fs.writeFile(destFile, str, er => {
