Merge pull request #1030 from Aam-Digital/master

Release 2.58.1

angular.json

@@ -30,7 +30,6 @@
               "src/manifest.json"
             ],
             "styles": [
-              "node_modules/font-awesome/scss/font-awesome.scss",
               "src/ndb-theme.scss",
               "src/styles.scss",
               "node_modules/flag-icon-css/css/flag-icon.min.css"

build/Dockerfile

@@ -20,6 +20,9 @@ RUN sed -i "s/appVersion: \".*\"/appVersion: \"$APP_VERSION\"/g" src/environment
 
 RUN npm run build-localized
 
+# Merge the service workers for the different locales
+RUN node build/merge-service-workers.js
+
 # When set to true, tests are run and coverage will be uploaded to CodeClimate
 ARG UPLOAD_COVERAGE=false
 RUN if [ "$UPLOAD_COVERAGE" = true ] ; then \
@@ -55,7 +58,7 @@ ARG SENTRY_ORG
 ARG SENTRY_PROJECT
 RUN if [ "$SENTRY_AUTH_TOKEN" != "" ] ; then \
     npm install -g @sentry/cli &&\
-    sentry-cli --auth-token=$SENTRY_AUTH_TOKEN releases --org=$SENTRY_ORG --project=$SENTRY_PROJECT files $APP_VERSION upload-sourcemaps dist  && \
+    sentry-cli --auth-token=$SENTRY_AUTH_TOKEN releases --org=$SENTRY_ORG --project=$SENTRY_PROJECT files ndb-core@$APP_VERSION upload-sourcemaps dist  && \
     rm dist/*/*.map ; fi
 
 ### PROD image

build/merge-service-workers.js

@@ -0,0 +1,53 @@
+const fs = require("fs");
+
+const distFolder = "dist";
+
+function getNgswConfig(locale) {
+  const swConfig = fs.readFileSync(`${distFolder}/${locale}/ngsw.json`);
+  return JSON.parse(swConfig);
+}
+
+const locales = fs
+  .readdirSync(distFolder)
+  .filter((locale) => fs.lstatSync(`${distFolder}/${locale}`).isDirectory());
+
+// Merge the ngsw.json files
+const firstLocale = locales.pop();
+const combined = getNgswConfig(firstLocale);
+locales.forEach((locale) => {
+  const additional = getNgswConfig(locale);
+
+  // Merge data and asset groups
+  const toBeMergedGroups = [
+    { groupType: "dataGroups", property: "patterns" },
+    { groupType: "assetGroups", property: "urls" },
+  ];
+  toBeMergedGroups.forEach(({ groupType, property }) => {
+    additional[groupType].forEach((group) => {
+      combined[groupType]
+        .find((g) => g.name === group.name)
+        [property].push(...group[property]);
+    });
+  });
+
+  // combine hash tables
+  Object.assign(combined.hashTable, additional.hashTable);
+  fs.unlinkSync(`${distFolder}/${locale}/ngsw.json`);
+  fs.unlinkSync(`${distFolder}/${locale}/ngsw-worker.js`);
+});
+
+combined.index = "/index.html";
+
+fs.writeFileSync(`${distFolder}/ngsw.json`, JSON.stringify(combined));
+fs.unlinkSync(`${distFolder}/${firstLocale}/ngsw.json`);
+
+// Adjust service worker to allow changing language offline
+const swFile = fs
+  .readFileSync(`${distFolder}/${firstLocale}/ngsw-worker.js`)
+  .toString();
+const patchedSw = swFile.replace(
+  "return this.handleFetch(this.adapter.newRequest(this.indexUrl), context);",
+  "return this.handleFetch(this.adapter.newRequest('/' + this.adapter.normalizeUrl(req.url).split('/')[1] + '/index.html'), context);"
+);
+fs.writeFileSync(`${distFolder}/ngsw-worker.js`, patchedSw);
+fs.unlinkSync(`${distFolder}/${firstLocale}/ngsw-worker.js`);

doc/compodoc_sources/tutorial/_index.md

@@ -8,7 +8,7 @@ We will focus on things specific to our project.
 But there will be links to other tutorials and resources about the basics of the technologies we use.
 
 If anything is unclear or missing, _please_ open an issue on GitHub.
-This not only allows us to answer your question but also helps us to improve this document.
+Your questions and feedback are very welcome!
 
 -----
 Let's get started with

doc/compodoc_sources/tutorial/setting-up-the-project.md

@@ -1,9 +1,17 @@
 # Tutorial: Setting up the Project
-> TODO: the steps from the README should be presented here more step-by-step and beginner friendly
+In order to work on our project you should first set up a local development environment.
+That way you can run the app on your own computer and immediately see and test changes you make.
 
-for now, please refer to the [README](https://github.com/Aam-Digital/ndb-core/blob/master/README.md)
+## Setup
+We have documented the steps to clone and set up the project in our [README in the "Development" section](https://github.com/Aam-Digital/ndb-core#development)
 
-Did you manage to run the project locally and visit it at http://localhost:4200/ ? 
+
+## Run
+Did you follow the steps in the README and have been able to successfully execute `npm start`?
+
+Visit your local app in a browser at http://localhost:4200/
+
+If you can see and use Aam Digital there, you are good to go. Great!
 
 -----
 Next up:

doc/compodoc_sources/tutorial/technologies.md

@@ -1,31 +1,67 @@
 # Tutorial: An Overview of our Technologies and Framework
-> TODO: this needs to be translated and written in a nice, more elaborate way
 
-Technologien, die wir verwenden:
-- Angular (HTML, CSS, TypeScript)  - falls du es noch nicht kennst, ist das der beste Startpunkt für dich: Getting Started with Angular: Your First App (eventuell auch bisschen was über HTML und TypeScript lesen)
-- Angular Material
-- Git (Github) (Unser Repository: https://github.com/Aam-Digital/ndb-core)
+![](../../images/tech-stack.png)
+
+Aam Digital is based on the following technologies:
+- [Angular](https://angular.io/),
+including the [TypeScript](https://www.typescriptlang.org/) programming language (a superset of JavaScript)
+as well as HTML and CSS
+- [Angular Material](https://material.angular.io/) providing reusable UI components
 - PouchDB (CouchDB noSQL Database)
 
+In addition, we use Docker and nginx to deploy and run the application.
+
+If you are not familiar with (some of) our tools and technologies yet,
+here are some useful resources to get started.
+You will need to have basic knowledge of these before you can properly start contributing to our project.
+
+## Git (and GitHub)
+Git helps us track all changes to our project, allows us to revert things and is the basis for our code review process.
+
+Haven't worked with _git_ source control yet?
+Work through a basic tutorial like this
+[Intro to Git and GitHub for Beginners (Tutorial)](https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners). 
+
+You can also check out the [official git book](https://git-scm.com/book/de/v2) (chapter 1-3 are most relevant).
+
+## TypeScript
+TypeScript is our primary programming language.
+If you are familiar with JavaScript, learning TypeScript shouldn't be too hard for you.
+All JavaScript code is also valid TypeScript.
+TypeScript just adds some things on top to make development easier and less error-prone.
+
+_(If you don't know JavaScript yet, you can find an endless amount of online courses to learn it - go and do some of these before continuing here!)_
+
+If you have some experience with another "statically typed" language like Java, the additional concepts of TypeScript should feel familiar.
+A quick comparison like this may be enough to get you a basic understanding: [TypeScript vs. JavaScript](https://medium.com/geekculture/typescript-vs-javascript-e5af7ab5a331)
+
+## Angular
+Angular is a powerful web development framework and the basis for our project.
+It provides good structure to build complex enterprise-level web applications
+with its concepts of components, services and modules.
+
+It does take a while to work through Angular's core concepts.
+But every minute you invest into understanding these basics now will make your development easier and cleaner forever after.
+
+Follow the introductory material and tutorial: [Angular - Getting started](https://angular.io/start)
 
-Wie du dich schnell einarbeiten kannst:
+You will need a solid understanding of the Angular basics of components, services, dependency injection.
+The more advanced topics beyond that are things you can also learn while already working on our project.
+We'll be happy to guide you!
 
-- Angular: Falls du Angular (TypeScript Framework von Google) noch nicht kennst, ist das der richtige Einstiegspunkt für dich:
-    -  If you are completely new to Angular, maybe make yourself familiar with the basic structure and approach first:
-        [Angular - Getting started](https://angular.io/guide/quickstart)
-    - Angular Heroes Tutorial: [Getting Started with Angular: Your First App](https://angular.io/start)
-    - Per Buch (in der Bib erhältlich): 
-        - Angular : Grundlagen, fortgeschrittene Techniken und Best Practices mit TypeScript – 
-        - Gregor Woiwode, Ferdinand Malcher, Danny Koppenhagen, Johannes Hoppe
+## Angular Material
+We are using some standard UI components following the Material Design as building blocks.
 
-- Angular Material (Angular Plugin fürs Styling):
-    - Einfach ein bisschen durchstöbern: https://material.angular.io/components/categories
+Browse through the list of components to get an idea what is already available
+(so that we don't reinvent the wheel):
+https://material.angular.io/components/categories
 
-- Git (Versionskontrolle):
-    - Das offizielle Git Buch (Kapitel 1&2 auf Deutsch und Kapitel 1-3 auf Englisch relevant): https://git-scm.com/book/de/v2
+## PouchDB
+We have built an abstraction layer of the database access.
+Underneath our app is using PouchDB but you do not need any knowledge about this for most work on our project.
 
-- PouchDB (nicht sehr relevant, aber wen es interessiert)
-    - https://pouchdb.com/learn.html
+Curious or want to work on our database services?
+Start here: https://pouchdb.com/learn.html
 
 -----
 Next up:

doc/compodoc_sources/tutorial/using-aam-digital.md

@@ -1,10 +1,21 @@
 # Tutorial: Using Aam Digital (as a user)
-> TODO: this should maybe include a specific user scenario that also gives a little feeling of achievement
-> (maybe adding a child, recording attendance for it and then seeing its absences on the dashboard?)
+Before changing things or implementing new features, you should get a basic idea of how Aam Digital currently works for our users.
+Feel free to reach out to someone from our team, if you haven't already. We'll be happy to give you a demo and talk about the needs and backgrounds of our users.
 
-To understand the different features and sections a user has in the app,
-navigate to the "Help" section in your local instance of _Aam Digital_
-and read through the short summary of features. 
+To get a true feeling for the app, work through the following short usage scenarios yourself:
+
+## Basic participants & notes
+1. Register a new participant in the system. (Hint: Go through the "Children" list)
+2. Add a note about your new participant. (Hint: Either expand the "Notes & Reports" section or use the blue "primary action" button on the bottom right)
+3. Find your new note in the project-wide list of notes. (Hint: Navigate to the "Notes" list using the main menu on the left)
+
+## Recording attendance
+1. Add your new participant to a "Recurring Activity". (Hint: open the details of one activity from the "Recurring Activities" list and add the name in the "Participants" section)
+2. Record today's attendance for that activity. (Hint: Use "Record Attendance" and find the activity you have just added your participant to)
+3. See your participant's attendance record. (Hint: Open the details view for your participant by clicking on the relevant row in the "Children" list and then expand the "Attendance" section)
+
+## Play around
+Try some of the other features and get a feeling for Aam Digital.
 
 -----
 Next up:

ngsw-config.json

@@ -7,8 +7,9 @@
       "files": [
         "/favicon.ico",
         "/index.html",
-        "/*.css",
         "/*.js",
+        "!/*-es5.*.js",
+        "/*.css",
         "/*.woff2",
         "/*.tff"
       ]
@@ -19,12 +20,14 @@
     "updateMode": "prefetch",
     "resources": {
       "files": [
-        "/assets/*/**",
+        "/*.svg",
         "/assets/changelog.json",
         "/assets/child.png",
         "/assets/config.default.json",
         "/assets/How_To.md",
-        "assets/locale/How_To.de.md"
+        "/assets/locale/How_To.de.md",
+        "/assets/*/**",
+        "/*-es5.*.js"
       ]
     }
   }],