R2023 09.p2

.github/workflows/main.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Install nodejs
       run: sudo apt install nodejs
     - name: Install npm 7
@@ -19,7 +19,7 @@ jobs:
     - name: build
       run: |
         npm run build
-    - uses: actions/upload-artifact@v1
+    - uses: actions/upload-artifact@v3
       with:
         name: Public
         path: public/

src/App.svelte

@@ -25,7 +25,8 @@
 
   import { default as texts, getCausa } from './texts.js'
 
-  import {userData, userAddressHtml, orgAddressHtml, userDesire} from './stores.js'
+  import {data, userData, userAddressHtml, orgAddressHtml, userDesire} from './stores.js'
+  $: desires = $data && $data.desires ? $data.desires : []
 
   // hack: override state mix with multiple letter types after printing one and recalling the letter view
   let canPrint = true;
@@ -53,6 +54,19 @@
     }
   }
 
+  function handleDesire(desire) {
+
+    const d = desire;
+
+    if (d === 'data_info_request' && $userData.entry === 'followup') {
+      $userData.entry = 'entry';
+    } else {
+      $userData.entry = 'followup';
+    }
+    $userData.desire = d.handle;
+    setStep({detail: d.handle});
+
+  }
   function reset() {
     userData.set({})
     userAddressHtml.set('')
@@ -63,8 +77,22 @@
   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;
+  }
+
 </script>
 
 <Header on:step={setStep} activeStep={$userData.step}></Header>
@@ -79,7 +107,7 @@
     </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>
