Skip to content

Commit

Permalink
update search with Host filtering
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaidalyafeai
zaidalyafeai committed Mar 31, 2024
1 parent a68a959 commit 11696d0
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 120 deletions.
179 changes: 62 additions & 117 deletions _pages/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,15 @@
permalink: /search
layout: default
foot_scripts:
- https://pagination.js.org/dist/2.1.5/pagination.min.js
- /assets/js/search.js
- https://pagination.js.org/dist/2.1.5/pagination.min.js
- /assets/js/search.js
---

<div class="px-4 mt-16">
<form id="form">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-y-12 lg:gap-y-5">
<section class="col-span-3 flex flex-col gap-3">
<button
id="reset"
type="button"
class="bg-red-500 px-4 py-2 text-white rounded font-medium w-full text-left"
>
<button id="reset" type="button" class="bg-red-500 px-4 py-2 text-white rounded font-medium w-full text-left">
Reset to default
</button>
<hr />
Expand All @@ -24,25 +20,16 @@ <h3 class="uppercase">tasks</h3>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="body flex flex-col gap-3 overflow-hidden">
<label
class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center"
>
<input
class="through focus:outline-none w-full py-1 bg-transparent"
type="text"
placeholder="Search through options"
/>
<label class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center">
<input class="through focus:outline-none w-full py-1 bg-transparent" type="text"
placeholder="Search through options" />
<i class="fa-solid fa-magnifying-glass text-black/25"></i>
</label>
<ul
class="options max-h-60 overflow-y-auto flex flex-wrap gap-2"
></ul>
<ul class="options max-h-60 overflow-y-auto flex flex-wrap gap-2"></ul>
<div class="w-full text-center">
<label>
<input class="expander w-0 h-0 invisible" type="checkbox" />
<span class="uppercase text-blue-500 text-xs cursor-pointer"
>show more</span
>
<span class="uppercase text-blue-500 text-xs cursor-pointer">show more</span>
</label>
</div>
</div>
Expand All @@ -54,25 +41,16 @@ <h3 class="uppercase">dialect</h3>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="body flex flex-col gap-3 overflow-hidden">
<label
class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center"
>
<input
class="through focus:outline-none w-full py-1 bg-transparent"
type="text"
placeholder="Search through options"
/>
<label class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center">
<input class="through focus:outline-none w-full py-1 bg-transparent" type="text"
placeholder="Search through options" />
<i class="fa-solid fa-magnifying-glass text-black/25"></i>
</label>
<ul
class="options max-h-60 overflow-y-auto flex flex-wrap gap-2"
></ul>
<ul class="options max-h-60 overflow-y-auto flex flex-wrap gap-2"></ul>
<div class="w-full text-center">
<label>
<input class="expander w-0 h-0 invisible" type="checkbox" />
<span class="uppercase text-blue-500 text-xs cursor-pointer"
>show more</span
>
<span class="uppercase text-blue-500 text-xs cursor-pointer">show more</span>
</label>
</div>
</div>
Expand All @@ -84,25 +62,16 @@ <h3 class="uppercase">access</h3>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="body flex flex-col gap-3 overflow-hidden">
<label
class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center"
>
<input
class="through focus:outline-none w-full py-1 bg-transparent"
type="text"
placeholder="Search through options"
/>
<label class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center">
<input class="through focus:outline-none w-full py-1 bg-transparent" type="text"
placeholder="Search through options" />
<i class="fa-solid fa-magnifying-glass text-black/25"></i>
</label>
<ul
class="options max-h-60 overflow-y-auto flex flex-wrap gap-2"
></ul>
<ul class="options max-h-60 overflow-y-auto flex flex-wrap gap-2"></ul>
<div class="w-full text-center d-none">
<label>
<input class="expander w-0 h-0 invisible" type="checkbox" />
<span class="uppercase text-blue-500 text-xs cursor-pointer"
>show more</span
>
<span class="uppercase text-blue-500 text-xs cursor-pointer">show more</span>
</label>
</div>
</div>
Expand All @@ -114,25 +83,37 @@ <h3 class="uppercase">license</h3>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="body flex flex-col gap-3 overflow-hidden">
<label
class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center"
>
<input
class="through focus:outline-none w-full py-1 bg-transparent"
type="text"
placeholder="Search through options"
/>
<label class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center">
<input class="through focus:outline-none w-full py-1 bg-transparent" type="text"
placeholder="Search through options" />
<i class="fa-solid fa-magnifying-glass text-black/25"></i>
</label>
<ul
class="options max-h-60 overflow-y-auto flex flex-wrap gap-2"
></ul>
<ul class="options max-h-60 overflow-y-auto flex flex-wrap gap-2"></ul>
<div class="w-full text-center">
<label>
<input class="expander w-0 h-0 invisible" type="checkbox" />
<span class="uppercase text-blue-500 text-xs cursor-pointer"
>show more</span
>
<span class="uppercase text-blue-500 text-xs cursor-pointer">show more</span>
</label>
</div>
</div>
</section>
<hr />
<section id="Host" class="w-full flex flex-col gap-3">
<div class="flex justify-between items-center cursor-pointer">
<h3 class="uppercase">HOst</h3>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="body flex flex-col gap-3 overflow-hidden">
<label class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center">
<input class="through focus:outline-none w-full py-1 bg-transparent" type="text"
placeholder="Search through options" />
<i class="fa-solid fa-magnifying-glass text-black/25"></i>
</label>
<ul class="options max-h-60 overflow-y-auto flex flex-wrap gap-2"></ul>
<div class="w-full text-center">
<label>
<input class="expander w-0 h-0 invisible" type="checkbox" />
<span class="uppercase text-blue-500 text-xs cursor-pointer">show more</span>
</label>
</div>
</div>
Expand All @@ -145,73 +126,37 @@ <h3 class="uppercase">Year</h3>
</div>
<div class="body flex flex-col gap-3 overflow-hidden">
<div class="flex w-full gap-6 items-center">
<label
class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center"
>
<input
class="focus:outline-none w-full text-center py-1 bg-transparent"
type="number"
name="since"
placeholder="2000"
/>
<label class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center">
<input class="focus:outline-none w-full text-center py-1 bg-transparent" type="number" name="since"
placeholder="2000" />
</label>
<span class="font-bold uppercase">to</span>
<label
class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center"
>
<input
class="focus:outline-none w-full text-center py-1 bg-transparent"
type="number"
name="afore"
placeholder="2022"
/>
<label class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center">
<input class="focus:outline-none w-full text-center py-1 bg-transparent" type="number" name="afore"
placeholder="2022" />
</label>
</div>
</div>
</section>
</section>
<div class="col-span-1"></div>
<section class="col-span-7 flex flex-col gap-3">
<label
class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center"
>
<input
class="focus:outline-none w-full py-2 bg-transparent"
type="text"
name="name"
placeholder="Search through datasets"
/>
<label class="px-3 border-2 border-black/25 bg-black/[.02] rounded-md flex items-center">
<input class="focus:outline-none w-full py-2 bg-transparent" type="text" name="name"
placeholder="Search through datasets" />
<i class="fa-solid fa-magnifying-glass text-black/25"></i>
</label>
<div class="flex items-center gap-3">
<h1 class="uppercase font-medium text-black/50">
Results of "<span
class="normal-case text-black/60 font-bold"
id="special"
>
</span
>"
<span class="normal-case text-black/60 font-bold" id="special">
</span>
</h1>
<svg
id="loader"
class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
<svg id="loader" class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</div>
<ul id="list-of-detail" class="flex flex-col gap-3"></ul>
Expand All @@ -221,4 +166,4 @@ <h1 class="uppercase font-medium text-black/50">
<!-- a way around for safari to submit the form immediately -->
<button id="submit" class="invisible w-0 h-0">hidden</button>
</form>
</div>
</div>
7 changes: 4 additions & 3 deletions assets/js/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,6 @@ if (isProvided("name")) {

form.addEventListener("submit", (event) => {
event.preventDefault();

$("#loader").removeClass("hidden");

const name = $("#form input[name='name']").val();
Expand Down Expand Up @@ -143,6 +142,7 @@ form.addEventListener("submit", (event) => {
: []),
...(isProvided("dialect") ? [`Dialect.str.contains('(?i)${queries.get("dialect")}')`] : []),
...(isProvided("license") ? [`License.str.contains('(?i)${queries.get("license")}')`] : []),
...(isProvided("host") ? [`Host.str.contains('(?i)${queries.get("host")}')`] : []),
...(isProvided("access") ? [`Access.str.contains('(?i)${queries.get("access")}')`] : []),
...(isProvided("since") ? [`Year > ${queries.get("since")}`] : []),
...(isProvided("afore") ? [`Year < ${queries.get("afore")}`] : []),
Expand All @@ -162,7 +162,8 @@ form.addEventListener("submit", (event) => {
},
callback: (data) => {
let html = "";

total = data.length
$("#special").text(total + " RESULTS");
for (let element of data) {
html += "<li class='flex flex-col gap-3' >";
html += `<a class='font-bold text-primary' target='_blank' href="${element["Link"]}">${element["Name"]}</a>`;
Expand Down Expand Up @@ -208,7 +209,7 @@ form.addEventListener("submit", (event) => {
(() => {
const queries = new URLSearchParams();

queries.set("features", ["Dialect", "Tasks", "Access", "License"]);
queries.set("features", ["Dialect", "Tasks", "Access", "License", "Host"]);

request
.get(`datasets/tags?${queries}`)
Expand Down

0 comments on commit 11696d0

Please sign in to comment.