meinbk-admin/components/projektwoche-lehrer.svelte

<h2 class="title">Belegungsstatus der einzelnen Projekte</h2>
{#each projekte as p}
      <dl>
        <dt class="has-text-weight-bold"><a href="#{p.id}">{p.titel}</a></dt>
        {#if p.woche}
          <dd>Woche: <span class={`tag is-${p.gewaehlt_woche >= p.max_teilnehmer ? 'danger':'success'}`}>{`${p.gewaehlt_woche}/${p.max_teilnehmer}`}</span></dd>
        {/if}
        {#if p.mo_di}
          <dd>Mo/Di: <span class={`tag is-${p.gewaehlt_mo_di >= p.max_teilnehmer ? 'danger':'success'}`}>{`${p.gewaehlt_mo_di}/${p.max_teilnehmer}`}</span></dd>
        {/if}
        {#if p.mi_do}
          <dd>Mi/Do: <span class={`tag is-${p.gewaehlt_mi_do >= p.max_teilnehmer ? 'danger':'success'}`}>{`${p.gewaehlt_mi_do}/${p.max_teilnehmer}`}</span></dd>
        {/if}
      </dl>
      <hr>
{/each}
<h2 class="title">Beschreibung der einzelnen Projekte</h2>
{#each projekte as p}
  <div class="card" id={p.id}>
    <header class="card-header">
      <p class="card-header-title has-background-primary">{p.titel}</p>
    </header>
    <div class="card-content">
      <div class="content">
      <dl>
        <dt class="has-text-weight-bold">Beschreibung</dt>
        <dd>{p.beschreibung}</dd>
        <dt class="has-text-weight-bold">Projektleitung</dt>
        <dd>{p.leitung}</dd>
        <dt class="has-text-weight-bold">Bildungsbeitrag</dt>
        <dd>{p.bildung}</dd>
        <dt class="has-text-weight-bold">Treffpunkt</dt>
        <dd>{p.treffpunkt}</dd>
        <dt class="has-text-weight-bold">Schulnähe</dt>
        <dd><span class="tag" class:is-danger={!p.schulnah} class:is-success={p.schulnah}>{p.schulnah ? 'JA':'NEIN'}</span></dd>
        <dt class="has-text-weight-bold">Projektort</dt>
        <dd>{p.ort}</dd>
        <dt class="has-text-weight-bold">Vortreffen</dt>
        <dd><span class="tag" class:is-danger={!p.vortermin} class:is-success={p.vortermin}>{p.vortermin ? 'JA':'NEIN'}</span></dd>
        <dt class="has-text-weight-bold">Benötigtes Material</dt>
        <dd>{p.material || 'keines'}</dd>
        <dt class="has-text-weight-bold">Kostenbeitrag</dt>
        <dd><span class="tag" class:is-danger={p.kosten} class:is-success={!p.kosten}>{p.kosten ? p.kosten:'keine'}</span></dd>
      </dl>
      <hr>
      <dl>
        {#if p.woche}
          <dt class="has-text-weight-bold">Teilnehmer Woche</dt>
          <dd><span class={`tag is-${p.gewaehlt_woche >= p.max_teilnehmer ? 'danger':'success'}`}>{`${p.gewaehlt_woche}/${p.max_teilnehmer}`}</span></dd>
        {/if}
        {#if p.mo_di}
          <dt class="has-text-weight-bold">Teilnehmer Mo/Di</dt>
          <dd><span class={`tag is-${p.gewaehlt_mo_di >= p.max_teilnehmer ? 'danger':'success'}`}>{`${p.gewaehlt_mo_di}/${p.max_teilnehmer}`}</span></dd>
        {/if}
        {#if p.mi_do}
          <dt class="has-text-weight-bold">Teilnehmer Mi/Do</dt>
          <dd><span class={`tag is-${p.gewaehlt_mi_do >= p.max_teilnehmer ? 'danger':'success'}`}>{`${p.gewaehlt_mi_do}/${p.max_teilnehmer}`}</span></dd>
        {/if}
        <dt class="has-text-weight-bold">Info an Organisationsteam</dt>
        <dd>{p.info_an_organisationsteam || '–'}</dd>
        <dt class="has-text-weight-bold">Medienwunsch</dt>
        <dd>{p.medienwunsch || '–'}</dd>
        <dt class="has-text-weight-bold">Raumwunsch</dt>
        <dd>{p.raumwunsch || '–'}</dd>
        <dt class="has-text-weight-bold">Präsentation</dt>
        <dd>{p.presi || '–'}</dd>
      </dl>
      </div>
    </div>
    <footer class="card-footer">
      <p class="card-footer-item">
        <button class="button is-info" on:click={() => modal_toggle(p)}>Bearbeiten</button>
      </p>
      <p class="card-footer-item">
        <button class="button is-danger" on:click={() => loeschen(p)}>Löschen</button>
      </p>
    </footer>
  </div>
  <br>
{/each}
{#if modal}
  <div class="modal" class:is-active={modal}>
    <div class="modal-background"></div>
    <div class="modal-content">
      <header class="modal-card-head">
        <span class="modal-card-title is-clipped">Bearbeiten</span>
        <button class="delete" aria-label="close" on:click={() => modal = !modal}></button>
      </header>
      <section class="modal-card-body">
<div class="field">
    <label class="label">Projekttitel</label>
      <div class="control">
        <input class="input" type="text" bind:value={pp.titel}>
      </div>
</div>
<div class="field">
    <label class="label">Leitung (vollst. Name)</label>
      <div class="control">
        <input class="input" type="text" bind:value={pp.leitung}>
  </div>
</div>
<div class="field">
    <label class="label">Kurzbeschreibung des Projekts und ggf. weitere Informationen</label>
      <div class="control">
        <textarea class="textarea">{pp.beschreibung}</textarea>
      </div>
</div>
<div class="field">
    <label class="label">Beitrag zur kulturellen/politischen Bildung</label>
      <div class="control">
        <textarea class="textarea">{pp.bildung}</textarea>
      </div>
</div>
<div class="field">
    <label class="label">Max Teilnehmerzahl</label>
      <div class="control">
        <input class="input" type="number" bind:value={pp.max_teilnehmer}>
      </div>
</div>
<div class="field">
  <div class="control">
    <label class="label">Findet das Projekt in Schulnähe statt?</label>
      <input type="checkbox" name="schulnah" bind:checked={pp.schulnah}>
  </div>
</div>
<div class="field">
    <label class="label">Ort</label>
      <div class="control">
        <input class="input" type="text" bind:value={pp.ort}>
  </div>
</div>
<div class="field">
    <label class="label">Treffpunkt und Uhrzeit am Morgen des ersten Projekttags</label>
      <div class="control">
        <input class="input" type="text" bind:value={pp.treffpunkt}>
  </div>
</div>
<div class="field is-horizontal">
  <div class="control">
    <label class="label">Wochenprojekt</label>
      <input type="checkbox" name="woche" bind:checked={pp.woche}>
  </div>
</div>
<div class="field">
  <div class="control">
    <label class="label">Montag/Dienstag</label>
      <input type="checkbox" name="mo_di" bind:checked={pp.mo_di}>
  </div>
</div>
<div class="field">
  <div class="control">
    <label class="label">Mittwoch/Donnerstag</label>
      <input type="checkbox" name="mi_do" bind:checked={pp.mi_do}>
  </div>
</div>
<div class="field">
  <div class="control">
    <label class="label">Soll für ein Vorgespräch am Mittwoch 2.10.19 ein Raum reserviert werden?</label>
      <input type="checkbox" name="vortermin" bind:checked={pp.vortermin}>
  </div>
</div>
<div class="field">
    <label class="label">Mitzubringende besondere Materialien</label>
      <div class="control">
        <input class="input" type="text" bind:value={pp.material}>
  </div>
</div>
<div class="field">
    <label class="label">Kosten</label>
      <div class="control">
        <input class="input" type="text" bind:value={pp.kosten}>
  </div>
</div>
<div class="field">
    <label class="label">Zusätzliche Info für das Organisationsteam</label>
      <div class="control">
        <textarea class="textarea">{pp.info_an_organisationsteam}</textarea>
      </div>
</div>
<div class="field">
    <label class="label">Raumwunsch</label>
      <div class="control">
        <input class="input" type="text" bind:value={pp.raumwunsch}>
  </div>
</div>
<div class="field">
    <label class="label">Medienwunsch</label>
      <div class="control">
        <input class="input" type="text" bind:value={pp.medienwunsch}>
  </div>
</div>
<div class="field">
    <label class="label">Präsentationsbeitrag</label>
      <div class="control">
        <textarea class="textarea">{pp.presi}</textarea>
      </div>
</div>
      </section>
      <footer class="modal-card-foot">
        <span class="card-footer-item">
          <button class="button is-info" on:click={() => speichern(pp)}>Aktualisieren</button>
        </span>
        <span class="card-footer-item">
          <button on:click={() => modal=false} class="button is-danger">Abbrechen</button>
        </span>
      </footer>
    </div>
  </div>
{/if}
<script>
  export let privat
  let projekte = []
  let pp
  let modal = false
  const { Pool } = R('pg')
  const _ = R('lodash')
  const pool = new Pool({ connectionString: privat.mein_bk_db})
  function projekte_laden () {
    pool.query(`SELECT *,
                  (SELECT COUNT(*)
                    FROM wahlen
                    WHERE projekte.id = wahlen.woche
                  ) as gewaehlt_woche,
                  (SELECT COUNT(*)
                    FROM wahlen
                    WHERE projekte.id = wahlen.mo_di
                  ) as gewaehlt_mo_di,
                  (SELECT COUNT(*)
                    FROM wahlen
                    WHERE projekte.id = wahlen.mi_do
                  ) as gewaehlt_mi_do
                FROM projekte`,
      (err, resp) => projekte = resp.rows)
  }
  projekte_laden()
  function modal_toggle (p) {
    pp = p
    modal = true
  }
  function loeschen (p) {
    const query = `DELETE FROM projekte
                   WHERE id = $1`
    pool.query(query, [p.id], (err, res) => {
      if (err) {
        console.log(err)
        return
      }
      projekte = projekte.filter(pp => pp !== p)
    })
  }
  function speichern (pp) {
    const query = `UPDATE projekte
                   SET (titel, leitung, beschreibung, bildung, max_teilnehmer,
                     schulnah, ort, treffpunkt, woche, mo_di, mi_do, vortermin,
                     material, kosten, info_an_organisationsteam, raumwunsch,
                     medienwunsch, presi) = ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18)
                   WHERE projekte.id = $19
                   RETURNING *`
    const value = [pp.titel, pp.leitung, pp.beschreibung, pp.bildung, pp.max_teilnehmer,
                   pp.schulnah, pp.ort, pp.treffpunkt, pp.woche, pp.mo_di, pp.mi_do, pp.vortermin,
                   pp.material, pp.kosten, pp.info_an_organisationsteam, pp.raumwunsch,
                   pp.medienwunsch, pp.presi,
                   pp.id]
    pool.query(query, value, (err, res) => {
      err && console.log(err)
      pp = res[0]
      projekte = projekte
      modal = false
    })
  }
</script>