wip

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#24320E",
+    "titleBar.activeBackground": "#334514",
+    "titleBar.activeForeground": "#F7FBF1"
+  }
+}

components/projektwoche.svelte

@@ -1,28 +1,56 @@
-{#each Object.entries(schueler) as [klasse, schueler]}
-  <h3 class="title">{klasse}</h3>
-  <table class="table is-striped">
-    <thead>
-      <tr>
-        <th><abbr title="hashid">ID</abbr></th>
-        <th>Name</th>
-        <th>Vorname</th>
-        <th>Projektwahl</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each schueler as s}
-        <tr>
-          <td>{s.hashid}</td>
-          <td>{s.Name}</td>
-          <td>{s.Vorname}</td>
-          <td class={'has-background-'+wahl(s)} on:click={() => modalset(s)} style="cursor: pointer">
-            {`Woche: ${s.woche || '–'} Mo/Di: ${s.mo_di || '–'} Mi/Do ${s.mi_do || '–'}`}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-{/each}
+<div class="columns">
+  <div class="column is-two-thirds">
+    {#each Object.entries(schueler) as [klasse, schuelers]}
+      <h3 class="title">{klasse}</h3>
+      <table class="table is-striped">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Vorname</th>
+            <th>Projektwahl</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each schuelers as s}
+            <tr>
+              <td>{s.hashid}</td>
+              <td>{s.Name}</td>
+              <td>{s.Vorname}</td>
+              <td class={'has-background-'+wahl(s)} on:click={() => modalset(s)} style="cursor: pointer">
+                {`Woche: ${s.woche == null ? '–' : s.woche} Mo/Di: ${s.mo_di == null ? '–' : s.mo_di} Mi/Do ${s.mi_do == null ? '–' : s.mi_do}`}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    {/each}
+  </div>
+  <div class="column">
+      <h3 class="title">Klassen</h3>
+      <table class="table is-striped">
+        <thead>
+          <tr>
+            <th>Klasse</th>
+            <th>Woche</th>
+            <th>Mo/Di</th>
+            <th>Mi/Do</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each klassen as k,i}
+            <tr>
+              <td>{k.klasse}</td>
+              <td class={`has-text-${k.abwesenheit === 0 ? 'danger':'success'}`} style="cursor: pointer;" on:click={() => switcher(i,0)}>{k.abwesenheit === 0 ? '✘':'✔'}</td>
+              <td class={`has-text-${k.abwesenheit === 1 ? 'danger':'success'}`} style="cursor: pointer;">{k.abwesenheit === 1 ? '✔':'✘'}</td>
+              <td class={`has-text-${k.abwesenheit === 2 ? 'danger':'success'}`} style="cursor: pointer;">{k.abwesenheit === 2 ? '✔':'✘'}</td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+  </div>
+</div>
+
 {#if modal_s}
   <div class="modal" class:is-active={modal}>
     <div class="modal-background"></div>
@@ -95,25 +123,26 @@
           </div>
         </div>
       </section>
-      <footer class="modal-card-foot background-is-info">
+      <footer class="modal-card-foot">
         Änderungen sind sofort wirksam
       </footer>
     </div>
   </div>
 {/if}
 
+{@debug}
 <script>
-  export let schueler, klasse, privat
-  let projekte = [], klassen = [], modal = false, modal_s, selected_woche, selected_mo_di, selected_mi_do
-  const modalset = s => {
+  export let schueler, privat
+  let projekte = [];
+  let klassen = [];
+  let modal = false, modal_s, selected_woche, selected_mo_di, selected_mi_do;
+  function modalset (s) {
     modal = true
     modal_s=s
   }
-  $: console.log(modal_s)
   const { Pool } = R('pg')
   const pool = new Pool({ connectionString: privat.mein_bk_db})
   import { onMount, onDestroy } from 'svelte';
-	onMount(_ => {
     pool.query(`SELECT id, titel, leitung, woche, mo_di, mi_do, max_teilnehmer,
                   (SELECT COUNT(*)
                     FROM wahlen
@@ -131,17 +160,13 @@
       (err, resp) => projekte = resp.rows)
     pool.query(`SELECT * FROM klassen`,
       (err, resp) => klassen = resp.rows)
-  })
-  onDestroy(_ => {
-    pool.end()
-  })
   function wahl (s) {
     if (s.woche === s.mo_di && s.woche === s.mi_do) return 'danger'
     else if (typeof(s.mo_di) !== typeof(s.mi_do)) return 'warning'
     else if ([s.mo_di, s.mi_do, s.woche].includes(0)) return 'info'
     else return 'success'
   }
-  const wahl_aendern = async e => {
+  async function wahl_aendern () {
     const text = `INSERT INTO wahlen(schueler_hashid, woche, mo_di, mi_do)
                     VALUES($1, $2, $3, $4)
                   ON CONFLICT (schueler_hashid) DO
@@ -149,11 +174,17 @@
                   RETURNING *`
     const values = [modal_s.hashid, selected_woche, selected_mo_di, selected_mi_do]
     try {
-      const res = await pool.query(text, values)
-      modal_s = Object.assign(modal_s, res.rows[0])
-      console.log('modal_s ändert sich:', modal_s)
+      await pool.query(text, values)
     } catch(err) {
       console.log(err.stack)
     }
   }
+  let update
+  async function switcher(i, id) {
+    // const klasse = klassen.find(x => x.klasse === k.klasse)
+    // klasse.abwesenheit = k.abwesenheit === null ?  4 : null
+    klassen[i].abwesenheit = id
+    klassen = klassen
+    console.log(klassen)
+  }
 </script>

components/vouchers.svelte

@@ -3,7 +3,7 @@
   <table class="table is-striped">
     <thead>
       <tr>
-        <th><abbr title="hashid">ID</abbr></th>
+        <th>ID></th>
         <th>Name</th>
         <th>Vorname</th>
         <th>Voucher</th>

Übersicht.svelte

@@ -1,11 +1,17 @@
-{#await gruppe}Warte auf Daten…
-{:then schueler_lokal}
   <section class="section">
     <div class="container">
       <h1 class="title">Mein BK</h1>
-      <span class="tag is-success" class:is-danger={!diff(schueler_lokal, schueler_entfernt)} on:click={update_db}>
+      <div>
+        <span class="tag is-success" class:is-danger={!diff(schueler_lokal, schueler_entfernt)} on:click={query} style="cursor: pointer;">
         {diff(schueler_lokal, schueler_entfernt) ? `${schueler_lokal.length} Schüler in der Datenbank` : 'Schülerdaten müssen aktualisiert werden'}
-      </span><button on:click={query}>Neu laden</button>
+      </span>
+      </div>
+      <br>
+      <div class="field">
+        <div class="control">
+          <input class="input" type="text" placeholder="Filter" bind:value={suche}>
+        </div>
+      </div>
     </div>
     <div class="container">
       <div class="tabs">
@@ -15,11 +21,9 @@
           <li class:is-active={active === Svwahl}><a on:click={() => active=Svwahl}>SV-Wahl</a></li>
         </ul>
       </div>
-      <svelte:component this={active} schueler={_.groupBy(mergeById(schueler_lokal, schueler_entfernt), 'Klasse')} {privat}/>
+      <svelte:component this={active} schueler={schueler_filter} {privat}/>
     </div>
   </section>
-{:catch error}Fehler
-{/await}
 
 <style>
   @import 'node_modules/bulma/css/bulma.css';
@@ -32,6 +36,7 @@
   import Svwahl from './components/svwahl.svelte'
   export let schueler, knexConfig, privat
   let active = Vouchers
+  let suche = ''
 
   const { Pool } = R('pg')
   const _ = R('lodash')
@@ -39,22 +44,24 @@
   Schueler.knex(R('knex')(knexConfig))
   const hashids = new Hashids(privat.salt, 5, 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789')
   const h = (id) => hashids.encode(id)
-  let schueler_entfernt = []
+  let schueler_entfernt = [], schueler_lokal = []
   const pool = new Pool({ connectionString: privat.mein_bk_db})
-  function query () {
-  pool.query(`SELECT schueler.hashid, wlan.voucher, wahlen.* FROM schueler
+  async function query () {
+    const resp = await pool.query(`SELECT schueler.hashid, wlan.voucher, wahlen.* FROM schueler
                 LEFT JOIN wlan ON schueler.hashid = wlan.schueler_hashid
-                LEFT JOIN wahlen ON schueler.hashid = wahlen.schueler_hashid`,
-    (err, resp) => schueler_entfernt = resp.rows)
+                LEFT JOIN wahlen ON schueler.hashid = wahlen.schueler_hashid`)
+    schueler_entfernt = resp.rows
   }
-  query()
-  const gruppe = Schueler.query()
+  async function lokal () {
+   schueler_lokal = await Schueler.query()
           .where('Status', '2')
           .andWhere('Geloescht', '-')
           .andWhere('Gesperrt', '-')
           .select('ID', 'Name', 'Vorname', 'Klasse')
           .orderBy('Klasse')
           .orderBy('Name')
+  }
+  query() && lokal()
   function diff (eins, zwei) {
     let a = new Set(eins);
     let b = new Set(zwei);
@@ -63,8 +70,12 @@
   }
   const mergeById = (a1, a2) =>
     a1.map(itm => ({
-        ...a2.find((item) => (item.hashid === h(itm.ID)) && item),
+      ...a2.find((item) => (item.hashid === h(itm.ID)) && item),
         ...itm
     }));
   function update_db () {}
+  let merged
+  $: merged = mergeById(schueler_lokal, schueler_entfernt)
+  let schueler_filter
+  $: schueler_filter = _.groupBy(merged.filter(s => s.Vorname.startsWith(suche) || s.Name.startsWith(suche)), 'Klasse')
 </script>