w33ble/strain-tools
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

feat: even more site functionality

Browse Source
This commit is contained in:
joe fleming
2018-08-31 13:37:53 -07:00
parent fc158da8a1
commit 63d02aa3a7
2 changed files with 240 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
packages/search-site/src/index.ejs
View File

@@ -1,11 +1,58 @@
<!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>
<style>
.tag:not(body).is-indica {
background-color: hsl(217, 71%, 53%);
color: #fff;
}
.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>
@@ -27,29 +74,25 @@
</div>
<!-- Multi-Selects -->
<div class="columns">
<div class="column">
<div class="columns filters">
<div class="column is-half">
<div class="columns is-mobile">
<div class="column">
<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 value="Happy">Happy</option>
<option value="Euphoric">Euphoric</option>
<option value="Sleepy">Sleepy</option>
<option v-for="effect in effects" :value="effect">{{effect | capitalize}}</option>
</select>
</div>
</div>
</div>
<div class="column">
<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 value="Pain">Pain</option>
<option value="Depression">Depression</option>
<option value="Insomnia">Insomnia</option>
<option v-for="use in uses" :value="use">{{use | capitalize}}</option>
</select>
</div>
</div>
@@ -57,26 +100,25 @@
</div>
</div>
<div class="column">
<div class="column is-half">
<div class="columns is-mobile">
<div class="column">
<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 value="PTSD">PTSD</option>
<option v-for="condition in conditions" :value="condition">{{condition | capitalize}}</option>
</select>
</div>
</div>
</div>
<div class="column">
<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 value="Sweet">Sweet</option>
<option value="Woody">Woody</option>
<option v-for="flavor in flavors" :value="flavor">{{flavor | capitalize}}</option>
</select>
</div>
</div>
@@ -98,8 +140,26 @@
</form>
</section>
<section class="section">
<div class="container" id="strain"></div>
<section class="section" id="strain-list">
<div v-if="strains.length === 0" class="container">
<p>NO MATCHING STRAINS :(</p>
</div>
<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>
<script src="https://unpkg.com/lunr@2.3.1/lunr.js"></script>
@@ -112,17 +172,31 @@
const data = <%- data %>;
const emitter = mitt();
// debugging...
const target = document.querySelector('#strain').textContent = data.strains[20].name;
// 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 {};
return {
effects: data.effects,
uses: data.uses,
conditions: data.conditions,
flavors: data.flavors,
};
},
methods: {
handleSubmit() {
@@ -133,14 +207,58 @@
conditions: getMultiValues(this.$refs.conditions),
flavors: getMultiValues(this.$refs.flavors),
}
console.log(requirements)
emitter.emit('search', requirements)
},
resetForm() {
this.$el.reset();
}
},
});
new Vue({
el: '#strain-list',
data() {
return {
all_strains: data.strains,
strains: [],
requirements: {
name: '',
effects: [],
uses: [],
conditions: [],
flavors: [],
},
};
},
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>
</html>

8
packages/search-site/src/index.mjs
View File

@@ -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 => {