Drawwell/SandpointsEditPage
Drawwell/SandpointsEditPage
3
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

building everything on top of iterating over keys is rarely a good

Browse source 
idea..
This commit is contained in:
Marcell Mars 2021-06-04 01:38:27 +02:00
parent b0f35832ec
commit e3fd3e2226
4 changed files with 66 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/App.svelte
View file

@ -11,17 +11,18 @@
let title = "Foo bar"; let title = "Foo bar";
let hases = []; let hases = [];
let hasesCandidates = [];
let frontmatter = {} let frontmatter = {}
frontmatter['triad'] = {}; frontmatter['triad'] = [];
frontmatter['ascriptions'] = {}; frontmatter['ascriptions'] = [];
function keyUp(e) { function keyUp(e) {
if (e.key == "Escape") { if (e.key == "Escape") {
window.history.back() window.history.back()
} }
} }
function diffArrr(arr, arrr) { function diffArrr(arr, arrr) {
let diff = new Set(arr) let diff = new Set(arr)
for (let e of arrr) { for (let e of arrr) {
diff.delete(e) diff.delete(e)
@ -30,9 +31,10 @@
} }
function newHasTiers(arrgs) { function newHasTiers(arrgs) {
let [fmKeyType, oldFmKey, newFmKey] = arrgs.detail; let [fmKeyType, index, oldFmKey, newFmKey] = arrgs.detail;
frontmatter[fmKeyType][oldFmKey]['candidates'] = METASP[newFmKey].tiers; frontmatter[fmKeyType][index] = {'fmKey': newFmKey, 'tiers': [], 'candidates': METASP[newFmKey].tiers}
frontmatter[fmKeyType][oldFmKey]['tiers'] = []; hasesCandidates = [...hasesCandidates, oldFmKey];
hasesCandidates = hasesCandidates.filter(h => h != newFmKey);
} }
function loadHugoPageMetadata() { function loadHugoPageMetadata() {
@ -57,24 +59,27 @@
} }
} else if (hases.includes(fmKey.toLowerCase())) { } else if (hases.includes(fmKey.toLowerCase())) {
fmKeyType = 'ascriptions' fmKeyType = 'ascriptions'
} else {
fmKeyType = 'notSandpoints'
} }
if (fmKeyType != "") { if (['triad', 'ascriptions'].includes(fmKeyType)) {
if (Array.isArray(fmValue)) { if (Array.isArray(fmValue)) {
let tiers = []
let candidates = []
METASP[fmKey].tiers.forEach(t => { METASP[fmKey].tiers.forEach(t => {
(fmKey in frontmatter[fmKeyType]) || (frontmatter[fmKeyType][fmKey] = {});
('tiers' in frontmatter[fmKeyType][fmKey]) || (frontmatter[fmKeyType][fmKey]['tiers'] = []);
('candidates' in frontmatter[fmKeyType][fmKey]) || (frontmatter[fmKeyType][fmKey]['candidates'] = []);
if (fmValue.includes(t.file)) { if (fmValue.includes(t.file)) {
frontmatter[fmKeyType][fmKey]['tiers'].push(t) tiers.push(t)
} else { } else {
frontmatter[fmKeyType][fmKey]['candidates'].push(t) candidates.push(t)
} }
}) })
frontmatter[fmKeyType].push({'fmKey': fmKey, 'tiers': tiers, 'candidates': candidates})
} }
} }
} }
) )
hasesCandidates = diffArrr(hases, [...frontmatter['triad'].map(t => { return t.fmKey }), ...frontmatter['ascriptions'].map(t => { return t.fmKey })])
let tkey = Object.keys(repo.frontmatter).filter(t => t.toLowerCase() == "title")[0] let tkey = Object.keys(repo.frontmatter).filter(t => t.toLowerCase() == "title")[0]
title = repo.frontmatter[tkey] title = repo.frontmatter[tkey]
@ -84,17 +89,18 @@
} }
function addToCandidatesRemoveFromTiers(arrgs) { function addToCandidatesRemoveFromTiers(arrgs) {
const [tier, fmKeyType, fmKey] = arrgs.detail let [fmKeyType, index, fmKey, tier] = arrgs.detail;
frontmatter[fmKeyType][fmKey]['tiers'] = frontmatter[fmKeyType][fmKey]['tiers'].filter(t => t !== tier); frontmatter[fmKeyType][index]['fmKey'] = fmKey;
frontmatter[fmKeyType][fmKey]['candidates'] = [...frontmatter[fmKeyType][fmKey]['candidates'], tier] frontmatter[fmKeyType][index]['tiers'] = frontmatter[fmKeyType][index]['tiers'].filter(t => t !== tier);
frontmatter[fmKeyType][index]['candidates'] = [...frontmatter[fmKeyType][index]['candidates'], tier]
} }
function addToTiersRemoveFromCandidates(arrgs) { function addToTiersRemoveFromCandidates(arrgs) {
const [value, fmKeyType, fmKey] = arrgs.detail let [fmKeyType, index, fmKey, value] = arrgs.detail;
const tier = frontmatter[fmKeyType][fmKey]['candidates'].filter(t => t.file == value) const tier = frontmatter[fmKeyType][index]['candidates'].filter(t => t.file == value)
if (tier.length > 0) { if (tier.length > 0) {
frontmatter[fmKeyType][fmKey]['tiers'] = [...frontmatter[fmKeyType][fmKey]['tiers'], tier[0]] frontmatter[fmKeyType][index]['tiers'] = [...frontmatter[fmKeyType][index]['tiers'], tier[0]]
frontmatter[fmKeyType][fmKey]['candidates'] = frontmatter[fmKeyType][fmKey]['candidates'].filter(t=> t != tier[0]) frontmatter[fmKeyType][index]['candidates'] = frontmatter[fmKeyType][index]['candidates'].filter(t=> t != tier[0])
} }
} }
@ -107,10 +113,10 @@
<SpTitle relpath={relpath} title={title} /> <SpTitle relpath={relpath} title={title} />
{#each Object.entries(frontmatter) as fmItems} {#each Object.entries(frontmatter) as fmItems}
{#if ['ascriptions', 'triad'].includes(fmItems[0])} {#if ['ascriptions', 'triad'].includes(fmItems[0])}
{#each Object.entries(fmItems[1]) as fmItem} {#each fmItems[1] as fmItem, i}
<SpHasWhat fmKeyType="{fmItems[0]}" fmKey="{fmItem[0] || ''}" fmValues={fmItem[1]} hases={hases} on:hasTiersSelected={newHasTiers} /> <SpHasWhat index={i} fmKeyType={fmItems[0]} fmItem={fmItem} hases={hases} hasesCandidates={hasesCandidates} on:hasTiersSelected={newHasTiers} />
<SpHasTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} fmKeyType="{fmItems[0]}" fmKey={fmItem[0] || ''} tiers={fmItem[1].tiers || []} /> <SpHasTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} index={i} fmKeyType={fmItems[0]} fmItem={fmItem} />
<SpHasCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} fmKeyType="{fmItems[0]}" fmKey={fmItem[0] || ''} candidates={fmItem[1].candidates || []} /> <SpHasCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} index={i} fmKeyType={fmItems[0]} fmItem={fmItem} />
{/each} {/each}
{/if} {/if}
{/each} {/each}

