meinbk-admin/Übersicht.svelte

  <section class="section">
    <div class="container">
      <h1 class="title">Mein BK</h1>
      <div>
        <span class="tag is-success" class:is-danger={!diff(schueler_lokal, schueler_entfernt)} on:click={query} style="cursor: pointer;">
        {diff(schueler_lokal, schueler_entfernt) ? `${schueler_lokal.length} Schüler in der Datenbank` : 'Schülerdaten müssen aktualisiert werden'}
      </span>
      </div>
      <br>
      <div class="field">
        <div class="control">
          <input class="input" type="text" placeholder="Filter" bind:value={suche}>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="tabs">
        <ul>
          <li class:is-active={active === Vouchers}><a on:click={() => active=Vouchers}>WLAN</a></li>
          <li class:is-active={active === Projektwoche}><a on:click={() => active=Projektwoche}>Projektwoche</a></li>
          <li class:is-active={active === Svwahl}><a on:click={() => active=Svwahl}>SV-Wahl</a></li>
        </ul>
      </div>
      <svelte:component this={active} schueler={schueler_filter} {privat}/>
    </div>
  </section>

<style>
  @import 'node_modules/bulma/css/bulma.css';
</style>

<script>
  import Hashids from 'hashids'
  import Vouchers from './components/vouchers.svelte'
  import Projektwoche from './components/projektwoche.svelte'
  import Svwahl from './components/svwahl.svelte'
  export let schueler, knexConfig, privat
  let active = Vouchers
  let suche = ''

  const { Pool } = R('pg')
  const _ = R('lodash')
  const Schueler = R('schild').Schueler
  Schueler.knex(R('knex')(knexConfig))
  const hashids = new Hashids(privat.salt, 5, 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789')
  const h = (id) => hashids.encode(id)
  let schueler_entfernt = [], schueler_lokal = []
  const pool = new Pool({ connectionString: privat.mein_bk_db})
  async function query () {
    const resp = await pool.query(`SELECT schueler.hashid, wlan.voucher, wahlen.* FROM schueler
                LEFT JOIN wlan ON schueler.hashid = wlan.schueler_hashid
                LEFT JOIN wahlen ON schueler.hashid = wahlen.schueler_hashid`)
    schueler_entfernt = resp.rows
  }
  async function lokal () {
   schueler_lokal = await Schueler.query()
          .where('Status', '2')
          .andWhere('Geloescht', '-')
          .andWhere('Gesperrt', '-')
          .select('ID', 'Name', 'Vorname', 'Klasse')
          .orderBy('Klasse')
          .orderBy('Name')
  }
  query() && lokal()
  function diff (eins, zwei) {
    let a = new Set(eins);
    let b = new Set(zwei);
    return new Set(
      [...a].filter(x => !b.has(x)));
  }
  const mergeById = (a1, a2) =>
    a1.map(itm => ({
      ...a2.find((item) => (item.hashid === h(itm.ID)) && item),
        ...itm
    }));
  function update_db () {}
  let merged
  $: merged = mergeById(schueler_lokal, schueler_entfernt)
  let schueler_filter
  $: schueler_filter = _.groupBy(merged.filter(s => s.Vorname.startsWith(suche) || s.Name.startsWith(suche)), 'Klasse')
</script>