SandpointsEditPage/src/App.svelte

<script>
 import SpTitle from './SpTitle.svelte'
 import SpHasTiers from './SpHasTiers.svelte'
 import SpHasWhat from './SpHasWhat.svelte'
 import SpHasCandidates from './SpHasCandidates.svelte'
 import { onMount } from 'svelte';
 let v = "loading...";
 let relpath = "";
 let relpermalink = "";
 let protocol = "";
 let title = "Foo bar";
 let tiers = [];
 let tier = {};
 let hastiers = "";
 let candidates = [];
 let hases = [];
 
 function keyUp(e) {
   if (e.key == "Escape") {
     window.history.back()
   }
 }

 function diffArrr(arr, arrr) {
    let diff = new Set(arr)
    for (let e of arrr) {
        diff.delete(e)
    }
   return Array.from(diff)
 }

 function newHasTiers(h) {
   hastiers = h.detail.substring(1)
   tiers = []
   if (hastiers != "Has new") {
     candidates = METASP[hastiers].tiers
   }
 }

 function loadHugoPageMetadata() {
   var el = document.createElement('script');
   el.onload = ()=> {
     v = repo.content;
     if (v.startsWith("\n")) {
       v = v.substring(1)
     }

     relpath = repo.path;
     relpermalink = repo.relpermalink
     protocol = document.location.protocol.substring(0,4)
     hases = Object.keys(METASP)
     let tkey = Object.keys(repo.frontmatter).filter(t => t.toLowerCase() == "title")[0]
     title = repo.frontmatter[tkey]
     let xastiers = Object.keys(repo.frontmatter).filter(t => t.toLowerCase().startsWith("has_"))
     if (xastiers.length == 1) {
       hastiers = xastiers[0].substr(4)
       tiers = []
       repo.frontmatter[xastiers[0]].forEach(t => {
         METASP[hastiers].tiers.forEach(f => {
           if (f.file == t) {
             tiers.push(f)
           }
         })
       })
       candidates = diffArrr(METASP[hastiers].tiers, tiers)
     }
   }
   el.src = `../js/repo/${location.hash.substring(1)}.js`
   document.body.appendChild(el)
 }
 
 function addToCandidatesRemoveFromTiers(tier) {
   console.log("addToCandidates", tier.detail)
   tiers = tiers.filter(t => t !== tier.detail);
   candidates = [...candidates, tier.detail]
 }

 function addToTiersRemoveFromCandidates(v) {
   console.log("addToTiers", v.detail)
   let value = v.detail
     const tier = candidates.filter(t => t.file == value)
     if (tier.length > 0) {
       tiers = [...tiers, tier[0]]
       candidates = candidates.filter(t=> t != tier[0])
     }
 }
 
 onMount(()=> {loadHugoPageMetadata()})
</script>

<svelte:window on:keyup={keyUp}/>
<main id="sandpoints">
  <form>
    <SpTitle title={title} />
    <SpHasWhat on:hasTiersSelected={newHasTiers} hases={hases} hastiers={hastiers} />
    <SpHasTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} hastiers={hastiers} candidates={candidates} tiers={tiers}/>
    <SpHasCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} candidates={candidates} />
    <label for="content">Content:</label>
    <textarea bind:value={v} oninput='this.style.height = "";this.style.height = this.scrollHeight + 3 + "px"'></textarea>
    {#if document.location.protocol.substring(0,4) != "file"}
      <label for="publish">Publish</label>
      <input type="checkbox" id="publish" name="publish" />
    {/if}
    <label for="offline">Offline</label>
    <input type="checkbox" id="offline" name="offline" />
    <input type="hidden" name="relpermalink" bind:value={relpermalink} />
    <input type="hidden" name="relpath" bind:value={relpath} />
    <input type="hidden" name="protocol" bind:value={protocol} />
    <button id="sandpointsButton">COMMIT/SAVE</button>
  </form>
</main>