From 7c1ab1afb718194350f346433473afe8f0e73f91 Mon Sep 17 00:00:00 2001 From: Nilesh <19304+nileshtrivedi@users.noreply.github.com> Date: Fri, 3 Jun 2022 14:35:57 +0100 Subject: [PATCH] Combobox fix, map fix, tag search --- src/FormatDetail.svelte | 11 +++++------ src/SearchForm.svelte | 33 ++++++++------------------------- src/TopicDetail.svelte | 8 +++----- src/TopicList.svelte | 2 +- src/TopicMasonryGrid.svelte | 2 +- src/tailwindui/ComboBox.svelte | 19 ++++++++++++++----- static/map.html | 22 ++++++++++++---------- templates/index.html | 1 + 8 files changed, 45 insertions(+), 53 deletions(-) diff --git a/src/FormatDetail.svelte b/src/FormatDetail.svelte index 49b816a..40194aa 100644 --- a/src/FormatDetail.svelte +++ b/src/FormatDetail.svelte @@ -10,28 +10,27 @@ let query = { text: "", topic: "", - format: "", level: "", - tags: "", + tag: "", sortby: "rating" }; - $: fetch(`/learn/items.json?_shape=array&links__contains=${format}|`) + $: query && fetch(`/learn/items.json?_shape=array&_size=100&links__contains=${format}|&topics__contains=${query.topic}`) .then(r => r.json()) .then(data => { items = data; }); function handleQueryChanged(event){ - console.log("queryChanged: ", event.detail); + // console.log("queryChanged: ", event.detail); query = event.detail; } $: filteredItems = items.filter(item => { if(query.text && !item.name.toLowerCase().includes(query.text.toLowerCase())){ return false; } - if(query.format && !item.links.includes(query.format)) { return false; } + if(query.topic && !item.topics.includes(query.topic)){ return false; } if(query.level && item.difficulty != query.level){ return false; } - // TODO Apply tags filter + if(query.tag && !item.tags.includes(query.tag)){ return false; } return true; }).sort((a,b) => { if(query.sortby == 'rating') { return (a.rating - b.rating) }; diff --git a/src/SearchForm.svelte b/src/SearchForm.svelte index f18d591..59fd4c5 100644 --- a/src/SearchForm.svelte +++ b/src/SearchForm.svelte @@ -3,16 +3,12 @@ import { createEventDispatcher } from 'svelte'; export let alltopics; - export let hideFormat = false; export let hideTopic = false; - export let hideQuality = true; let query = { text: "", topic: "", - format: "", level: "", - quality: "", sortby: "rating", tag: "" }; @@ -24,24 +20,19 @@
- + {#if !hideTopic} - { return {label: t.display_name, value: t.name}; }).sort((a,b) => a.label.localeCompare(b.label)).slice(0,10)} selected={null}/> + + {#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic} + {topic.display_name} + {/each} + {/if} - {#if !hideFormat} - - Any format - Books - Videos - Podcasts - - {/if} - - + Any tag Inspirational Educational @@ -49,6 +40,7 @@ Entertaining Visual Interactive + Open (no login or pay) @@ -60,15 +52,6 @@ Research - {#if !hideQuality} - - Any quality - Visual - Interactive - Entertaining - - {/if} - Sort by Rating diff --git a/src/TopicDetail.svelte b/src/TopicDetail.svelte index 5402965..f26d7f3 100644 --- a/src/TopicDetail.svelte +++ b/src/TopicDetail.svelte @@ -14,9 +14,8 @@ let query = { text: "", topic: "", - format: "", level: "", - tags: "", + tag: "", sortby: "rating" }; @@ -28,15 +27,14 @@ }); function handleQueryChanged(event){ - console.log("queryChanged: ", event.detail); + // console.log("queryChanged: ", event.detail); query = event.detail; } $: filteredItems = items.filter(item => { if(query.text && !item.name.toLowerCase().includes(query.text.toLowerCase())){ return false; } - if(query.format && !item.links.includes(query.format)) { return false; } if(query.level && item.difficulty != query.level){ return false; } - // TODO: apply tags filter + if(query.tag && !item.tags.includes(query.tag)){ return false; } return true; }).sort((a,b) => { if(query.sortby == 'rating') { return (a.rating - b.rating) }; diff --git a/src/TopicList.svelte b/src/TopicList.svelte index c4e7143..a95a910 100644 --- a/src/TopicList.svelte +++ b/src/TopicList.svelte @@ -5,6 +5,6 @@
- Try mapview (beta) + Explore Map
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte index 5437bc4..f2c2f8d 100644 --- a/src/TopicMasonryGrid.svelte +++ b/src/TopicMasonryGrid.svelte @@ -84,7 +84,7 @@ -
+
{#each [...map.entries()].sort((t1,t2) => (t1[0].sort_index || 100) - (t2[0].sort_index || 100)) as parent}
diff --git a/src/tailwindui/ComboBox.svelte b/src/tailwindui/ComboBox.svelte index c9e4b06..82f627b 100644 --- a/src/tailwindui/ComboBox.svelte +++ b/src/tailwindui/ComboBox.svelte @@ -1,15 +1,24 @@ - - + + + + {#each filteredOptions as opt (opt.value)} - {opt.label} + {opt.label} {/each} diff --git a/static/map.html b/static/map.html index c6b3eb7..54bd042 100644 --- a/static/map.html +++ b/static/map.html @@ -23,6 +23,8 @@ body { text { cursor: pointer; + fill: #7a28cb; + } .grandparent text { @@ -40,11 +42,11 @@ rect.parent, } .grandparent rect { - fill: rgb(232, 255, 0); + fill: #f4b393; } .grandparent:hover rect { - fill: rgb(202, 225, 0); + fill: #f4d393; } .children rect.parent, @@ -54,21 +56,21 @@ rect.parent, .leaf rect.parent { cursor: pointer; - fill: #c9d9ff; + fill: #ffdbd1; } .leaf rect.parent:hover { cursor: pointer; - fill: #d9e9ff; + fill: #ffcfd4; } .children rect.parent { - fill: #99F6E4; + fill: #ceec97; fill-opacity: .5; } .children:hover rect.child { - fill: #D7CBFA; + fill: #deec97; } @@ -88,8 +90,8 @@ function hierarchy(topic_array, parent_id){ .map(item => ({ ...item, children: nest(items, item.name), value: 100 })) .map(item => { return item.children.length == 0 ? - {id: item.name, name: item.name.split("/").reverse()[0], value: 100} : - {id: item.name, name: item.name.split("/").reverse()[0], children: item.children} + {id: item.name, name: item.name, value: 100} : + {id: item.name, name: item.name, children: item.children} }); let topnodes = nest(topic_array, ''); // includes childless nodes @@ -98,7 +100,7 @@ function hierarchy(topic_array, parent_id){ let misc = {id: 'misc', name: 'Misc', children: topnodes.filter(t => t.value).slice(0,15)}; - return {name: "ยท", children: [...topnodes.filter(t => t.children), misc]}; + return {name: "", children: [...topnodes.filter(t => t.children), misc]}; } d3.json("/learn/topics.json?_shape=array&_size=5000", function(alltopics){ @@ -232,7 +234,7 @@ grandparent.append("text") g.append("text") .attr("dy", ".75em") .on("click", (n) => { window.parent.location.href = "/#/topic/" + n.name;}) - .text(function(d) { return d.name.split('{')[0].split('(')[0] + .text(function(d) { return d.name.split('/').reverse()[0].split('{')[0].split('(')[0] .split('[')[0]; }) .call(text); diff --git a/templates/index.html b/templates/index.html index 55dff58..125977c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -46,6 +46,7 @@ + LearnAwesome