R2023 09.p1 (#36)

* refactoring for issue01: rename logical steps 'letter' and 'print' to 'letter1' and 'print1' to enable for further steps to come * refactoring for issue01: rename 'Letter' referenced into 'Letter1' enabling for differentiation with more Letters. * refactoring for issue01: rename file to Letter1 for proper differentiation with more "Letter" files to come. * refactoring: removed spaces * fix 01, 02: add additional letters * issue 01, 02: enhance by an additional letter * issue 01, 02: renamed all additional letters and added them into the App * issue 01, 02: re applied new texts, renamed variables * browserlist and security updates on npm packages * require svelte version >= 3.49.0 for security reasons * fix: string quotes * fix: simplify expression * ext: provide for IdImages representing both or front/back sides * ext: remove ID capture from letter (move to entry) * upd: reflect new law from 2022 * upd: version increment * fix: deprecation / syntax * upd: formatting, structure * ext: follow up letters * ext: follow up letters * ext: follow up letters * ext: extend user-desire fora variety of followup communications Signed-off-by: nielsson4711 <nielsdev21@pm.me> * upd: housekeeping Signed-off-by: nielsson4711 <nielsdev21@pm.me> * ext: adjustments on navigation Signed-off-by: nielsson4711 <nielsdev21@pm.me> * Revert "upd: integrate current mercator logo" This reverts commit 413e3d19dd5778d063a5e7b3dc12ab2fd561392a. * upd: integrate new mercator logo * fix: housekeeping * upd: npm update Signed-off-by: nielsson4711 <nielsdev21@pm.me> * fix: adjust logic enabling for old and new data_info_req and 4 additional request types. Signed-off-by: nielsson4711 <nielsdev21@pm.me> * fix: line break first sentence * fix: mercator logo and links --------- Signed-off-by: nielsson4711 <nielsdev21@pm.me> Co-authored-by: nielsson4711 <nielsdev21@pm.me>
DigitaleGesellschaft · Aug 30, 2023 · 0f78524 · 0f78524
1 parent c81479a
commit 0f78524
Show file tree

Hide file tree

Showing 29 changed files with 1,730 additions and 2,155 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,10 @@
 /node_modules/
 /public/build/
-/public/index.html
 /public/data.json
+/public/index.html
+.idea
 
 .DS_Store
 
 local.key
-local.cert
+local.cert
diff --git a/config b/config
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "datenauskunftsbegehren.ch",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "build": "rm -f ./public/build/* && rollup -c",
@@ -17,10 +17,9 @@
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.38.2"
+    "svelte": "^3.49.0"
   },
   "dependencies": {
-    "cropperjs": "^1.5.11",
     "date-fns": "^2.20.2",
     "image-capture": "^0.4.0",
     "lodash-es": "^4.17.21",

diff --git a/public/mercator.png b/public/mercator.png
diff --git a/public/mercator_logo.png b/public/mercator_logo.png
diff --git a/src/App.svelte b/src/App.svelte
@@ -2,18 +2,34 @@
   import { onMount, tick } from 'svelte';
 
   import Header from './Header.svelte'
-  import Letter from './letter/Letter.svelte'
+  // Auskunftsbegehren
+  import LetterDataInfoReq from './letter/LetterDataInfoReq.svelte'
+  // Auskunftsbegehren - Ausbleibende Auskunft
+  // Keine Reaktion auf Auskunftsbegehren
+  import LetterDataInfoReqRemind from './letter/LetterDataInfoReqRemind.svelte'
+  // Auskunftsbegehren - Unvollständige Auskunft
+  // Unvollständige Auskunft nach Auskunftsbegehren
+  import LetterDataInfoReqDemand from './letter/LetterDataInfoReqDemand.svelte'
+  // Auskunftsbegehren - Korrektur von Daten
+  // Berichtigungsbegehren nach erteilter Auskunft
+  import LetterDataInfoReqChange from './letter/LetterDataInfoReqChange.svelte'
+  // Auskunftsbegehren - Löschung von Daten
+  // Löschbegehren nach erteilter Auskunft
+  import LetterDataInfoReqDelete from './letter/LetterDataInfoReqDelete.svelte'
+
   import Entry from './entry/Entry.svelte'
   import Share from './Share.svelte'
   import Messages from './Messages.svelte'
   import IcsDownload from './IcsDownload.svelte'
   import DigigesLogo from './DigigesLogo.svelte'
 
-  import texts from './texts.js'
-  
-  import { userData, userAddressHtml, orgAddressHtml } from './stores.js'
+  import { default as texts, getCausa } from './texts.js'
+
+  import {data, userData, userAddressHtml, orgAddressHtml, userDesire} from './stores.js'
+  $: desires = $data && $data.desires ? $data.desires : []
 
-  let canPrint = undefined;
+  // hack: override state mix with multiple letter types after printing one and recalling the letter view
+  let canPrint = true;
 
   async function setStep({detail}) {
     const step = detail;
@@ -23,13 +39,13 @@
     })
 
     await tick();
