Merge develop branch (code of May and June 2020) into master

.gitignore

@@ -22,3 +22,5 @@ yarn-error.log*
 
 #data
 form.json
+visualisation.json
+mail.json

README.md

@@ -1,24 +1,109 @@
 # Angehörigendialog
 
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+This project started as an analogue questionnaire which was designed to help social workers from Volkshilfe to conduct professional conversations with people who take care of a family member with dementia at home. Our task was to digitise this questionnaire and to redesign the visualisations of the evaluation.
+
+## Project structure
+
+### data
+This folder contains the data which is used to configure the questionnaire and the visualisations.
+
+The sequence of the sections is defined in [`_inhaltsverzeichnis.yml`](data/_inhaltsverzeichnis.yml). Each section corresponds to a `.yml`-file which contains information about the section and its fields.
+
+The file [`visualisation.yml`](data/visualisation.yml) defines properties for the visualisations.
+
+[`mail.yml`](data/mail.yml) contains the text for the prefilled mail.
+
+[`_converter.js`](data/_converter.js) is the script which compiles the data and saves it to `src/data`.
+
+### public
+Contains static files such as favicons or the [`index.html`](public/index.html).
+
+
+### src
+
+- [`assets`](src/assets): Assets are resources passed through Webpack
+  - [`fonts`](src/assets/fonts): Open Sans Regular (400) + Bold (700)
+  - [`icons`](src/assets/icons): miscellaneous vector graphics for form / visualisations
+  - [`images`](src/assets/images): images in the assets folder are passed through Webpack as opposed to the `public` folder
+  - [`styles`](src/assets/styles):
+    - [`_variables.scss`](src/assets/styles/_variables.scss) defines SCSS variables which are available in the `style`-tags of the Single File Components. Includes predefined colors and media queries.
+    - The styles of [`base.scss`](src/assets/styles/base.scss) are available on all views.
+    - [`_grid.scss`](src/assets/styles/_grid.scss) generates grid helper classes which are imported to the `base.scss`
+- [`components`](src/components): Vue components used by the `views`
+  - [`AnField.vue`](src/components/AnField.vue): Wrapper component for the `fields`-components
+  - [`fields`](src/components/fields): Components which represent the field types of the questionnaire [data](#data)
+  - [`note`](src/components/note): Notepad and notepad open button
+  - [`ui`](src/components/ui): UI elements
+  - [`visualisations`](src/components/visualisations): Components of the visualisations
+- [`data`](src/data): receives the compiled data files from the folder [data](#data) in the build process
+- [`helpers`](src/helpers): contains helper functions which are used by various components
+- [`mixins`](src/mixins): contains the files `field.js` and `visualisation.js` which defines shared logic for the `fields` and the `visualisations` respectively
+- [`router`](src/router/index.js): defines the routes which are supplied to `vue-router`
+- [`store`](src/store/index.js): configures the **Vuex** store which holds and manages the user inputs and shared variables
+- [`views`](src/views): views for the routes
+- [`App.vue`](src/App.vue) and [`main.js`](src/main.js): are the entry point for the application
+- [`registerServiceWorker.js`](src/registerServiceWorker.js): registers service worker for offline usage, comes from vue-cli
+
+
+### Different files
+
+- [`.editorconfig`](.editorconfig): defines settings for code editors — [official docs](https://editorconfig.org/)
+- [`jsconfig.json`](jsconfig.json): editors might need this file for code navigation (looking at you VSCode)
+- [`vue.config.js`](vue.config.js): configuration of the [Vue Cli Tools](https://cli.vuejs.org/config/#vue-config-js)
+  - webpack: svgs can be imported like vue components using the `?inline` suffix
+  - css: source maps generation for css gets enabled and `_variables.scss` will be prepended on each component
+  - pwa: as the web app has offline capabilities, name, icon and colors need to be configured here — [official docs](https://cli.vuejs.org/core-plugins/pwa.html)
+- [`package.json`](package.json):
+  - scripts: See [Development lifecycle](#development-lifecycle)
+  - eslintConfig (+ prettier) — [official docs](https://eslint.org/docs/rules/)
+    - components inside of vue template tags have to be **PascalCase**
+    - props have to be **kebab-case**
+    - objects don't have a trailing comma after the last value
+    - single quotes get replaced with double quotes when possible
+    - and much more ... (component order, max line length)
+  - browserlist: only the last two versions for browsers which have a market share higher then 1% are supported — [list of browsers](https://browserl.ist/?q=last+2+versions+and+%3E+0.2%25%2C+Firefox+ESR%2C+not+IE+%3E+0%2C+not+Edge+%3E+0%2C+not+OperaMini+all%2C+not+UCAndroid+%3E+0)
+
+
+## Development lifecycle
+
+- install the dependencies
+  ```sh
+  npm install
+  ```
+
+- starts the project in development mode
+  ```sh
+  npm run serve
+  ```
+
+- creates production build in `dist` folder for deployment
+  ```sh
+  npm run build
+  ```
+
+- calls data converter → see [data](#data)
+  ```sh
+  npm run data
+  ```
+
+- calls data converter before each build to ensure correct data
+  ```sh
+  npm run prebuild
+  npm run preserve
+  ```
+
+- shows / fixes eslint error → see [different files](#different-files)
+  ```sh
+  npm run lint
+  npm run lintfix
+  ```
+
+### Continous Deploment
+
+When the `develop` branch updates, a new build will be automatically generated and deployed from Netlify.
+
+## Demo
+
+For previewing the capabilities of the app visit the route `/demo`. It will prefill the questionnaire. This can be also used for faster development to skip the step of filling out all the fields.
+
+Demo data can be found in [`src/demo.json`](src/demo.json) and is simply a 1:1 copy from LocalStorage.

STRANGE_PROBLEMS.md

@@ -0,0 +1,30 @@
+# Strange Problems
+
+These problems won't be fixed, as the only occure on one device or are not really reproducable.
+
+## Watering Can Color
+
+This bug is reproducable in the current Version (83.0.4103.97) of Google Chrome on desktop:
+1. Fill out section six in the questionare, so you can see the watering can on the visualisation-handout
+
+2. Press the **Handout als PDF speichern**-Button
+
+3. Print the visualisation-handout directly with a printer (don't select the option to print a PDF-File in the Browser-print dialogue -> instead select a printer and print it)
+
+4. See the problem: the water-wave (CSS-Background-image) in the watering can has a slightly different color than the blue background-items in the watering can.
+
+### Findings
+
+- This problem seems to appear not on all printers (but it appears for example on "Dell Color MFP H625cdw").
+
+- A solution could be that the [wave](src/assets/icons/welle.svg) is not implemented as [background-image](src/components/visualisations/AnFlower.vue#L304) but instead and directly embedded as an svg.
+
+> Watch out: this bug does not appear when the handout is exported as a PDF-File and then printed afterwards, it only happens when printing directly.
+
+## E-Mail Export New Line
+
+When an email is sent over the **E-Mail Senden**-Button on the Visualisation page, new lines won't get shown in the GMail Android App.
+
+### Findings
+
+It can be fixed for GMail Android by using the `<br>` html tag istead of the `\n` newline char, but this breaks all other email clients on both mobile and desktop.

data/_converter.js

@@ -1,5 +1,6 @@
-const YAML = require('yaml');
 const fs = require('fs');
+const sanitizeHtml = require('sanitize-html');
+const YAML = require('yaml');
 
 const contentYaml = fs.readFileSync('./data/_inhaltsverzeichnis.yml', 'utf8');
 const content = YAML.parse(contentYaml);
@@ -11,4 +12,16 @@ for (const section of content) {
   form[section] = YAML.parse(sectionYaml);
 }
 
-fs.writeFileSync('./src/data/form.json', JSON.stringify(form), 'utf8');
+const contentVis = fs.readFileSync('./data/visualisation.yml', 'utf8');
+const vis = YAML.parse(contentVis);
+
+const contentMail = fs.readFileSync('./data/mail.yml', 'utf8');
+const mail = YAML.parse(contentMail);
+
+const jsonFileSanitized = sanitizeHtml(JSON.stringify(form));
+const jsonFileVisSanitized = sanitizeHtml(JSON.stringify(vis));
+const jsonFileMailSanitized = sanitizeHtml(JSON.stringify(mail));
+
+fs.writeFileSync('./src/data/form.json', jsonFileSanitized, 'utf8');
+fs.writeFileSync('./src/data/visualisation.json', jsonFileVisSanitized, 'utf8');
+fs.writeFileSync('./src/data/mail.json', jsonFileMailSanitized, 'utf8');

data/_inhaltsverzeichnis.yml

@@ -1,9 +1,10 @@
 - demenzerkrankte_person
 - betreuende_person
-- praktische_betreeungsaufgaben
+- praktische_betreungsaufgaben
 - verhaltensveraenderungen
 - gesundheit
 - ressourcen_belastungen
 - finanzen_wohnsituation
 - zukunft
 - abrundung
+- ende

data/abrundung.yml

@@ -4,4 +4,3 @@ fields:
   hoffnung:
     label: Haben Sie noch Anmerkungen zu unserem Gespräch oder gibt es noch Dinge, die Sie fragen möchten?
     type: text
-    required: true

data/betreuende_person.yml

@@ -1,10 +1,10 @@
-title: Angaben zur betreuende Person
+title: Angaben zur betreuenden Person
+titleShort: Betreuende Person
 fields:
 
   alter:
     label: Wie alt sind Sie?
     type: number
-    required: true
 
   beruf:
     label: Sind Sie berufstätig?
@@ -22,19 +22,19 @@ fields:
     subfields:
       sorgepflichtendetail:
         label: Welche Betreuungs- oder Sorgepflichten haben Sie?
-        type: text
+        type: list
         when:
           sorgepflichten: true
 
-  unterstuetzungsangebote:
+  unterstuetzungsangebot:
     label: Nehmen Sie derzeit Unterstützungsangebote für pflegende Angehörige in Anspruch?
     type: toggle
     subfields:
-      unterstuetzungsangebotedetails:
+      unterstuetzungsangebotdetail:
         label: Welche Unterstützungsangebote nehmen Sie in Anspruch (etwa Angehörigenstammtisch, Gespräche mit professionellen HelferInnen)
-        type: text
+        type: list
         when:
-          unterstuetzungsangebote: true
+          unterstuetzungsangebot: true
 
   demenz:
     label: Haben Sie bereits Vorwissen über die Erkrankung Demenz und ihren Verlauf?
@@ -49,7 +49,6 @@ fields:
   beratungsgespraech:
     label: Welche Erwartungen an das Beratungsgespräch haben Sie für sich selbst und für Ihre/n Angehörige/n?
     type: text
-    required: true
 
   situationseinschaetzung:
     label: Offene Fragen zur Situationseinschätzung
@@ -59,31 +58,26 @@ fields:
   pflege:
     label: Wie ist es dazu gekommen, dass Sie selbst für Ihre/n Angehörige/n sorgen und wie lange machen Sie das schon?
     type: text
-    required: true
 
   verantwortung:
     label: Wer fühlt sich sonst noch verantwortlich für Ihre/n Angehörige/n?
     type: text
-    required: true
 
   professionelleHilfe:
     label: Wird Ihr/e Angehörige/r auch von professionellen HelferInnen unterstützt, beispielsweise Hauskrankenhilfe, Heimhilfe, 24h-Betreuung oder in Tageszentren?
     type: text
-    required: true
 
   zufriedenheit:
-    label: Wie zufrieden sind sie persönlich mit der derzeitigen Unterstützung?
+    label: Wie zufrieden sind Sie persönlich mit der derzeitigen Unterstützung?
     type: range
     step: 1
     min:
-      - 1
-      - sehr unzufrieden
+      value: 1
+      label: sehr unzufrieden
     max:
-      - 10
-      - sehr zufrieden
-    required: true
+      value: 10
+      label: sehr zufrieden
     subfields:
       zufriedenheitdetail:
         label: Was sind die Gründe Ihrer Einschätzung?
         type: text
-        required: true

data/demenzerkrankte_person.yml

@@ -1,20 +1,26 @@
 title: Angaben zur demenzerkrankten Person
+titleShort: Demenzerkrankte Person
 fields:
 
+  angabenpersonhinweis:
+    label: Zu Beginn des Gesprächs bitte ich Sie um kurze Informationen zu der
+          demenzerkrankten Person, die Sie pflegen und/oder betreuen und zu
+          Ihnen selbst, um einen ersten Überblick über Ihre individuelle Situation
+          zu bekommen. Alle Ihre Angaben werden vertraulich behandelt.
+    type: hint
+    size: medium
+
   verhaeltnis:
     label: In welchem verwandtschaftlichen Verhältnis stehen Sie zur demenzerkrankten Person?
     type: text
-    required: true
 
   alter:
     label: Wie alt ist er/sie?
     type: number
-    required: true
 
   pflegebedarf:
     label: Seit wann hat er/sie verstärkten Unterstützungs- und/oder Pflegebedarf?
     type: text
-    required: true
 
   diagnose:
     label: Gibt es eine ärztliche Demenzdiagnose?
@@ -34,11 +40,13 @@ fields:
         label: Welche Stufe Pflegegeld erhält er/sie?
         type: radio
         options:
-          - 1
-          - 2
-          - 3
-          - 4
-          - 5
+          1: 1
+          2: 2
+          3: 3
+          4: 4
+          5: 5
+          6: 6
+          7: 7
         when:
           pflegegeld: true
 
@@ -52,6 +60,6 @@ fields:
     subfields:
       unterstuetzungsangebotdetail:
         label: Welche Unterstüztungsangebote nimmt er/sie in Anspruch, z. B. Tageszentrum, Gedächtnistraining, andere Betreuungen?
-        type: text
+        type: list
         when:
-          diagnose: true
+          unterstuetzungsangebot: true

data/ende.yml

@@ -0,0 +1,12 @@
+title: Angaben zum Zweitgespräch
+titleShort: Ende
+hideExport: true
+fields:
+
+  datum:
+    label: Datum für Zweitgespräch wählen
+    type: date
+
+  uhrzeit:
+    label: Uhrzeit für Zweitgespräch wählen
+    type: time

data/finanzen_wohnsituation.yml

@@ -4,14 +4,11 @@ fields:
   finanziell:
     label: Führt die Pflege Ihres/Ihrer Angehörigen bei Ihnen zu finanziellen Problemen oder müssen Sie dadurch an anderer Stelle kürzertreten?
     type: text
-    required: true
 
   hohekosten:
     label: Gibt es Dinge, die Ihnen einiges erleichtern würden, auf die Sie aber wegen der hohen Kosten verzichten (z. B. Taxifahrten oder eine Haushaltshilfe)?
     type: text
-    required: true
 
   haus:
     label: Ist das Haus/die Wohnung im Hinblick auf die Pflege Ihres/Ihrer Angehörigen praktisch eingerichtet? Was könnte Ihrer Meinung nach noch verbessert werden?
     type: text
-    required: true