meinbk-admin/components/svwahl.svelte

<div class="columns">
  <div class="column is-two-thirds">
    {#each Object.entries(schueler) as [klasse, schuelers]}
      <h3 class="title">{klasse}</h3>
      <table class="table is-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Vorname</th>
            <th>Wahlstatus</th>
          </tr>
        </thead>
        <tbody>
          {#each schuelers as s,i}
            <tr>
              <td>{s.Name}</td>
              <td>{s.Vorname}</td>
              <td class:has-background-success={s.schuko||s.sprecher}>
                Schuko: <input checked={s.schuko} type="checkbox" on:click={()=>check_aktiv(s, 'schuko')}>
                Sprecher: <input checked={s.sprecher} type="checkbox" on:click={()=>check_aktiv(s, 'sprecher')}>
                <!-- gewählt: <input checked={s.gewaehlt} type="checkbox" on:click={()=>check_aktiv(s, 'gewaehlt')}> -->
                wählbar: <input checked={s.waehlbar} type="checkbox" on:click={()=>check_aktiv(s, 'waehlbar')}>
                {#if s.info || s.nachname || s.email}
                  <button class="button is-link tooltip" data-tooltip={`${s.info || ''} – ${s.Vorname} ${s.nachname || ''} – ${s.email || ''}`}>Infotext</button>
                {/if}
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    {/each}
  </div>
</div>
<script>
  export let schueler, privat, einstellungen = {}
  const { Pool } = R('pg')
  const pool = new Pool({ connectionString: privat.mein_bk_db})
  const check_aktiv = async (s, art) => {
    const query = `INSERT INTO schueler(id, ${art}, vorname, klasse)
                   VALUES($1, $2, $3, $4)
                   ON CONFLICT (id) DO
                    UPDATE SET ${art}=$2
                    WHERE schueler.id=$1
                   RETURNING ${art}`
    const values=[s.id, !s[art], s.Vorname, s.Klasse]
    try {
      const res = await pool.query(query, values)
      const data = res.rows[0]
      s[art] = data[art]
      schueler = schueler
    } catch(err) {
      console.log(err.stack)
    }
  }
</script>
<style>
  @import './node_modules/bulma-tooltip/dist/css/bulma-tooltip.min.css';
</style>