bk2018/Fotoliste.html

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

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

<script>
  export default {
    computed: {
      fotos: async ({schueler, knex}) => {
        R.objection.Model.knex(R.knex({
          client: 'mysql',
          useNullAsDefault: true,
          connection: {
            host: knex.host,
            database: knex.name,
            user: knex.user,
            password: knex.password,
            charset: 'utf8'
          }
        }))
        let f = {}
        const schuelerfotos = await R.models.Schuelerfoto.query().whereIn('Schueler_ID', schueler.map(s => s.ID))
        schuelerfotos.forEach(element => {
          f[element.Schueler_ID] = Buffer.from(element.Foto, 'binary').toString('base64')
        })
        return f
      }
    },
    data () { return { datum: new Date().toLocaleDateString('de', {day: '2-digit', month: '2-digit', year: 'numeric'}) } },
    helpers: { R },
  }
</script>