lightweight/coursetags
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

working tag display, filtering, and sorting.

Browse source
This commit is contained in:
Dave Lane 2021-08-26 23:10:30 +12:00
parent b552cf2469
commit 3658ee7f71
3 changed files with 38 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/tagItem.svelte
View file

@ -4,5 +4,5 @@
</script>
<a class="list-none p-6 bg-gray-100 text-gray-800 text-center rounded-md shadow-sm hover:shadow-md flex flex-col items-center" href={`/tag/${tag}`} transition:fade>
<h2 class="lowercase text-2xl">{tag}</h2>
<h2 class="lowercase text-xl">{tag}</h2>
</a>

5
src/datastore.js
View file

@ -13,8 +13,9 @@ export const fetchData = async () => {
const res = await fetch(data_source);
const data_json = await res.json();
console.log('data_json ', data_json);
tagslist.set(data.tags);
data.set(data_json);
tagslist.set(data_json.tags);
tagslist.subscribe(array => console.log('tagslist: ', array));
loaded = true;
} catch (err) {
console.log(err);

39
src/routes/index.svelte
View file

@ -5,17 +5,33 @@
let searchTerm = "";
let filteredTags = [];
let num_tags = 0;
let tag = "";
function saveTag() {
console.log('running saveTag with tag: '+ tag);
if (filteredTags.includes(tag)) {
console.log('We already have tag ', tag);
return;
}
$tagslist = [...$tagslist, tag].sort();
console.log('tags: ', $tagslist);
}
$: {
if (searchTerm) {
//console.log('$tagslist: ', $tagslist);
filteredTags = $tagslist.filter(tag => tag.toLowerCast().includes(searchTerm.toLowerCase()));
filteredTags = $tagslist.filter(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
} else {
console.log('$tagslist: ', $tagslist);
filteredTags = [... $tagslist];
//console.log('$tagslist: ', $tagslist);
filteredTags = [...$tagslist];
}
}
$: {
num_tags = $tagslist.length;
}
fetchData();
//tagslist.subscribe(tags => sortTags(tags));
//console.log('$tagslist: ', $tagslist);
</script>
@ -25,9 +41,22 @@
<h1 class="text-4xl my-8 uppercase">WEnotes Course Tag Manager</h1>
<input class="w-full rounded-md text-lg p-4 border-2 border-gray-200" bind:value={searchTerm} placeholder="Search Tags">
<p>Number of tags: {num_tags}</p>
<div class="py-4 grid gap-4 md:grid-cols-2 grid-cols-1">
<div class="py-4">
<form on:submit|preventDefault={saveTag}>
<label>Add a tag:
<input class="max-w-sm rounded-md text-md p-4 border-2 border-gray-200" bind:value={tag}>
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700" disabled={!tag}>Save</button>
</label>
</form>
</div>
<label>Filter tags:
<input class="max-w-sm rounded-md text-md p-4 border-2 border-gray-200" bind:value={searchTerm} placeholder="Type to filter tags">
</label>
<div class="py-4 grid gap-4 lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 grid-cols-1">
{#each filteredTags as tag}
<TagItem tag={tag}/>
{/each}