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

feat: functional search on site

Browse Source
This commit is contained in:
joe fleming
2018-08-31 16:07:55 -07:00
parent 9a1f2f9785
commit d3b21103eb
2 changed files with 112 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,32 +145,28 @@
<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 v-if="strains.length > 0" class="container">
<div>
<h3 class="title is-3">Found {{strains.length}} Strains</h3>
</div>
<div class="cards">
<strain-card v-for="strain in strains" :strain="strain" />
</div>
</div>
</section>
<script src="https://unpkg.com/lunr@2.3.1/lunr.js"></script>
<!-- dev build of vue, useful for debugging -->
<!-- <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script> -->
<!-- production build of vue, with template compiler -->
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/lunr@2.3.1/lunr.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 %>;
(function ({ mitt, lunr }, data) {
const emitter = mitt();
// helpers
@@ -188,6 +184,50 @@
return Math.round(v * (10 * digits)) / (10 * digits);
});
Vue.component('tag-list', {
props: {
tags: Array,
title: String,
},
template: `
<div v-if="tags.length" class="tag-list columns is-mobile">
<div class="tag-list--title column is-one-quarter">
{{title}}
</div>
<div class="tag-list--tag column">
<div v-if="tags.length" class="tags">
<span v-for="tag in tags" class="tag is-rounded">{{tag}}</span>
</div>
</div>
</div>
`,
});
Vue.component('strain-card', {
props: {
strain: Object,
},
template: `
<div class="card">
<header class="card-header">
<p class="card-header-title">{{strain.name}}</p>
<div class="tags" style="margin: 0 12px; padding: 6px 0;">
<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>
<span class="tag is-rounded is-light">{{strain.rating | round}} ({{strain.rating_count}})</span>
</div>
</header>
<div class="card-content">
<tag-list title="Effects" :tags="strain.effects" />
<tag-list title="Uses" :tags="strain.uses" />
<tag-list title="Conditions" :tags="strain.conditions" />
<tag-list title="Flavors" :tags="strain.flavors" />
</div>
</div>
`,
});
// form handler
new Vue({
el: '#search-form',
@@ -208,7 +248,8 @@
conditions: getMultiValues(this.$refs.conditions),
flavors: getMultiValues(this.$refs.flavors),
}
emitter.emit('search', requirements)
emitter.emit('search', requirements);
},
resetForm() {
this.$el.reset();
@@ -232,18 +273,30 @@
};
},
created() {
emitter.on('search', this.setRequirements);
// lunr setup
this.idx = window.idx = lunr(function () {
this.ref('id');
this.field('name');
this.field('effects');
this.field('uses');
this.field('conditions');
this.field('flavors');
data.strains.forEach(doc => this.add(doc));
});
this.searchListener = reqs => {
this.requirements = reqs;
this.updateStrains();
}
emitter.on('search', r => this.searchListener(r));
this.updateStrains();
},
beforeDestroy() {
emitter.off('search', this.setRequirements);
emitter.off('search', r => this.searchListener(r));
},
methods: {
setRequirements(reqs) {
// this.requirements = reqs;
reqs => console.log('search params', reqs);
},
updateStrains(limit = 20) {
updateStrains(limit = 40) {
const hasName = this.requirements.name.length > 0;
const hasFilters =
this.requirements.effects.length > 0 ||
@@ -252,13 +305,42 @@
this.requirements.flavors.length > 0;
if (!hasName && !hasFilters) {
this.strains = this.all_strains.slice(0, limit);
this.strains = this
.all_strains
.slice(0, limit);
return;
}
const searchParts = [this.requirements.name];
this.requirements.effects.forEach(t => searchParts.push(`+effects:${t}`));
this.requirements.uses.forEach(t => searchParts.push(`+uses:${t}`));
this.requirements.conditions.forEach(t => searchParts.push(`+conditions:${t}`));
this.requirements.flavors.forEach(t => searchParts.push(`+flavors:${t}`));
const hits = this.idx
.search(searchParts.join(' '))
// .slice(0, limit);
const refs = hits.map(({ ref }) => parseInt(ref, 10));
this.strains = this
.all_strains
.map((strain, i) => {
const idx = refs.indexOf(strain.id);
if (idx < 0) return;
return Object.assign({ score: hits[idx].score }, strain)
})
.filter(Boolean)
.sort((a, b) => {
if (a.score === b.score) {
if (a.rating === b.rating) return 0;
return a.rating > b.rating ? -1 : 1;
}
return a.score > b.score ? -1 : 1;
});
},
},
});
})(this);
})(this, <%- data %>);
</script>
</body>

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

@@ -17,6 +17,8 @@ function getData() {
async function build() {
const data = await getData();
const options = {};
// order strains by rating
data.strains = data.strains.sort((n, strain) => {
if (strain.rating === n.rating) return 0;
return strain.rating < n.rating ? -1 : 1;