-    
+
     if (step === 'print') {
       const timeout = window.setTimeout(() => {
         canPrint = false;
         window.scrollTo({top: 0, behavior: 'smooth'})
       }, 200)
-      window.addEventListener("beforeprint", () => { 
+      window.addEventListener("beforeprint", () => {
         window.clearTimeout(timeout);
         canPrint = true;
         window.scrollTo({top: 0, behavior: 'smooth'})
@@ -42,13 +58,31 @@
     userData.set({})
     userAddressHtml.set('')
     orgAddressHtml.set('')
+    userDesire.set('')
   }
 
   onMount(async () => {
     document.querySelector('#loader').remove();
     document.querySelector('.nomodule-message').remove();
+
+    // switch step name "letter" into "data_info_request" to update URL data from older info requests
+    if ($userData.step === 'letter') {
+      userData.update( userData => {
+        userData.step = 'data_info_request';
+        return userData;
+      })
+      setStep({detail: 'data_info_request'})
+    }
   })
+
+  let followUpHidden = true;
+  function hideUnhideFollowUp() {
+    followUpHidden = ! followUpHidden;
+    console.log("app followup hidden:" + followUpHidden);
+  }
+
 </script>
+
 <Header on:step={setStep} activeStep={$userData.step}></Header>
 <main>
 
@@ -61,53 +95,79 @@
     </div>
   {/if}
 
-  {#if !$userData.step || $userData.step === 'entry'}
+  {#if !$userData.step || $userData.step === 'entry' }
     <div class="step-ui step-entry">
       <Entry on:step={setStep} on:reset={reset}></Entry>
     </div>
   {/if}
 
-  {#if $userData.step === 'print' && canPrint === true}
-    <div class="step-ui step-print">
-      <div>
-        <h2>Geschafft</h2>
-        <p>
-          Nun musst du das Datenauskunftsbegehren noch <strong>eingeschrieben per Post versenden</strong>.
-        </p>
-        <p>
-          Ab dem Eingang bleiben 30 Tage für die Beantwortung.
-          Speichere einen Termin im Kalender, um dich für ein allfälliges Nachfragen erinnern zu lassen, falls du bis dahin keine Antwort erhalten hast.
-        </p>
-        <IcsDownload></IcsDownload>
-        <p>
-          Rückmeldungen nehmen wir unter <a href="mailto:auskunftsbegehren@digitale-gesellschaft.ch">auskunftsbegehren@digitale-gesellschaft.ch</a> gerne entgegen.
-        </p>
-        <p>
-        Unser Generator wurde von IT- und Rechtskundigen der Digitalen Gesellschaft in unzähligen Stunden entwickelt und steht allen frei zur Verfügung. 
-        Als <a target="_blank" rel="noopener noreferrer" href="https://www.digitale-gesellschaft.ch/uber-uns/unterstuetzer-werden/">Mitglied, Spender oder Gönnerin</a> unterstützst du unsere Arbeit. 
-        Falls du über unsere Aktivitäten auf dem Laufenden gehalten werden möchtest, abonniere jetzt den <a target="_blank" rel="noopener noreferrer" href="https://www.digitale-gesellschaft.ch/uber-uns/newsletter/">monatlichen Newsletter</a>.
-        </p>
+  {#if $userData.step === 'print'}
+    {#if canPrint === true}
+      <div class="step-ui step-print">
+        <div>
+          <h2>Geschafft</h2>
+          <p>
+            Nun musst du {getCausa($userData.desire, 'print')} noch <strong>eingeschrieben per Post versenden</strong>.
+          </p>
+          <p>
+            Ab dem Eingang bleiben 30 Tage für die Beantwortung.
+            Speichere einen Termin im Kalender, um dich für ein allfälliges Nachfragen erinnern zu lassen, falls du bis dahin keine Antwort erhalten hast.
+          </p>
+          <IcsDownload></IcsDownload>
+          <p>
+            Rückmeldungen nehmen wir unter <a href="mailto:auskunftsbegehren@digitale-gesellschaft.ch">auskunftsbegehren@digitale-gesellschaft.ch</a> gerne entgegen.
+          </p>
+          <p>
+          Unser Generator wurde von IT- und Rechtskundigen der Digitalen Gesellschaft in unzähligen Stunden entwickelt und steht allen frei zur Verfügung.
+          Als <a target="_blank" rel="noopener noreferrer" href="https://www.digitale-gesellschaft.ch/uber-uns/unterstuetzer-werden/">Mitglied, Spender oder Gönnerin</a> unterstützt du unsere Arbeit.
+          Falls du über unsere Aktivitäten auf dem Laufenden gehalten werden möchtest, abonniere jetzt den <a target="_blank" rel="noopener noreferrer" href="https://www.digitale-gesellschaft.ch/uber-uns/newsletter/">monatlichen Newsletter</a>.
+          </p>
+        </div>
       </div>
-    </div>
-  {/if}
-
-  {#if $userData.step === 'print' && canPrint === false}
-    <div class="step-ui">
-      <div>
-        <h2>Sende dir die Webadresse</h2>
-        <p>Auf deinem Gerät ist Drucken leider nicht möglich. Verwende die Möglichkeit, die Webadresse (URL) zu senden, um sie dir beispielsweise per E-Mail zu schicken. Du kannst sie dann auf einem passenden Gerät mit Drucker öffnen. Die eingegebenen Daten sind in der URL gespeichert.</p>
+    {:else}
+      <div class="step-ui">
+        <div>
+          <h2>Sende dir die Webadresse</h2>
+          <p>Auf deinem Gerät ist Drucken leider nicht möglich. Verwende die Möglichkeit, die Webadresse (URL) zu senden, um sie dir beispielsweise per E-Mail zu schicken. Du kannst sie dann auf einem passenden Gerät mit Drucker öffnen. Die eingegebenen Daten sind in der URL gespeichert.</p>
+        </div>
       </div>
-    </div>
+    {/if}
   {/if}
 
-  {#if $userData.step === 'letter' || $userData.step === 'id' || $userData.step === 'print'}
+  {#if $userData.step && $userData.step !== 'entry' }
     <Share></Share>
-    <Letter></Letter>
+    {#if $userData.step === 'data_info_request' || $userData.step === 'print' }
+      <LetterDataInfoReq></LetterDataInfoReq>
+    {/if}
+    {#if $userData.entry === 'followup' }
+      {#if $userData.step === 'unanswered' || $userData.step === 'print' }
+        <LetterDataInfoReqRemind></LetterDataInfoReqRemind>
+      {:else if $userData.desire === 'incomplete_answer' || $userData.step === 'print' }
+        <LetterDataInfoReqDemand></LetterDataInfoReqDemand>
+      {:else if $userData.desire === 'data_correction' || $userData.step === 'print' }
+        <LetterDataInfoReqChange></LetterDataInfoReqChange>
+      {:else if $userData.desire === 'data_deletion' || $userData.step === 'print' }
+        <LetterDataInfoReqDelete></LetterDataInfoReqDelete>
+      {/if}
+    {/if}
     <div class="actions">
       <button class="one no-print" on:click="{() => setStep({detail: 'entry'})}">❮ zur Dateneingabe</button>
+      {#if $userData.step === 'data_info_request'}
+        <button class="one no-print" on:click="{hideUnhideFollowUp}">Nachfassen</button>
+      {/if}
       <button class="one no-print" on:click="{() => setStep({detail: 'print'})}">Jetzt drucken ❯</button>
     </div>
-    <Share></Share>
+    {#if !followUpHidden }
+      <div class="step-ui step-entry">
+        <div class="separator"><span></span></div>
+        <section>
+          <h2>{texts.steps.one.followup}</h2>
+          {#each desires as desire}
+              <button class="one" on:click="{() => {$userData.entry = 'followup'; $userData.desire = desire.handle; setStep({detail: desire.handle}); }}">{desire.label}</button>
+          {/each}
+        </section>
+      </div>
+    {/if}
   {/if}
 
   <footer>
@@ -116,6 +176,7 @@
     </a>
   </footer>
 </main>
+
 <style>
 
   .init {
@@ -136,7 +197,6 @@
     background: var(--color-ui-three);
     border: 1px solid var(--color-ui-one);
     border-radius: 12px;
-
     margin: 12px;
     max-width: 800px;
   }
@@ -170,4 +230,24 @@
       display: none;
     }
   }
-</style>
+
+  section {
+    padding: 0 12px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  section h2 {
+    width: 100%;
+    margin-top: 24px;
+    margin-bottom: 12px;
+  }
+  button {
+    width: auto;
+  }
+  .separator span {
+    background: var(--color-ui-three);
+    position: relative;
+    padding: 10px;
+  }
+</style>
diff --git a/src/Credits.svelte b/src/Credits.svelte
@@ -10,6 +10,7 @@
     import DigigesLogo from './DigigesLogo.svelte'
 
 </script>
+
 <section class="credits">
   <h1>
     Online-Generator für Datenauskunftsbegehren
@@ -28,36 +29,38 @@
   <h2>Hinweise für angeschriebene Organisationen</h2>
   <p>
     Ab dem Zeitpunkt des Eingangs müssen Datenauskunftsbegehren innert 30 Tagen beantwortet werden. Falls die Frist nicht ausreicht, muss entsprechend informiert und die Frist, 
-    in der die Auskunft erfolgt, mitgeteilt werden. Falls die Auskunft nicht oder nicht vollständig erteilt werden kann, 
-    muss dieser Entscheid begründet werden. <span class="no-wrap">(<a target="_blank" rel="noopener noreferrer" href="https://www.fedlex.admin.ch/eli/cc/1993/1962_1962_1962/de#art_1">Art. 1 Abs. 4 VDSG</a>)</span>
+    in der die Auskunft erfolgt, mitgeteilt werden. Falls die Auskunft nicht oder nicht vollständig erteilt werden kann,
+    muss dieser Entscheid begründet werden. <span class="no-wrap">(<a target="_blank" rel="noopener noreferrer" href="https://www.fedlex.admin.ch/eli/oc/2022/568/de#art_18">Art. 18 Abs. 1 VDSG</a>)</span>
   </p>
   <p>
     Das Zusammenstellen der Daten kann einen grösseren Arbeitsaufwand bedeuten. Dennoch ist die Auskunft in der Regel kostenlos zu erteilen.
-    Falls der Zweck oder der Inhalt des Begehrens unklar ist, lohnt es sich allenfalls – gemeinsam mit der gesuchstellenden Person – 
-    die Auskunft einzugrenzen. <span class="no-wrap">(<a target="_blank" rel="noopener noreferrer" href="https://www.fedlex.admin.ch/eli/cc/1993/1962_1962_1962/de#art_2">Art. 2 VDSG</a>)</span>
+    Falls der Zweck oder der Inhalt des Begehrens unklar ist, lohnt es sich allenfalls – gemeinsam mit der gesuchstellenden Person –
+    die Auskunft einzugrenzen.<span class="no-warp">(<a target="_blank" rel="noopener noreferrer" href="https://www.fedlex.admin.ch/eli/oc/2022/491/de#art_25">Art. 25 DSG</a>)</span>
+    <span class="no-wrap">(<a target="_blank" rel="noopener noreferrer" href="https://www.fedlex.admin.ch/eli/oc/2022/568/de#art_19">Art. 19 VDSG</a>)</span>
   </p>
   <h2>Weitere Schritte</h2>
   <p>
     Bleibt eine Antwort aus oder ist sie unvollständig, kann mit einem zweiten Brief nachgefasst und darauf hingewiesen werden. Im Anschluss kann gegen private Inhaber von Datensammlungen 
-    am Wohnsitz der betroffenen Person oder am Wohnsitz des Inhabers der Datensammlung eine gerichtliche Klage zur Durchsetzung 
-    des Auskunftsrechts eingereicht werden. <span class="no-wrap">(<a target="_blank" rel="noopener noreferrer" href="https://www.fedlex.admin.ch/eli/cc/1993/1945_1945_1945/de#art_15">Art. 15 DSG</a>)</span>
+    am Wohnsitz der betroffenen Person oder am Wohnsitz des Inhabers der Datensammlung eine gerichtliche Klage zur Durchsetzung
+    des Auskunftsrechts eingereicht werden. <span class="no-warp">(<a target="_blank" rel="noopener noreferrer" href="https://www.fedlex.admin.ch/eli/oc/2022/491/de#art_25">Art. 25 DSG</a>)</span>
   </p>
   <p>
     Ebenfalls kann die Berichtigung von falschen oder die Löschung von Daten (sowie die weitere Beschaffung) verlangt werden, 
-    sofern diese Datenbearbeitung nicht durch ein überwiegendes privates oder öffentliches Interesse oder 
-    durch ein Gesetz gerechtfertigt ist. <span class="no-wrap">(<a target="_blank" rel="noopener noreferrer" href="https://www.fedlex.admin.ch/eli/cc/1993/1945_1945_1945/de#art_13">Art. 13 DSG</a>)</span>
+    sofern diese Datenbearbeitung nicht durch ein überwiegendes privates oder öffentliches Interesse oder
+    durch ein Gesetz gerechtfertigt ist. <span class="no-wrap">(<a target="_blank" rel="noopener noreferrer" href="https://www.fedlex.admin.ch/eli/oc/2022/491/de#art_32">Art. 32 DSG</a>)</span>
   </p>
   <h2>Vielen Dank für die finanzielle Unterstützung</h2>
   <div class="logo-block">
     <p>
-      Das Projekt wird vom <a target="_blank" rel="noopener noreferrer" href="https://www.stiftung-mercator.ch/de/themen/schwerpunkt-digitalisierung/">Programm «Digitalisierung + Gesellschaft»</a> 
-      der <a target="_blank" rel="noopener noreferrer" href="https://www.stiftung-mercator.ch/de/">Stiftung Mercator Schweiz</a> gefördert.
+      Das Projekt wird vom <a target="_blank" rel="noopener noreferrer" href="https://www.stiftung-mercator.ch/digitalisierung-gesellschaft">Programm «Digitalisierung + Gesellschaft»</a>
+      der <a target="_blank" rel="noopener noreferrer" href="https://www.stiftung-mercator.ch">Stiftung Mercator Schweiz</a> gefördert.
     </p>
-    <a class="logo-link" target="_blank" rel="noopener noreferrer" href="https://www.stiftung-mercator.ch/de/"><img width="100px" src="./mercator.png"></a>
+    <a class="logo-link" target="_blank" rel="noopener noreferrer" href="https://www.stiftung-mercator.ch"><img alt="Logo Stiftung Mercator" width="100px" src="./mercator_logo.png"></a>
   </div>
   <h2>Credits</h2>
   <ul>
-    <li><strong>Konzept und Umsetzung</strong>: Beni Buess, Erik Schönenberger, Simon Gantenbein</li>
+    <li><strong>Konzept und Umsetzung</strong>: Beni Buess, Erik Schönenberger, Simon Gantenbein, Nikolaus Langner</li>
+    <li><strong>Ergänzungen und Überarbeitungen</strong>: Anna Walter, Erik Schönenberger, Martin Steiger</li>
     <li><strong>Kampagne</strong>: Vanessa Peter und das Team der Hochschule der Künste in Bern</li>
     <li>Danke an viele Freund*innen für die Ideen ♥️</li>
     <li>Built for the Web using HTML, CSS, JavaScript and <a target="_blank" rel="noopener noreferrer" href="https://svelte.dev/">Svelte</a></li>