# Editierbare Faktenbox

Diese WebApp dient der Erstellung von Faktenboxen inklusive der Visualisierung von *Icon Arrays*.  
Aus den eingegebenen Daten wird durch den Einsatz eines *Web Workers* (in nahezu Echtzeit) mit Hilfe von [pdfkit] ein PDF generiert, das unterhalb der Forularelemente in einem `iframe` dargestellt wird. Als zusätzliche Exportoption wird JSON angeboten, um Eingaben sichern zu könnnen. Exportierte Daten können über die Inport-Funktion wieder geladen und weiter bearbeitet werden.

## Entwicklungsumgebung

Diese WebApp wurde auf Basis von [aurelia] entwickelt. Für die Weiterentwicklung des Projekts werden [`nodejs`][nodejs] und `npm` benötigt. Die Abhängigkeiten werden wie üblich per `npm install` installiert.

Für die Entwicklung steht der *Development Build Prozess* zur Verfügung, in dem Javascript Dateien transpiliert, und `css` aus den `scss` Dateien generiert werden. Zudem wird ein Entwicklungsserver gestartet, der bei Änderungen an Quelldateien nach einem erneuten Ausführen des Build Prozesses die Dateien neu lädt. Gestartet wird dieser Prozess mit folgendem Befehl:

    au run --watch

Ein *Production Build* kann folgendermaßen erstellt werden:

    au build --env production

Die so erzeugten Dateien sind unter `scripts` zu finden.

## Verzeichnisstruktur

```
├── README.md
├── assets                          // Javascript Bibliotheken zum Generieren der PDF Dateien
│   ├── blob-stream.js
│   └── pdfkit.js
├── aurelia_project/                // aurelia project configuration
│   └── …
├── examples                        // Beispiel-Dateien, die in die WebApp importiert werden können
│   ├── example.json
│   ├── examples.json
│   ├── examples_new.json
│   ├── psa_blue_orange.json
│   ├── psa_blue_purple.json
│   ├── psa_blue_red.json
│   ├── psa_blue_yellow.json
│   └── selen.json
├── fonts                           // Icon Fonts für HTML Interface
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── index.html                      // HTML Datei der WebApp
├── package.json
├── scripts                         // Build Verzeichnis
│   └── …
└── src                             // Quellcodeverzeichnis
    ├── app.html
    ├── app.js                      // Controller der WebApp
    ├── configuration.js            // Konfiguration der WebApp
    ├── environment.js              // aurelia Environment Konfiguration
    ├── index.js                    // aurelia konfiguration (?)
    ├── main.js                     // Einstieg der WebApp
    ├── number-format.js            // Formattierung von Zahlen
    ├── pdfWorker.js                // Generieren von PDF Dateien
    ├── resources                   // Resourcen für PDF
    │   ├── Calibri\ Bold.ttf
    │   └── Calibri.ttf
    └── scss                        // Stylesheet Verzeichnis
        ├── _custom.scss
        ├── _globals.scss
        ├── partials
        │   ├── _colours.scss       // Definition von Farben
        │   └── _form_elements.scss // Formularelementdefinitionen
        └── styles.scss             // Stylesheet der WebApp
```

## Wie ändere ich Labels und Texte der WebApp? ##

In der Datei `src/configuration.js` sind alle Labels und Texte definiert. Außerdem sind dort die Farben und zugrunde liegenden geometrischen Daten für das Layout der Icon Arrays definiert.

[aurelia]: https://aurelia.io
[nodejs]: https://nodejs.org
[pdfkit]: https://pdfkit.org