meinbk-admin/components/projektwoche-schueler.svelte

<div class="columns">
  <div class="column is-two-thirds">
    {#each Object.entries(schueler) as [klasse, schuelers]}
      <h3 class="title">{klasse}</h3>
      <h3 class="subtitle has-background-warning">{unterwegs(klasse)}</h3>
      <table class="table is-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Vorname</th>
            <th>Projektwahl</th>
          </tr>
        </thead>
        <tbody>
          {#each schuelers as s,i}
            <tr>
              <td>{s.hashid}</td>
              <td>{s.Name}</td>
              <td>{s.Vorname}</td>
              <td class={'has-background-'+wahl(s)} on:click={() => modalset(s,i)} style="cursor: pointer">
                {`Woche: ${s.woche == null ? '–' : s.woche} Mo/Di: ${s.mo_di == null ? '–' : s.mo_di} Mi/Do ${s.mi_do == null ? '–' : s.mi_do}`}
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    {/each}
  </div>
  <div class="column">
      <h3 class="title">Klassen</h3>
      <table class="table is-striped">
        <thead>
          <tr>
            <th>Klasse</th>
            <th>Woche</th>
            <th>Mo/Di</th>
            <th>Mi/Do</th>
          </tr>
        </thead>
        <tbody>
          {#each klassen && Object.entries(klassen) as [klasse, abwesenheit]}
            <tr>
              <td>{klasse}</td>
              <td class={`has-text-${abwesenheit === 0 ? 'danger':'success'}`} style="cursor: pointer;" on:click={() => switcher(klasse,0)}>{abwesenheit === 0 ? '✘':'✔'}</td>
              <td class={`has-text-${abwesenheit === 1 ? 'danger':'success'}`} style="cursor: pointer;" on:click={() => switcher(klasse,1)}>{abwesenheit === 1 ? '✘':'✔'}</td>
              <td class={`has-text-${abwesenheit === 2 ? 'danger':'success'}`} style="cursor: pointer;" on:click={() => switcher(klasse,2)}>{abwesenheit === 2 ? '✘':'✔'}</td>
            </tr>
          {/each}
        </tbody>
      </table>
  </div>
</div>

{#if modal_s}
  <div class="modal" class:is-active={modal}>
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">{modal_s.Vorname} {modal_s.Name}</p>
        <button class="delete" aria-label="close" on:click={() => modal = !modal}></button>
      </header>
      <section class="modal-card-body">
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Woche</label>
          </div>
          <div class="field-body">
            <div class="field is-narrow">
              <div class="control">
                <div class="select is-fullwidth">
                  <select bind:value={selected_woche} on:change={wahl_aendern}>
                    <option value={null}>Kein Projekt gewählt</option>
                    {#each projekte.filter(p => p.woche) as p}
                      <option value={p.id} selected={modal_s.woche}>{`${p.titel} – ${p.leitung} (${p.gewaehlt_woche}/${p.max_teilnehmer}`})</option>
                    {/each}
                    <option value={0} selected={modal_s.woche === 0}>Krank/Beurlaubt</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Mo/Di</label>
          </div>
          <div class="field-body">
            <div class="field is-narrow">
              <div class="control">
                <div class="select is-fullwidth">
                  <select bind:value={selected_mo_di} on:change={wahl_aendern}>
                    <option value={null}>Kein Projekt gewählt</option>
                    {#each projekte.filter(p => p.mo_di) as p}
                      <option value={p.id} selected={modal_s.mo_di}>{`${p.titel} – ${p.leitung} (${p.gewaehlt_mo_di}/${p.max_teilnehmer}`})</option>
                    {/each}
                    <option value={0} selected={modal_s.mo_di === 0}>Krank/Beurlaubt</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Mi/Do</label>
          </div>
          <div class="field-body">
            <div class="field is-narrow">
              <div class="control">
                <div class="select is-fullwidth">
                  <select bind:value={selected_mi_do} on:change={wahl_aendern}>
                    <option value={null}>Kein Projekt gewählt</option>
                    {#each projekte.filter(p => p.mi_do) as p}
                      <option value={p.id} selected={modal_s.mi_do}>
                        {`${p.titel} – ${p.leitung} (${p.gewaehlt_mi_do}/${p.max_teilnehmer}`})
                      </option>
                    {/each}
                    <option value={0} selected={modal_s.mi_do === 0}>Krank/Beurlaubt</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        Änderungen sind sofort wirksam
      </footer>
    </div>
  </div>
{/if}

<script>
  export let schueler, privat
  let projekte = [];
  let klassen = {}
  let modal = false, modal_s, selected_woche, selected_mo_di, selected_mi_do;
  function modalset (s) {
    modal = true
    modal_s=s
  }
  const { Pool } = R('pg')
  const _ = R('lodash')
  const pool = new Pool({ connectionString: privat.mein_bk_db})
  function projekte_laden () {
  pool.query(`SELECT id, titel, leitung, woche, mo_di, mi_do, max_teilnehmer,
                (SELECT COUNT(*)
                  FROM wahlen
                  WHERE projekte.id = wahlen.woche
                ) as gewaehlt_woche,
                (SELECT COUNT(*)
                  FROM wahlen
                  WHERE projekte.id = wahlen.mo_di
                ) as gewaehlt_mo_di,
                (SELECT COUNT(*)
                  FROM wahlen
                  WHERE projekte.id = wahlen.mi_do
                ) as gewaehlt_mi_do
              FROM projekte`,
    (err, resp) => projekte = resp.rows)
  }
  projekte_laden()
  pool.query(`SELECT * FROM klassen ORDER BY klasse`,
    (err, resp) => resp.rows.forEach(k => { klassen[k.klasse] = k.abwesenheit }))
  $: wahl = s => {
    const abwesenheit = klassen[s.Klasse]
    if (abwesenheit === null) {
      if (s.woche === s.mo_di && s.woche === s.mi_do) return 'danger'
      else if (typeof(s.mo_di) !== typeof(s.mi_do)) return 'warning'
      else if ([s.mo_di, s.mi_do, s.woche].includes(0)) return 'info'
      else return 'success'
    } else if (abwesenheit === 0) {
      if (s.woche === s.mo_di && s.woche === s.mi_do) return 'success'
      else return 'info'
    } else if (abwesenheit === 1) {
      if (s.woche === s.mo_di && s.woche === s.mi_do) return 'danger'
      else if (typeof(s.woche) === 'number' && (typeof(s.mo_di) === 'number'|| typeof(s.mi_do) === 'number')) return 'info'
      else if (typeof(s.mi_do) === 'number') return 'success'
      else if (s.mo_di === 0 || s.woche === 0) return 'warning'
      else return 'danger'
    } else if (abwesenheit === 2) {
      if (s.woche === s.mo_di && s.woche === s.mi_do) return 'danger'
      else if (typeof(s.woche) === 'number' && (typeof(s.mo_di) === 'number'|| typeof(s.mi_do) === 'number')) return 'info'
      else if (typeof(s.mo_di) === 'number') return 'success'
      else if (s.mi_do === 0 || s.woche === 0) return 'warning'
      else return 'danger'
    }
  }
  async function wahl_aendern () {
    const text = `INSERT INTO wahlen(schueler_hashid, woche, mo_di, mi_do)
                    VALUES($1, $2, $3, $4)
                  ON CONFLICT (schueler_hashid) DO
                    UPDATE SET woche=$2, mo_di=$3, mi_do=$4
                  RETURNING *`
    const values = [modal_s.hashid, selected_woche, selected_mo_di, selected_mi_do]
    try {
      const res = await pool.query(text, values)
      const data = res.rows[0]
      projekte_laden()
      Object.assign(modal_s, data)
      schueler = schueler
    } catch(err) {
      console.log(err.stack)
    }
  }
  async function switcher(k, art) {
    const abwesenheit = klassen[k] === null || klassen[k] !== art ? art : null
    const text = `UPDATE klassen SET abwesenheit = $1
                  WHERE klasse = $2
                  RETURNING abwesenheit`
    const values = [abwesenheit, k]
    try {
      const res = await pool.query(text, values)
      const data = res.rows[0]
      klassen[k] = data.abwesenheit
    } catch(err) {
      console.log(err.stack)
    }
  }
  $: unterwegs = klasse => {
    if (!klassen) return ''
    let out
    switch (klassen[klasse]) {
      case null: return ''; break;
      case 0: out = 'Montag bis Freitag'; break;
      case 1: out = 'Montag und Dienstag'; break;
      case 2: out = 'Mittwoch und Donnerstag'; break;
    }
    return `Die Klasse ist ${out} unterwegs`
  }
</script>