@@ -120,11 +148,7 @@
 
   {#if $userData.step && $userData.step !== 'entry' }
     <Share></Share>
-    {#if $userData.entry !== 'followup' }
-      {#if $userData.step === 'data_info_request' || $userData.step === 'print' }
-        <LetterDataInfoReq></LetterDataInfoReq>
-      {/if}
-    {/if}
+
     {#if $userData.entry === 'followup' }
       {#if $userData.step === 'unanswered' || $userData.step === 'print' }
         <LetterDataInfoReqRemind></LetterDataInfoReqRemind>
@@ -135,11 +159,27 @@
       {:else if $userData.desire === 'data_deletion' || $userData.step === 'print' }
         <LetterDataInfoReqDelete></LetterDataInfoReqDelete>
       {/if}
+    {:else}
+      {#if $userData.step === 'data_info_request' || $userData.step === 'print' }
+        <LetterDataInfoReq></LetterDataInfoReq>
+      {/if}
     {/if}
     <div class="actions">
       <button class="one no-print" on:click="{() => setStep({detail: 'entry'})}">❮ zur Dateneingabe</button>
+      <button class="one no-print" on:click="{hideUnhideFollowUp}">Nachfassen</button>
       <button class="one no-print" on:click="{() => setStep({detail: 'print'})}">Jetzt drucken ❯</button>
     </div>
+    {#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="{handleDesire(desire)}">{desire.label}</button>
+          {/each}
+        </section>
+      </div>
+    {/if}
   {/if}
 
   <footer>
@@ -202,4 +242,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>

src/Credits.svelte

@@ -10,6 +10,7 @@
     import DigigesLogo from './DigigesLogo.svelte'
 
 </script>
+
 <section class="credits">
   <h1>
     Online-Generator für Datenauskunftsbegehren
@@ -51,10 +52,10 @@
   <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 alt="Logo Stiftung Mercator" width="100px" src="../mercator_logo.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>

src/IcsDownload.svelte

@@ -9,11 +9,14 @@
 
   let answerShouldArriveAtDate
   let answerShouldArriveAtTime
+  let description;
+
   let formNode
 
   onMount(() => {
     answerShouldArriveAtDate = getTodayPlusDeadline()
     answerShouldArriveAtTime = '09:00'
+    description = 'Vor ' + getDeadlineDays() + ' Tagen hast du ' + getCausa($userData.desire, 'cal') + ' generiert. Hast du eine Antwort erhalten?';
   })
 
   function getStringChunks(string, length) {
@@ -50,8 +53,6 @@
     let uid = '@digiges.ch/auskunftsbegehren';
     const id = await getHash({text: JSON.stringify(get(userData))}) + Date.now() + Math.floor(Math.random() * Math.pow(10, 3));
     uid = `${id.slice(0,icsMaxLineLength - (uid.length + 'UID:'.length))}${uid}`;
-
-    const description = 'Vor ' + getDeadlineDays() + ' Tagen hast du ' + getCausa($userData.desire, 'cal') + ' generiert. Hast du eine Antwort erhalten?';
     /**
      * In der URL ist der aktuelle Schritt des minimalistischen Workflows notiert.
      * Enthält die URL die ursprünglichen Einstellungen (Name, Adresse, Konversationspartner),

src/data.js

@@ -8,14 +8,16 @@ function isValidOrg(org) {
 
 export function validateUserData(userData) {
   // if the user was already past step entry, that is any letter or print, we treat everything as valid
+  // HACK: catch up with URLs from fromer app versions containing "step:letter" (but doesn't know 'desire')
    if (userData.step === 'data_info_request' ||
-      userData.step === 'unanswered' ||
-      userData.step === 'incomplete_answer' ||
-      userData.step === 'data_correction' ||
-      userData.step === 'data_deletion' ||
-      userData.step === 'print')
-      return {
-    isValid: true
+       userData.step === 'letter' ||
+       userData.step === 'unanswered' ||
+       userData.step === 'incomplete_answer' ||
+       userData.step === 'data_correction' ||
+       userData.step === 'data_deletion' ||
+       userData.step === 'print')
+     return {
+     isValid: true
   }
   const messages = [];
   let validOrg = isValidOrg(userData.org);

src/entry/Entry.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <div class="container">
-    {#if !$userData.org && !$userData.entry}
+    {#if ( !$userData.org && !$userData.entry ) }
       <StepOne></StepOne>
     {/if}
 

src/entry/StepOne.svelte

@@ -14,15 +14,15 @@
 <div class="step-one">
   <section>
     <h2>{texts.steps.one.org}</h2>
-    <OrgSelection bind:org={$userData.org} on:input="{() => {$userData.entry = 'org'}}"></OrgSelection>
+    <OrgSelection bind:org={$userData.org} on:input="{() => {$userData.entry = 'org'; $userData.desire = 'data_info_request'}}"></OrgSelection>
   </section>
 
   <div class="separator"><span>oder</span></div>
 
   <section>
     <h2>{texts.steps.one.type}</h2>
     {#each types as type}
-      <button class="one" on:click="{() => {$userData.entry = 'type'; $userData.types = [type.handle]}}">{type.label}</button>
+      <button class="one" on:click="{() => {$userData.entry = 'type'; $userData.types = [type.handle]; $userData.desire = 'data_info_request'}}">{type.label}</button>
     {/each}
   </section>
 
@@ -31,7 +31,7 @@
   <section>
     <h2>{texts.steps.one.event}</h2>
     {#each events as event}
-      <button class="one" on:click="{() => {$userData.entry = 'event'; $userData.event = event.handle}}">{event.label}</button>
+      <button class="one" on:click="{() => {$userData.entry = 'event'; $userData.event = event.handle; $userData.desire = 'data_info_request'} }">{event.label}</button>
     {/each}
   </section>
 

src/icons/FolderIcon.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let width = 20;
+  export let height = 20;
+</script>
+<!--
+  more parameters ...
+  export let stroke = '#888';
+  export let strokeWidth = 6;
+<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}" viewBox="0 0 96 96"><path d="m56.693 57.893 6.4051 6.4051m-10.866-36.762-0.4639-0.4642c-1.2796-1.2796-1.9196-1.9195-2.6661-2.377-0.66219-0.40567-1.3839-0.70462-2.1386-0.88585-0.8516-0.20443-1.7565-0.20443-3.5661-0.20443h-12.854c-4.1437 0-6.2155 0-7.7982 0.80643-1.3922 0.70932-2.524 1.8412-3.2334 3.2334-0.80643 1.5827-0.80643 3.6545-0.80643 7.7982v28.115c0 4.1437 0 6.2157 0.80643 7.7983 0.70932 1.3921 1.8412 2.5241 3.2334 3.2332 1.5827 0.80646 3.6545 0.80646 7.7982 0.80646h42.913c4.1437 0 6.2157 0 7.7983-0.80646 1.3921-0.70917 2.5241-1.8412 3.2332-3.2332 0.80646-1.5826 0.80646-3.6546 0.80646-7.7983v-20.716c0-4.1437 0-6.2155-0.80646-7.7982-0.70917-1.3922-1.8412-2.524-3.2332-3.2334-1.5826-0.80643-3.6546-0.80643-7.7983-0.80643h-12.853c-1.8097 0-2.7146 0-3.5662-0.20443-0.75467-0.18123-1.4764-0.48018-2.1386-0.88585-0.74653-0.45754-1.3865-1.0973-2.6661-2.377zm7.1668 23.814c0 5.1077-4.1407 9.2484-9.2484 9.2484-5.1077 0-9.2484-4.1407-9.2484-9.2484 0-5.1077 4.1407-9.2484 9.2484-9.2484 5.1077 0 9.2484 4.1407 9.2484 9.2484z" stroke="{stroke}" stroke-linecap="round" stroke-linejoin="round" stroke-width={strokeWidth}/></svg>
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}" viewBox="0 0 96 96"><path d="m56.693 57.893 6.4051 6.4051m-10.866-36.762-0.4639-0.4642c-1.2796-1.2796-1.9196-1.9195-2.6661-2.377-0.66219-0.40567-1.3839-0.70462-2.1386-0.88585-0.8516-0.20443-1.7565-0.20443-3.5661-0.20443h-12.854c-4.1437 0-6.2155 0-7.7982 0.80643-1.3922 0.70932-2.524 1.8412-3.2334 3.2334-0.80643 1.5827-0.80643 3.6545-0.80643 7.7982v28.115c0 4.1437 0 6.2157 0.80643 7.7983 0.70932 1.3921 1.8412 2.5241 3.2334 3.2332 1.5827 0.80646 3.6545 0.80646 7.7982 0.80646h42.913c4.1437 0 6.2157 0 7.7983-0.80646 1.3921-0.70917 2.5241-1.8412 3.2332-3.2332 0.80646-1.5826 0.80646-3.6546 0.80646-7.7983v-20.716c0-4.1437 0-6.2155-0.80646-7.7982-0.70917-1.3922-1.8412-2.524-3.2332-3.2334-1.5826-0.80643-3.6546-0.80643-7.7983-0.80643h-12.853c-1.8097 0-2.7146 0-3.5662-0.20443-0.75467-0.18123-1.4764-0.48018-2.1386-0.88585-0.74653-0.45754-1.3865-1.0973-2.6661-2.377zm7.1668 23.814c0 5.1077-4.1407 9.2484-9.2484 9.2484-5.1077 0-9.2484-4.1407-9.2484-9.2484 0-5.1077 4.1407-9.2484 9.2484-9.2484 5.1077 0 9.2484 4.1407 9.2484 9.2484z"/></svg>
+
+<style>
+  path {
+    fill: none;
+    color: currentColor;
+  stroke: currentColor;
+      stroke-width: 5;
+  }
+</style>