Compare commits
1 Commits
v1.0.1
...
63d02aa3a7
| Author | SHA1 | Date | |
|---|---|---|---|
| 63d02aa3a7 |
@@ -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>
|
||||
@@ -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 => {
|
||||
|
||||
Reference in New Issue
Block a user