kopia lustrzana https://github.com/learn-awesome/learndb
local storage added
rodzic
1b25390996
commit
ee8daa5d77
|
@ -20,7 +20,6 @@
|
|||
{text: "Random item", link: "#/item/1", icon: "home"},
|
||||
{text: "Search", link: "#/search", icon: "home"},
|
||||
{text: "Want to learn", link: "#/wanttolearn", icon: "home"},
|
||||
{text: "Learning", link: "#/learning", icon: "home"},
|
||||
{text: "Finished learning", link: "#/finishedlearning", icon: "home"},
|
||||
{text: "Datasette", link: "/learn", icon: "home"}
|
||||
]
|
||||
|
@ -69,10 +68,8 @@
|
|||
{:else if currentView === "/search"}
|
||||
<AdvancedSearch/>
|
||||
{:else if currentView === "/wanttolearn"}
|
||||
<ItemList kind="wanttolearn"/>
|
||||
{:else if currentView === "/learning"}
|
||||
<ItemList kind="learning"/>
|
||||
<ItemList kind={0}/>
|
||||
{:else if currentView === "/finishedlearning"}
|
||||
<ItemList kind="finishedlearning"/>
|
||||
<ItemList kind={1}/>
|
||||
{/if}
|
||||
</TailwindUI.AppShell>
|
|
@ -1,9 +0,0 @@
|
|||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<span class="relative z-0 inline-flex rounded-md mt-5 flex-nowrap">
|
||||
<button type="button" class="relative inline-flex flex-nowrap items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 ">Want to Learn</button>
|
||||
|
||||
<button type="button" class="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">Finished</button>
|
||||
</span>
|
|
@ -0,0 +1,35 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
export let tabs = ['first', 'second'];
|
||||
export let currentlySelected = undefined;
|
||||
|
||||
function changeStatus(val){
|
||||
currentlySelected = val;
|
||||
dispatch('change', {value: val})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<span class="relative z-0 inline-flex rounded-md mt-5 flex-nowrap">
|
||||
{#each tabs as tab, i}
|
||||
<button
|
||||
type="button"
|
||||
on:click="{e => changeStatus(currentlySelected === i? undefined : i)}"
|
||||
class="
|
||||
relative inline-flex flex-nowrap items-center px-4 py-2
|
||||
{i == 0 && 'rounded-l-md'}
|
||||
{i == tabs.length-1 && 'rounded-r-md'}
|
||||
border border-indigo-500 text-sm font-medium focus:z-10 focus:outline-none
|
||||
{currentlySelected === i? 'bg-indigo-700 text-white' : 'bg-gray-100 text-gray-800'}
|
||||
"
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
|
||||
</span>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import WantToLearnButton from './WantToLearnButton.svelte';
|
||||
import Button from "./Button.svelte";
|
||||
import ButtonGroup from "./ButtonGroup.svelte";
|
||||
import { bookmarks } from "./stores.js"
|
||||
|
||||
export let itemid;
|
||||
let item;
|
||||
|
||||
|
@ -10,6 +11,15 @@
|
|||
item = data[itemid];
|
||||
});
|
||||
|
||||
function saveStatusToLocalStorage(event){
|
||||
// console.log($bookmarks)
|
||||
let newobj = {};
|
||||
newobj = Object.assign(newobj, $bookmarks)
|
||||
newobj[itemid] = event.detail.value
|
||||
// console.log({newobj})
|
||||
bookmarks.set(newobj)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{#if item}
|
||||
|
@ -36,7 +46,8 @@
|
|||
<span class="text-xs text-gray-500">333 Ratings</span>
|
||||
</div>
|
||||
|
||||
<Button />
|
||||
<ButtonGroup tabs={['Want to learn','Finished']} currentlySelected={$bookmarks[itemid]} on:change={saveStatusToLocalStorage}/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
@ -1,22 +1,32 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import ItemCard from "./ItemCard.svelte"
|
||||
import { bookmarks } from "./stores.js"
|
||||
|
||||
export let kind;
|
||||
let ls = null;
|
||||
let items = []; //TODO: Only store item IDs in localStorage
|
||||
|
||||
const read = () => !!ls && JSON.parse(ls.getItem(kind) || "[]");
|
||||
let items = []
|
||||
|
||||
onMount(() => {
|
||||
typeof localStorage !== `undefined` && (ls = localStorage);
|
||||
items = read();
|
||||
// items = read();
|
||||
});
|
||||
|
||||
function encodeArray(kind){
|
||||
console.log($bookmarks)
|
||||
return Object.entries($bookmarks).filter(pair => pair[1] == kind).map(pair => pair[0]).join("%2C")
|
||||
}
|
||||
|
||||
$: fetch(`/learn/items.json?_shape=array&rowid__in=${encodeArray(kind)}`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
items = data;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<h1>{kind}</h1>
|
||||
<h1>{kind == 0 ? 'Want to learn' : 'Finished learning'}</h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{#each items as item}
|
||||
<ItemCard {item}/>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
|
@ -0,0 +1,14 @@
|
|||
import { writable } from "svelte/store";
|
||||
|
||||
export const persistStore = (key, initial)=> {
|
||||
const persist = localStorage.getItem(key)
|
||||
const data = persist ? JSON.parse(persist) : initial
|
||||
|
||||
const store = writable(data, () => {
|
||||
const unsubscribe = store.subscribe(value => {
|
||||
localStorage.setItem(key, JSON.stringify(value))
|
||||
})
|
||||
return unsubscribe
|
||||
})
|
||||
return store
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
import { persistStore } from "./persistStore";
|
||||
|
||||
// {item_id: integer} 0 = want to learn, 1 = finished
|
||||
export const bookmarks = persistStore('bookmarks', {})
|
Ładowanie…
Reference in New Issue