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

Compare commits

base: w33ble:63d02aa3a7f98b9d51bc6e73ce169c3ec6b62c28
Branches Tags
w33ble:master
w33ble:v1.1.0 w33ble:v1.0.2 w33ble:v1.0.1 w33ble:v1.0.0
...
compare: w33ble:9a1f2f9785e36bd2de2a3a1fbf46bbc9cfdb90d3
Branches Tags
w33ble:master
w33ble:v1.1.0 w33ble:v1.0.2 w33ble:v1.0.1 w33ble:v1.0.0

1 Commits
63d02aa3a7 ... 9a1f2f9785

Author SHA1 Message Date
joe fleming
9a1f2f9785 feat: even more site functionality 2018-08-31 15:12:14 -07:00
2 changed files with 241 additions and 118 deletions
Expand all files Collapse all files

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

@@ -1,146 +1,265 @@
<!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/vue@2.5.17/dist/vue.min.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>

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