meinbk-admin/components/reservierung.svelte

<script>
  export let schueler,
    privat,
    einstellungen = {};
  let reservierung_anzeigen = einstellungen.reservierung_anzeigen;
  let reservierung_erlauben = einstellungen.reservierung_erlauben;
  let schueler_verbergen;
  $: console.log(reservierung_anzeigen);
  const { Pool } = R("pg");
  const pool = new Pool({ connectionString: privat.mein_bk_db });
  $: reservierung_anzeigen !== null &&
    pool.query(`UPDATE einstellungen SET reservierung_anzeigen=$1`, [
      reservierung_anzeigen,
    ]);
  $: reservierung_erlauben !== null &&
    pool.query(`UPDATE einstellungen SET reservierung_erlauben=$1`, [
      reservierung_erlauben,
    ]);
</script>

<h3 class="title">Reservierungen Bibliothek</h3>
<div class="field">
  <label class="checkbox">
    <input type="checkbox" bind:checked={reservierung_anzeigen} />
    Reservierungsseite für Schüler anzeigen
  </label>
</div>
{#if reservierung_anzeigen}
  <div class="field">
    <label class="checkbox">
      <input type="checkbox" bind:checked={reservierung_erlauben} />
      Reservierungen zulassen
    </label>
  </div>
{/if}
<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</th>
            </tr>
          </thead>
          <tbody>
            {#each schueler as s}
              <tr>
                <td
                  >{#if s.age.year < 18}<span class="tag is-danger">18</span
                    >{/if}-{s.age}-{s.Name}</td
                >
                <td>{s.Vorname}</td>
                <td>
                  <span
                    class="tag"
                    class:is-light={s.reservierung === undefined ||
                      s.reservierung === null}
                    class:is-danger={s.reservierung === "abgelehnt"}
                    class:is-info={s.reservierung === "in Bearbeitung"}
                    class:is-success={s.reservierung === "abholbereit"}
                    class:is-warning={s.reservierung === "abholbereit (U18)"}
                    >{s.reservierung || "–"}</span
                  >
                </td>
              </tr>
            {/each}
          </tbody>
        </table>
      {/each}
    </div>
  </div>
{/if}

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