meinbk-admin/components/infos.svelte

<div class="box">
  <h4 class="title is-4">Neue Mitteilung erstellen</h4>
  <div class="field">
    <label class="label">Mitteilung</label>
    <div class="control">
      <textarea class="textarea" placeholder="Mitteilungstext" bind:value={neu.text}></textarea>
    </div>
  </div>
  <div class="field">
    <label class="label">Für Klassen – oder alle ('alle' eintippen!)</label>
    <div class="control">
      <input class="input" type="text" placeholder="z.B. C19A oder alle" bind:value={neu.klasse}>
    </div>
  </div>
  <div class="field">
    <label class="label">Datum</label>
    <div class="control">
      <input class="input" type="text" disabled value={neu.timestamp}>
    </div>
  </div>
  <div class="field is-grouped">
    <div class="control">
      <button class="button is-link" on:click={()=>save()}>Speichern</button>
    </div>
  </div>
</div>

<h4 class="title is-4">Bisherige Mitteilungen</h4>
{#each info as i}
  <div class="box">
    <div class="field">
      <label class="label">Mitteilung</label>
      <div class="control">
        <textarea class="textarea" placeholder="Mitteilungstext" bind:value={i.text}></textarea>
      </div>
    </div>
    <div class="field">
      <label class="label">Für Klassen</label>
      <div class="control">
        <input class="input" type="text" placeholder="z.B. C19A, B19b, ..." bind:value={i.klasse}>
      </div>
    </div>
    <div class="field">
      <label class="label">Datum</label>
      <div class="control">
        <input class="input" type="text" disabled value={i.timestamp}>
      </div>
    </div>
  </div>
  <div class="field is-grouped">
    <div class="control">
      <button class="button is-link" on:click={()=>update(i)}>Änderung speichern</button>
    </div>
    <div class="control">
      <button class="button is-text" on:click={()=>remove(i.id)}>Löschen</button>
    </div>
  </div>
{/each}

<script>
  export let privat
  let neu = {}, info = []
  const { Pool } = R('pg')
  const pool = new Pool({ connectionString: privat.mein_bk_db})
  const update = async i => {
    const query = `UPDATE infos SET text = $1, klasse = $2, timestamp = $3 WHERE id = $4 RETURNING *`
    const values = [i.text, i.klasse, new Date(), i.id]
    try {
      const res = await pool.query(query, values)
      i = info.find(e=>e.id === i.id)
      i = res.rows[0]
    } catch(err) {
      console.log(err.stack)
    }
  }
  const remove = async id => {
    const query = `DELETE FROM infos WHERE id = $1 RETURNING *`
    const values = [id]
    try {
      const res = await pool.query(query, values)
      info = info.filter(e => e.id !== id)
    } catch(err) {
      console.log(err.stack)
    }
  }
  const save = async () => {
    const query = `INSERT INTO infos (text, klasse, timestamp) VALUES ($1, $2, $3) RETURNING *`
    const values = [neu.text, neu.klasse, new Date()]
    try {
      const res = await pool.query(query, values)
      info.unshift(res.rows[0])
    } catch(err) {
      console.log(err.stack)
    }
  }
  const get_infos = async () => {
    const query = `SELECT * FROM infos ORDER BY timestamp DESC`
    try {
      const res = await pool.query(query)
      info = res.rows
    } catch(err) {
      console.log(err.stack)
    }
  }
  get_infos()
</script>