meinbk-admin/components/teams.svelte

<script>
  export let schueler, privat, einstellungen = {};
  let teams_anzeigen = einstellungen.teams_anzeigen;
  let schueler_verbergen;
  $: pool.query(`UPDATE einstellungen SET teams_anzeigen=$1`, [teams_anzeigen])
  const { Pool } = R("pg");
  const pool = new Pool({ connectionString: privat.mein_bk_db });
  async function hole_lehrer() {
    const query = `SELECT * from lehrer`;
    try {
      const res = await pool.query(query);
      console.log(res.rows);
      return res.rows;
    } catch (e) {
      console.log(e);
      return [];
    }
  }
</script>

<style>
  @import "./node_modules/bulma-tooltip/dist/css/bulma-tooltip.min.css";
</style>

<h3 class="title">Einverständniserklärungen Teams</h3>
<div class="field">
  <label class="checkbox">
    <input type="checkbox" bind:checked={teams_anzeigen} />
    Teams-Seite für Schüler anzeigen
  </label>
</div>
<div class="field">
  <label class="checkbox">
    <input type="checkbox" bind:checked={schueler_verbergen} />
    Schüler verbergen
  </label>
</div>
{#if !schueler_verbergen}
  <div class="columns">
    <div class="column is-two-thirds">
      {#each Object.entries(schueler) as [klasse, schueler]}
        <h3 class="title">{klasse}</h3>
        <table class="table is-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Vorname</th>
              <th>Auswahlstatus (Konto, Video, Audio)</th>
            </tr>
          </thead>
          <tbody>
            {#each schueler as s}
              <tr>
                <td>{s.Name}</td>
                <td>{s.Vorname}</td>
                <td>
                  <span
                    class="tag"
                    class:is-warning={s.konto === undefined || s.konto === null}
                    class:is-danger={s.konto === false}
                    class:is-success={s.konto}>Konto</span>
                  <span
                    class="tag"
                    class:is-warning={s.video === undefined || s.video === null}
                    class:is-danger={s.video === false}
                    class:is-success={s.video}>Video</span>
                  <span
                    class="tag"
                    class:is-warning={s.video === undefined || s.audio === null}
                    class:is-danger={s.audio === false}
                    class:is-success={s.audio}>Audio</span>
                </td>
              </tr>
            {/each}
          </tbody>
        </table>
      {/each}
    </div>
  </div>
{/if}
{#await hole_lehrer()}
  Hole Lehrerdaten
{:then lehrer}
  <div class="columns">
    <div class="column is-two-thirds">
      <h3 class="title">Lehrer</h3>
      <table class="table is-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Auswahlstatus (Konto, Video, Audio)</th>
          </tr>
        </thead>
        <tbody>
          {#each lehrer as l}
            <tr>
              <td>{l.name}</td>
              <td>
                <span
                class="tag"
                class:is-warning={l.konto === undefined || l.konto === null}
                class:is-danger={l.konto === false}
                class:is-success={l.konto}>Konto</span>
              <span
                class="tag"
                class:is-warning={l.video === undefined || l.video === null}
                class:is-danger={l.video === false}
                class:is-success={l.video}>Video</span>
              <span
                class="tag"
                class:is-warning={l.audio === undefined || l.audio === null}
                class:is-danger={l.audio === false}
                class:is-success={l.audio}>Audio</span>
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  </div>
{/await}