10
src/SpHasCandidates.svelte
View file

@ -1,9 +1,9 @@
<script> <script>
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { afterUpdate } from 'svelte'; import { afterUpdate } from 'svelte';
export let candidates; export let index;
export let fmItem;
export let fmKeyType; export let fmKeyType;
export let fmKey;
export let value; export let value;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -16,15 +16,15 @@
}); });
$: { $: {
dispatch("addToTiersRemoveFromCandidates", [value, fmKeyType, fmKey]) dispatch("addToTiersRemoveFromCandidates", [fmKeyType, index, fmItem.fmKey, value])
value = 1; value = 1;
} }
</script> </script>
{#if candidates && candidates.length > 0} {#if fmItem.candidates && fmItem.candidates.length > 0}
<select class="selecttier" bind:value> <select class="selecttier" bind:value>
<option id="addnew" value="1" disabled selected>Add new...</option> <option id="addnew" value="1" disabled selected>Add new...</option>
{#each candidates as tier (tier.file)} {#each fmItem.candidates as tier (tier.file)}
<option title="{tier.title}" value={tier.file}>{tier.file} {#if tier.title.length < 70}({tier.title}){:else}({tier.title.slice(0, 68) + '…'}){/if}</option> <option title="{tier.title}" value={tier.file}>{tier.file} {#if tier.title.length < 70}({tier.title}){:else}({tier.title.slice(0, 68) + '…'}){/if}</option>
{/each} {/each}
</select> </select>

20
src/SpHasTiers.svelte
View file

@ -1,19 +1,19 @@
<script> <script>
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
export let tiers; export let index;
export let fmKey; export let fmItem;
export let fmKeyType; export let fmKeyType;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function removeTier(tier) { function removeTier(tier) {
dispatch("addToCandidatesRemoveFromTiers", [tier, fmKeyType, fmKey]) dispatch("addToCandidatesRemoveFromTiers", [fmKeyType, index, fmItem.fmKey, tier])
} }
function swapTier(tier, n) { function swapTier(tier, n) {
tiers.some((t, i)=> { fmItem.tiers.some((t, i)=> {
if (t==tier) { if (t==tier) {
tiers[i] = tiers[i+n] fmItem.tiers[i] = fmItem.tiers[i+n]
tiers[i+n] = tier fmItem.tiers[i+n] = tier
return true return true
} }
}) })
@ -21,15 +21,15 @@
</script> </script>
{#if tiers && tiers.length >0} {#if fmItem.tiers && fmItem.tiers.length >0}
<div class="tierbox"> <div class="tierbox">
{#each tiers as tier, i (tier.file)} {#each fmItem.tiers as tier, i (tier.file)}
<div class="tierline"> <div class="tierline">
<div class="filetitle"> <div class="filetitle">
<input readonly type="text" name="{'triad' == fmKey ? "has_":"" }{fmKey}[]" class="hasinput" value="{tier.file}"><span class="tiertitle">({tier.title})</span> <input readonly type="text" name="{'triad' == fmItem.fmKey ? "has_":"" }{fmItem.fmKey}[]" class="hasinput" value="{tier.file}"><span class="tiertitle">({tier.title})</span>
</div> </div>
<div class="buttons"> <div class="buttons">
<button type="button" class="buttondown" on:click="{swapTier(tier, 1)}" disabled={i+1 == tiers.length ? true:false}>⇓</button> <button type="button" class="buttondown" on:click="{swapTier(tier, 1)}" disabled={i+1 == fmItem.tiers.length ? true:false}>⇓</button>
<button type="button" class="buttonup" on:click="{swapTier(tier, -1)}" disabled={i == 0 ? true:false}>⇑</button> <button type="button" class="buttonup" on:click="{swapTier(tier, -1)}" disabled={i == 0 ? true:false}>⇑</button>
<button type="button" on:click="{removeTier(tier)}">×</button> <button type="button" on:click="{removeTier(tier)}">×</button>
</div> </div>

35
src/SpHasWhat.svelte
View file

@ -1,31 +1,36 @@
<script> <script>
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { afterUpdate } from 'svelte'; import { onMount } from 'svelte';
export let fmItem;
export let fmKeyType; export let fmKeyType;
export let fmKey; export let index;
export let fmValues;
export let hases; export let hases;
export let hasesCandidates;
let value; let value;
let toggleFmKey = ''
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function optselName(has) { function optselName(has) {
return `_${has}_${fmKeyType}` return `_${has}_${fmKeyType}`
} }
$: { onMount(()=> {
if (value && value.split("_")[1] != fmKey) { const selectEvent = document.getElementById(`${fmKeyType}_${fmItem.fmKey}`)
toggleFmKey = fmKey; if (selectEvent) {
dispatch("hasTiersSelected", [fmKeyType, fmKey, value.split("_")[1]]) selectEvent.addEventListener('change', (e) => {
} else if (toggleFmKey == fmKey) { dispatch("hasTiersSelected", [fmKeyType, index, fmItem.fmKey, e.target.value.split("_")[1]]);})
dispatch("hasTiersSelected", [fmKeyType, fmKey, value.split("_")[1]])
toggleFmKey = ''
} }
} })
</script> </script>
<select class="{fmKeyType}_{fmKey}" bind:value> <select id="{fmKeyType}_{fmItem.fmKey}" bind:value>
{#each hases as has} {#each hases as has}
<option id="{optselName(has)}" class="hasoption" selected={has == fmKey ? "selected":""} title="{has}" value={optselName(has)}>{'triad' == fmKeyType ? "Has ":""}{has}:</option> {#if has == fmItem.fmKey}
<option id="{optselName(has)}" class="hasoption" selected title="{has}" value={optselName(has)}>{'triad' == fmKeyType ? "Has ":""}{has}:</option>
{/if}
{/each}
{#each hasesCandidates as has}
<option id="{optselName(has)}" class="hasoption" title="{has}" value={optselName(has)}>{'triad' == fmKeyType ? "Has ":""}{has}:</option>
{/each} {/each}
</select> </select>