bk2018/Allg Fotoliste.html

{#await promise}Fotos kommen…
{:then fotos}
  {#each chunk(fotos, 25) as slice}
    <div class="page grid" orientation="portrait" size="A4">
      <div class="main">
        <b>{slice[0].Klasse}</b>
        Stand: {datum(new Date())}
        <div class="grid" style="font-size: 0.8rem">
          {#each slice as s}
            <div>
              {#if s.schuelerfoto}
                <img src="data:image/jpg;base64,{buffer(s.schuelerfoto.Foto)}" alt="Foto" style="width: 120px">
              {:else}
                Kein Foto
              {/if}
              <br>
              {s.Name}, {s.Vorname}
            </div>
          {/each}
        </div>
      </div>
    </div>
  {/each}
{:catch error}Fehler
{/await}

<script>
  import { datum, chunk } from './helfer'
  export let schueler, knexConfig
  const SchuelerFoto = R('schild').Schueler
  SchuelerFoto.knex(R('knex')(knexConfig))
  const buffer = (d) => Buffer.from(d, 'binary').toString('base64')
  const promise = SchuelerFoto.query().whereIn('ID', schueler.map(s => s.ID)).eager('[schuelerfoto]').orderBy('Name')
</script>

<style>
  @import 'css/main.css';
  .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
  }
</style>