bk2018/Fotoliste.html

{#await promise then fotos}
  {#each _.chunk(fotos, 25) as slice}
    <div class="page grid" orientation="portrait" size="A4">
      <div class="main">
        <h5>{slice[0].Klasse}</h5>
        Stand: {datum(new Date())}
        <div class="grid">
          {#each slice as s}
            <div>
              <img src="data:image/jpg;base64,{s && buffer(s.schuelerfoto.Foto)}" alt="Foto" style="width: 120px">
              <br>
              {s.Name}, {s.Vorname}
            </div>
          {/each}
        </div>
      </div>
    </div>
  {/each}
{/await}

<script>
  import { beforeUpdate } from 'svelte'
  import { datum } from './helfer'
  export let schueler, knexConfig
  const SchuelerFoto = R('models').Schueler
  const _ = R('lodash')
  let promise

  SchuelerFoto.knex(R('knex')(knexConfig))
  const buffer = (d) => Buffer.from(d, 'binary').toString('base64')
  $: promise = SchuelerFoto.query().whereIn('ID', schueler.map(s => s.ID)).eager('[schuelerfoto]')
</script>

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