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)} 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 === ProjektwocheSchueler}><a on:click={() => active=ProjektwocheSchueler}>Projektwoche Schüler</a></li>
        <li class:is-active={active === ProjektwocheLehrer}><a on:click={() => active=ProjektwocheLehrer}>Projektwoche Lehrer</a></li>
        <li class:is-active={active === ProjektwocheUebersicht}><a on:click={() => active=ProjektwocheUebersicht}>Projektwoche Übersicht</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} {einstellungen}/>
  </div>
</section>

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

<script>
  import Vouchers from './components/vouchers.svelte'
  import ProjektwocheSchueler from './components/projektwoche-schueler.svelte'
  import ProjektwocheLehrer from './components/projektwoche-lehrer.svelte'
  import ProjektwocheUebersicht from './components/projektwoche-uebersicht.svelte'
  import SVWahl from './components/svwahl.svelte'
  export let schueler, knexConfig, privat
  let active
  let suche = ''

  const { Pool } = R('pg')
  const _ = R('lodash')
  const mysql = R('mysql')
  let schueler_entfernt = [], schueler_lokal = []
  let einstellungen
  const pool = new Pool({ connectionString: privat.mein_bk_db})
  pool.query(`SELECT * FROM einstellungen`).then(res => einstellungen = res.rows[0])
  if (!einstellungen) pool.query(`INSERT INTO einstellungen DEFAULT VALUES RETURNING *`).then(res => einstellungen = res.rows[0])
  pool.query(`SELECT schueler.*,
                    wlan.voucher,
                    wahlen.*
              FROM schueler
              LEFT JOIN wlan ON schueler.id = wlan.schueler_id
              LEFT JOIN wahlen ON schueler.id = wahlen.schueler_id`)
        .then(resp => {
          schueler_entfernt = resp.rows
        })
  const connection = mysql.createConnection(knexConfig.connection)
  connection.connect()
  connection.query(`SELECT ID AS id, Name, Vorname, Klasse
                    FROM schueler
                    WHERE Status = 2 AND Geloescht = "-" AND Gesperrt = "-"
                    ORDER BY Klasse, Name ASC`,
    (e, res) => {
      schueler_lokal = res
    })
  connection.end()
  function diff (eins, zwei) {
    let a = new Set(eins);
    let b = new Set(zwei);
    return new Set(
      [...a].filter(x => !b.has(x)));
  }
  $: merged = schueler_lokal.map(itm => ({
      ...schueler_entfernt.find((item) => (item.id === itm.id) && item),
      ...itm}))
  $: schueler_filter = _.groupBy(merged.filter(s => s.Vorname.startsWith(suche) || s.Name.startsWith(suche)), 'Klasse')
  function update_db () {}
</script>