Release 3.2

Updated Changelog for 3.2

.github/initial-data-migrations/docker-compose.yml

@@ -1,39 +0,0 @@
-version: "3"
-services:
-    backend:
-        image: openslides-backend
-        ports:
-            - "9002:9002"
-        environment:
-            - DATASTORE_READER_HOST=reader
-            - DATASTORE_READER_PORT=9010
-            - DATASTORE_WRITER_HOST=writer
-            - DATASTORE_WRITER_PORT=9011
-        depends_on:
-            - writer
-            - reader
-    reader:
-        image: openslides-datastore-reader
-        environment:
-            - DATASTORE_ENABLE_DEV_ENVIRONMENT=1
-        depends_on:
-            - postgresql
-        ports:
-            - "9010:9010"
-    writer:
-        image: openslides-datastore-writer
-        environment:
-            - DATASTORE_ENABLE_DEV_ENVIRONMENT=1
-            - MESSAGE_BUS_HOST=redis
-            - MESSAGE_BUS_PORT=6379
-        depends_on:
-            - postgresql
-            - redis
-    postgresql:
-        image: postgres:11
-        environment:
-            - POSTGRES_USER=openslides
-            - POSTGRES_PASSWORD=openslides
-            - POSTGRES_DB=openslides
-    redis:
-        image: redis:alpine

.github/workflows/build_images.yml

@@ -1,90 +0,0 @@
----
-name: Build Docker images for all OpenSlides services
-on: [push, workflow_dispatch]
-
-env:
-  IMAGE_VERSION: 4.0.0-beta
-  TAG_SUFFIX: -$(date +%Y%m%d)-${GITHUB_SHA::7}
-jobs:
-  build:
-    name: Builds Docker images
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        service:
-          - name: openslides-proxy
-            directory: proxy
-
-          - name: openslides-client
-            directory: openslides-client
-
-          - name: openslides-backend
-            directory: openslides-backend
-
-          - name: openslides-datastore-reader
-            directory: openslides-datastore-service
-            args:
-              MODULE: reader
-              PORT: 9010
-
-          - name: openslides-datastore-writer
-            directory: openslides-datastore-service
-            args:
-              MODULE: writer
-              PORT: 9011
-
-          - name: openslides-autoupdate
-            directory: openslides-autoupdate-service
-
-          - name: openslides-auth
-            directory: openslides-auth-service
-
-          - name: openslides-vote
-            directory: openslides-vote-service
-
-          - name: openslides-icc
-            directory: openslides-icc-service
-
-          - name: openslides-media
-            directory: openslides-media-service
-
-          - name: openslides-manage
-            directory: openslides-manage-service
-
-    steps:
-      - name: Check out code
-        uses: actions/checkout@v2
-        with:
-          submodules: true
-
-      - name: Build image
-        working-directory: ${{ matrix.service.directory }}
-        env:
-          DOCKER_BUILDKIT: 1
-        run: |
-          if [ "${{ matrix.service.name }}" = "openslides-client" ]
-          then
-            eval echo ${IMAGE_VERSION}${TAG_SUFFIX} > client/src/assets/version.txt
-          fi
-          if [ "${{ matrix.service.args }}" != "" ]
-          then
-            export BUILD_ARGS="--build-arg MODULE=${{ matrix.service.args.MODULE }}
-                               --build-arg PORT=${{ matrix.service.args.PORT }}"
-          fi
-          docker build . --tag ${{ matrix.service.name }} $BUILD_ARGS
-
-      - name: Log into registry
-        run: echo "${{ secrets.GITHUB_TOKEN }}" |
-          docker login ghcr.io --username ${{ github.actor }} --password-stdin
-
-      - name: Push image
-        run: |
-          IMAGE_ID=ghcr.io/${{ github.repository }}/${{ matrix.service.name }}
-
-          # Change all uppercase to lowercase
-          IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
-
-          docker tag ${{ matrix.service.name }} ${IMAGE_ID}:$(eval echo ${IMAGE_VERSION}${TAG_SUFFIX})
-          docker tag ${{ matrix.service.name }} ${IMAGE_ID}:latest
-          docker push ${IMAGE_ID}:$(eval echo ${IMAGE_VERSION}${TAG_SUFFIX})
-          docker push ${IMAGE_ID}:latest

.github/workflows/test-integration.yml

@@ -1,25 +0,0 @@
----
-name: Run integration tests (cypress)
-on: [push, pull_request]
-
-jobs:
-  run-cypress:
-    name: 'Runs integration tests in cypress'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out code
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-
-      - name: Build and run OS4 Dev
-        run: make run-dev ARGS="-d"
-
-      - name: Run integration tests (cypress)
-        uses: cypress-io/github-action@v2
-        with:
-          working-directory: integration
-          wait-on: 'https://localhost:8000'
-          wait-on-timeout: 300
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0

.gitignore

@@ -1,49 +1,91 @@
 # General
+*.pyc
 *.swp
 *.swo
 *.log
 *~
+
+# Virtual Environment
+.virtualenv*/*
+.venv/*
+
+# Javascript tools and libraries
+node_modules/*
+bower_components/*
+
+# OS4-Submodules
+/openslides-*
+
+# OS3+
+/server/
+
+# Local user data (settings, database, media, search index, static files)
+personal_data/*
+openslides/static/*
+collected-static/*
+
+# Package building/IDE
+docs/_build/*
+*.egg-info
+build/*
+dist/*
+debug/*
 .DS_Store
 .idea
 *.code-workspace
 
-# docs
-docs/modelsvalidator/modelsvalidator
-dev-commands/export.json
-
-# certs
-*.pem
-
-# Deployment
-/docker/docker-compose.yml
-/docker/docker-stack.yml
-/docker/secrets/auth_*_key
-docker/secrets/*.env
-
-# Integration testing
-/integration/results
-/integration/cypress/downloads
-/integration/cypress/screenshots
-/integration/cypress/videos
-/integration/node_modules
-
-# Old OS3 files and folders
+# Unit test and coverage reports
 .coverage
-.mypy_cache
-Compodoc
-__pycache__
-bower_components
-client
-make
+tests/file/*
+tests/db.sqlite3.test
+.pytest_cache
+
+# Plugin development
 openslides_*
-openslides
-personal_data
-tests
-.launch/
-.venv/
-.virtualenv/
-.vscode/
+
+# Mypy cache for typechecking
+.mypy_cache
+
+# OpenSlides 3 Client
+
+# compiled output
+client/dist
+client/tmp
+client/out-tsc
+client/documentation
+
+# dependencies
+client/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+
+# misc
+Compodoc
+Compodocmodules
+client/.sass-cache
+client/connect.lock
+client/coverage
+client/libpeerconnection.log
+client/npm-debug.log
+client/yarn-error.log
+client/testem.log
+client/typings
+client/yarn.lock
+package-lock.json
 client/package-lock.json
-server/
-# OS3+-Submodules
-/autoupdate/
+cypress.json
+*-version.txt
+
+# System Files
+client/.DS_Store
+client/Thumbs.db

.gitmodules

@@ -1,36 +0,0 @@
-[submodule "openslides-datastore-service"]
-	path = openslides-datastore-service
-	url = https://github.com/OpenSlides/openslides-datastore-service.git
-	branch = main
-[submodule "openslides-client"]
-	path = openslides-client
-	url = https://github.com/OpenSlides/openslides-client.git
-	branch = main
-[submodule "openslides-backend"]
-	path = openslides-backend
-	url = https://github.com/OpenSlides/openslides-backend.git
-	branch = main
-[submodule "openslides-autoupdate-service"]
-	path = openslides-autoupdate-service
-	url = https://github.com/OpenSlides/openslides-autoupdate-service.git
-	branch = main
-[submodule "openslides-auth-service"]
-	path = openslides-auth-service
-	url = https://github.com/OpenSlides/openslides-auth-service.git
-	branch = main
-[submodule "openslides-media-service"]
-	path = openslides-media-service
-	url = https://github.com/OpenSlides/openslides-media-service.git
-	branch = main
-[submodule "openslides-manage-service"]
-	path = openslides-manage-service
-	url = https://github.com/OpenSlides/openslides-manage-service.git
-	branch = main
-[submodule "openslides-icc-service"]
-	path = openslides-icc-service
-	url = https://github.com/OpenSlides/openslides-icc-service.git
-	branch = main
-[submodule "openslides-vote-service"]
-	path = openslides-vote-service
-	url = https://github.com/OpenSlides/openslides-vote-service.git
-	branch = main

.travis.yml

@@ -0,0 +1,135 @@
+dist: xenial
+sudo: true
+
+cache:
+  - directories:
+      - $HOME/.cache/pip
+      - client/node_modules
+
+matrix:
+  include:
+    - stage: "Dependencies"
+      name: "Installing dependencies for python"
+      language: python
+      python:
+        - "3.6"
+      cache:
+        pip: true
+      install:
+        - python --version
+        - pip install --upgrade setuptools pip
+        - pip install --upgrade --requirement requirements/development.txt
+        - pip install --upgrade .[big_mode]
+        - pip freeze
+      script: skip
+
+    - name: "Installing npm dependencies"
+      language: node_js
+      node_js: "12.18"
+      cache:
+        - directories:
+            - "client/node_modules"
+      before_install:
+        - npm install -g @angular/cli@~8.0.6
+        - ng --version
+        - cd client
+      install:
+        - npm install
+      script: skip
+    - stage: "Run tests"
+      name: "Client: Testing"
+      language: node_js
+      node_js: "12.18"
+      apt:
+        sources:
+          - google-chrome
+        packages:
+          - google-chrome-stable
+      services:
+        - xvfb
+      install:
+        - cd client
+        - export CHROME_BIN=/usr/bin/google-chrome
+        - export DISPLAY=:99.0
+      script:
+        - npm run test-silently
+
+    - name: "Client: Production Build (ES5)"
+      language: node_js
+      node_js: "12.18"
+      install:
+        - cd client
+        - sed -i '/\"target\"/c\\"target\":\"es5\",' tsconfig.json
+      script:
+        - npm run build
+
+    - name: "Client: Production Build (ES2015)"
+      language: node_js
+      node_js: "12.18"
+      install:
+        - cd client
+        - echo "Firefox ESR" > browserslist
+      script:
+        - npm run build
+
+    - name: "Client: Build"
+      language: node_js
+      node_js: "12.18"
+      script:
+        - cd client
+        - npm run build-debug
+
+    - name: "Server: Tests Python 3.6"
+      language: python
+      python:
+        - "3.6"
+      script:
+        - mypy openslides/ tests/
+        - pytest --cov --cov-fail-under=75
+
+    - name: "Server: Tests Python 3.7"
+      language: python
+      python:
+        - "3.7"
+      script:
+        - flake8 openslides tests
+        - isort --check-only --diff --recursive openslides tests
+        - black --check --diff --target-version py36 openslides tests
+        - mypy openslides/ tests/
+        - pytest --cov --cov-fail-under=75
+
+    - name: "Server: Tests Python 3.8"
+      language: python
+      python:
+        - "3.8"
+      script:
+        - flake8 openslides tests
+        - isort --check-only --diff --recursive openslides tests
+        - black --check --diff --target-version py36 openslides tests
+        - mypy openslides/ tests/
+        - pytest --cov --cov-fail-under=75
+
+    - name: "Client: Linting"
+      language: node_js
+      node_js: "12.18"
+      script:
+        - cd client
+        - npm run lint-check
+
+    - name: "Client: Code Formatting Check"
+      language: node_js
+      node_js: "12.18"
+      script:
+        - cd client
+        - npm run prettify-check
+
+    - name: "Server: Tests Startup Routine Python 3.7"
+      language: python
+      python:
+        - "3.7"
+      script:
+        - set -e
+        - python manage.py createsettings
+        - python manage.py migrate
+        - python manage.py runserver --noreload & (sleep 15 && kill $(ps aux | grep 'manage.py runserver' | head -n -1 | awk '{print $2}'))
+        - set +e

AUTHORS

@@ -30,10 +30,4 @@ Authors of OpenSlides in chronological order of first contribution:
     Jochen Saalfeld <jochen.saalfeld@intevation.de>
     Fadi Abbud <fmfn13@hotmail.com>
     Gabriel Meyer <meyergabriel@live.de>
-    Gernot Schulz <gernot@intevation.de>
     Joshua Sangmeister <joshua.sangmeister@gmail.com>
-    Ralf Peschke <rpeschke@peschke-it.de>
-    Ludwig Reiter <ludwig.reiter@intevation.de>
-    Adrian Richter <adrian@intevation.de>
-    Camille Akmut
-    Johannes Rolf <johannes.rolf@rwth-aachen.de>

CHANGELOG.md

@@ -1,964 +0,0 @@
-# CHANGELOG of OpenSlides
-
-https://openslides.com
-
-
-## Version 3.1 (2019-12-13)
-
-[Milestone](https://github.com/OpenSlides/OpenSlides/milestones/3.0)
-
-**General:**
-- Improved loading time of OpenSlides [#5061, #5087, #5110, #5146 - Breaks IE11].
-- Improved Websocket reconnection - works now more reliable [#5060].
-- Improved performance by replacing deprecated encode and decode library with faster manual approaches [#5085, #5092].
-- Improved mobile views for small devices [#5106].
-- Improved virtual scrolling behavior of tables: remember last scroll position [#5156].
-- New SingleSignOn login method via SAML [#5000].
-- New inline editing for start page, legal notice and privacy policy [#5086].
-- Reordered settings in subpages for better overview [#4878, #5083, #5096].
-- Added html meta noindex tag to prevent search engines finding instances of OpenSlides [#5061].
-- Added server log entries for usage of notify feature [#5066].
-- Added server-side HTML validation for personal notes (motions) and about me field (users) [#5121].
-- Fixed an issue where projector button in lists was always not indicating the projected element [#5055].
-- Fixed issues where search-filter, property-filter and property-sort in list views does not work correctly [#5065].
-- Fixed an issues where list view entries using virtual scrolling become invisible [#5072].
-- Fixed an error where loading spinner would not disappear while offline mode [#5151].
-- Various cleanups and improvements to usability, performance and translation.
-
-**Agenda:**
-- New config option to show motion submitters as subtitle in agenda list [#5002, #5094].
-- New view to sort sepakers of a list - preventing unwanted changes esp. using mobile devices [#5069].
-- New button to readd the last speaker to the top of the list [#5069, #5067].
-- New agenda list filter 'item type' (topic, motion, motion block, election) [#5084].
-- Changed window title for current list of speakers [#5037].
-- Added motion title in agenda list [#5063].
-
-**Motions:**
-- New option to export personal notes [#5075].
-- New amendment filter for motion list [#5056, #5157].
-- New possibility to change state and recommendation in motion list using quick edit [#5071].
-- Added multi select actions to amendment list [#5041].
-- Added search value selector in multi select action dialogs [#5058].
-- Added support for nested lists with line numbers in PDF export [#5138].
-- Improved scaling of motion tile view [#5038].
-- Improved performance for large motions with dozens of amendments by implementing manual change detection in motion detail [#5074, #5139].
-- Improved display of long names for states and recommendations in drop down menu in motion detail view [#5079].
-- Improved amendment slide by showing only changed line(s)s without surrounding paragraph [#5144].
-- Fixed line number errors during creation of amendments [#5023].
-- Fixed an issue that ol/ul lists are not printed in amendment PDF [#5051].
-- Fixed the amendment option "Show entire motion text" [#5052].
-- Fixed a rare bug in final version where change recommendations or amendments would have been hidden [#5070].
-- Fixed PDF export in final version: use modified final version if available [#5139].
-- Fixes a bug where the event name was printed twice in the PDF header [#5155].
-
-**Elections:**
-- Fixed errors by entering votes and sorting candidates [#5129, #5125].
-- Fixed a permission issue that prevented nominating another participants for elections [#5154].
-
-**Users:**
-- Fixed wrong permission check for set password [#5128].
-
-**Mediafiles:**   
-- Fixed mediafile upload path [#4710].
-- Fixed double slash in mediafile URL [#5031].
-- Original filename must now be unique for files [#5123].
-
-**Projector:**
-- New projector edit dialog with preview [#5043].
-- Added support for custom aspect ratios in projector edit dialog; database migration required [#5141].
-- Added missing autoupdates for changed projection defaults [#5045].
-- Added scaleable tile for projector list [#5043].
-- Added a lock icon on the list of speaker slide if list has been closed [#5154].
-- Improved autoupdates for projectors by using changeIDs [#5064].
-- Improved performance by preventing high CPU usage on Firefox in projector detail view [#5022].
-- Changed config option to show nice horizontal meta box on motion slide [#5088].
-- Changed config option "Event date" back to string format [#5042].
-- Saved countdown settings [#5053].
-
-**Breaking Changes:**
-- Due to faster model handling (using the 'Proxy' function) Internet Explorer 11 cannot be supported anymore!
-
-
-## Version 3.0 (2019-09-13)
-
-[Milestone](https://github.com/OpenSlides/OpenSlides/milestones/3.0)
-
-**General (Client):**
-- OpenSlides client completely rewritten, based on Angular 8 and Material Design.
-- OpenSlides is now a Progressive Web App (PWA).
-- New browser caching via IndexedDB (one cache store for all browser tabs).
-- New list views optimized with virtual scrolling (improved performance for long lists).
-- New global quick search using by shortcut 'Alt+Shift+F'.
-- New built-in design themes for customizing user interface.
-- New update notification if OpenSlides static files are updated.
-- New config option for pdf page size (DIN A4 or A5).
-- Added TinyMCE 5 editor (switched from CKEditor caused by changed license).
-- Switched from yarn/gulp to npm.
-- Improved pdf gerneration with progress bar and cancel option.
-- Translations available for EN, DE, RU and CS.
-
-**General (Server):**
-- New websocket protocol for server client communication using JSON schema.
-- New change-id system to send only updated elements to client.
-- New global history mode (useable for admin group only).
-- Updated to Channels 2.
-- Dropped support for Python 3.5.
-- Dropped support for Geiss.
-- Complete rework of startup and caching system. Dropped restricted data cache.
-- Changed URL schema.
-- Changed personal settings.py.
-- Changed format for elements send via autoupdate.
-- Changed projector concept.
-- Compressed autoupdates before sending to clients (reduced traffic).
-- Fixed autoupdate system for related objects.
-- Fixed logo configuration if logo file is deleted.
-- Added several bulk views for motions and users (one request for updating multiple selected elements).
-- Added docs for using OpenSlides in 'big mode' with Gunicorn and Uvicorn.
-- Added docs for configure OpenSlides in settingy.py.
-- Dropped chat functionality.
-- Server performance improvements.
-
-**Agenda:**
-- Agenda items are now optional (for motions, elections and mediafiles). New config to set default behavior.
-- New drag&drop view to sort agenda items.
-- New config option: only present participants can be added to list of speakers.
-- New config option to hide number of speakers on projector.
-
-**Motions:**
-- New call list for custom sort of motions.
-- New tile layout view with all categories (each category a tile).
-- New statute motions with managing statute paragraphs.
-- New permission to manage metadata (state, recommendation, submitters and supporters, category, motion block and polls).
-- New permission to create amendments.
-- New permission to see motions in internal states.
-- New access restrictions definable for each motion state in workflow.
-- New 'internal' option for motion blocks.
-- New sorting view for categories to create subcategories.
-- New custom comment fields for all motions (read/write access can be managed via permission groups).
-- New motion history (each action is stored in global OpenSlides history which can be restored any time, replaced old motion version and log features).
-- New XLSX export (docx support is dropped).
-- New navigation for next/previous motion in detail view (shortcut: 'Alt+Shift+Left/Right').
-- New multi select actions.
-- New timestampes for motions (for sorting by creation date and last modified).
-- New config option to set reason as required field.
-- New config option to change multiple paragraphs with an amendment.
-- New config option to hide motion text on projector.
-- New config option to show sequential number.
-- New config option to show all motions which are referred to a special motion.
-- New config option to show submitters and recommendation in table of contents of PDF.
-- New config options to control identifier generation - number of digits and blanks (moved from settings.py).
-- Improved PDF export (optional with toc, page numbers, date, comments and meta information)
-- Improved motion numbering in (sub)categories: Motions of subcategories are also numbered, and parents of amendments needs to be in the numbered category or any subcategory.
-- Improved projection layout of motion blocks.
-- Changed default workflows: Allowed submitters to set state of new motions in complex and customized workflow. No migration provided.
-- Change CSV import to add tags.
-
-**User:**
-- New admin group which grants all permissions. Users of existing group 'Admin' or 'Staff' are move to the new group during migration.
-- New gender field.
-- New password forget/reset function via email.
-- New permission to change own password.
-- New config option for sender name and reply email address (From address is defined in settings.py).
-
-**Mediafiles:**
-- New support for (sub)folders and permission groups.
-
-**Projector:**
-- New views to list, manage and control created OpenSlides projectors.
-- New projector queue (add slide to queue), all projected slides are logged.
-- New chyron for current speaker.
-- New color settings for each projector.
-
-
-## Version 2.3 (2018-09-20)
-[Release notes](https://github.com/OpenSlides/OpenSlides/wiki/OpenSlides-2.3) · [Milestone](https://github.com/OpenSlides/OpenSlides/milestones/2.3)
-
-**Agenda:**
-- New item type 'hidden'. New visibilty filter in agenda [#3790].
-
-**Motions:**
-- New feature to scroll the projector to a specific line [#3748].
-- New possibility to sort submitters [#3647].
-- New representation of amendments (paragraph based creation, new diff and list views for amendments) [#3637].
-- New feature to customize workflows and states [#3772, #3785].
-- New table of contents with page numbers and categories in PDF [#3766].
-- New teporal field "modified final version" where the final version can be edited [#3781].
-- New config options to show logos on the right side in PDF [#3768].
-- New config to show amendments also in motions table [#3792].
-- Support to change decimal places for polls with a plugin [#3803].
-
-**Elections:**
-- Support to change decimal places for elections with a plugin [#3803]
-
-**Core:**
-- Updated Django to 2.1 [#3777, #3786].
-- Support for Python 3.7 [#3786].
-- Python 3.4 is not supported anymore [#3777].
-- Updated pdfMake to 0.1.37 [#3766].
-- Changed behavior of collectstatic management command [#3804].
-
-
-## Version 2.2 (2018-06-06)
-
-[Release notes](https://github.com/OpenSlides/OpenSlides/wiki/OpenSlides-2.2) · [Milestone](https://github.com/OpenSlides/OpenSlides/milestones/2.2)
-
-**Agenda:**
-- New permission for managing lists of speakers [#3366].
-- New DOCX export of agenda [#3569].
-- New collapsable agenda overview [#3567].
-- New feature: mark speakers (e.g. as submitter) [#3570].
-- New config option to enable numbering of items [#3697].
-- New config option to hide internal items when projecting subitems [#3701].
-- Hide closed agenda items in the item slide [#3567].
-- Fixed wrong sorting of last speakers [#3193].
-- Fixed issue when sorting a new inserted speaker [#3210].
-- Fixed multiple request on creation of agenda related items [#3341].
-- Autoupdates for all children if the item type has changed [#3659].
-
-**Motions:**
-  - New export dialog for managers only [#3185].
-  - New personal note field for each motions [#3190, #3267, #3404].
-  - New navigation between single motions [#3459].
-  - New possibility to create change recommendations for motion titles [#3626].
-  - New support for export motions in a ZIP archive [#3189, #3251].
-  - New PDF export for personal note and comments [#3239].
-  - New config option for customize sorting of category list in pdf/docx export [#3329].
-  - New config optoin for pagenumber alignment in PDF [#3327].
-  - New config options to hide reason, recommendation and meta data box on projector [#3432, #3692].
-  - New inline editing for motion reason [#3361].
-  - New multiselect filter for motion comments [#3372].
-  - New support for pinning personal notes to the window [#3360].
-  - New warning message if an edit dialog was already opened by another client [#3212].
-  - New change recommendation type "other" [#3495].
-  - Fixed issue when creating/deleting motion comment fields in the settings [#3187].
-  - Fixed empty motion comment field in motion update form [#3194].
-  - Fixed error on category sort [#3318].
-  - Bugfix: Changing motion line length did not invalidate cache [#3202].
-  - Bugfix: Added more distance in motion PDF for DEL-tags in new lines [#3211].
-  - Bugfix: Creating colliding change recommendation is now prevented on server side [#3304].
-  - Bugfix: Several bugfixes regarding splitting list items in change recommendations [#3288].
-  - Bugfix: Several bugfixes regarding diff version [#3407, #3408, #3410, #3440, #3450, #3465, #3537, #3546, #3548, #3644, #3656].
-  - Improved the multiselect state filter [#3459].
-  - Save pagination state to session storage [#3569].
-  - Allow to delete own motions [#3516].
-  - Reference to motions by id in state and recommendation special field [#3498].
-  - Log which comment was updated [#3569].
-  - Split up 'can_see_and_manage_comments' permission in two seperate ones [#3565].
-  - Combined all boolean filters into one dropdown menu and added a filter for amendments [#3501].
-  - Show motion identifier in (current) list of speakers [#3442]
-  - Show the number of next speakers in motion list view [#3470].
-  - Added (shortened) motion title to motion block slide [#3700].
-  - Clear identifier on state reset [#3356].
-  - Reworked DOCX export parser and added comments to DOCX [#3258].
-  - Removed server side image to base64 transformation and added local transformation [#3181].
-  - Added karma:watch command [#3466].
-
-**Elections:**
-- New pagination for list view [#3393].
-
-**Users:**
-- New fast mass import for users [#3290].
-- New default user group 'admin' [#3621].
-- New feature to send invitation emails with OpenSlides login data [#3503, #3525].
-- New view to toggle presence by entering participant number (can be used with barcode scanner) [#3496].
-- New support for password validation using Django or custom validators
-  5.  7.  for minimum password length [#3200].
-- Hide password in change password view [#3417].
-- Users without the permission 'can see users' can now see agenda item speakers, motion submitters and supporters, assignment candidates, mediafile uploader and chat message users if they have the respective permissions [#3191, #3233].
-- Fixed compare of duplicated users while CSV user import [#3201].
-- Added settings option to enable updating the last_login field in the database. The default is now disabled [#3400].
-- Removed OPTIONS request. All permissions are now provided on startup [#3306].
-
-**Mediafiles:**
-- New form for uploading multiple files [#3650].
-- New custom CKEditor plugin for browsing mediafiles [#3337].
-- Project images always in fullscreen [#3355].
-- Protect mediafiles for forbidden access [#3384].
-- Fixed reloading of PDF on page change [#3274].
-
-**Core:**
-- New settings to upload custom fonts (for projector and pdf) [#3568].
-- New custom translations to use custom wordings [#3383].
-- New support for choosing image files as logos for projector, PDF and web interface header [#3184, #3207, #3208, #3310].
-- New notify system [#3212].
-- New config option for standard font size in PDF [#3332].
-- New config option for disabling header and footer in the projector [#3357].
-- New dynamic webpage title [#3404].
-- New 'go to top'-link [#3404].
-- New custom format cleanup plugin for CKEditor [#3576].
-- Reset scroll level for each new projection [#3686].
-- Scroll to top on every state change [#3689].
-- Added pagination on top of lists [#3698].
-- Improved performance for PDF generation significantly (by upgrading to pdfmake 0.1.30) [#3278, #3285].
-- Enhanced performance esp. for server restart and first connection of all clients by refactoring autoupdate, Collection and AccessPermission [#3223, #3539].
-- Improved reconnect handling if the server was flushed [#3297].
-- No reload on logoff. OpenSlides is now a full single page application [#3172].
-- Highlight list entries in a light blue, if a related object is projected (e. g. a list of speakers of a motion) [#3301].
-- Select the projector resolution with a slider and an aspect ratio [#3311].
-- Delay the 'could not load projector' error 3 seconds to not irritate users with a slow internet connection [#3323].
-- Added default sorting for agenda, motions, elections, mediafiles and users [#3334, 3348].
-- Added caching for the index views [#3419, #3424].
-- Added projector prioritization [#3425].
-- Added --debug-email flag to print all emails to stdout [#3530].
-- Added --no-template-caching flag to disable template caching for easier development [#3566].
-- Updated CKEditor to 4.7 [#3375].
-- Reduced ckeditor toolbar for inline editing [#3368].
-- New api route to project items with just one request needed [#3713].
-- Use native twisted mode for daphne [#3487].
-- Saved language selection to session storage [#3543].
-- Set default of projector resolution to 1220x915 [#2549].
-- Preparations for the SAML plugin; Fixed caching of main views [#3535].
-- Removed unnecessary OPTIONS request in config [#3541].
-- Switched from npm to Yarn [#3188].
-- Improvements for plugin integration [#3330].
-- Cleanups for the collection and autoupdate system [#3390]
-- Bugfixes for PDF creation [#3227, #3251, #3279, #3286, #3346, #3347, #3342].
-- Fixed error when clearing empty chat [#3199].
-- Fixed autoupdate bug for a user without user.can_see_name permission [#3233].
-- Fixed bug the elements are projected and the deleted [#3336].
-- Several bugfixes and minor improvements.
-
-*[#xxxx] = Pull request number to get more details on https://github.com/OpenSlides/OpenSlides/pulls*
-
-
-## Version 2.1.1 (2017-04-05)
-
-[Milestone](https://github.com/OpenSlides/OpenSlides/milestones/2.1.1)
-
-**Agenda:**
-- Fixed issue #3173 that the agenda item text cannot be changed.
-
-**Other:**
-- Set required version for optional Geiss support to <1.0.0.
-
-
-## Version 2.1 (2017-03-29)
-
-[Release notes](https://github.com/OpenSlides/OpenSlides/wiki/OpenSlides-2.1) · [Milestone](https://github.com/OpenSlides/OpenSlides/milestones/2.1)
-
-**Agenda:**    
-- Added button to remove all speakers from a list of speakers.
-- Added option to create or edit agenda items as subitems of others.
-- Fixed security issue: Comments were shown for unprivileged users.
-- Added option to choose whether to show the current list of speakers slide as a slide or an overlay.
-- Manage speakers on the current list of speakers view.
-- List of speakers for hidden items is always visible.
-
-**Core:**
-- Added support for multiple projectors.
-- Added control for the resolution of the projectors.
-- Added smooth projector scroll.
-- Set the projector language in the settings.
-- Added migration path from OpenSlides 2.0.
-- Added support for big assemblies with lots of users.
-- Django 1.10 is now supported. Dropped support for Django 1.8 and 1.9.
-- Used Django Channels instead of Tornado. Refactoring of the autoupdate process. Added retry with timeout in case of ChannelFull exception.
-- Made a lot of autoupdate improvements for projector and site.
-- Added new caching system with support for Redis.
-- Support https as websocket protocol (wss).
-- Accelerated startup process (send all data to the client after login).
-- Add the command getgeiss to download the latest version of Geiss.
-- Add a version of has_perm that can work with cached users.
-- Removed our AnonymousUser. Make sure not to use user.has_perm() anymore.
-- Added function utils.auth.anonymous_is_enabled which returns true, if it is.
-- Changed has_perm to support an user id or None (for anyonmous) as first argument.
-- Cache the group with there permissions.
-- Added watching permissions in client and change the view immediately on changes.
-- Used session cookies and store filter settings in session storage.
-- Removed our db-session backend and added possibility to use any django session backend.
-- Added template hook system for plugins.
-- Used Roboto font in all templates.
-- Added HTML support for messages on the projector.
-- Moved custom slides to own app "topics". Renamed it to "Topic".
-- Added button to clear the chatbox.
-- Better dialog handling. Show dialog just in forground without changing the state url. Added new dialog for profile, change password, tag and category update view.
-- Switched editor back from TinyMCE to CKEditor which provides a better copy/paste support from MS Word.
-- Validate HTML strings from CKEditor against XSS attacks.
-- Use a separate dialog with CKEditor for editing projector messages.
-- Use CKEditor in settings for text markup.
-- Used pdfMake for clientside generation of PDFs. Run pdf creation in background (in a web worker thread).
-- Introduced new table design for list views with serveral filters and CSV export.
-- New CSV import layout.
-- Replaced angular-csv-import by Papa Parse for CSV parsing.
-- Added UTF-8 byte order mark for every CSV export.
-- Removed config cache to support multiple threads or processes.
-- Added success/error symbol to config to show if saving was successful.
-- Fixed bug, that the last change of a config value was not send via autoupdate.
-- Moved full-text search to client-side (removed the server-side search engine Whoosh).
-- Made a lot of code clean up, improvements and bug fixes in client and backend.
-
-**Motions:**
-- Added adjustable line numbering mode (outside, inside, none) for each motion text.
-- Allowed to add change recommendations for special motion text lines (with diff mode).
-- Added projection support for change recommendations.
-- Added button to sort and number all motions in a category.
-- Added recommendations for motions.
-- Added options to calculate percentages on different bases.
-- Added calculation for required majority.
-- Added blocks for motions which can be used in agenda. Set states for multiple motions of a motion block by following the recommendation for each motion.
-- Used global config variable for preamble.
-- Added configurable fields for comments.
-- Added new origin field.
-- Reimplemented amendments.
-- New PDF layout.
-- Added DOCX export with docxtemplater.
-- Changed label of former state "commited a bill" to "refered to committee".
-- Number of ballots printed can now be set in config.
-- Add new personal settings to remove all whitespaces from motion identifier.
-- Add new personal settings to allow amendments of amendments.
-- Added inline editing for comments.
-
-**Elections:**
-- Added options to calculate percentages on different bases.
-- Added calculation for required majority.
-- Candidates are now sortable.
-- Removed unused assignment config to publish winner election results only.
-- Number of ballots printed can now be set in config.
-- Added inline edit field for a specific hint on ballot papers.
-
-**Users:**
-- Added new matrix-interface for managing groups and their permissions.
-- Added autoupdate on permission change (permission added).
-- Improved password reset view for administrators.
-- Changed field for initial password to an unchangeable field.
-- Added new field for participant number.
-- Added new field 'is_committee' and new default group 'Committees'.
-- Improved users CSV import (use group names instead of id).
-- Allowed to import/export initial user password.
-- Added more multiselect actions.
-- Added QR code in users access pdf.
-
-**Mediafiles:**
-- Allowed to project uploaded images (png, jpg, gif) and video files (e. g. mp4, wmv, flv, quicktime, ogg).
-- Allowed to hide uploaded files in overview list for non authorized users.
-- Enabled removing of files from filesystem on model instance delete.
-
-**Other:**
-- Added Russian translation (Thanks to Andreas Engler).
-- Added command to create example data.
-
-
-## Version 2.0 (2016-04-18)
-
-[Milestone](https://github.com/OpenSlides/OpenSlides/milestones/2.0)
-
-*OpenSlides 2.0 is essentially not compatible to OpenSlides 1.7. E. g. customized templates, databases and plugins can not be reused without adaption.*
-
-**Agenda:**
-- Updated the tests and changed internal parts of method of the agenda model.
-- Changed API of related objects. All assignments, motions and custom slides are now agenda items and can be hidden.
-- Removed django-mptt.
-- Added attachments to custom sldies.
-- Improved CSV import.
-
-**Assignments:**    
-- Renamed app from assignment to assignments.
-- Removed possibility to block candidates.
-- Massive refactoring and cleanup of the app.
-
-**Motions:**  
-- Renamed app from motion to motions.
-- Massive refactoring and cleanup of the app.
-
-**Mediafiles:**
-- Renamed app from mediafile to mediafiles.
-- Used improved pdf presentation with angular-pdf.
-- Massive refactoring and cleanup of the app.
-
-**Users:**
-- Massive refactoring of the participant app. Now called 'users'.
-- Used new anonymous user object instead of an authentification backend. Used special authentication class for REST requests.
-- Used authentication frontend via AngularJS.
-- Improved CSV import.
-
-**Other:**
-- New OpenSlides logo.
-- New design for web interface.
-- Added multiple countdown support.
-- Added colored countdown for the last n seconds (configurable).
-- Switched editor from CKEditor to TinyMCE.
-- Changed supported Python version to >= 3.4.
-- Used Django 1.8 as lowest requirement.
-- Django 1.9 is supported
-- Added Django's application configuration. Refactored loading of signals and projector elements/slides.
-- Setup migrations.
-- Added API using Django REST Framework 3.x. Added several views and mixins for generic Django REST Framework views in OpenSlides apps.
-- Removed most of the Django views and templates.
-- Removed Django error pages.
-- Added page for legal notice.
-- Refactored projector API using metaclasses now.
-- Renamed SignalConnectMetaClass classmethod get_all_objects to get_all (private API).
-- Refactored config API and moved it into the core app.
-- Removed old style personal info page, main menu entries and widget API.
-- Used AngularJS with additional libraries for single page frontend.
-- Removed use of 'django.views.i18n.javascript_catalog'. Used angular-gettext now.
-- Updated to Bootstrap 3.
-- Used SockJS for automatic update of AngularJS driven single page frontend.
-- Refactored plugin API.
-- Refactored start script and management commands. Changed command line option and path for local installation.
-- Refactored tests.
-- Used Bower and gulp to manage third party JavaScript and Cascading Style Sheets libraries.
-- Used setup.cfg for development tools.
-- Removed code for documentation and for Windows portable version with GUI. Used new repositories for this. Cleaned up main repository.
-- Updated all dependencies.
-
-**Translations:**
-- Updated DE, FR, CS and PT translations.
-- Added ES translations.
-
-
-## Version 1.7 (2015-02-16)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.7
-
-**Core:**
-- New feature to tag motions, agenda and assignments.
-- Fixed search index problem to index contents of many-to-many tables (e. g. tags of a motion).
-- Fixed AttributeError in chatbox on_open method.
-
-**Motions:**
-- New Feature to create amendments, which are related to a parent motion.
-- Added possibility to hide motions from non staff users in some states.
-
-**Assignments:**
-- Fixed permissions to alter assignment polls.
-
-**Other:**
-- Cleaned up utils.views to increase performance when fetching single objects from the database for a view (#1378).
-- Fixed bug on projector which was not updated when an object was deleted.
-- Fixed bug and show special characters in PDF like ampersand (#1415).
-- Updated pdf.js to 1.0.907.
-- Improve the usage of bsmselect jquery plugin.
-- Updated translations.
-
-
-## Version 1.6.1 (2014-12-08)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.6.1
-
-**Agenda:**
-- Fixed error in item numbers.
-
-**Motions:**
-- Show supporters on motion slide if available.
-- Fixed motion detail view template. Added block to enable extra content via plugins.
-
-**Assignments:**
-- Fixed PDF build error when an election has more than 20 posts or candidates.
-
-**Participants:**
-- Fixed participant csv import with group ids:
-    - Allowed to add multiple groups in csv group id field, e. g. "3,4".
-    - Fixed bug that group ids greater than 9 can not be imported.
-    - Updated error message if group id does not exists.
-
-**Other:**
-- Fixed CKEditor stuff (added insertpre plugin and removed unused code).
-- Updated French, German and Czech translation.
-
-
-## Version 1.6 (2014-06-02)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.6
-
-**Dashboard:**
-- Added shortcuts for the countdown.
-- Enabled copy and paste in widgets.
-
-**Agenda:**
-- New projector view with the current list of speakers.
-- Added CSV import of agenda items.
-- Added automatic numbering of agenda items.
-- Fixed organizational item structuring.
-
-**Motions:**
-- New slide for vote results.
-- Created new categories during CSV import.
-
-**Assignments/Elections:**
-- Coupled assignment candidates with list of speakers.
-- Created a poll description field for each assignment poll.
-- New slide for election results.
-
-**Participants:**
-- Disabled dashboard widgets by default.
-- Added form field for multiple creation of new participants.
-
-**Files:**
-- Enabled update and delete view for uploader refering to his own files.
-
-**Other:**
-- Added global chatbox for managers.
-- New config option to set the 100 % base for polls (motions/elections).
-- Changed api for plugins. Used entry points to detect them automaticly. Load them automaticly from plugin directory of Windows portable version.
-- Added possibility to use custom templates and static files in user data path directory.
-- Changed widget api. Used new metaclass.
-- Changed api for main menu entries. Used new metaclass.
-- Inserted api for the personal info widget. Used new metaclass.
-- Renamed config api classes. Changed permission system for config pages.
-- Regrouped config collections and pages.
-- Renamed some classes of the poll api.
-- Renamed method and attribute of openslides.utils.views.PermissionMixin.
-- Added api for absolute urls in models.
-- Inserted command line option to translate config strings during database setup.
-- Enhanced http error pages.
-- Improved responsive design for templates.
-- Fixed headings on custom slides without text.
-- Moved dashboard and select widgets view from projector to core app.
-- Renamed and cleaned up static direcories.
-- Used jsonfield as required package. Removed jsonfield code.
-- Added new package backports.ssl_match_hostname for portable build script.
-- Used new app "django-ckeditor-updated" to render WYSIWYG html editors. Removed CKEditor from sources.
-- Only reload the webserver in debug-mode.
-
-
-## Version 1.5.1 (2014-03-31)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.5.1
-
-**Projector:**
-- Fixed path and config help text for logo on the projector.
-
-**Agenda:**
-- Fixed permission error in the list of speakers widget.
-- Fixed Item instance method is_active_slide().
-
-**Motion:**
-- Fixed sorting of motions concerning the identifier. Used natsort and DataTables Natural Sort Plugin.
-
-**Participant:**
-- Added permission to see participants to the manager group.
-- Fixed user status view for use without Javascript.
-
-**Files:**
-- Fixed error when an uploaded file was removed from filesystem.
-
-**Other:**
-- Set minimum Python version to 2.6.9. Fixed setup file for use with Python 2.6.
-- Used unicode font for circle in ballot pdf. Removed Pillow dependency package.
-- Fixed http status code when requesting a non-existing static page using Tornado web server.
-- Fixed error in main script when using other database engine.
-- Fixed error on motion PDF with nested lists.
-
-
-## Version 1.5 (2013-11-25)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.5
-
-**Projector:**
-- New feature: Show PDF presentations on projector (with included pdf.js).
-- Improved projector update process via new websocket API (using sockjs and tornado).
-- New projector template with twitter bootstrap.
-- Improved projector zoom and scroll behaviour.
-
-**Agenda:**
-- New config option: couple countdown with list of speakers.
-- Used HTML editor (CKEditor) for agenda item text field.
-- Added additional input format for agenda item duration field.
-
-**Motions:**
-- Enabled attachments for motions.
-- Refactored warnings on CSV import view.
-
-**Elections:**
-- Refactored assignment app to use class based views instead of functions.
-
-**Polls:**
-- Added percent base to votes cast values.
-
-**Participants:**
-- Updated access data PDF: WLAN access (with QRCode for WLAN ssid/password) and OpenSlides access (with QRCode for system URL), printed on a single A4 page for each participant.
-
-**Other:**    
-- Full text search integration (with Haystack and Whoosh).
-- New start script with new command line options (see python manage.py --help)
-- Fixed keyerror on user settings view.
-- New messages on success or error of many actions like creating or editing objects.
-- Changed messages backend, used Django's default now.
-- A lot of template fixes and improvements.
-- Extended css style options in CKEditor.
-- Added feature to config app to return the default value for a key.
-- Cleaned up OpenSlides utils views.
-- Improved README (now with install instructions and used components).
-- Updated all required package versions.
-- Used flake8 instead of pep8 for style check, sort all import statements with isort.
-- Added Portuguese translation (Thanks to Marco A. G. Pinto).
-- Switched to more flexible versions of required third party packages.
-- Updated to Django 1.6.x.
-- Updated German documentation.
-- Change license from GPLv2+ to MIT, see LICENSE file.
-
-
-## Version 1.4.2 (2013-09-10)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.4.2
-
-- Used jQuery plugin bsmSelect for better ``<select multiple>`` form elements.
-- New config option to disable paragraph numbering in motion pdf. (Default value: disabled.)
-- Removed max value limitation in config field 'motion_min_supporters'.
-- Removed supporters signature field in motion pdf.
-- Fixed missing creation time of motion version. Show now string if identifier is not set (in widgets and motion detail).
-- Fixed error when a person is deleted.
-- Fixed deleting of assignments with related agenda items.
-- Fixed wrong ordering of agenda items after order change.
-- Fixed error in portable version: Open browser on localhost when server listens to 0.0.0.0.
-- Fixed typo and updated translations.
-- Updated CKEditor from 4.1.1 to 4.2. Fixed errors in MS Internet Explorer.
-- Updated to Django 1.5.2.
-
-
-## Version 1.4.1 (2013-07-29)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.4.1
-
- - Fixed tooltip which shows the end of each agenda item.
- - Fixed duration of agenda with closed agenda items.
- - Disabled deleting active version of a motion.
- - Start browser on custom IP address.
- - Fixed wrong URLs to polls in motion detail view.
- - Added Czech translation.
-
-
-## Version 1.4 (2013-07-10)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.4
-
-**Agenda:**
-- New feature: list of speakers for each agenda item which saves begin and end time of each speaker; added new widget and overlay on the dashboard for easy managing and presenting lists of speakers.
-- New item type: organisational item (vs. agenda item).
-- New duration field for each item (with total time calculation for end time of event).
-- Better drag'n'drop sorting of agenda items (with nestedSortable jQuery plugin).
-
-**Motions:**
-- Integrated CKEditor to use allowed HTML formatting in motion text/reason. With server-side whitelist filtering of HTML tags (with bleach) and HTML support for reportlab in motion pdf.
-- New motion API.
-- Support for serveral submitters.
-- New workflow concept with two built-in workflows:
-  1)  complex workflow (like in OpenSlides <= v1.3)
-  2)  simple workflow (only 4 states: submitted -> acceptednot decided; no versioning)
-- Categories for grouping motions.
-- New modifiable identifier.
-- New motion version diff view. Improved history table in motion detail view.
-- New config variable 'Stop submitting of new motions' (for non-manager users).
-- Updated motion status log.
-- Updated csv import.
-
-**Participants:**
-- New feature: qr-code for system url on participants password pdf.
-- Update default groups and permissions.
-- New participant field: 'title'.
-- Removed participants field 'type'. Use 'group' field instead. Updated csv import.
-- Added warning if non-superuser removes his last group containing permission to manage participants.
-
-**Other:**
-- New html template based on twitter bootstrap.
-- New GUI frontend for the Windows portable version.
-- New command to backup sqlite database.
-- New mediafile app (files) to upload/download files via frontend.
-- Used Tornado web server (instead of Django's default development server).
-- Updated win32 portable version to use Tornado.
-- Integrated DataTables jQuery plugin for overview tables of motions, elections and participants (for client side sorting/filtering/pagination).
-- New overlay API for projector view.
-- New config app: Apps have to define config vars only once; config pages and forms are created automatically.
-- Moved version page out of the config app.
-- Changed version number api for plugins.
-- Moved widget with personal info to account app. Inserted info about lists of speakers.
-- Updated to Django 1.5.
-- Dropped support for python 2.5.
-- Updated packaging (setup.py and portable).
-- Open all PDFs in a new tab.
-- Changed Doctype to HTML5.
-- Updated German documentation (especially sections about agenda and motions).
-- Several minor fixes and improvements.
-
-
-## Version 1.3.1 (2013-01-09)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.3.1
-
-- Fixed unwanted automatical language switching on projector view if more than one browser languages send projector request to OpenSlides (#434)
-
-
-## Version 1.3 (2012-12-10)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.3
-
-**Projector:**
-- New public dashboard which allows access for all users per default. (#361) (changed from the old, limited projector control page)
-- New dashboard widgets:
-    - welcome widget (shows static welcome title and text)
-    - participant widget
-    - group widget
-    - personal widget (shows my motions and my elections)
-- Hide scrollbar in projector view.
-- Added cache for AJAX version of the projector view.
-- Moved projector control icons into projector live widget. (#403)
-- New weight field for custom slides (to order custom slides in widget).
-- Fixed drag'n'drop behaviour of widgets into empty dashboard column.
-- Fixed permissions for agenda, motion and assignment widgets (set to projector.can_manage_projector).
-
-**Agenda:**
-- Fixed slide error if agenda item deleted. (#330)
-
-**Motions:**
-- Translation: Changed 'application' to 'motion'.
-- Fixed: Manager could not edit supporters. (#336)
-- Fixed attribute error for anonymous users in motion view. (#329)
-- Set default sorting of motions by number (in widget).
-- CSV import allows to import group as submitter. (#419)
-- Updated motion code for new user API.
-- Rewrote motion views as class based views.
-
-**Elections:**
-- User can block himself/herself from candidate list after delete his/her candidature.
-- Show blocked candidates in separate list.
-- Mark elected candidates in candidate list. (#374)
-- Show linebreaks in description. (#392)
-- Set default sorting of elections by name (in widget).
-- Fixed redirect from a poll which does not exists anymore.
-- Changed default permissions of anonymous user to see elections. (#334)
-- Updated assignment code for new user API.
-
-**Participants:**
-- New user and group API.
-- New group option to handle a group as participant (and thus e.g. as submitter of motion).
-- CSV import does not delete existing users anymore and append users as new users.
-- New user field 'about me'. (#390)
-- New config option for sorting users by first or last name (in participant lists, elections and motions). (#303)
-- Allowed whitespaces in username, default: ``<firstname lastname>`` (#326)
-- New user and group slides. (#176)
-- Don't allow to deactivate the administrator or themself.
-- Don't allow to delete themself.
-- Renamed participant field 'groups' to 'structure level' (German: Gliederungsebene).
-- Rewrote participant views as class based views.
-- Made OpenSlides user a child model of Django user model.
-- Appended tests.
-- Fixed error to allow admins to delete anonymous group
-
-**Other:**
-- Added French translation (Thanks to Moira).
-- Updated setup.py to make an openslides python package.
-- Removed frontpage (welcome widget contains it's content) and redirect '/' to dashboard url.
-- Added LOCALE_PATHS to openslides_settings to avoid deprecation in Django 1.5.
-- Redesigned the DeleteView (append QuestionMixin to send question via the django message API).
-- Fixed encoding error in settings.py. (#349)
-- Renamed openslides_settings.py to openslides_global_settings.py.
-- New default path to database file (XDG_DATA_HOME, e.g. ~/.local/share/openslides/).
-- New default path to settings file (XDG_CONFIG_HOME, e.g. ~/.config/openslides/).
-- Added special handling to determine location of database and settings file in portable version.
-- Don't use similar characters in generated passwords (no 'Il10oO').
-- Localised the datetime in PDF header. (#296)
-- Used specific session cookie name. (#332)
-- Moved code repository from hg to git (incl. some required updates, e.g. version string function).
-- Updated German translations.
-- Several code optimizations.
-- Several minor and medium issues and errors were fixed.
-
-
-## Version 1.2 (2012-07-25)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.2
-
-**General:**
-- New welcome page with customizable title and text.
-- OpenSlides portable win32 binary distribution.
-- New start script (start.py) to automatically create the default settings and the database, start the server and the default browser.
-- Add plugin system. Allow other django-apps to interact with OpenSlides.
-
-**Projector:**
-- New projector dashboard to control all slides on projector.
-- New projector live view on projector dashboard.
-- Countdown calculation works now on server-side.
-- New Overlay messages to show additional information on a second projector layer.
-- Add custom slides.
-- Add a welcome slide.
-- Project application and assignment slides without an agenda item.
-- Update the projector once per second (only).
-
-**Agenda:**
-- Add new comment field for agenda items.
-
-**Elections (Assignments):**
-- New config option to publish voting results for selected winners only.
-
-**Applications:**
-- Now, it's possible to deactivate the whole supporter system.
-- New import option: set status of all imported applications to 'permit'.
-- More log entries for all application actions.
-
-**Participant:**
-- Add new comment field for participants.
-- Show translated permissions strings in user rols form.
-- Admin is redirect to 'change password' page.
-- New default user name: "firstname lastname".
-
-**Other:**
-- Use Django's class based views.
-- Update to Django 1.4. Drop python 2.4 support for this reason.
-- Separate the code for the projector.
-- Rewrite the vote results table.
-- Rewrite the poll API.
-- Rewrite the config API. (Now any data which are JSON serializable can be stored.)
-- Improved CSV import for application and participants.
-- GUI improvements of web interface (e.g. sub navigations, overview tables).
-- Several minor and medium issues and errors were fixed.
-
-
-## Version 1.1 (2011-11-15)
-
-https://github.com/OpenSlides/OpenSlides/milestones/1.1
-
-**Agenda:**
-- [Feature] Agenda overview: New item-done-column for all non-manager (#7)
-- [Feature] Allow HTML-Tags in agenda item of text (#12)
-- [Feature] Split up hidden agenda items in new agenda table section (#13)
-
-**Projector:**
-- [Feature] Assignment projector view layout improvements (#9)
-- [Bugfix] Zoom problem for sidebar div in beamer view (#5)
-- [Bugfix] Blue 'candidate elected line' not visible in projector ajax view (#6)
-- [Bugfix] Assignment projector view: Show results for elected candidates only (#11)
-- [Bugfix] Missing beamer scaling (#2)
-- [Bugfix] Assigment projector view: Removed empty character for no results cell. (#10)
-
-**Applications:**
-- [Feature] Import applications (#55)
-- [Feature] Support trivial changes to an application (#56)
-- [Bugfix] Order submitter and supporter form fields by full name (#53)
-- [Bugfix] Application: Show profile instead of submitter username (#15)
-- [Bugfix] "Application: Only check enough supports in status ""pub""" (#16)
-
-**Elections:**
-- [Feature] New button to show agenda item of selected application/assignment (#54)
-- [Feature] Open add-user-url in new tab. (#32)
-
-**Applications/Elections:**
-- [Feature] Show voting results in percent (#48)
-
-**Participants:**
-- [Feature] Filter displayed permissions in group editor (#59)
-- [Feature] Generate password after user creation automatically (#58)
-- [Bugfix] Encoding error (#1)
-- [Bugfix] List of participants (pdf) link not visible for users with see-particiants-permissions (#3)
-- [Bugfix] Use user.profile.get_type_display() instead of user.profile.type (#4)
-
-**PDF:**    
-- [Feature] Mark elected candidates in PDF (#31)
-- [Feature] New config option to set title and preamble text for application and assignment pdf (#33)
-- [Feature] New config option to set number of ballots in PDF (#26)
-- [Bugfix] Assignment ballot pdf: Wrong line break in group name with brackets (#8)
-- [Bugfix] Print available candidates in assignment pdf (#14)
-- [Bugfix] Show "undocumented" for result "-2" in application and assignment pdf (#17)
-
-**Other:**
-- [Feature] Rights for anonymous (#45)
-- [Feature] Show counter for limited speaking time (#52)
-- [Feature] Reorderd config tab subpages (#61)
-- [Localize] i18n German: Use gender-specific strings (#51)
-- [Bugfix] ``<button>`` inside ``<a>`` tag not working in IE (#57)
-- [Bugfix] Change default sort for tables of applications, assignments, participants (#27)
-
-
-## Version 1.0 (2011-09-12)
-
-https://github.com/OpenSlides/OpenSlides/tree/1.0/

DEVELOPMENT.md

@@ -1,159 +0,0 @@
-# Development of OpenSlides 4
-
-## Requirements
-
-You need git, bash, docker, docker-compose, make and openssl installed.
-
-Go is needed to install https://github.com/FiloSottile/mkcert (but Go is not a requirement to start the development server). The development setup uses HTTPS per default. OpenSlides does not work with HTTP anymore since features are required (like http2) that only works in a secure environment.
-
-## Before starting the development
-
-Clone this repository:
-
-    $ git clone --recurse-submodules git@github.com:OpenSlides/OpenSlides.git
-
-After cloning you need to initialize all submodules:
-
-    $ git submodule update --init
-
-Finally, start the development server:
-
-    $ make run-dev
-    
-(This command won't run without sudo, or without having set up Docker to run without sudo - see their documentation)
-
-You can access the services independently using their corresponding ports
-or access the full stack on
-
-    $ https://localhost:8000
-
-## Running tests
-
-To run all tests of all services, execute `run-service-tests`. TODO: Systemtests in this repo.
-
-## Adding a new Service
-
-    $ git submodule add <git@myrepo.git>
-
-Append `branch = main` to the new entry in the `.gitmodules` file. Verify,
-that it is there (the folder should have 160000 permissions: Submodule) with the
-current commit:
-
-    $ git diff --cached
-
-Then, commit changes and create a pull request.
-
-## Work in submodules
-
-Create your own fork at github.
-
-Remove the upstream repo as the origin in the submodule:
-
-    $ cd <submodule>
-    $ git remote remove origin
-
-Add your fork and the main repo as origin and upstream
-
-    $ git remote add origin `<your fork>`
-    $ git remote add upstream `<main repo>`
-    $ git fetch --all
-    $ git checkout origin main
-
-You can verify that your setup is correct using
-
-    $ git remote -v
-
-The output should be similar to
-
-    origin    git@github.com:<GithubUsername>/OpenSlides.git (fetch)
-    origin	  git@github.com:<GithubUsername>/OpenSlides.git (push)
-    upstream  git@github.com:OpenSlides/OpenSlides.git (fetch)
-    upstream  git@github.com:OpenSlides/OpenSlides.git (push)
-
-## Requirements for services
-
-### Environment variables
-
-These environment variables are available:
-
-- `<SERVICE>_HOST`: The host from a required service
-- `<SERVICE>_PORT`: The port from a required service
-
-Required services can be `MESSAGE_BUS`, `DATASTORE_WRITER`, `PERMISSION`, `AUTOUPDATE`,
-etc. For private services (e.g. a database dedicated to exactly one service),
-use the following syntax: `<SERVICE>_<PRIV_SERVICE>_<ATTRIBUTE>`, e.g. the
-Postgresql user for the datastore: `DATASTORE_POSTGRESQL_USER`.
-
-### Makefile
-
-A makefile must be provided at the root-level of the service. The currently
-required (phony) targets are:
-
-- `run-tests`: Execute all tests from the submodule
-- `build-dev`: Build an image with the tag `openslides-<service>-dev`
-
-### Build arguments in the Dockerfile
-
-These build arguments should be supported by every service:
-
-- `REPOSITORY_URL`: The git-url for the repository to use
-- `GIT_CHECKOUT`: A branch/tag/commit to check out during the build
-
-Note that meaningful defaults should be provided in the Dockerfile.
-
-## Developing on a single service
-
-Go to the serivce and create a new branch (from main):
-
-    $ cd my-service
-    $ git status  # -> on main?
-    $ git checkout -b my-feature
-
-Run OpenSlides in development mode (e.g. in a new terminal):
-
-    $ make run-dev
-
-After making some changes in my-service, create a commit and push to your fork
-
-    $ git add -A
-    $ git commit -m "A meaningful commit message here"
-    $ git push origin -u my-feature
-
-As the last step, you can create a PR on Github. After merging, these steps are
-required to be executed in the main repo:
-
-    $ cd my-service
-    $ git pull upstream main
-    $ cd ..
-    $ git diff  # -> commit hash changed for my-service
-
-If the update commit should be a PR:
-
-    $ git checkout -b updated-my-service
-    $ git commit -am "Updated my-service"
-    $ git push origin updated-my-service
-
-Or a direct push on main:
-
-    $ git commit -am "Updated my-service"
-    $ git push origin main
-
-## Working with Submodules
-
-After working in many services with different branches, this command checks
-out `main` (or the given branch in the .gitmodules) in all submodules and
-pulls main from upstream (This requres to have `upstream`set up as a remote
-in all submodules):
-
-    $ git submodule foreach -q --recursive 'git checkout $(git config -f $toplevel/.gitmodules submodule.$name.branch || echo main); git pull upstream $(git config -f $toplevel/.gitmodules submodule.$name.branch || echo main)'
-
-This command has can also be called from the makefile using:
-
-    $ make services-to-main
-
-When changing the branch in the main repo (this one), the submodules do not
-automatically gets changed. THis ocmmand checks out all submodules to the given
-commits in the main repo:
-
-    $ git submodule update
-

DEVELOPMENT.rst

@@ -0,0 +1,282 @@
+========================
+ OpenSlides Development
+========================
+
+This instruction helps you to setup a development environment for OpenSlides.
+
+
+Installation and start of the development version
+=================================================
+
+1. Installation on GNU/Linux or Mac OS X
+----------------------------------------
+
+a. Check requirements
+'''''''''''''''''''''
+
+Make sure that you have installed `Python (>= 3.6) <https://www.python.org/>`_,
+`Node.js (>=10.x) <https://nodejs.org/>`_ and `Git <http://git-scm.com/>`_ on
+your system. You also need build-essential packages and header files and a
+static library for Python.
+
+For Debian based systems (Ubuntu, etc) run::
+
+    $ sudo apt-get install git nodejs npm build-essential python3-dev
+
+
+b. Get OpenSlides source code
+'''''''''''''''''''''''''''''
+
+Clone current master version from `OpenSlides GitHub repository
+<https://github.com/OpenSlides/OpenSlides/>`_::
+
+    $ git clone https://github.com/OpenSlides/OpenSlides.git
+    $ cd OpenSlides
+
+
+c. Setup a virtual Python environment (optional)
+''''''''''''''''''''''''''''''''''''''''''''''''
+
+See step 1. b. in the installation section in the `README.rst
+<https://github.com/OpenSlides/OpenSlides/blob/master/README.rst>`_.
+
+
+d. Finish the server
+''''''''''''''''''''
+
+Install all required Python packages::
+
+    $ pip install --requirement requirements.txt
+
+Create a settings file, run migrations and start the server::
+
+    $ python manage.py createsettings
+    $ python manage.py migrate
+    $ python manage.py runserver
+
+To get help on the command line options run::
+
+    $ python manage.py --help
+
+Later you might want to restart the server with one of the following commands.
+
+To start OpenSlides with this command and to avoid opening new browser windows
+run::
+
+    $ python manage.py start --no-browser
+
+When debugging something email related change the email backend to console::
+
+    $ python manage.py start --debug-email
+
+
+e. Debugging the server
+'''''''''''''''''''''''
+
+If you wish to have even further debugging, enable `django-extensions
+<https://django-extensions.readthedocs.io/>`_ in the ``settings.py``  by adding
+``django_extensions`` to the list of ``INSTALLED_PLLUGINS``. Make sure, you
+install the following packages::
+
+    $ pip install Werkzeug pyparsing pydot django-extensions
+
+You can start the enhanced debugging-server via::
+
+    $ python manage.py runserver_plus
+
+
+f. Setup and start the client
+'''''''''''''''''''''''''''''
+
+Go in the client's directory in a second command-line interface::
+
+    $ cd client/
+
+Install all dependencies and start the development server::
+
+    $ npm install
+    $ npm start
+
+Now the client is available under ``localhost:4200``.
+
+If you want to provide the client statically, you can build it via::
+
+    $ npm run build
+
+The build client files are availible from the root directory in
+``openslides/static`` and can be provided via NGINX.
+
+
+2. Installation on Windows
+--------------------------
+
+Follow the instructions above (Installation on GNU/Linux or Mac OS X) but care
+of the following variations.
+
+To get Python download and run the latest `Python 3.7 32-bit (x86) executable
+installer <https://www.python.org/downloads/windows/>`_. Note that the 32-bit
+installer is required even on a 64-bit Windows system. If you use the 64-bit
+installer, step d. of the instruction might fail unless you installed some
+packages manually.
+
+In some cases you have to install `MS Visual C++ 2015 build tools
+<https://www.microsoft.com/en-us/download/details.aspx?id=48159>`_ before you
+install the required python packages for OpenSlides (unfortunately Twisted
+needs it).
+
+To setup and activate the virtual environment in step c. use::
+
+    > .virtualenv\Scripts\activate.bat
+
+All other commands are the same as for GNU/Linux and Mac OS X.
+
+
+3. Running the test cases
+-------------------------
+
+a. Running server tests
+'''''''''''''''''''''''
+
+To run some server tests see `.travis.yml
+<https://github.com/OpenSlides/OpenSlides/blob/master/.travis.yml>`_.
+
+You can generate an class-structure image when having `django_extensions`
+enabled (see above)::
+
+    $ python manage.py graph_models -a -g -o my_project_visualized.png
+
+
+b. Client tests and commands
+''''''''''''''''''''''''''''
+
+Change to the client's directory to run every client related command. Run
+client tests::
+
+    $ npm test
+
+Fix the code format and lint it with::
+
+    $ npm run prettify-write
+    $ npm run lint
+
+To extract translations run::
+
+    $ npm run extract
+
+When updating, adding or changing used packages from npm, please update the
+README.md using following command::
+
+    $ npm run licenses
+
+
+OpenSlides in big mode
+======================
+
+To install OpenSlides for big assemblies (in 'big mode') you have to setup some
+additional components and configurations. In the 'big mode' you should use a webserver
+like NGINX to serve the static and media files as proxy server in front of your OpenSlides
+interface server. You should also use a database like PostgreSQL. Use Redis as channels backend,
+cache backend and session engine. Finally you should use gunicorn with uvicorn as interface server.
+
+
+1. Install and configure PostgreSQL and Redis
+---------------------------------------------
+
+Install `PostgreSQL <https://www.postgresql.org/>`_ and `Redis
+<https://redis.io/>`_. For Ubuntu 18.04 e. g. run::
+
+    $ sudo apt-get install postgresql libpq-dev redis-server
+
+Be sure that database and redis server is running. For Ubuntu 18.04 e. g. this
+was done automatically if you used the package manager.
+
+Then add database user and database. For Ubuntu 18.04 e. g. run::
+
+    $ sudo -u postgres createuser --pwprompt --createdb openslides
+    $ sudo -u postgres createdb --owner=openslides openslides
+
+
+2. Change OpenSlides settings
+-----------------------------
+
+Create OpenSlides settings file if it does not exist::
+
+    $ python manage.py createsettings
+
+Change OpenSlides settings file (usually called settings.py): Setup
+`DATABASES` entry as mentioned in the settings file. Set `use_redis` to
+`True`.
+
+Populate your new database::
+
+    $ python manage.py migrate
+
+
+3. Run OpenSlides
+-----------------
+
+To start Daphne run::
+
+    $ export DJANGO_SETTINGS_MODULE=settings
+    $ export PYTHONPATH=personal_data/var/
+    $ daphne -b 0.0.0.0 -p 8000 openslides.asgi:application
+
+The last line may be interchangeable with gunicorn and uvicorn as protocol
+server::
+
+    $ gunicorn -w 4 -b 0.0.0.0:8000 -k uvicorn.workers.UvicornWorker openslides.asgi:application
+
+
+4. Use NGINX (optional)
+-----------------------
+
+When using NGINX as a proxy for delivering static files the performance of the
+setup will increase.
+
+This is an example ``nginx.conf`` configuration for Daphne listing on port
+8000::
+
+    worker_processes  1;
+
+    events {
+        worker_connections  1024;
+    }
+
+    http {
+        server {
+            listen 80;
+            server_name  localhost;
+
+            root   $YOUR_OS_ROOT_FOLDER/openslides/static;
+            index  index.html index.htm;
+            include /etc/nginx/mime.types;
+
+            client_max_body_size 100M;
+
+            gzip on;
+            gzip_min_length 1000;
+            gzip_proxied expired no-cache no-store private auth;
+            gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+            location / {
+                try_files $uri $uri/ /index.html;
+            }
+            location /apps {
+                proxy_pass http://localhost:8000;
+            }
+            location /media {
+                proxy_pass http://localhost:8000;
+            }
+            location /rest {
+                proxy_set_header Host $http_host; 
+                proxy_pass http://localhost:8000;
+            }
+            location /ws {
+                proxy_pass http://localhost:8000;
+                proxy_http_version 1.1;
+                proxy_set_header Upgrade $http_upgrade;
+                proxy_set_header Connection "Upgrade";
+            }
+
+        }
+    }

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.7-slim
+
+RUN mkdir /app
+
+RUN apt -y update && \
+  apt -y upgrade && \
+  apt install -y libpq-dev curl wget xz-utils bzip2 git gcc gnupg2 make g++
+RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
+RUN apt -y install nodejs
+RUN npm install -g @angular/cli@latest
+RUN useradd -m openslides
+RUN chown -R openslides /app
+WORKDIR /app
+COPY . /app
+RUN rm -rf /app/.virtualenv* && \
+  rm -rf /app/client/node_modules
+RUN chown -R openslides /app
+
+# Installing python dependencies
+RUN pip install -r requirements.txt
+RUN rm -rf /var/lib/apt/lists/*
+
+# installing client
+USER openslides
+RUN ng config -g cli.warnings.versionMismatch false && \
+  cd client && \
+  npm install
+RUN cd client && \
+  npm run build && \
+  ./node_modules/.bin/compodoc -t -p src/tsconfig.app.json -n 'OpenSlides Documentation' -d ../openslides/static/doc -e html

LICENSE

@@ -1,6 +1,6 @@
-MIT License
+The MIT License (MIT)
 
-Copyright (c) Since 2011 Authors of OpenSlides, see AUTHORS
+Copyright (c) 2011-2019 Authors of OpenSlides, see AUTHORS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

MANIFEST.in

@@ -0,0 +1,9 @@
+include AUTHORS
+include CHANGELOG
+include LICENSE
+include README.rst
+include SETTINGS.rst
+include requirements/production.txt
+include requirements/big_mode.txt
+recursive-include openslides *.*
+exclude openslides/__pycache__/*

Makefile

@@ -1,52 +0,0 @@
-run-integration-tests:
-	@echo "Start OpenSlides Dev"
-	make run-dev ARGS="-d"
-	@echo "Start integration tests"
-	make cypress-docker
-	docker-compose -f integration/docker-compose.yml up
-	@echo "Stop OpenSlides Dev"
-	make stop-dev
-
-run-service-tests:
-	git submodule foreach 'make run-tests'
-
-build-dev:
-	./dev-commands/submodules-do.sh 'make build-dev'
-	make -C proxy build-dev
-
-run-dev: | build-dev
-	docker-compose -f docker/docker-compose.dev.yml up $(ARGS)
-
-run-dev-otel: | build-dev
-	docker-compose -f docker/docker-compose.dev.yml -f docker/dc.otel.dev.yml up $(ARGS)
-
-stop-dev:
-	docker-compose -f docker/docker-compose.dev.yml down --volumes --remove-orphans
-
-stop-dev-otel:
-	docker-compose -f docker/docker-compose.dev.yml -f docker/dc.otel.dev.yml down --volumes --remove-orphans
-
-copy-node-modules:
-	docker-compose -f docker/docker-compose.dev.yml exec client bash -c "cp -r /app/node_modules/ /app/src/"
-	mv openslides-client/client/src/node_modules/ openslides-client/client/
-
-reload-proxy:
-	docker-compose -f docker/docker-compose.dev.yml exec -w /etc/caddy proxy caddy reload
-
-services-to-main:
-	./services-to-main.sh
-
-submodules-origin-to-upstream:
-	# You may only use this one time after cloning this repository.
-	# Will set the upstream remote to "origin"
-	git submodule foreach -q --recursive 'git remote rename origin upstream'
-
-cypress-open:
-	cd integration; npm run cypress:open
-
-cypress-run:
-	cd integration; npm run cypress:run
-
-cypress-docker:
-	docker-compose -f integration/docker-compose.yml build
-	docker-compose -f integration/docker-compose.yml up

README.md

@@ -1,57 +0,0 @@
-# OpenSlides
-
-## What is OpenSlides?
-
-OpenSlides is a free, web based presentation and assembly system for
-managing and projecting agenda, motions and elections of an assembly. See
-https://openslides.com for more information.
-
-
-## Using OpenSlides productively
-
-__OpenSlides 4 (this) is currently in beta version!__
-
-If you are just looking to use OpenSlides in a productive manner, please refer
-to the [OpenSlides 3.4 (stable)](https://github.com/OpenSlides/OpenSlides/tree/stable/3.4.x)
-
-
-## Installation
-
-### Requirements
-
-You need [Docker](https://docs.docker.com/engine/install/) and [Docker
-Compose](https://docs.docker.com/compose/install/).
-
-### Setup OpenSlides
-
-For a productive setup of OpenSlides get the [OpenSlides manage
-tool](https://github.com/OpenSlides/openslides-manage-service/releases/tag/latest)
-from GitHub and make it executable. E. g. run:
-
-    $ wget https://github.com/OpenSlides/openslides-manage-service/releases/download/latest/openslides
-    $ chmod +x openslides
-
-Then follow the instructions outlined in the [OpenSlides Manage
-Service](https://github.com/OpenSlides/openslides-manage-service).
-
-
-## Development
-
-For further information about developing OpenSlides, refer to [the development
-readme](DEVELOPMENT.md).
-
-### Architecture of OpenSlides 4
-
-![System architecture of OpenSlides 4](https://raw.githubusercontent.com/wiki/OpenSlides/OpenSlides/OS4/img/OpenSlides4.svg)
-
-Read more about our [concept of OpenSlides 4.0](https://github.com/OpenSlides/OpenSlides/wiki/DE%3AKonzept-OpenSlides-4).
-
-The technical documentation about the internals, requests and functionality can
-be found [in the wiki](https://github.com/OpenSlides/OpenSlides/wiki/DE%3AKonzept-OpenSlides-4).
-
-
-## License and authors
-
-OpenSlides is Free/Libre Open Source Software (FLOSS), and distributed
-under the MIT License, see ``LICENSE`` file. The authors of OpenSlides are
-mentioned in the ``AUTHORS`` file.

README.rst

@@ -0,0 +1,178 @@
+============
+ OpenSlides
+============
+
+What is OpenSlides?
+===================
+
+OpenSlides is a free, web based presentation and assembly system for
+managing and projecting agenda, motions and elections of an assembly. See
+https://openslides.com for more information.
+
+
+Installation
+============
+
+The OpenSlides server runs everywhere where Python is running (for example on
+GNU/Linux, Mac or Windows). For the OpenSlides client a current web browser is required.
+
+
+1. Installation on GNU/Linux or Mac OS X
+----------------------------------------
+
+a. Check requirements
+'''''''''''''''''''''
+
+Make sure that you have installed `Python (>= 3.6) <https://www.python.org/>`_
+on your system.
+
+Additional you need build-essential packages, header files and a static
+library for Python and also the pyvenv-3 binary package for python3.
+
+E.g. run on Debian/Ubuntu::
+
+    $ sudo apt-get install build-essential python3-dev python3-venv
+
+
+b. Setup a virtual Python environment (optional)
+''''''''''''''''''''''''''''''''''''''''''''''''
+
+You can setup a virtual Python environment using the virtual environment
+(venv) package for Python to install OpenSlides as non-root user.
+
+Create your OpenSlides directory and change to it::
+
+    $ mkdir OpenSlides
+    $ cd OpenSlides
+
+Setup and activate the virtual environment::
+
+    $ python3 -m venv .virtualenv
+    $ source .virtualenv/bin/activate
+    $ pip install --upgrade setuptools pip
+
+
+c. Install OpenSlides
+'''''''''''''''''''''
+
+To install OpenSlides just run::
+
+    $ pip install openslides
+
+This installs the latest stable version. To install a specific (beta)
+version use ``openslides==x.y``.
+
+You can also use the package from the `OpenSlides website
+<https://openslides.com/>`_. Download latest OpenSlides release as
+compressed tar archive and run::
+
+    $ pip install openslides-x.y.tar.gz
+
+This will install all required Python packages (see
+``requirements/production.txt``).
+
+
+d. Start OpenSlides
+'''''''''''''''''''
+
+To start OpenSlides simply run::
+
+    $ openslides
+
+If you run this command the first time, a new database and the admin account
+(Username: ``admin``, Password: ``admin``) will be created. Please change the
+password after first login!
+
+OpenSlides will start a webserver. It will also try to open the webinterface in
+your default webbrowser. The server will try to listen on the local ip address
+on port 8000. That means that the server will be available to everyone on your
+local network (at least for commonly used network configurations).
+
+If you use a virtual environment (see step b.), do not forget to activate
+the environment before restart after you closed the terminal::
+
+    $ source .virtualenv/bin/activate
+
+To get help on the command line options run::
+
+    $ openslides --help
+
+You can store settings, database and other personal files in a local
+subdirectory and use these files e. g. if you want to run multiple
+instances of OpenSlides::
+
+    $ openslides start --local-installation
+
+
+2. Installation on Windows
+--------------------------
+
+Follow the instructions above (1. Installation on GNU/Linux or Mac OS X) but care
+of the following variations.
+
+To get Python download and run the latest `Python 3.7 32-bit (x86) executable
+installer <https://www.python.org/downloads/windows/>`_. Note that the 32-bit
+installer is required even on a 64-bit Windows system. If you use the 64-bit
+installer, step 1c of the instruction might fail unless you installed some
+packages manually.
+
+In some cases you have to install `MS Visual C++ 2015 build tools
+<https://www.microsoft.com/en-us/download/details.aspx?id=48159>`_ before you
+install the required python packages for OpenSlides (unfortunately Twisted
+needs it).
+
+To setup and activate the virtual environment in step 1b use::
+
+    > .virtualenv\Scripts\activate.bat
+
+All other commands are the same as for GNU/Linux and Mac OS X.
+
+
+3. Installation with Docker
+---------------------------
+
+The installation instruction for (1) and (2) described a way to use OpenSlides in a
+'small mode' with max 10 concurrent clients. To install OpenSlides for big assemblies
+('big mode') you have to setup some additional components and configurations.
+
+The easiest way to run the OpenSlides 'big mode' environment (with PostgreSQL, Redis
+and NGINX) with Docker Compose: use our docker compose suite. Follow the instruction in
+the `openslides-doccker-compose Repository <https://github.com/OpenSlides/openslides-docker-compose>`_.
+
+To install and configure all components of our 'big mode' manually you can read the
+`big-mode-instruction <https://github.com/OpenSlides/OpenSlides/blob/master/DEVELOPMENT.rst#openslides-in-big-mode>`_
+
+
+Configuration
+=============
+
+Please consider reading the `OpenSlides configuration
+<https://github.com/OpenSlides/OpenSlides/blob/master/SETTINGS.rst>`_ page to
+find out about all configurations, especially when using OpenSlides for big
+assemblies.
+
+
+Development
+===========
+
+To setup a development environment for OpenSlides follow the instruction of
+`DEVELOPMENT.rst
+<https://github.com/OpenSlides/OpenSlides/blob/master/DEVELOPMENT.rst>`_.
+
+
+Used software
+=============
+
+OpenSlides uses the following projects or parts of them:
+
+* Several Python packages (see ``requirements/production.txt`` and ``requirements/big_mode.txt``).
+
+* Several JavaScript packages (see ``client/package.json``)
+
+
+License and authors
+===================
+
+OpenSlides is Free/Libre Open Source Software (FLOSS), and distributed
+under the MIT License, see ``LICENSE`` file. The authors of OpenSlides are
+mentioned in the ``AUTHORS`` file.

SETTINGS.rst

@@ -0,0 +1,148 @@
+==========================
+ OpenSlides configuration
+==========================
+
+First, locate your `settings.py`. Since this is a regular python file,
+experienced users can also write more advanced configurations with e.g. swithing
+between two sets of configs. This also means, that the syntax need to be correct
+for OpenSlides to start.
+
+All presented settings must be written `<SETTINGS_NAME> = <value>` to follow the
+correct syntax.
+
+The `settings.py` is just an extension for Django settings. Please visit the
+`Django settings documentation
+<https://docs.djangoproject.com/en/2.2/ref/settings/>`_ to get an overview about
+all existing settings.
+
+
+SECURITY
+========
+
+For `DEBUG` and `SECRET_KEY` see the sections in the django settings
+documenataion.
+
+`RESET_PASSWORD_VERBOSE_ERRORS`: Default: `True`. Set to `False` to disable.
+Controls the verbosity on errors during a reset password. If enabled, an error
+will be shown, if there does not exist a user with a given email address. So one
+can check, if a email is registered. If this is not wanted, disable verbose
+messages. An success message will always be shown.
+
+`AUTH_PASSWORD_VALIDATORS`: Add custom password validators, e.g. a min-length
+validator. See `django auth docs
+<https://docs.djangoproject.com/en/2.2/topics/auth/passwords/#module-django.contrib.auth.password_validation>`_
+for mor information.
+
+
+Directories
+===========
+
+`OPENSLIDES_USER_DATA_DIR`: The path, where all user data is saved, like static
+files, mediafiles and the default database. This path can be different to the
+location of the `settings.py`.
+
+`STATICFILES_DIRS` and `STATIC_ROOT`: Managing static files. Because the clint
+is not delivered by the server anymore, these settings are obsolete.
+
+`MEDIA_ROOT`: The location of mediafiles. The default is a `media` folder inside
+`OPENSLIDES_USER_DATA_DIR`, but can be altered to another path.
+
+
+Email
+=====
+
+Please refer to the Django settings documentation. A changed email backend is
+useful for debugging to print all email the the console::
+
+    EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+
+
+Electronic voting
+=================
+
+Electronic voting is disabled by default, so only analog polls are available.
+To enable it, set::
+
+    ENABLE_ELECTRONIC_VOTING = True
+
+
+Jitsi integration
+=================
+
+To enable the audio conference with Jitsi Meet, you have to set the following variables:
+
+- `JITSI_DOMAIN`: must contain an url to a Jitsi server
+- `JITSI_ROOM_NAME`: the name of the room that should be used
+- `JITSI_ROOM_PASSWORD`: (optional) the password of the room. Will be applied automatically from the settings.
+
+
+Logging
+=======
+
+To setup basic logging see `logging
+<https://docs.djangoproject.com/en/2.2/topics/logging/>`_.
+We recommend to enable all OpenSlides related logging with level `INFO` per
+default::
+
+    LOGGING = {
+       'formatters': {
+           'lessnoise': {
+               'format': '[{levelname}] {name} {message}',
+               'style': '{',
+               'datefmt': '[%Y-%m-%d %H:%M:%S %z]',
+           },
+       },
+       'handlers': {
+           'console': {
+               'class': 'logging.StreamHandler',
+               'formatter': 'lessnoise',
+           },
+       },
+       'loggers': {
+           'openslides': {
+               'handlers': ['console'],
+               'level': os.getenv('OPENSLIDES_LOG_LEVEL', 'INFO'),
+           },
+       },
+    }
+
+With the environment variable `OPENSLIDES_LOG_LEVEL` the level can be adjusted
+without changing the `settings.py`.
+
+
+Big mode and caching
+====================
+
+When running multiple workers redis is required as a message broker between the
+workers. Set `use_redis = True` to enable redis and visit `OpenSLides in big
+mode
+<https://github.com/OpenSlides/OpenSlides/blob/master/DEVELOPMENT.rst#openslides-in-big-mode>`_.
+
+When seting `use_redis = True`, three settings are important:
+
+- Caching: `REDIS_ADDRESS` is used to provide caching with redis across all
+  workers.
+- Channels: The "message queue" for the workers. Adjust the `hosts`-part to the
+  redis address.
+- Sessions: All sessions are managed in redis to ensure them across all workers.
+  Please adjust the `SESSION_REDIS` fields to point to the redis instance.
+
+
+Advanced
+========
+
+`PING_INTERVAL` and `PING_TIMEOUT` are settings for the clients how frequently
+to ping the server (interval) and how big is the timeout. If a ping took longer
+than the timeout, the clients does a forced reconnect.
+
+`COMPRESSION`: Enable or disables the compression when sending data. This does
+not affect the client.
+
+`PRIORITIZED_GROUP_IDS`: A list of group ids. If one client is logged in and the
+operator is in one of these groups, the client disconnected and reconnects again.
+All requests urls (including websockets) are now prefixed with `/prioritize`, so
+these requests from "prioritized clients" can be routed to different servers.
+
+`AUTOUPDATE_DELAY`: The delay to send autoupdates. This feature can be
+deactivated by setting it to `None`. It is deactivated per default. The Delay is
+given in seconds

client/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

client/.prettierrc

@@ -0,0 +1,11 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "useTabs": false,
+    "bracketSpacing": true,
+    "htmlWhitespaceSensitivity": "css",
+    "semi": true,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
+}

client/README.md

@@ -0,0 +1,131 @@
+# OpenSlides 3 Client
+
+Prototype application for OpenSlides 3.0 (Client).
+Currently under constant heavy maintenance.
+
+## Development Info
+
+As an Angular project, Angular CLI is highly recommended to create components and services.
+See https://angular.io/guide/quickstart for details.
+
+### Contribution Info
+
+Please respect the code-style defined in `.editorconf` and `.pretierrc`.
+
+Code alignment should be automatically corrected by the pre-commit hooks.
+Adjust your editor to the `.editorconfig` to avoid surprises.
+See https://editorconfig.org/ for details.
+
+### Pre-Commit Hooks
+
+Before commiting, new code will automatically be aligned to the definitions set in the
+`.prettierrc`.
+Furthermore, new code has to pass linting.
+
+Our pre-commit hooks are:
+`pretty-quick --staged` and `lint`
+See `package.json` for details.
+
+### Documentation Info
+
+The documentation can be generated by running `npm run compodoc`.
+A new web server will be started on http://localhost:8080
+Once running, the documentation will be updated automatically.
+
+You can run it on another port, with adding your local port after the
+command. If no port specified, it will try to use 8080.
+
+Please document new code using JSDoc tags.
+See https://compodoc.app/guides/jsdoc-tags.html for details.
+
+### Development server
+
+Run `npm start` for a development server. Navigate to `http://localhost:4200/`.
+The app will automatically reload if you change any of the source files.
+
+A running OpenSlides (2.2 or higher) instance is expected on port 8000.
+
+Start OpenSlides as usual using
+`python manage.py start --no-browser --host 0.0.0.0`
+
+### Translation
+
+We are using ngx-translate for translation purposes.
+Use `npm run extract` to extract strings and update elements an with translation functions.
+
+Language files can be found in `/src/assets/i18n`.
+
+### Used software
+
+OpenSlides uses the following software or parts of them:
+
+-   [@angular/animations@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@angular/cdk-experimental@9.2.0](https://github.com/angular/components), License: MIT
+-   [@angular/cdk@9.2.0](https://github.com/angular/components), License: MIT
+-   [@angular/common@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@angular/compiler@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@angular/core@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@angular/forms@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@angular/material-moment-adapter@9.2.0](https://github.com/angular/components), License: MIT
+-   [@angular/material@9.2.0](https://github.com/angular/components), License: MIT
+-   [@angular/platform-browser-dynamic@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@angular/platform-browser@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@angular/router@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@angular/service-worker@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@ngx-pwa/local-storage@9.0.3](https://github.com/cyrilletuzi/angular-async-local-storage), License: MIT
+-   [@ngx-translate/core@12.1.2](https://github.com/ngx-translate/core), License: MIT
+-   [@ngx-translate/http-loader@4.0.0](https://github.com/ngx-translate/http-loader), License: MIT
+-   [@pebula/ngrid-material@2.0.0-rc.1](undefined), License: MIT
+-   [@pebula/ngrid@2.0.0-rc.1](https://github.com/shlomiassaf/ngrid), License: MIT
+-   [@pebula/utils@1.0.2](undefined), License: MIT
+-   [@tinymce/tinymce-angular@3.5.0](https://github.com/tinymce/tinymce-angular), License: Apache-2.0
+-   [acorn@7.1.1](https://github.com/acornjs/acorn), License: MIT
+-   [chart.js@2.9.3](https://github.com/chartjs/Chart.js), License: MIT
+-   [core-js@3.6.4](https://github.com/zloirock/core-js), License: MIT
+-   [css-element-queries@1.2.3](https://github.com/marcj/css-element-queries), License: MIT
+-   [exceljs@3.8.2](https://github.com/exceljs/exceljs), License: MIT
+-   [file-saver@2.0.2](https://github.com/eligrey/FileSaver.js), License: MIT
+-   [lz4js@0.2.0](https://github.com/Benzinga/lz4js), License: ISC
+-   [material-icon-font@0.1.0](https://github.com//petergng/svgFontCreator), License: ISC
+-   [moment@2.24.0](https://github.com/moment/moment), License: MIT
+-   [ng2-charts@2.3.0](https://github.com/valor-software/ng2-charts), License: ISC
+-   [ng2-pdf-viewer@6.1.2](git+https://vadimdez@github.com/VadimDez/ng2-pdf-viewer), License: MIT
+-   [ngx-file-drop@8.0.8](https://github.com/georgipeltekov/ngx-file-drop), License: MIT
+-   [ngx-mat-select-search@2.1.2](https://github.com/bithost-gmbh/ngx-mat-select-search), License: MIT
+-   [ngx-material-timepicker@5.5.1](https://github.com/Agranom/ngx-material-timepicker), License: MIT
+-   [ngx-papaparse@4.0.4](https://github.com/alberthaff/ngx-papaparse), License: MIT
+-   [pdfmake@0.1.65](https://github.com/bpampuch/pdfmake), License: MIT
+-   [po2json@1.0.0-beta-2](https://github.com/mikeedwards/po2json), License: LGPL-2.0-or-later
+-   [rxjs@6.5.4](https://github.com/reactivex/rxjs), License: Apache-2.0
+-   [tinymce@5.2.1](https://github.com/tinymce/tinymce-dist), License: LGPL-2.1
+-   [tslib@1.11.1](https://github.com/Microsoft/tslib), License: Apache-2.0
+-   [zone.js@0.10.3](https://github.com/angular/angular), License: MIT
+-   [@angular-devkit/build-angular@0.901.0](https://github.com/angular/angular-cli), License: MIT
+-   [@angular-devkit/schematics@9.1.0](https://github.com/angular/angular-cli), License: MIT
+-   [@angular/cli@9.1.0](https://github.com/angular/angular-cli), License: MIT
+-   [@angular/compiler-cli@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@angular/language-service@9.1.0](https://github.com/angular/angular), License: MIT
+-   [@biesbjerg/ngx-translate-extract@6.0.3](https://github.com/biesbjerg/ngx-translate-extract), License: MIT
+-   [@compodoc/compodoc@1.1.11](https://github.com/compodoc/compodoc), License: MIT
+-   [@schematics/angular@9.1.0](https://github.com/angular/angular-cli), License: MIT
+-   [@types/jasmine@3.5.10](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+-   [@types/jasminewd2@2.0.8](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+-   [@types/node@13.9.8](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+-   [@types/yargs@15.0.4](https://github.com/DefinitelyTyped/DefinitelyTyped), License: MIT
+-   [codelyzer@5.2.2](https://github.com/mgechev/codelyzer), License: MIT
+-   [husky@4.2.3](https://github.com/typicode/husky), License: MIT
+-   [jasmine-core@3.5.0](https://github.com/jasmine/jasmine), License: MIT
+-   [jasmine-spec-reporter@5.0.1](https://github.com/bcaudan/jasmine-spec-reporter), License: Apache-2.0
+-   [karma-chrome-launcher@3.1.0](https://github.com/karma-runner/karma-chrome-launcher), License: MIT
+-   [karma-coverage-istanbul-reporter@2.1.1](https://github.com/mattlewis92/karma-coverage-istanbul-reporter), License: MIT
+-   [karma-jasmine-html-reporter@1.5.3](https://github.com/dfederm/karma-jasmine-html-reporter), License: MIT
+-   [karma-jasmine@3.1.1](https://github.com/karma-runner/karma-jasmine), License: MIT
+-   [karma@4.4.1](https://github.com/karma-runner/karma), License: MIT
+-   [npm-license-crawler@0.2.1](https://github.com/mwittig/npm-license-crawler), License: BSD-3-Clause
+-   [prettier@2.0.2](https://github.com/prettier/prettier), License: MIT
+-   [protractor@5.4.3](https://github.com/angular/protractor), License: MIT
+-   [resize-observer-polyfill@1.5.1](https://github.com/que-etc/resize-observer-polyfill), License: MIT
+-   [ts-node@8.8.1](https://github.com/TypeStrong/ts-node), License: MIT
+-   [tslint@6.1.0](https://github.com/palantir/tslint), License: Apache-2.0
+-   [tsutils@3.17.1](https://github.com/ajafff/tsutils), License: MIT
+-   [typescript@3.8.3](https://github.com/Microsoft/TypeScript), License: Apache-2.0

client/angular.json

@@ -0,0 +1,168 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "client": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "os",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "../openslides/static",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "aot": true,
+                        "assets": [
+                            "src/assets",
+                            "src/manifest.json",
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/tinymce/skins",
+                                "output": "/tinymce/skins/"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/tinymce/themes",
+                                "output": "/tinymce/themes/"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/tinymce/plugins",
+                                "output": "/tinymce/plugins/"
+                            }
+                        ],
+                        "styles": ["src/styles.scss"],
+                        "scripts": [
+                            "node_modules/tinymce/tinymce.min.js",
+                            "node_modules/video.js/dist/video.min.js",
+                            "src/assets/jitsi/external_api.js"
+                        ],
+                        "webWorkerTsConfig": "tsconfig.worker.json"
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "serviceWorker": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "5mb",
+                                    "maximumError": "10mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
+                                }
+                            ]
+                        },
+                        "es5": {
+                            "budgets": [
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
+                                }
+                            ],
+                            "tsConfig": "./tsconfig-es5.app.json"
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "client:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "client:build:production"
+                        },
+                        "es5": {
+                            "browserTarget": "client:build:es5"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "client:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "styles": ["src/styles.scss"],
+                        "scripts": ["node_modules/tinymce/tinymce.min.js"],
+                        "assets": [
+                            "src/assets",
+                            "src/manifest.json",
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/tinymce/skins",
+                                "output": "/tinymce/skins/"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/tinymce/themes",
+                                "output": "/tinymce/themes/"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/tinymce/plugins",
+                                "output": "/tinymce/plugins/"
+                            }
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": "tsconfig.spec.json",
+                        "format": "stylish",
+                        "exclude": ["**/node_modules/**"]
+                    }
+                },
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "client:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "client:serve:production"
+                        }
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "client"
+}

client/browserslist

@@ -0,0 +1,9 @@
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+IE 9-11

client/e2e/protractor.conf.js

@@ -0,0 +1,26 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+    allScriptsTimeout: 11000,
+    specs: ['./src/**/*.e2e-spec.ts'],
+    capabilities: {
+        browserName: 'chrome'
+    },
+    directConnect: true,
+    baseUrl: 'http://localhost:4200/',
+    framework: 'jasmine',
+    jasmineNodeOpts: {
+        showColors: true,
+        defaultTimeoutInterval: 30000,
+        print: function() {}
+    },
+    onPrepare() {
+        require('ts-node').register({
+            project: require('path').join(__dirname, './tsconfig.e2e.json')
+        });
+        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    }
+};

client/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to client!');
+  });
+});

client/e2e/src/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+    navigateTo() {
+        return browser.get('/');
+    }
+
+    getParagraphText() {
+        return element(by.css('os-root h1')).getText();
+    }
+}

client/e2e/tsconfig.e2e.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "module": "commonjs",
+        "target": "es5",
+        "types": ["jasmine", "jasminewd2", "node"]
+    }
+}

client/karma.conf.js

@@ -0,0 +1,46 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage-istanbul-reporter'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            clearContext: false, // leave Jasmine Spec Runner output visible in browser
+            jasmine: {
+                timeoutInterval: 10000
+            }
+        },
+        coverageIstanbulReporter: {
+            dir: require('path').join(__dirname, '../coverage'),
+            reports: ['html', 'lcovonly'],
+            fixWebpackSourcePaths: true
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        customLaunchers: {
+            ChromeHeadlessNoSandbox: {
+                base: 'ChromeHeadless',
+                flags: ['--no-sandbox']
+            }
+        },
+        singleRun: false,
+        proxies: {
+            '/apps/': 'http://localhost:8000/apps/',
+            '/media/': 'http://localhost:8000/media/',
+            '/rest/': 'http://localhost:8000/rest/',
+            '/ws/': 'ws://localhost:8000/'
+        }
+    });
+};

client/ngsw-config.json

@@ -0,0 +1,40 @@
+{
+    "index": "/index.html",
+    "assetGroups": [
+        {
+            "name": "app",
+            "installMode": "prefetch",
+            "resources": {
+                "files": [
+                    "/favicon.png",
+                    "/index.html",
+                    "/*.css",
+                    "/*.js",
+                    "/fira-sans*",
+                    "/Material-Icons-Baseline.*"
+                ]
+            }
+        },
+        {
+            "name": "assets",
+            "installMode": "lazy",
+            "updateMode": "prefetch",
+            "resources": {
+                "files": [
+                    "/assets/**"
+                ]
+            }
+        }
+    ],
+    "dataGroups": [
+        {
+            "name": "api",
+            "urls": ["/rest/*", "/apps/*"],
+            "cacheConfig": {
+                "maxSize": 0,
+                "maxAge": "0u",
+                "strategy": "freshness"
+            }
+        }
+    ]
+}

client/package.json

@@ -0,0 +1,112 @@
+{
+    "name": "OpenSlides3-Client",
+    "version": "3.2.0",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/OpenSlides/OpenSlides.git"
+    },
+    "license": "MIT",
+    "description": "OpenSlides 3.0 (Client)",
+    "README": "https://github.com/OpenSlides/OpenSlides/blob/master/client/README.md",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve --proxy-config proxy.conf.json --host=0.0.0.0",
+        "start-es5": "ng serve --proxy-config proxy.conf.json --host=0.0.0.0 --configuration es5",
+        "build": "ng build --prod",
+        "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
+        "build-debug": "ng build",
+        "test": "ng test",
+        "test-silently": "npm run test -- --watch=false --no-progress --browsers=ChromeHeadlessNoSandbox",
+        "test-live": "npm run test -- --watch=true --browsers=ChromeHeadlessNoSandbox",
+        "lint-check": "ng lint",
+        "lint-write": "ng lint --fix",
+        "e2e": "ng e2e",
+        "licenses": "node src/crawler.js",
+        "compodoc": "./node_modules/.bin/compodoc --hideGenerator -p tsconfig.app.json -n 'OpenSlides Documentation' -d ../Compodoc -s -o -r",
+        "extract": "ngx-translate-extract -i ./src -o ./src/assets/i18n/template-en.pot --clean --sort --format pot",
+        "po2json": "./node_modules/.bin/po2json -f mf src/assets/i18n/de.po src/assets/i18n/de.json && ./node_modules/.bin/po2json -f mf src/assets/i18n/cs.po src/assets/i18n/cs.json && ./node_modules/.bin/po2json -f mf src/assets/i18n/ru.po src/assets/i18n/ru.json",
+        "po2json-tempfix": "./node_modules/.bin/po2json -f mf src/assets/i18n/de.po /dev/stdout | sed -f sed_replacements > src/assets/i18n/de.json && ./node_modules/.bin/po2json -f mf src/assets/i18n/cs.po /dev/stdout | sed -f sed_replacements > src/assets/i18n/cs.json && ./node_modules/.bin/po2json -f mf src/assets/i18n/ru.po /dev/stdout | sed -f sed_replacements > src/assets/i18n/ru.json",
+        "prettify-check": "prettier --config ./.prettierrc --list-different \"src/{app,environments}/**/*{.ts,.js,.json,.css,.scss}\"",
+        "prettify-write": "prettier --config ./.prettierrc --write \"src/{app,environments}/**/*{.ts,.js,.json,.css,.scss}\"",
+        "cleanup": "npm run prettify-write; npm run lint-write",
+        "cleanup-win": "npm run prettify-write & npm run lint-write"
+    },
+    "dependencies": {
+        "@angular/animations": "~9.1.0",
+        "@angular/cdk": "~9.2.0",
+        "@angular/cdk-experimental": "~9.2.0",
+        "@angular/common": "~9.1.0",
+        "@angular/compiler": "~9.1.0",
+        "@angular/core": "~9.1.0",
+        "@angular/forms": "~9.1.0",
+        "@angular/material": "~9.2.0",
+        "@angular/material-moment-adapter": "~9.2.0",
+        "@angular/platform-browser": "~9.1.0",
+        "@angular/platform-browser-dynamic": "~9.1.0",
+        "@angular/router": "~9.1.0",
+        "@angular/service-worker": "~9.1.0",
+        "@ngx-pwa/local-storage": "~9.0.2",
+        "@ngx-translate/core": "~12.1.2",
+        "@ngx-translate/http-loader": "^4.0.0",
+        "@pebula/ngrid": "2.0.0-rc.1",
+        "@pebula/ngrid-material": "2.0.0-rc.1",
+        "@pebula/utils": "1.0.2",
+        "@tinymce/tinymce-angular": "^3.6.0",
+        "@videojs/http-streaming": "^1.13.3",
+        "acorn": "^7.1.0",
+        "chart.js": "^2.9.2",
+        "core-js": "^3.6.4",
+        "css-element-queries": "^1.2.3",
+        "exceljs": "1.15.0",
+        "file-saver": "^2.0.2",
+        "lz4js": "^0.2.0",
+        "material-icon-font": "git+https://github.com/petergng/materialIconFont.git",
+        "moment": "^2.24.0",
+        "ng2-charts": "^2.3.0",
+        "ng2-pdf-viewer": "^6.1.2",
+        "ngx-device-detector": "^1.4.4",
+        "ngx-file-drop": "^9.0.1",
+        "ngx-mat-select-search": "^2.1.2",
+        "ngx-material-timepicker": "^5.5.1",
+        "ngx-papaparse": "^4.0.2",
+        "pdfmake": "^0.1.63",
+        "po2json": "^1.0.0-beta-2",
+        "rxjs": "^6.5.4",
+        "tinymce": "5.2.2",
+        "tslib": "^1.10.0",
+        "video.js": "^7.7.6",
+        "zone.js": "~0.10.2"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.901.9",
+        "@angular-devkit/schematics": "^9.0.6",
+        "@angular/cli": "~9.1.0",
+        "@angular/compiler-cli": "~9.1.0",
+        "@angular/language-service": "~9.1.0",
+        "@biesbjerg/ngx-translate-extract": "^6.0.3",
+        "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
+        "@compodoc/compodoc": "^1.1.8",
+        "@schematics/angular": "^9.0.6",
+        "@types/jasmine": "^3.3.9",
+        "@types/jasminewd2": "^2.0.6",
+        "@types/node": "^13.9.8",
+        "@types/yargs": "^15.0.4",
+        "codelyzer": "^5.1.2",
+        "husky": "^4.2.3",
+        "jasmine-core": "~3.5.0",
+        "jasmine-spec-reporter": "~5.0.1",
+        "karma": "^4.4.1",
+        "karma-chrome-launcher": "~3.1.0",
+        "karma-coverage-istanbul-reporter": "^2.0.5",
+        "karma-jasmine": "~3.1.1",
+        "karma-jasmine-html-reporter": "^1.4.0",
+        "npm-license-crawler": "^0.2.1",
+        "prettier": "^2.0.5",
+        "protractor": "^5.4.3",
+        "resize-observer-polyfill": "^1.5.1",
+        "ts-node": "~8.8.1",
+        "tslint": "~6.1.0",
+        "tsutils": "3.17.1",
+        "typescript": "~3.8.3"
+    }
+}

client/proxy.conf.json

@@ -0,0 +1,19 @@
+{
+    "/apps/": {
+        "target": "http://localhost:8000",
+        "secure": false
+    },
+    "/media/": {
+        "target": "http://localhost:8000",
+        "secure": false
+    },
+    "/rest/": {
+        "target": "http://localhost:8000",
+        "secure": false
+    },
+    "/ws/": {
+        "target": "ws://localhost:8000",
+        "secure": false,
+        "ws": true
+    }
+}

client/sed_replacements

@@ -0,0 +1,4 @@
+s/\\\\{/{/g
+s/\\\\}/}/g
+s/{0}ser%/%user%/g
+s/{0}um%/%num%/g

client/src/app/app-routing.module.spec.ts

@@ -0,0 +1,13 @@
+import { AppRoutingModule } from './app-routing.module';
+
+describe('AppRoutingModule', () => {
+    let appRoutingModule: AppRoutingModule;
+
+    beforeEach(() => {
+        appRoutingModule = new AppRoutingModule();
+    });
+
+    it('should create an instance', () => {
+        expect(appRoutingModule).toBeTruthy();
+    });
+});

client/src/app/app-routing.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { LoginLegalNoticeComponent } from './site/login/components/login-legal-notice/login-legal-notice.component';
+import { LoginMaskComponent } from './site/login/components/login-mask/login-mask.component';
+import { LoginPrivacyPolicyComponent } from './site/login/components/login-privacy-policy/login-privacy-policy.component';
+import { LoginWrapperComponent } from './site/login/components/login-wrapper/login-wrapper.component';
+import { ResetPasswordConfirmComponent } from './site/login/components/reset-password-confirm/reset-password-confirm.component';
+import { ResetPasswordComponent } from './site/login/components/reset-password/reset-password.component';
+import { UnsupportedBrowserComponent } from './site/login/components/unsupported-browser/unsupported-browser.component';
+
+/**
+ * Global app routing
+ */
+const routes: Routes = [
+    {
+        path: 'login',
+        component: LoginWrapperComponent,
+        children: [
+            { path: '', component: LoginMaskComponent, pathMatch: 'full' },
+            { path: 'reset-password', component: ResetPasswordComponent },
+            { path: 'reset-password-confirm', component: ResetPasswordConfirmComponent },
+            { path: 'legalnotice', component: LoginLegalNoticeComponent },
+            { path: 'privacypolicy', component: LoginPrivacyPolicyComponent },
+            { path: 'unsupported-browser', component: UnsupportedBrowserComponent }
+        ]
+    },
+    {
+        path: 'projector',
+        loadChildren: () =>
+            import('./fullscreen-projector/fullscreen-projector.module').then(m => m.FullscreenProjectorModule),
+        data: { noInterruption: true }
+    },
+    { path: '', loadChildren: () => import('./site/site.module').then(m => m.SiteModule) },
+    { path: '**', redirectTo: '' }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
+    exports: [RouterModule]
+})
+export class AppRoutingModule {}

client/src/app/app.component.html

@@ -0,0 +1,3 @@
+<div class="content">
+    <router-outlet></router-outlet>
+</div>

client/src/app/app.component.scss

@@ -0,0 +1,4 @@
+.content {
+    flex: 1;
+    height: 100vh;
+}

client/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { async, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { AppComponent } from './app.component';
+import { E2EImportsModule } from './../e2e-imports.module';
+import { ServertimeService } from './core/core-services/servertime.service';
+
+describe('AppComponent', () => {
+    let servertimeService, translate;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule]
+        }).compileComponents();
+
+        servertimeService = TestBed.inject(ServertimeService);
+        translate = TestBed.inject(TranslateService);
+        spyOn(servertimeService, 'startScheduler').and.stub();
+        spyOn(translate, 'addLangs').and.stub();
+        spyOn(translate, 'setDefaultLang').and.stub();
+        spyOn(translate, 'getBrowserLang').and.stub();
+        spyOn(translate, 'getLangs').and.returnValue([]);
+        spyOn(translate, 'use').and.stub();
+    }));
+    it('should create the app', fakeAsync(() => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.debugElement.componentInstance;
+        expect(app).toBeTruthy();
+        tick(1000);
+        fixture.whenStable().then(() => {
+            expect(servertimeService.startScheduler).toHaveBeenCalled();
+        });
+    }));
+});

client/src/app/app.component.ts

@@ -0,0 +1,209 @@
+import { ApplicationRef, Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { TranslateService } from '@ngx-translate/core';
+import { filter, take } from 'rxjs/operators';
+
+import { ConfigService } from './core/ui-services/config.service';
+import { ConstantsService } from './core/core-services/constants.service';
+import { CountUsersService } from './core/ui-services/count-users.service';
+import { DataStoreUpgradeService } from './core/core-services/data-store-upgrade.service';
+import { LoadFontService } from './core/ui-services/load-font.service';
+import { LoginDataService } from './core/ui-services/login-data.service';
+import { OperatorService } from './core/core-services/operator.service';
+import { OverlayService } from './core/ui-services/overlay.service';
+import { PingService } from './core/core-services/ping.service';
+import { PrioritizeService } from './core/core-services/prioritize.service';
+import { RoutingStateService } from './core/ui-services/routing-state.service';
+import { ServertimeService } from './core/core-services/servertime.service';
+import { ThemeService } from './core/ui-services/theme.service';
+import { VotingBannerService } from './core/ui-services/voting-banner.service';
+
+declare global {
+    /**
+     * Enhance array with own functions
+     * TODO: Remove once flatMap made its way into official JS/TS (ES 2019?)
+     */
+    interface Array<T> {
+        flatMap(o: any): any[];
+        intersect(a: T[]): T[];
+        mapToObject(f: (item: T) => { [key: string]: any }): { [key: string]: any };
+    }
+
+    interface Set<T> {
+        equals(other: Set<T>): boolean;
+    }
+
+    /**
+     * Enhances the number object to calculate real modulo operations.
+     * (not remainder)
+     */
+    interface Number {
+        modulo(n: number): number;
+    }
+}
+
+/**
+ * Angular's global App Component
+ */
+@Component({
+    selector: 'os-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+    /**
+     * Master-component of all apps.
+     *
+     * Inits the translation service, the operator, the login data and the constants.
+     *
+     * Handles the altering of Array.toString()
+     *
+     * @param translate To set the default language
+     * @param operator To call the constructor of the OperatorService
+     * @param loginDataService to call the constructor of the LoginDataService
+     * @param constantService to call the constructor of the ConstantService
+     * @param servertimeService executes the scheduler early on
+     * @param themeService used to listen to theme-changes
+     * @param countUsersService to call the constructor of the CountUserService
+     * @param configService to call the constructor of the ConfigService
+     * @param loadFontService to call the constructor of the LoadFontService
+     * @param dataStoreUpgradeService
+     */
+    public constructor(
+        translate: TranslateService,
+        appRef: ApplicationRef,
+        servertimeService: ServertimeService,
+        router: Router,
+        operator: OperatorService,
+        loginDataService: LoginDataService,
+        constantsService: ConstantsService, // Needs to be started, so it can register itself to the WebsocketService
+        themeService: ThemeService,
+        overlayService: OverlayService,
+        countUsersService: CountUsersService, // Needed to register itself.
+        configService: ConfigService,
+        loadFontService: LoadFontService,
+        dataStoreUpgradeService: DataStoreUpgradeService, // to start it.
+        prioritizeService: PrioritizeService,
+        pingService: PingService,
+        routingState: RoutingStateService,
+        votingBannerService: VotingBannerService // needed for initialisation
+    ) {
+        // manually add the supported languages
+        translate.addLangs(['en', 'de', 'cs', 'ru']);
+        // this language will be used as a fallback when a translation isn't found in the current language
+        translate.setDefaultLang('en');
+        // get the browsers default language
+        const browserLang = translate.getBrowserLang();
+        // try to use the browser language if it is available. If not, uses english.
+        translate.use(translate.getLangs().includes(browserLang) ? browserLang : 'en');
+
+        // change default JS functions
+        this.overloadArrayFunctions();
+        this.overloadSetFunctions();
+        this.overloadModulo();
+
+        // Wait until the App reaches a stable state.
+        // Required for the Service Worker.
+        appRef.isStable
+            .pipe(
+                // take only the stable state
+                filter(s => s),
+                take(1)
+            )
+            .subscribe(() => servertimeService.startScheduler());
+    }
+
+    private overloadArrayFunctions(): void {
+        Object.defineProperty(Array.prototype, 'toString', {
+            value: function (): string {
+                let string = '';
+                const iterations = Math.min(this.length, 3);
+
+                for (let i = 0; i <= iterations; i++) {
+                    if (i < iterations) {
+                        string += this[i];
+                    }
+
+                    if (i < iterations - 1) {
+                        string += ', ';
+                    } else if (i === iterations && this.length > iterations) {
+                        string += ', ...';
+                    }
+                }
+                return string;
+            },
+            enumerable: false
+        });
+
+        Object.defineProperty(Array.prototype, 'flatMap', {
+            value: function (o: any): any[] {
+                const concatFunction = (x: any, y: any[]) => x.concat(y);
+                const flatMapLogic = (f: any, xs: any) => xs.map(f).reduce(concatFunction, []);
+                return flatMapLogic(o, this);
+            },
+            enumerable: false
+        });
+
+        Object.defineProperty(Array.prototype, 'intersect', {
+            value: function <T>(other: T[]): T[] {
+                let a = this;
+                let b = other;
+                // indexOf to loop over shorter
+                if (b.length > a.length) {
+                    [a, b] = [b, a];
+                }
+                return a.filter(e => b.indexOf(e) > -1);
+            },
+            enumerable: false
+        });
+
+        Object.defineProperty(Array.prototype, 'mapToObject', {
+            value: function <T>(f: (item: T) => { [key: string]: any }): { [key: string]: any } {
+                return this.reduce((aggr, item) => {
+                    const res = f(item);
+                    for (const key in res) {
+                        if (res.hasOwnProperty(key)) {
+                            aggr[key] = res[key];
+                        }
+                    }
+                    return aggr;
+                }, {});
+            },
+            enumerable: false
+        });
+    }
+
+    /**
+     * Adds some functions to Set.
+     */
+    private overloadSetFunctions(): void {
+        Object.defineProperty(Set.prototype, 'equals', {
+            value: function <T>(other: Set<T>): boolean {
+                const difference = new Set(this);
+                for (const elem of other) {
+                    if (difference.has(elem)) {
+                        difference.delete(elem);
+                    } else {
+                        return false;
+                    }
+                }
+                return !difference.size;
+            },
+            enumerable: false
+        });
+    }
+
+    /**
+     * Enhances the number object with a real modulo operation (not remainder).
+     * TODO: Remove this, if the remainder operation is changed to modulo.
+     */
+    private overloadModulo(): void {
+        Object.defineProperty(Number.prototype, 'modulo', {
+            value: function (n: number): number {
+                return ((this % n) + n) % n;
+            },
+            enumerable: false
+        });
+    }
+}

client/src/app/app.module.ts

@@ -0,0 +1,50 @@
+import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ServiceWorkerModule } from '@angular/service-worker';
+
+import { StorageModule } from '@ngx-pwa/local-storage';
+
+import { AppLoadService } from './core/core-services/app-load.service';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { CoreModule } from './core/core.module';
+import { environment } from '../environments/environment';
+import { LoginModule } from './site/login/login.module';
+import { OpenSlidesTranslateModule } from './core/translate/openslides-translate-module';
+import { SlidesModule } from './slides/slides.module';
+
+/**
+ * Returns a function that returns a promis that will be resolved, if all apps are loaded.
+ * @param appLoadService The service that loads the apps.
+ */
+export function AppLoaderFactory(appLoadService: AppLoadService): () => Promise<void> {
+    return () => appLoadService.loadApps();
+}
+
+/**
+ * Global App Module. Keep it as clean as possible.
+ */
+@NgModule({
+    declarations: [AppComponent],
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        HttpClientXsrfModule.withOptions({
+            cookieName: 'OpenSlidesCsrfToken',
+            headerName: 'X-CSRFToken'
+        }),
+        BrowserAnimationsModule,
+        OpenSlidesTranslateModule.forRoot(),
+        AppRoutingModule,
+        CoreModule,
+        LoginModule,
+        ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+        SlidesModule.forRoot(),
+        StorageModule.forRoot({ IDBNoWrap: false })
+    ],
+    providers: [{ provide: APP_INITIALIZER, useFactory: AppLoaderFactory, deps: [AppLoadService], multi: true }],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}

client/src/app/base.component.ts

@@ -0,0 +1,117 @@
+import { Title } from '@angular/platform-browser';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { Permission } from './core/core-services/operator.service';
+
+/**
+ * Provides functionalities that will be used by most components
+ * currently able to set the title with the suffix ' - OpenSlides'
+ *
+ * A BaseComponent is an OpenSlides Component.
+ * Components in the 'Side'- or 'projector' Folder are BaseComponents
+ */
+export abstract class BaseComponent {
+    /**
+     * To check permissions in templates using permission.[...]
+     */
+    public permission = Permission;
+
+    /**
+     * To manipulate the browser title bar, adds the Suffix "OpenSlides"
+     *
+     * Might be a config variable later at some point
+     */
+    private titleSuffix = ' - OpenSlides';
+
+    /**
+     * Holds the coordinates where a swipe gesture was used
+     */
+    protected swipeCoord?: [number, number];
+
+    /**
+     * Holds the time when the user was swiping
+     */
+    protected swipeTime?: number;
+
+    /**
+     * Determine to display a save hint
+     */
+    public saveHint: boolean;
+
+    /**
+     * Settings for the TinyMCE editor selector
+     */
+    public tinyMceSettings = {
+        base_url: '/tinymce', // Root for resources
+        suffix: '.min', // Suffix to use when loading resources
+        theme: 'silver',
+        language: null,
+        language_url: null,
+        inline: false,
+        statusbar: false,
+        browser_spellcheck: true,
+        image_advtab: true,
+        image_description: false,
+        link_title: false,
+        height: 320,
+        plugins: `autolink charmap code fullscreen image imagetools
+            lists link paste searchreplace`,
+        menubar: false,
+        contextmenu: false,
+        toolbar: `styleselect | bold italic underline strikethrough |
+            forecolor backcolor removeformat | bullist numlist |
+            link image charmap | code fullscreen`,
+        mobile: {
+            theme: 'mobile',
+            plugins: ['autosave', 'lists', 'autolink']
+        },
+        relative_urls: false,
+        remove_script_host: true
+    };
+
+    public constructor(protected titleService: Title, protected translate: TranslateService) {
+        this.tinyMceSettings.language_url = '/assets/tinymce/langs/' + this.translate.currentLang + '.js';
+        this.tinyMceSettings.language = this.translate.currentLang;
+    }
+
+    /**
+     * Set the title in web browser using angulars TitleService
+     * @param prefix The title prefix. Should be translated here.
+     */
+    public setTitle(prefix: string): void {
+        const translatedPrefix = this.translate.instant(prefix);
+        this.titleService.setTitle(translatedPrefix + this.titleSuffix);
+    }
+
+    /**
+     * Helper for indexed *ngFor components
+     *
+     * @param index
+     */
+    public trackByIndex(index: number): number {
+        return index;
+    }
+
+    /**
+     * TinyMCE Init callback. Used for certain mobile editors
+     * @param event
+     */
+    protected onInitTinyMce(event: any): void {
+        console.log('tinyMCE event: ', event);
+
+        if (event.event.target.settings.theme === 'mobile') {
+            console.log('is mobile editor');
+            this.saveHint = true;
+        } else {
+            console.log('is no mobile editor');
+            event.editor.focus();
+        }
+    }
+
+    protected onLeaveTinyMce(event: any): void {
+        console.log('tinyevent:', event.event.type);
+        this.saveHint = false;
+        // console.log("event: ", event.event.type);
+    }
+}

client/src/app/core/core-services/app-load.service.spec.ts

@@ -0,0 +1,16 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { AppLoadService } from './app-load.service';
+import { E2EImportsModule } from '../../../e2e-imports.module';
+
+describe('AppLoadService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [AppLoadService]
+        });
+    });
+    it('should be created', inject([AppLoadService], (service: AppLoadService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/app-load.service.ts

@@ -0,0 +1,113 @@
+import { Injectable, Injector } from '@angular/core';
+
+import { AgendaAppConfig } from '../../site/agenda/agenda.config';
+import { AppConfig, ModelEntry, SearchableModelEntry } from '../definitions/app-config';
+import { BaseRepository } from 'app/core/repositories/base-repository';
+import { HistoryAppConfig } from 'app/site/history/history.config';
+import { ProjectorAppConfig } from 'app/site/projector/projector.config';
+import { TopicsAppConfig } from 'app/site/topics/topics.config';
+import { AssignmentsAppConfig } from '../../site/assignments/assignments.config';
+import { CollectionStringMapperService } from './collection-string-mapper.service';
+import { CommonAppConfig } from '../../site/common/common.config';
+import { ConfigAppConfig } from '../../site/config/config.config';
+import { ServicesToLoadOnAppsLoaded } from '../core.module';
+import { FallbackRoutesService } from './fallback-routes.service';
+import { MainMenuService } from './main-menu.service';
+import { MediafileAppConfig } from '../../site/mediafiles/mediafile.config';
+import { MotionsAppConfig } from '../../site/motions/motions.config';
+import { OnAfterAppsLoaded } from '../definitions/on-after-apps-loaded';
+import { SearchService } from '../ui-services/search.service';
+import { isSearchable } from '../../site/base/searchable';
+import { TagAppConfig } from '../../site/tags/tag.config';
+import { UsersAppConfig } from '../../site/users/users.config';
+
+/**
+ * A list of all app configurations of all delivered apps.
+ */
+const appConfigs: AppConfig[] = [
+    CommonAppConfig,
+    ConfigAppConfig,
+    AgendaAppConfig,
+    AssignmentsAppConfig,
+    MotionsAppConfig,
+    MediafileAppConfig,
+    TagAppConfig,
+    UsersAppConfig,
+    HistoryAppConfig,
+    ProjectorAppConfig,
+    TopicsAppConfig
+];
+
+/**
+ * Handles loading of all apps during the bootup process.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class AppLoadService {
+    /**
+     * Constructor.
+     *
+     * @param modelMapper
+     * @param mainMenuService
+     * @param searchService
+     */
+    public constructor(
+        private modelMapper: CollectionStringMapperService,
+        private mainMenuService: MainMenuService,
+        private searchService: SearchService,
+        private injector: Injector,
+        private fallbackRoutesService: FallbackRoutesService
+    ) {}
+
+    public async loadApps(): Promise<void> {
+        const repositories: OnAfterAppsLoaded[] = [];
+        appConfigs.forEach((config: AppConfig) => {
+            if (config.models) {
+                config.models.forEach(entry => {
+                    let repository: BaseRepository<any, any, any> = null;
+                    repository = this.injector.get(entry.repository);
+                    repositories.push(repository);
+                    this.modelMapper.registerCollectionElement(entry.model, entry.viewModel, repository);
+                    if (this.isSearchableModelEntry(entry)) {
+                        this.searchService.registerModel(
+                            entry.model.COLLECTIONSTRING,
+                            repository,
+                            entry.searchOrder,
+                            entry.openInNewTab
+                        );
+                    }
+                });
+            }
+            if (config.mainMenuEntries) {
+                this.mainMenuService.registerEntries(config.mainMenuEntries);
+                this.fallbackRoutesService.registerFallbackEntries(config.mainMenuEntries);
+            }
+        });
+
+        // Collect all services to notify for the OnAfterAppsLoadedHook
+        const onAfterAppsLoadedItems = ServicesToLoadOnAppsLoaded.map(service => {
+            return this.injector.get(service);
+        }).concat(repositories);
+
+        // Notify them.
+        onAfterAppsLoadedItems.forEach(repo => {
+            repo.onAfterAppsLoaded();
+        });
+    }
+
+    private isSearchableModelEntry(entry: ModelEntry | SearchableModelEntry): entry is SearchableModelEntry {
+        if ((<SearchableModelEntry>entry).searchOrder !== undefined) {
+            // We need to double check, because Typescipt cannot check contructors. If typescript could differentiate
+            // between  (ModelConstructor<BaseModel>) and (new (...args: any[]) => (BaseModel & Searchable)),
+            // we would not have to check if the result of the contructor (the model instance) is really a searchable.
+            if (!isSearchable(new entry.viewModel())) {
+                throw Error(
+                    `Wrong configuration for ${entry.model.COLLECTIONSTRING}: you gave a searchOrder, but the model is not searchable.`
+                );
+            }
+            return true;
+        }
+        return false;
+    }
+}

client/src/app/core/core-services/auth-guard.service.ts

@@ -0,0 +1,91 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router } from '@angular/router';
+
+import { FallbackRoutesService } from './fallback-routes.service';
+import { OpenSlidesService } from './openslides.service';
+import { OperatorService, Permission } from './operator.service';
+
+/**
+ * Classical Auth-Guard. Checks if the user has to correct permissions to enter a page, and forwards to login if not.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthGuard implements CanActivate, CanActivateChild {
+    /**
+     * Constructor
+     *
+     * @param router To navigate to a target URL
+     * @param operator Asking for the required permission
+     * @param openSlidesService Handle OpenSlides functions
+     */
+    public constructor(
+        private router: Router,
+        private operator: OperatorService,
+        private openSlidesService: OpenSlidesService,
+        private fallbackRoutesService: FallbackRoutesService
+    ) {}
+
+    /**
+     * Checks of the operator has the required permission to see the state.
+     *
+     * One can set extra data to the state with `data: {basePerm: '<perm>'}` or
+     * `data: {basePerm: ['<perm1>', '<perm2>']}` to lock the access to users
+     * only with the given permission(s).
+     *
+     * @param route the route the user wants to navigate to
+     */
+    public canActivate(route: ActivatedRouteSnapshot): boolean {
+        const basePerm: Permission | Permission[] = route.data.basePerm;
+
+        if (!basePerm) {
+            return true;
+        } else if (basePerm instanceof Array) {
+            return this.operator.hasPerms(...basePerm);
+        } else {
+            return this.operator.hasPerms(basePerm);
+        }
+    }
+
+    /**
+     * Calls {@method canActivate}. Should have the same logic.
+     *
+     * @param route the route the user wants to navigate to
+     */
+    public async canActivateChild(route: ActivatedRouteSnapshot): Promise<boolean> {
+        await this.operator.loaded;
+
+        if (this.canActivate(route)) {
+            return true;
+        } else {
+            this.handleForbiddenRoute(route);
+        }
+    }
+
+    /**
+     * Handles a forbidden route. If the route is "/" (start page), It is tried to
+     * use a fallback route provided by AuthGuardFallbackRoutes. If this won't work
+     * or it wasn't the start page in the first place, the operator will be redirected
+     * to an error page.
+     */
+    private handleForbiddenRoute(route: ActivatedRouteSnapshot): void {
+        if (route.url.length === 0) {
+            // start page
+            const fallbackRoute = this.fallbackRoutesService.getFallbackRoute();
+            if (fallbackRoute) {
+                this.router.navigate([fallbackRoute]);
+                return;
+            }
+        }
+        // Fall-through: If the url is the start page, but no other fallback was found,
+        // navigate to the error page.
+
+        this.openSlidesService.redirectUrl = location.pathname;
+        this.router.navigate(['/error'], {
+            queryParams: {
+                error: 'Authentication Error',
+                msg: route.data.basePerm
+            }
+        });
+    }
+}

client/src/app/core/core-services/auth.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+import { E2EImportsModule } from '../../../e2e-imports.module';
+
+describe('ConfigService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [AuthService]
+        });
+    });
+
+    it('should be created', inject([AuthService], (service: AuthService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/auth.service.ts

@@ -0,0 +1,124 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { environment } from 'environments/environment';
+
+import { OperatorService, WhoAmI } from 'app/core/core-services/operator.service';
+import { DEFAULT_AUTH_TYPE, UserAuthType } from 'app/shared/models/users/user';
+import { DataStoreService } from './data-store.service';
+import { HttpService } from './http.service';
+import { OpenSlidesService } from './openslides.service';
+import { StorageService } from './storage.service';
+
+/**
+ * Authenticates an OpenSlides user with username and password
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthService {
+    /**
+     * Initializes the httpClient and the {@link OperatorService}.
+     *
+     * @param http HttpService to send requests to the server
+     * @param operator Who is using OpenSlides
+     * @param OpenSlides The openslides service
+     * @param router To navigate
+     */
+    public constructor(
+        private http: HttpService,
+        private operator: OperatorService,
+        private OpenSlides: OpenSlidesService,
+        private router: Router,
+        private DS: DataStoreService,
+        private storageService: StorageService
+    ) {}
+
+    /**
+     * Try to log in a user with a given auth type
+     *
+     * - Type "default": username and password needed; the earlySuccessCallback will be called.
+     * - Type "saml": The windows location will be changed to the single-sign-on service initiator.
+     */
+    public async login(
+        authType: UserAuthType,
+        username: string,
+        password: string,
+        earlySuccessCallback: () => void
+    ): Promise<void> {
+        if (authType === 'default') {
+            const user = {
+                username: username,
+                password: password
+            };
+            const response = await this.http.post<WhoAmI>(environment.urlPrefix + '/users/login/', user);
+            earlySuccessCallback();
+            await this.OpenSlides.shutdown();
+            await this.operator.setWhoAmI(response);
+            await this.OpenSlides.afterLoginBootup(response.user_id);
+            await this.redirectUser(response.user_id);
+        } else if (authType === 'saml') {
+            await this.operator.clearWhoAmIFromStorage(); // This is important:
+            // Then returning to the page, we do not want to have anything cached so a
+            // fresh whoami is executed.
+            window.location.href = environment.urlPrefix + '/saml/?sso'; // Bye
+        } else {
+            throw new Error(`Unsupported auth type "${authType}"`);
+        }
+    }
+
+    /**
+     * Redirects the user to the page where he came from. Boots OpenSlides,
+     * if it wasn't done before.
+     */
+    public async redirectUser(userId: number): Promise<void> {
+        if (!this.OpenSlides.isBooted) {
+            await this.OpenSlides.afterLoginBootup(userId);
+        }
+
+        let redirect = this.OpenSlides.redirectUrl ? this.OpenSlides.redirectUrl : '/';
+
+        const excludedUrls = ['login'];
+        if (excludedUrls.some(url => redirect.includes(url))) {
+            redirect = '/';
+        }
+        this.router.navigate([redirect]);
+    }
+
+    /**
+     * Login for guests.
+     */
+    public async guestLogin(): Promise<void> {
+        this.redirectUser(null);
+    }
+
+    /**
+     * Logout function for both the client and the server.
+     *
+     * Will clear the datastore, update the current operator and
+     * send a `post`-request to `/apps/users/logout/'`. Restarts OpenSlides.
+     */
+    public async logout(): Promise<void> {
+        const authType = this.operator.authType.getValue();
+        if (authType === DEFAULT_AUTH_TYPE) {
+            let response = null;
+            try {
+                response = await this.http.post<WhoAmI>(environment.urlPrefix + '/users/logout/', {});
+            } catch (e) {
+                // We do nothing on failures. Reboot OpenSlides anyway.
+            }
+            this.router.navigate(['/']);
+            await this.storageService.clear();
+            await this.DS.clear();
+            await this.operator.setWhoAmI(response);
+            await this.OpenSlides.reboot();
+        } else if (authType === 'saml') {
+            await this.storageService.clear();
+            await this.DS.clear();
+            await this.operator.setWhoAmI(null);
+            window.location.href = environment.urlPrefix + '/saml/?slo'; // Bye
+        } else {
+            throw new Error(`Unsupported auth type "${authType}"`);
+        }
+    }
+}

client/src/app/core/core-services/autoupdate.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { AutoupdateService } from './autoupdate.service';
+import { E2EImportsModule } from '../../../e2e-imports.module';
+
+describe('AutoupdateService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [AutoupdateService]
+        });
+    });
+
+    it('should be created', inject([AutoupdateService], (service: AutoupdateService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/autoupdate.service.ts

@@ -0,0 +1,221 @@
+import { Injectable } from '@angular/core';
+
+import { BaseModel } from '../../shared/models/base/base-model';
+import { CollectionStringMapperService } from './collection-string-mapper.service';
+import { DataStoreService, DataStoreUpdateManagerService } from './data-store.service';
+import { Mutex } from '../promises/mutex';
+import { WebsocketService, WEBSOCKET_ERROR_CODES } from './websocket.service';
+
+export interface AutoupdateFormat {
+    /**
+     * All changed (and created) items as their full/restricted data grouped by their collection.
+     */
+    changed: {
+        [collectionString: string]: object[];
+    };
+
+    /**
+     * All deleted items (by id) grouped by their collection.
+     */
+    deleted: {
+        [collectionString: string]: number[];
+    };
+
+    /**
+     * The lower change id bond for this autoupdate
+     */
+    from_change_id: number;
+
+    /**
+     * The upper change id bound for this autoupdate
+     */
+    to_change_id: number;
+
+    /**
+     * Flag, if this autoupdate contains all data. If so, the DS needs to be resetted.
+     */
+    all_data: boolean;
+}
+
+export function isAutoupdateFormat(obj: any): obj is AutoupdateFormat {
+    const format = obj as AutoupdateFormat;
+    return (
+        obj &&
+        typeof obj === 'object' &&
+        format.changed !== undefined &&
+        format.deleted !== undefined &&
+        format.from_change_id !== undefined &&
+        format.to_change_id !== undefined &&
+        format.all_data !== undefined
+    );
+}
+
+/**
+ * Handles the initial update and automatic updates using the {@link WebsocketService}
+ * Incoming objects, usually BaseModels, will be saved in the dataStore (`this.DS`)
+ * This service usually creates all models
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class AutoupdateService {
+    private mutex = new Mutex();
+
+    /**
+     * Constructor to create the AutoupdateService. Calls the constructor of the parent class.
+     * @param websocketService
+     * @param DS
+     * @param modelMapper
+     */
+    public constructor(
+        private websocketService: WebsocketService,
+        private DS: DataStoreService,
+        private modelMapper: CollectionStringMapperService,
+        private DSUpdateManager: DataStoreUpdateManagerService
+    ) {
+        this.websocketService.getOberservable<AutoupdateFormat>('autoupdate').subscribe(response => {
+            this.storeResponse(response);
+        });
+
+        // Check for too high change id-errors. If this happens, reset the DS and get fresh data.
+        this.websocketService.errorResponseObservable.subscribe(error => {
+            if (error.code === WEBSOCKET_ERROR_CODES.CHANGE_ID_TOO_HIGH) {
+                this.doFullUpdate();
+            }
+        });
+    }
+
+    /**
+     * Handle the answer of incoming data via {@link WebsocketService}.
+     *
+     * Detects the Class of an incomming model, creates a new empty object and assigns
+     * the data to it using the deserialize function. Also models that are flagged as deleted
+     * will be removed from the data store.
+     *
+     * Handles the change ids of all autoupdates.
+     */
+    private async storeResponse(autoupdate: AutoupdateFormat): Promise<void> {
+        const unlock = await this.mutex.lock();
+        if (autoupdate.all_data) {
+            await this.storeAllData(autoupdate);
+        } else {
+            await this.storePartialAutoupdate(autoupdate);
+        }
+        unlock();
+    }
+
+    /**
+     * Stores all data from the autoupdate. This means, that the DS is resetted and filled with just the
+     * given data from the autoupdate.
+     * @param autoupdate The autoupdate
+     */
+    private async storeAllData(autoupdate: AutoupdateFormat): Promise<void> {
+        let elements: BaseModel[] = [];
+        Object.keys(autoupdate.changed).forEach(collection => {
+            elements = elements.concat(this.mapObjectsToBaseModels(collection, autoupdate.changed[collection]));
+        });
+
+        const updateSlot = await this.DSUpdateManager.getNewUpdateSlot(this.DS);
+        await this.DS.set(elements, autoupdate.to_change_id);
+        this.DSUpdateManager.commit(updateSlot, autoupdate.to_change_id, true);
+    }
+
+    /**
+     * handles a normal autoupdate that is not a full update (all_data=false).
+     * @param autoupdate The autoupdate
+     */
+    private async storePartialAutoupdate(autoupdate: AutoupdateFormat): Promise<void> {
+        const maxChangeId = this.DS.maxChangeId;
+
+        if (autoupdate.from_change_id <= maxChangeId && autoupdate.to_change_id <= maxChangeId) {
+            console.log(`Ignore. Clients change id: ${maxChangeId}`);
+            return; // Ignore autoupdates, that lay full behind our changeid.
+        }
+
+        // Normal autoupdate
+        if (autoupdate.from_change_id <= maxChangeId + 1 && autoupdate.to_change_id > maxChangeId) {
+            await this.injectAutupdateIntoDS(autoupdate, true);
+        } else {
+            // autoupdate fully in the future. we are missing something!
+            console.log('Autoupdate in the future', maxChangeId, autoupdate.from_change_id, autoupdate.to_change_id);
+            this.requestChanges();
+        }
+    }
+
+    public async injectAutoupdateIgnoreChangeId(autoupdate: AutoupdateFormat): Promise<void> {
+        const unlock = await this.mutex.lock();
+        console.debug('inject autoupdate', autoupdate);
+        await this.injectAutupdateIntoDS(autoupdate, false);
+        unlock();
+    }
+
+    private async injectAutupdateIntoDS(autoupdate: AutoupdateFormat, flush: boolean): Promise<void> {
+        const updateSlot = await this.DSUpdateManager.getNewUpdateSlot(this.DS);
+
+        // Delete the removed objects from the DataStore
+        for (const collection of Object.keys(autoupdate.deleted)) {
+            await this.DS.remove(collection, autoupdate.deleted[collection]);
+        }
+
+        // Add the objects to the DataStore.
+        for (const collection of Object.keys(autoupdate.changed)) {
+            await this.DS.add(this.mapObjectsToBaseModels(collection, autoupdate.changed[collection]));
+        }
+
+        if (flush) {
+            await this.DS.flushToStorage(autoupdate.to_change_id);
+        }
+
+        this.DSUpdateManager.commit(updateSlot, autoupdate.to_change_id);
+    }
+
+    /**
+     * Creates baseModels for each plain object. If the collection is not registered,
+     * A console error will be issued and an empty list returned.
+     *
+     * @param collection The collection all models have to be from.
+     * @param models All models that should be mapped to BaseModels
+     * @returns A list of basemodels constructed from the given models.
+     */
+    private mapObjectsToBaseModels(collection: string, models: object[]): BaseModel[] {
+        if (this.modelMapper.isCollectionRegistered(collection)) {
+            const targetClass = this.modelMapper.getModelConstructor(collection);
+            return models.map(model => new targetClass(model));
+        } else {
+            console.error(`Unregistered collection "${collection}". Ignore it.`);
+            return [];
+        }
+    }
+
+    /**
+     * Sends a WebSocket request to the Server with the maxChangeId of the DataStore.
+     * The server should return an autoupdate with all new data.
+     */
+    public requestChanges(): void {
+        console.log(`requesting changed objects with DS max change id ${this.DS.maxChangeId}`);
+        this.websocketService.send('getElements', { change_id: this.DS.maxChangeId });
+    }
+
+    /**
+     * Does a full update: Requests all data from the server and sets the DS to the fresh data.
+     */
+    public async doFullUpdate(): Promise<void> {
+        const oldChangeId = this.DS.maxChangeId;
+        const response = await this.websocketService.sendAndGetResponse<{}, AutoupdateFormat>('getElements', {});
+
+        const updateSlot = await this.DSUpdateManager.getNewUpdateSlot(this.DS);
+        let allModels: BaseModel[] = [];
+        for (const collection of Object.keys(response.changed)) {
+            if (this.modelMapper.isCollectionRegistered(collection)) {
+                allModels = allModels.concat(this.mapObjectsToBaseModels(collection, response.changed[collection]));
+            } else {
+                console.error(`Unregistered collection "${collection}". Ignore it.`);
+            }
+        }
+
+        await this.DS.set(allModels, response.to_change_id);
+        this.DSUpdateManager.commit(updateSlot, response.to_change_id, true);
+
+        console.log(`Full update done from ${oldChangeId} to ${response.to_change_id}`);
+    }
+}

client/src/app/core/core-services/collection-string-mapper.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { CollectionStringMapperService } from './collection-string-mapper.service';
+import { E2EImportsModule } from '../../../e2e-imports.module';
+
+describe('CollectionStringMapperService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [CollectionStringMapperService]
+        });
+    });
+
+    it('should be created', inject([CollectionStringMapperService], (service: CollectionStringMapperService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/collection-string-mapper.service.ts

@@ -0,0 +1,139 @@
+import { Injectable } from '@angular/core';
+
+import { BaseRepository } from 'app/core/repositories/base-repository';
+import { BaseViewModel, TitleInformation, ViewModelConstructor } from 'app/site/base/base-view-model';
+import { BaseModel, ModelConstructor } from '../../shared/models/base/base-model';
+
+/**
+ * Unifies the ModelConstructor and ViewModelConstructor.
+ */
+interface UnifiedConstructors {
+    COLLECTIONSTRING: string;
+    new (...args: any[]): any;
+}
+
+/**
+ * Every types supported: (View)ModelConstructors, repos and collectionstrings.
+ */
+type TypeIdentifier = UnifiedConstructors | BaseRepository<any, any, any> | string;
+
+type CollectionStringMappedTypes = [
+    ModelConstructor<BaseModel>,
+    ViewModelConstructor<BaseViewModel>,
+    BaseRepository<BaseViewModel<any>, BaseModel<any>, TitleInformation>
+];
+
+/**
+ * Registeres the mapping between collection strings, models constructors, view
+ * model constructors and repositories.
+ * All models need to be registered!
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class CollectionStringMapperService {
+    /**
+     * Maps collection strings to mapping entries
+     */
+    private collectionStringMapping: {
+        [collectionString: string]: CollectionStringMappedTypes;
+    } = {};
+
+    public constructor() {}
+
+    /**
+     * Registers the combination of a collection string, model, view model and repository
+     * @param collectionString
+     * @param model
+     */
+    public registerCollectionElement<V extends BaseViewModel<M>, M extends BaseModel>(
+        model: ModelConstructor<M>,
+        viewModel: ViewModelConstructor<V>,
+        repository: BaseRepository<V, M, TitleInformation>
+    ): void {
+        this.collectionStringMapping[model.COLLECTIONSTRING] = [model, viewModel, repository];
+    }
+
+    /**
+     * @param obj The object to get the collection string from.
+     * @returns the collectionstring
+     */
+    public getCollectionString(obj: TypeIdentifier): string {
+        if (typeof obj === 'string') {
+            return obj;
+        } else {
+            return obj.COLLECTIONSTRING;
+        }
+    }
+
+    /**
+     * @returns true, if the given collection is known by this service.
+     */
+    public isCollectionRegistered(collectionString: string): boolean {
+        return !!this.collectionStringMapping[collectionString];
+    }
+
+    /**
+     * @param obj The object to get the model constructor from.
+     * @returns the model constructor
+     */
+    public getModelConstructor<M extends BaseModel>(obj: TypeIdentifier): ModelConstructor<M> | null {
+        if (this.isCollectionRegistered(this.getCollectionString(obj))) {
+            return this.collectionStringMapping[this.getCollectionString(obj)][0] as ModelConstructor<M>;
+        }
+    }
+
+    /**
+     * @param obj The object to get the view model constructor from.
+     * @returns the view model constructor
+     */
+    public getViewModelConstructor<M extends BaseViewModel>(obj: TypeIdentifier): ViewModelConstructor<M> | null {
+        if (this.isCollectionRegistered(this.getCollectionString(obj))) {
+            return this.collectionStringMapping[this.getCollectionString(obj)][1] as ViewModelConstructor<M>;
+        }
+    }
+
+    /**
+     * @param obj The object to get the repository from.
+     * @returns the repository
+     */
+    public getRepository<V extends BaseViewModel, M extends BaseModel, T extends TitleInformation>(
+        obj: TypeIdentifier
+    ): BaseRepository<V & T, M, T> | null {
+        if (this.isCollectionRegistered(this.getCollectionString(obj))) {
+            return this.collectionStringMapping[this.getCollectionString(obj)][2] as BaseRepository<V & T, M, T>;
+        }
+    }
+
+    /**
+     * @returns all registered repositories.
+     */
+    public getAllRepositories(): BaseRepository<any, any, any>[] {
+        return Object.values(this.collectionStringMapping).map((types: CollectionStringMappedTypes) => types[2]);
+    }
+
+    /**
+     * Validates the given element id. It must have the form `<collection>:<id>`, with
+     * <collection> being a registered collection and the id a valid integer greater then 0.
+     *
+     * @param elementId The element id.
+     * @returns true, if the element id is valid.
+     */
+    public isElementIdValid(elementId: any): boolean {
+        if (!elementId || typeof elementId !== 'string') {
+            return false;
+        }
+
+        const splitted = elementId.split(':');
+        if (splitted.length !== 2) {
+            return false;
+        }
+
+        const id = parseInt(splitted[1], 10);
+        if (isNaN(id) || id <= 0) {
+            return false;
+        }
+
+        return Object.keys(this.collectionStringMapping).some(collection => collection === splitted[0]);
+    }
+}

client/src/app/core/core-services/constants.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { ConstantsService } from './constants.service';
+import { E2EImportsModule } from '../../../e2e-imports.module';
+
+describe('ConstantsService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [ConstantsService]
+        });
+    });
+
+    it('should be created', inject([ConstantsService], (service: ConstantsService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/constants.service.ts

@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core';
+
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+import { WebsocketService } from './websocket.service';
+
+/**
+ * constants have a key associated with the data.
+ */
+interface Constants {
+    [key: string]: any;
+}
+
+/**
+ * Get constants from the server.
+ *
+ * @example
+ * ```ts
+ * this.constantsService.get('Settings').subscribe(constant => {
+ *     console.log(constant);
+ * });
+ * ```
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class ConstantsService {
+    /**
+     * The constants
+     */
+    private constants: Constants = {};
+
+    /**
+     * Pending requests will be notified by these subjects, one per key.
+     */
+    private subjects: { [key: string]: BehaviorSubject<any> } = {};
+
+    /**
+     * @param websocketService
+     */
+    public constructor(private websocketService: WebsocketService) {
+        // The hook for recieving constants.
+        websocketService.getOberservable<Constants>('constants').subscribe(constants => {
+            this.constants = constants;
+            Object.keys(this.subjects).forEach(key => {
+                this.subjects[key].next(this.constants[key]);
+            });
+        });
+
+        // We can request constants, if the websocket connection opens.
+        // On retries, the `refresh()` method is called by the OpenSlidesService, so
+        // here we do not need to take care about this.
+        websocketService.noRetryConnectEvent.subscribe(() => {
+            this.refresh();
+        });
+    }
+
+    /**
+     * Get the constant named by key.
+     * @param key The constant to get.
+     */
+    public get<T>(key: string): Observable<T> {
+        if (!this.subjects[key]) {
+            this.subjects[key] = new BehaviorSubject<any>(this.constants[key]);
+        }
+        return this.subjects[key].asObservable().pipe(filter(x => !!x));
+    }
+
+    /**
+     * Refreshed the constants
+     */
+    public refresh(): Promise<void> {
+        if (!this.websocketService.isConnected) {
+            return;
+        }
+        this.websocketService.send('constants', {});
+    }
+}

client/src/app/core/core-services/data-send.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { DataSendService } from './data-send.service';
+import { E2EImportsModule } from '../../../e2e-imports.module';
+
+describe('DataSendService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [DataSendService]
+        });
+    });
+
+    it('should be created', inject([DataSendService], (service: DataSendService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/data-send.service.ts

@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+
+import { BaseModel } from '../../shared/models/base/base-model';
+import { HttpService } from './http.service';
+import { Identifiable } from '../../shared/models/base/identifiable';
+
+/**
+ * Send data back to server. Cares about the right REST routes.
+ *
+ * Contrast to dataStore service
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class DataSendService {
+    /**
+     * Construct a DataSendService
+     *
+     * @param httpService The HTTP Service
+     */
+    public constructor(private httpService: HttpService) {}
+
+    /**
+     * Sends a post request with the model to the server to create it.
+     *
+     * @param model The model to create.
+     */
+    public async createModel(model: BaseModel): Promise<Identifiable> {
+        const restPath = `/rest/${model.collectionString}/`;
+        return await this.httpService.post<Identifiable>(restPath, model);
+    }
+
+    /**
+     * Function to fully update a model on the server.
+     *
+     * @param model The model that is meant to be changed.
+     */
+    public async updateModel(model: BaseModel): Promise<void> {
+        const restPath = `/rest/${model.collectionString}/${model.id}/`;
+        await this.httpService.put(restPath, model);
+    }
+
+    /**
+     * Updates a model partially on the server.
+     *
+     * @param model The model to partially update.
+     */
+    public async partialUpdateModel(model: BaseModel): Promise<void> {
+        const restPath = `/rest/${model.collectionString}/${model.id}/`;
+        await this.httpService.patch(restPath, model);
+    }
+
+    /**
+     * Deletes the given model on the server.
+     *
+     * @param model the model that shall be deleted.
+     */
+    public async deleteModel(model: BaseModel): Promise<void> {
+        const restPath = `/rest/${model.collectionString}/${model.id}/`;
+        await this.httpService.delete(restPath);
+    }
+}

client/src/app/core/core-services/data-store-upgrade.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { DataStoreUpgradeService } from './data-store-upgrade.service';
+import { E2EImportsModule } from '../../../e2e-imports.module';
+
+describe('DataStoreUpgradeService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [DataStoreUpgradeService]
+        });
+    });
+
+    it('should be created', inject([DataStoreUpgradeService], (service: DataStoreUpgradeService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/data-store-upgrade.service.ts

@@ -0,0 +1,91 @@
+import { Injectable } from '@angular/core';
+
+import { BehaviorSubject } from 'rxjs';
+
+import { AutoupdateService } from './autoupdate.service';
+import { ConstantsService } from './constants.service';
+import { StorageService } from './storage.service';
+
+interface SchemaVersion {
+    db: string;
+    config: number;
+    migration: number;
+}
+
+function isSchemaVersion(obj: any): obj is SchemaVersion {
+    if (!obj || typeof obj !== 'object') {
+        return false;
+    }
+    return obj.db !== undefined && obj.config !== undefined && obj.migration !== undefined;
+}
+
+const SCHEMA_VERSION = 'SchemaVersion';
+
+/**
+ * Manages upgrading the DataStore, if the migration version from the server is higher than the current one.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class DataStoreUpgradeService {
+    /**
+     * Notify, when upgrade has checked.
+     */
+    public readonly upgradeChecked = new BehaviorSubject(false);
+
+    /**
+     * @param autoupdateService
+     * @param constantsService
+     * @param storageService
+     */
+    public constructor(
+        private autoupdateService: AutoupdateService,
+        private constantsService: ConstantsService,
+        private storageService: StorageService
+    ) {
+        // Prevent the schema version to be cleard. This is important
+        // after a reset from OpenSlides, because the complete data is
+        // queried from the server and we do not want also to trigger a reload
+        // by changing the schema from null -> <schema>.
+        this.storageService.addNoClearKey(SCHEMA_VERSION);
+
+        this.constantsService
+            .get<SchemaVersion>(SCHEMA_VERSION)
+            .subscribe(serverVersion => this.checkForUpgrade(serverVersion));
+    }
+
+    public async checkForUpgrade(serverVersion: SchemaVersion): Promise<boolean> {
+        this.upgradeChecked.next(false);
+        console.log('Server schema version:', serverVersion);
+        const clientVersion = await this.storageService.get<SchemaVersion>(SCHEMA_VERSION);
+        await this.storageService.set(SCHEMA_VERSION, serverVersion);
+
+        let doUpgrade = false;
+        if (isSchemaVersion(clientVersion)) {
+            if (clientVersion.db !== serverVersion.db) {
+                console.log(`\tDB id changed from ${clientVersion.db} to ${serverVersion.db}`);
+                doUpgrade = true;
+            }
+            if (clientVersion.config !== serverVersion.config) {
+                console.log(`\tConfig changed from ${clientVersion.config} to ${serverVersion.config}`);
+                doUpgrade = true;
+            }
+            if (clientVersion.migration !== serverVersion.migration) {
+                console.log(`\tMigration changed from ${clientVersion.migration} to ${serverVersion.migration}`);
+                doUpgrade = true;
+            }
+        } else {
+            console.log('\tNo client schema version.');
+            doUpgrade = true;
+        }
+
+        if (doUpgrade) {
+            console.log('\t-> In result of a schema version change: Do full update.');
+            await this.autoupdateService.doFullUpdate();
+        } else {
+            console.log('\t-> No upgrade needed.');
+        }
+        this.upgradeChecked.next(true);
+        return doUpgrade;
+    }
+}

client/src/app/core/core-services/data-store.service.spec.ts

@@ -0,0 +1,11 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataStoreService } from './data-store.service';
+
+describe('DS', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [DataStoreService]
+        });
+    });
+});

client/src/app/core/core-services/data-store.service.ts

@@ -0,0 +1,676 @@
+import { EventEmitter, Injectable } from '@angular/core';
+
+import { Observable, Subject } from 'rxjs';
+
+import { BaseModel, ModelConstructor } from '../../shared/models/base/base-model';
+import { CollectionStringMapperService } from './collection-string-mapper.service';
+import { Deferred } from '../promises/deferred';
+import { RelationCacheService } from './relation-cache.service';
+import { StorageService } from './storage.service';
+
+/**
+ * Represents information about a deleted model.
+ *
+ * As the model doesn't exist anymore, just the former id and collection is known.
+ */
+export interface DeletedInformation {
+    collection: string;
+    id: number;
+}
+
+export interface CollectionIds {
+    [collection: string]: number[];
+}
+
+/**
+ * Helper class for collecting data during the update phase of the DataStore.
+ */
+export class UpdateSlot {
+    /**
+     * Count instnaces of this class to easily compare them.
+     */
+    private static ID_COUTNER = 1;
+
+    /**
+     * Mapping of changed model ids to their collection.
+     */
+    private changedModels: CollectionIds = {};
+
+    /**
+     * Mapping of deleted models to their collection.
+     */
+    private deletedModels: CollectionIds = {};
+
+    /**
+     * The object's id.
+     */
+    private _id: number;
+
+    /**
+     * @param DS Carries the DataStore: TODO (see below `DataStoreUpdateManagerService.getNewUpdateSlot`)
+     */
+    public constructor(public readonly DS: DataStoreService) {
+        this._id = UpdateSlot.ID_COUTNER++;
+    }
+
+    /**
+     * Adds changed model information
+     *
+     * @param collection The collection
+     * @param id The id
+     */
+    public addChangedModel(collection: string, id: number): void {
+        if (!this.changedModels[collection]) {
+            this.changedModels[collection] = [];
+        }
+        this.changedModels[collection].push(id);
+    }
+
+    /**
+     * Adds deleted model information
+     *
+     * @param collection The collection
+     * @param id The id
+     */
+    public addDeletedModel(collection: string, id: number): void {
+        if (!this.deletedModels[collection]) {
+            this.deletedModels[collection] = [];
+        }
+        this.deletedModels[collection].push(id);
+    }
+
+    /**
+     * @param collection The collection
+     * @returns the list of changed model ids for the collection
+     */
+    public getChangedModelIdsForCollection(collection: string): number[] {
+        return this.changedModels[collection] || [];
+    }
+
+    /**
+     * @returns the mapping of all changed models
+     */
+    public getChangedModels(): CollectionIds {
+        return this.changedModels;
+    }
+
+    /**
+     * @param collection The collection
+     * @returns the list of deleted model ids for the collection
+     */
+    public getDeletedModelIdsForCollection(collection: string): number[] {
+        return this.deletedModels[collection] || [];
+    }
+
+    /**
+     * @returns the mapping of all deleted models
+     */
+    public getDeletedModels(): CollectionIds {
+        return this.deletedModels;
+    }
+
+    /**
+     * @returns all changed and deleted model ids in one array. If an id was
+     * changed and deleted, it will be there twice! But this should not be the case.
+     */
+    public getAllModelsIdsForCollection(collection: string): number[] {
+        return this.getDeletedModelIdsForCollection(collection).concat(
+            this.getChangedModelIdsForCollection(collection)
+        );
+    }
+
+    /**
+     * Compares this object to another update slot.
+     */
+    public equal(other: UpdateSlot): boolean {
+        return this._id === other._id;
+    }
+}
+
+/**
+ * represents a collection on the Django server, uses an ID to access a {@link BaseModel}.
+ *
+ * Part of {@link DataStoreService}
+ */
+interface ModelCollection {
+    [id: number]: BaseModel;
+}
+
+/**
+ * Represents a serialized collection.
+ */
+interface JsonCollection {
+    [id: number]: string;
+}
+
+/**
+ * The actual storage that stores collections, accessible by strings.
+ *
+ * {@link DataStoreService}
+ */
+interface ModelStorage {
+    [collectionString: string]: ModelCollection;
+}
+
+/**
+ * A storage of serialized collection elements.
+ */
+interface JsonStorage {
+    [collectionString: string]: JsonCollection;
+}
+
+/**
+ * TODO: Avoid circular dependencies between `DataStoreUpdateManagerService` and
+ * `DataStoreService` and split them into two files
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class DataStoreUpdateManagerService {
+    /**
+     * The current update slot
+     */
+    private currentUpdateSlot: UpdateSlot | null = null;
+
+    /**
+     * Requests for getting an update slot.
+     */
+    private updateSlotRequests: Deferred[] = [];
+
+    /**
+     * @param mapperService
+     */
+    public constructor(
+        private mapperService: CollectionStringMapperService,
+        private relationCacheService: RelationCacheService
+    ) {}
+
+    /**
+     * Retrieve the current update slot.
+     */
+    public getCurrentUpdateSlot(): UpdateSlot | null {
+        return this.currentUpdateSlot;
+    }
+
+    /**
+     * Get a new update slot. Returns a promise that must be awaited, if there is another
+     * update in progress.
+     *
+     * @param DS The DataStore. This is a hack, becuase we cannot use the DataStore
+     * here, because these are cyclic dependencies... --> TODO
+     */
+    public async getNewUpdateSlot(DS: DataStoreService): Promise<UpdateSlot> {
+        if (this.currentUpdateSlot) {
+            const request = new Deferred();
+            this.updateSlotRequests.push(request);
+            await request;
+        }
+        this.currentUpdateSlot = new UpdateSlot(DS);
+        return this.currentUpdateSlot;
+    }
+
+    /**
+     * Commits the given update slot. This slot must be the current one. If there are requests
+     * for update slots queued, the next one will be served.
+     *
+     * Note: I added this param to make sure, that only the user of the slot
+     * can commit the update and no one else.
+     *
+     * @param slot The slot to commit
+     */
+    public commit(slot: UpdateSlot, changeId: number, resetCache: boolean = false): void {
+        if (!this.currentUpdateSlot || !this.currentUpdateSlot.equal(slot)) {
+            throw new Error('No or wrong update slot to be finished!');
+        }
+        this.currentUpdateSlot = null;
+
+        // notify repositories in two phases
+        const repositories = this.mapperService.getAllRepositories();
+
+        if (resetCache) {
+            this.relationCacheService.reset();
+        }
+
+        // Phase 1: deleting and creating of view models (in this order)
+        repositories.forEach(repo => {
+            const deletedModelIds = slot.getDeletedModelIdsForCollection(repo.collectionString);
+            repo.deleteModels(deletedModelIds);
+            this.relationCacheService.registerDeletedModels(repo.collectionString, deletedModelIds);
+            const changedModelIds = slot.getChangedModelIdsForCollection(repo.collectionString);
+            repo.changedModels(changedModelIds);
+            this.relationCacheService.registerChangedModels(repo.collectionString, changedModelIds, changeId);
+        });
+
+        // Phase 2: updating all repositories
+        repositories.forEach(repo => {
+            repo.commitUpdate(slot.getAllModelsIdsForCollection(repo.collectionString));
+        });
+
+        slot.DS.triggerModifiedObservable();
+
+        this.serveNextSlot();
+    }
+
+    public dropUpdateSlot(): void {
+        this.currentUpdateSlot = null;
+        this.serveNextSlot();
+    }
+
+    private serveNextSlot(): void {
+        if (this.updateSlotRequests.length > 0) {
+            console.log('Concurrent update slots');
+            const request = this.updateSlotRequests.pop();
+            request.resolve();
+        }
+    }
+}
+
+/**
+ * All mighty DataStore that comes with all OpenSlides components.
+ * Use this.DS in an OpenSlides Component to Access the store.
+ * Used by a lot of components, classes and services.
+ * Changes can be observed
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class DataStoreService {
+    private static cachePrefix = 'DS:';
+
+    /** We will store the data twice: One as instances of the actual models in the _store
+     * and one serialized version in the _serializedStore for the cache. Both should be updated in
+     * all cases equal!
+     */
+    private modelStore: ModelStorage = {};
+    private jsonStore: JsonStorage = {};
+
+    /**
+     * Subjects for changed elements (notified, even if there is a current update slot) for
+     * a specific collection.
+     */
+    private changedSubjects: { [collection: string]: Subject<BaseModel> } = {};
+
+    /**
+     * Observable subject for changed or deleted models in the datastore.
+     */
+    private readonly modifiedSubject: Subject<void> = new Subject<void>();
+
+    /**
+     * Observe the datastore for changes and deletions.
+     *
+     * @return an observable for changed and deleted objects.
+     */
+    public get modifiedObservable(): Observable<void> {
+        return this.modifiedSubject.asObservable();
+    }
+
+    /**
+     * Observable subject for changed or deleted models in the datastore.
+     */
+    private readonly clearEvent: EventEmitter<void> = new EventEmitter<void>();
+
+    /**
+     * Observe the datastore for changes and deletions.
+     *
+     * @return an observable for changed and deleted objects.
+     */
+    public get clearObservable(): Observable<void> {
+        return this.clearEvent.asObservable();
+    }
+
+    /**
+     * The maximal change id from this DataStore.
+     */
+    private _maxChangeId = 0;
+
+    /**
+     * returns the maxChangeId of the DataStore.
+     */
+    public get maxChangeId(): number {
+        return this._maxChangeId;
+    }
+
+    /**
+     * @param storageService use StorageService to preserve the DataStore.
+     * @param modelMapper
+     * @param DSUpdateManager
+     */
+    public constructor(
+        private storageService: StorageService,
+        private modelMapper: CollectionStringMapperService,
+        private DSUpdateManager: DataStoreUpdateManagerService
+    ) {}
+
+    /**
+     * Get an model observable for models from a given collection. These observable will be notified,
+     * even if there is an active update slot. So use this with caution (-> only collections with less models).
+     *
+     * @param collectionType The collection
+     */
+    public getChangeObservable<T extends BaseModel>(collectionType: ModelConstructor<T> | string): Observable<T> {
+        const collection = this.getCollectionString(collectionType);
+        if (!this.changedSubjects[collection]) {
+            this.changedSubjects[collection] = new Subject();
+        }
+        return this.changedSubjects[collection].asObservable() as Observable<T>;
+    }
+
+    /**
+     * Gets the DataStore from cache and instantiate all models out of the serialized version.
+     * If something fails, the DS is cleared, so fresh data can be requrested from the server.
+     *
+     * @returns The max change id.
+     */
+    public async initFromStorage(): Promise<number> {
+        // This promise will be resolved with cached datastore.
+        const store = await this.storageService.get<JsonStorage>(DataStoreService.cachePrefix + 'DS');
+        if (!store) {
+            await this.clear();
+            return this.maxChangeId;
+        }
+
+        const updateSlot = await this.DSUpdateManager.getNewUpdateSlot(this);
+
+        try {
+            // There is a store. Deserialize it
+            this.jsonStore = store;
+            this.modelStore = this.deserializeJsonStore(this.jsonStore);
+
+            // Get the maxChangeId from the cache
+            let maxChangeId = await this.storageService.get<number>(DataStoreService.cachePrefix + 'maxChangeId');
+            if (!maxChangeId) {
+                maxChangeId = 0;
+            }
+            this._maxChangeId = maxChangeId;
+
+            // update observers
+            Object.keys(this.modelStore).forEach(collection => {
+                Object.keys(this.modelStore[collection]).forEach(id => {
+                    this.publishChangedInformation(this.modelStore[collection][id]);
+                });
+            });
+
+            this.DSUpdateManager.commit(updateSlot, maxChangeId, true);
+        } catch (e) {
+            this.DSUpdateManager.dropUpdateSlot();
+            await this.clear();
+        }
+        return this.maxChangeId;
+    }
+
+    /**
+     * Deserialze the given serializedStorage and returns a Storage.
+     * @param serializedStore The store to deserialize
+     * @returns The serialized storage
+     */
+    private deserializeJsonStore(serializedStore: JsonStorage): ModelStorage {
+        const storage: ModelStorage = {};
+        Object.keys(serializedStore).forEach(collectionString => {
+            storage[collectionString] = {} as ModelCollection;
+            const target = this.modelMapper.getModelConstructor(collectionString);
+            if (target) {
+                Object.keys(serializedStore[collectionString]).forEach(id => {
+                    const data = JSON.parse(serializedStore[collectionString][id]);
+                    storage[collectionString][id] = new target(data);
+                });
+            }
+        });
+        return storage;
+    }
+
+    /**
+     * Clears the complete DataStore and Cache.
+     */
+    public async clear(): Promise<void> {
+        this.modelStore = {};
+        this.jsonStore = {};
+        this._maxChangeId = 0;
+        await this.storageService.remove(DataStoreService.cachePrefix + 'DS');
+        await this.storageService.remove(DataStoreService.cachePrefix + 'maxChangeId');
+        this.clearEvent.next();
+    }
+
+    /**
+     * Returns the collection _string_ based on the model given. If a string is given, it's just returned.
+     * @param collectionType Either a Model constructor or a string.
+     * @returns the collection string
+     */
+    private getCollectionString<T extends BaseModel<T>>(collectionType: ModelConstructor<T> | string): string {
+        if (typeof collectionType === 'string') {
+            return collectionType;
+        } else {
+            return this.modelMapper.getCollectionString(collectionType);
+        }
+    }
+
+    /**
+     * Read one model based on the collection and id from the DataStore.
+     *
+     * @param collectionType The desired BaseModel or collectionString to be read from the dataStore
+     * @param ids One ID of the BaseModel
+     * @return The given BaseModel-subclass instance
+     * @example: this.DS.get(User, 1)
+     * @example: this.DS.get<Countdown>('core/countdown', 2)
+     */
+    public get<T extends BaseModel<T>>(collectionType: ModelConstructor<T> | string, id: number): T {
+        const collectionString = this.getCollectionString<T>(collectionType);
+
+        const collection: ModelCollection = this.modelStore[collectionString];
+        if (!collection) {
+            return;
+        } else {
+            return collection[id] as T;
+        }
+    }
+
+    /**
+     * Read multiple ID's from dataStore.
+     *
+     * @param collectionType The desired BaseModel or collectionString to be read from the dataStore
+     * @param ids Multiple IDs as a list of IDs of BaseModel
+     * @return The BaseModel-list corresponding to the given ID(s)
+     * @example: this.DS.getMany(User, [1,2,3,4,5])
+     * @example: this.DS.getMany<User>('users/user', [1,2,3,4,5])
+     */
+    public getMany<T extends BaseModel<T>>(collectionType: ModelConstructor<T> | string, ids: number[]): T[] {
+        const collectionString = this.getCollectionString<T>(collectionType);
+
+        const collection: ModelCollection = this.modelStore[collectionString];
+        if (!collection) {
+            return [];
+        }
+        const models = ids
+            .map(id => {
+                return collection[id];
+            })
+            .filter(model => !!model); // remove non valid models.
+        return models as T[];
+    }
+
+    /**
+     * Get all models of the given collection from the DataStore.
+     *
+     * @param collectionType The desired BaseModel or collectionString to be read from the dataStore
+     * @return The BaseModel-list of all instances of T
+     * @example: this.DS.getAll(User)
+     * @example: this.DS.getAll<User>('users/user')
+     */
+    public getAll<T extends BaseModel<T>>(collectionType: ModelConstructor<T> | string): T[] {
+        const collectionString = this.getCollectionString<T>(collectionType);
+
+        const collection: ModelCollection = this.modelStore[collectionString];
+        if (!collection) {
+            return [];
+        } else {
+            return Object.values(collection);
+        }
+    }
+
+    /**
+     * Filters the dataStore by type.
+     *
+     * @param collectionType The desired BaseModel type to be read from the dataStore
+     * @param callback a filter function
+     * @return The BaseModel-list corresponding to the filter function
+     * @example this.DS.filter<User>(User, myUser => myUser.first_name === "Max")
+     */
+    public filter<T extends BaseModel<T>>(
+        collectionType: ModelConstructor<T> | string,
+        callback: (model: T) => boolean
+    ): T[] {
+        return this.getAll<T>(collectionType).filter(callback);
+    }
+
+    /**
+     * Finds a model item in the dataStore by type.
+     *
+     * @param collectionType The desired BaseModel type to be read from the dataStore
+     * @param callback a find function
+     * @return The first BaseModel item matching the filter function
+     * @example this.DS.find<User>(User, myUser => myUser.first_name === "Jenny")
+     */
+    public find<T extends BaseModel<T>>(
+        collectionType: ModelConstructor<T> | string,
+        callback: (model: T) => boolean
+    ): T {
+        return this.getAll<T>(collectionType).find(callback);
+    }
+
+    /**
+     * Add one or multiple models to dataStore.
+     *
+     * @param models BaseModels to add to the store
+     * @param changeId The changeId of this update. If given, the storage will be flushed to the
+     * cache. Else one can call {@method flushToStorage} to do this manually.
+     * @example this.DS.add([new User(1)])
+     * @example this.DS.add([new User(2), new User(3)])
+     * @example this.DS.add(arrayWithUsers, changeId)
+     */
+    public async add(models: BaseModel[], changeId?: number): Promise<void> {
+        models.forEach(model => {
+            const collection = model.collectionString;
+            if (this.modelStore[collection] === undefined) {
+                this.modelStore[collection] = {};
+            }
+            this.modelStore[collection][model.id] = model;
+
+            if (this.jsonStore[collection] === undefined) {
+                this.jsonStore[collection] = {};
+            }
+            this.jsonStore[collection][model.id] = JSON.stringify(model);
+            this.publishChangedInformation(model);
+        });
+        if (changeId) {
+            await this.flushToStorage(changeId);
+        }
+    }
+
+    /**
+     * removes one or multiple models from dataStore.
+     *
+     * @param collectionString The desired BaseModel type to be removed from the datastore
+     * @param ids A list of IDs of BaseModels to remove from the datastore
+     * @param changeId The changeId of this update. If given, the storage will be flushed to the
+     * cache. Else one can call {@method flushToStorage} to do this manually.
+     * @example this.DS.remove('users/user', [myUser.id, 3, 4])
+     */
+    public async remove(collectionString: string, ids: number[], changeId?: number): Promise<void> {
+        ids.forEach(id => {
+            if (this.modelStore[collectionString]) {
+                delete this.modelStore[collectionString][id];
+            }
+            if (this.jsonStore[collectionString]) {
+                delete this.jsonStore[collectionString][id];
+            }
+            this.publishDeletedInformation({
+                collection: collectionString,
+                id: id
+            });
+        });
+        if (changeId) {
+            await this.flushToStorage(changeId);
+        }
+    }
+
+    /**
+     * Resets the DataStore and set the given models as the new content.
+     * @param models A list of models to set the DataStore to.
+     * @param newMaxChangeId Optional. If given, the max change id will be updated
+     * and the store flushed to the storage
+     */
+    public async set(models?: BaseModel[], newMaxChangeId?: number): Promise<void> {
+        const modelStoreReference = this.modelStore;
+        this.modelStore = {};
+        this.jsonStore = {};
+        // Inform about the deletion
+        Object.keys(modelStoreReference).forEach(collectionString => {
+            Object.keys(modelStoreReference[collectionString]).forEach(id => {
+                this.publishDeletedInformation({
+                    collection: collectionString,
+                    id: +id // needs casting, because Objects.keys gives all keys as strings...
+                });
+            });
+        });
+        if (models && models.length) {
+            await this.add(models, newMaxChangeId);
+        }
+    }
+
+    /**
+     * Informs the changed and changedOrDeleted subject about a change.
+     *
+     * @param model The model to publish
+     */
+    private publishChangedInformation(model: BaseModel): void {
+        const slot = this.DSUpdateManager.getCurrentUpdateSlot();
+        if (slot) {
+            slot.addChangedModel(model.collectionString, model.id);
+            // triggerModifiedObservable will be called by committing the update slot.
+        } else {
+            this.triggerModifiedObservable();
+        }
+
+        if (this.changedSubjects[model.collectionString]) {
+            this.changedSubjects[model.collectionString].next(model);
+        }
+    }
+
+    /**
+     * Informs the deleted and changedOrDeleted subject about a deletion.
+     *
+     * @param information The information about the deleted model
+     */
+    private publishDeletedInformation(information: DeletedInformation): void {
+        const slot = this.DSUpdateManager.getCurrentUpdateSlot();
+        if (slot) {
+            slot.addDeletedModel(information.collection, information.id);
+            // triggerModifiedObservable will be called by committing the update slot.
+        } else {
+            this.triggerModifiedObservable();
+        }
+    }
+
+    /**
+     * Triggers the modified subject.
+     */
+    public triggerModifiedObservable(): void {
+        this.modifiedSubject.next();
+    }
+
+    /**
+     * Updates the cache by inserting the serialized DataStore. Also changes the chageId, if it's larger
+     * @param changeId The changeId from the update. If it's the highest change id seen, it will be set into the cache.
+     */
+    public async flushToStorage(changeId: number): Promise<void> {
+        this._maxChangeId = changeId;
+        await this.storageService.set(DataStoreService.cachePrefix + 'DS', this.jsonStore);
+        await this.storageService.set(DataStoreService.cachePrefix + 'maxChangeId', changeId);
+    }
+
+    public print(): void {
+        console.log('Max change id', this.maxChangeId);
+        console.log('json storage');
+        console.log(JSON.stringify(this.jsonStore));
+        console.log(this.modelStore);
+    }
+}

client/src/app/core/core-services/fallback-routes.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+
+import { OperatorService, Permission } from './operator.service';
+
+export interface AuthGuardFallbackEntry {
+    route: string;
+    weight: number;
+    permission: Permission;
+}
+
+/**
+ * Classical Auth-Guard. Checks if the user has to correct permissions to enter a page, and forwards to login if not.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class FallbackRoutesService {
+    private fallbackEntries: AuthGuardFallbackEntry[] = [];
+
+    /**
+     * Constructor
+     *
+     * @param operator Asking for the required permission
+     */
+    public constructor(private operator: OperatorService) {}
+
+    /**
+     * Adds fallback navigation entries for the start page.
+     * @param entries The entries to add
+     */
+    public registerFallbackEntries(entries: AuthGuardFallbackEntry[]): void {
+        this.fallbackEntries.push(...entries);
+        this.fallbackEntries = this.fallbackEntries.sort((a, b) => a.weight - b.weight);
+    }
+
+    public getFallbackRoute(): string | null {
+        for (const entry of this.fallbackEntries) {
+            if (this.operator.hasPerms(entry.permission)) {
+                return entry.route;
+            }
+        }
+    }
+}

client/src/app/core/core-services/http.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HttpService } from './http.service';
+
+describe('HttpService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [HttpService]
+        });
+    });
+    // TODO: Write a working Test
+    // it('should be created', () => {
+    //     const service: HttpService = TestBed.inject(HttpService);
+    //     expect(service).toBeTruthy();
+    // });
+});

client/src/app/core/core-services/http.service.ts

@@ -0,0 +1,276 @@
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { AutoupdateFormat, AutoupdateService, isAutoupdateFormat } from './autoupdate.service';
+import { OpenSlidesStatusService } from './openslides-status.service';
+import { formatQueryParams, QueryParams } from '../definitions/query-params';
+
+/**
+ * Enum for different HTTPMethods
+ */
+export enum HTTPMethod {
+    GET = 'get',
+    POST = 'post',
+    PUT = 'put',
+    PATCH = 'patch',
+    DELETE = 'delete'
+}
+
+export interface ErrorDetailResponse {
+    detail: string | string[];
+    args?: string[];
+}
+
+function isErrorDetailResponse(obj: any): obj is ErrorDetailResponse {
+    return (
+        obj &&
+        typeof obj === 'object' &&
+        (typeof obj.detail === 'string' || obj.detail instanceof Array) &&
+        (!obj.args || obj.args instanceof Array)
+    );
+}
+
+interface AutoupdateResponse {
+    autoupdate: AutoupdateFormat;
+    data?: any;
+}
+
+function isAutoupdateReponse(obj: any): obj is AutoupdateResponse {
+    return obj && typeof obj === 'object' && isAutoupdateFormat((obj as AutoupdateResponse).autoupdate);
+}
+
+/**
+ * Service for managing HTTP requests. Allows to send data for every method. Also (TODO) will do generic error handling.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class HttpService {
+    /**
+     * http headers used by most requests
+     */
+    private defaultHeaders: HttpHeaders;
+
+    /**
+     * Construct a HttpService
+     *
+     * Sets the default headers to application/json
+     *
+     * @param http The HTTP Client
+     * @param translate
+     * @param timeTravel requests are only allowed if history mode is disabled
+     */
+    public constructor(
+        private http: HttpClient,
+        private translate: TranslateService,
+        private OSStatus: OpenSlidesStatusService,
+        private autoupdateService: AutoupdateService
+    ) {
+        this.defaultHeaders = new HttpHeaders().set('Content-Type', 'application/json');
+    }
+
+    /**
+     * Send the a http request the the given path.
+     * Optionally accepts a request body.
+     *
+     * @param path the target path, usually starting with /rest
+     * @param method the required HTTP method (i.e get, post, put)
+     * @param data optional, if sending a data body is required
+     * @param queryParams optional queryparams to append to the path
+     * @param customHeader optional custom HTTP header of required
+     * @param responseType optional response type, default set to json (i.e 'arraybuffer')
+     * @returns a promise containing a generic
+     */
+    private async send<T>(
+        path: string,
+        method: HTTPMethod,
+        data?: any,
+        queryParams?: QueryParams,
+        customHeader?: HttpHeaders,
+        responseType?: string
+    ): Promise<T> {
+        // end early, if we are in history mode
+        if (this.OSStatus.isInHistoryMode && method !== HTTPMethod.GET) {
+            throw this.processError('You cannot make changes while in history mode');
+        }
+
+        // there is a current bug with the responseType.
+        // https://github.com/angular/angular/issues/18586
+        // castting it to 'json' allows the usage of the current array
+        if (!responseType) {
+            responseType = 'json';
+        }
+
+        let url = path + formatQueryParams(queryParams);
+        if (url[0] !== '/') {
+            console.warn(`Please prefix the URL "${url}" with a slash.`);
+            url = '/' + url;
+        }
+        if (this.OSStatus.isPrioritizedClient) {
+            url = '/prioritize' + url;
+        }
+
+        const options = {
+            body: data,
+            headers: customHeader ? customHeader : this.defaultHeaders,
+            responseType: responseType as 'json'
+        };
+
+        try {
+            const responseData: T = await this.http.request<T>(method, url, options).toPromise();
+            return this.processResponse(responseData);
+        } catch (error) {
+            throw this.processError(error);
+        }
+    }
+
+    /**
+     * Takes an error thrown by the HttpClient. Processes it to return a string that can
+     * be presented to the user.
+     * @param e The error thrown.
+     * @returns The prepared and translated message for the user
+     */
+    private processError(e: any): string {
+        let error = this.translate.instant('Error') + ': ';
+        // If the error is a string already, return it.
+        if (typeof e === 'string') {
+            return error + e;
+        }
+
+        // If the error is no HttpErrorResponse, it's not clear what is wrong.
+        if (!(e instanceof HttpErrorResponse)) {
+            console.error('Unknown error thrown by the http client: ', e);
+            error += this.translate.instant('An unknown error occurred.');
+            return error;
+        }
+
+        if (e.status === 405) {
+            // this should only happen, if the url is wrong -> a bug.
+            error += this.translate.instant(
+                'The requested method is not allowed. Please contact your system administrator.'
+            );
+        } else if (!e.error) {
+            error += this.translate.instant("The server didn't respond.");
+        } else if (typeof e.error === 'object') {
+            if (isErrorDetailResponse(e.error)) {
+                error += this.processErrorDetailResponse(e.error);
+            } else {
+                const errorList = Object.keys(e.error).map(key => {
+                    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+                    return `${this.translate.instant(capitalizedKey)}: ${this.processErrorDetailResponse(
+                        e.error[key]
+                    )}`;
+                });
+                error = errorList.join(', ');
+            }
+        } else if (e.status === 500) {
+            error += this.translate.instant('A server error occured. Please contact your system administrator.');
+        } else if (e.status > 500) {
+            error += this.translate.instant('The server could not be reached.') + ` (${e.status})`;
+        } else {
+            error += e.message;
+        }
+
+        return error;
+    }
+
+    /**
+     * Errors from the servers may be string or array of strings. This function joins the strings together,
+     * if an array is send.
+     * @param str a string or a string array to join together.
+     * @returns Error text(s) as single string
+     */
+    private processErrorDetailResponse(response: ErrorDetailResponse): string {
+        let message: string;
+        if (response.detail instanceof Array) {
+            message = response.detail.join(' ');
+        } else {
+            message = response.detail;
+        }
+        message = this.translate.instant(message);
+
+        if (response.args && response.args.length > 0) {
+            for (let i = 0; i < response.args.length; i++) {
+                message = message.replace(`{${i}}`, response.args[i].toString());
+            }
+        }
+        return message;
+    }
+
+    private processResponse<T>(responseData: T): T {
+        if (isAutoupdateReponse(responseData)) {
+            this.autoupdateService.injectAutoupdateIgnoreChangeId(responseData.autoupdate);
+            responseData = responseData.data;
+        }
+        return responseData;
+    }
+
+    /**
+     * Executes a get on a path with a certain object
+     * @param path The path to send the request to.
+     * @param data An optional payload for the request.
+     * @param queryParams Optional params appended to the path as the query part of the url.
+     * @param header optional HTTP header if required
+     * @param responseType option expected response type by the request (i.e 'arraybuffer')
+     * @returns A promise holding a generic
+     */
+    public async get<T>(
+        path: string,
+        data?: any,
+        queryParams?: QueryParams,
+        header?: HttpHeaders,
+        responseType?: string
+    ): Promise<T> {
+        return await this.send<T>(path, HTTPMethod.GET, data, queryParams, header, responseType);
+    }
+
+    /**
+     * Executes a post on a path with a certain object
+     * @param path The path to send the request to.
+     * @param data An optional payload for the request.
+     * @param queryParams Optional params appended to the path as the query part of the url.
+     * @param header optional HTTP header if required
+     * @returns A promise holding a generic
+     */
+    public async post<T>(path: string, data?: any, queryParams?: QueryParams, header?: HttpHeaders): Promise<T> {
+        return await this.send<T>(path, HTTPMethod.POST, data, queryParams, header);
+    }
+
+    /**
+     * Executes a put on a path with a certain object
+     * @param path The path to send the request to.
+     * @param data An optional payload for the request.
+     * @param queryParams Optional params appended to the path as the query part of the url.
+     * @param header optional HTTP header if required
+     * @returns A promise holding a generic
+     */
+    public async patch<T>(path: string, data?: any, queryParams?: QueryParams, header?: HttpHeaders): Promise<T> {
+        return await this.send<T>(path, HTTPMethod.PATCH, data, queryParams, header);
+    }
+
+    /**
+     * Executes a put on a path with a certain object
+     * @param path The path to send the request to.
+     * @param data An optional payload for the request.
+     * @param queryParams Optional params appended to the path as the query part of the url.
+     * @param header optional HTTP header if required
+     * @returns A promise holding a generic
+     */
+    public async put<T>(path: string, data?: any, queryParams?: QueryParams, header?: HttpHeaders): Promise<T> {
+        return await this.send<T>(path, HTTPMethod.PUT, data, queryParams, header);
+    }
+
+    /**
+     * Makes a delete request.
+     * @param url The path to send the request to.
+     * @param data An optional payload for the request.
+     * @param queryParams Optional params appended to the path as the query part of the url.
+     * @param header optional HTTP header if required
+     * @returns A promise holding a generic
+     */
+    public async delete<T>(path: string, data?: any, queryParams?: QueryParams, header?: HttpHeaders): Promise<T> {
+        return await this.send<T>(path, HTTPMethod.DELETE, data, queryParams, header);
+    }
+}

client/src/app/core/core-services/main-menu.service.spec.ts

@@ -0,0 +1,15 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { MainMenuService } from './main-menu.service';
+
+describe('MainMenuService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [MainMenuService]
+        });
+    });
+
+    it('should be created', inject([MainMenuService], (service: MainMenuService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/main-menu.service.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+
+import { Subject } from 'rxjs';
+
+import { Permission } from './operator.service';
+
+/**
+ * This represents one entry in the main menu
+ */
+export interface MainMenuEntry {
+    /**
+     * The route for the router to navigate to on click.
+     */
+    route: string;
+    /**
+     * The display string to be shown.
+     */
+    displayName: string;
+
+    /**
+     * The font awesom icon to display.
+     */
+    icon: string;
+
+    /**
+     * For sorting the entries.
+     */
+    weight: number;
+
+    /**
+     * The permission to see the entry.
+     */
+    permission: Permission;
+}
+
+/**
+ * Collects main menu entries and provides them to the main menu component.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class MainMenuService {
+    /**
+     * A list of sorted entries.
+     */
+    private _entries: MainMenuEntry[] = [];
+
+    /**
+     * Observed by the site component.
+     * If a new value appears the sideNavContainer gets toggled
+     */
+    public toggleMenuSubject = new Subject<void>();
+
+    /**
+     * Make the entries public.
+     */
+    public get entries(): MainMenuEntry[] {
+        return this._entries;
+    }
+
+    public constructor() {}
+
+    /**
+     * Adds entries to the mainmenu.
+     * @param entries The entries to add
+     */
+    public registerEntries(entries: MainMenuEntry[]): void {
+        this._entries.push(...entries);
+        this._entries = this._entries.sort((a, b) => a.weight - b.weight);
+    }
+
+    /**
+     * Emit signal to toggle the main Menu
+     */
+    public toggleMenu(): void {
+        this.toggleMenuSubject.next();
+    }
+}

client/src/app/core/core-services/notify.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { NotifyService } from './notify.service';
+
+describe('NotifyService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [NotifyService]
+        });
+    });
+
+    it('should be created', inject([NotifyService], (service: NotifyService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/notify.service.ts

@@ -0,0 +1,168 @@
+import { Injectable } from '@angular/core';
+
+import { Observable, Subject } from 'rxjs';
+
+import { OperatorService } from './operator.service';
+import { WebsocketService } from './websocket.service';
+
+/**
+ * Encapslates the name and content of every message regardless of being a request or response.
+ */
+interface NotifyBase<T> {
+    /**
+     * The name of the notify message.
+     */
+    name: string;
+
+    /**
+     * The content to send.
+     */
+    content: T;
+}
+
+/**
+ * This interface has all fields for a notify request to the server. Next to name and content
+ * one can give an array of user ids (or the value `true` for all users) and an array of
+ * channel names.
+ */
+export interface NotifyRequest<T> extends NotifyBase<T> {
+    /**
+     * User ids (or `true` for all users) to send this message to.
+     */
+    users?: number[] | boolean;
+
+    /**
+     * An array of channels to send this message to.
+     */
+    replyChannels?: string[];
+}
+
+/**
+ * This is the notify-format one recieves from the server.
+ */
+export interface NotifyResponse<T> extends NotifyBase<T> {
+    /**
+     * This is the channel name of the one, who sends this message. Can be use to directly
+     * answer this message.
+     */
+    senderChannelName: string;
+
+    /**
+     * The user id of the user who sends this message. It is 0 for Anonymous.
+     */
+    senderUserId: number;
+
+    /**
+     * This is validated here and is true, if the senderUserId matches the current operator's id.
+     * It's also true, if one recieves a request from an anonymous and the operator itself is the anonymous.
+     */
+    sendByThisUser: boolean;
+}
+
+/**
+ * Handles all incoming and outgoing notify messages via {@link WebsocketService}.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class NotifyService {
+    /**
+     * A general subject for all messages.
+     */
+    private notifySubject = new Subject<NotifyResponse<any>>();
+
+    /**
+     * Subjects for specific messages.
+     */
+    private messageSubjects: {
+        [name: string]: Subject<NotifyResponse<any>>;
+    } = {};
+
+    /**
+     * Constructor to create the NotifyService. Registers itself to the WebsocketService.
+     * @param websocketService
+     */
+    public constructor(private websocketService: WebsocketService, private operator: OperatorService) {
+        websocketService.getOberservable<NotifyResponse<any>>('notify').subscribe(notify => {
+            notify.sendByThisUser = notify.senderUserId === (this.operator.user ? this.operator.user.id : 0);
+            this.notifySubject.next(notify);
+            if (this.messageSubjects[notify.name]) {
+                this.messageSubjects[notify.name].next(notify);
+            }
+        });
+    }
+
+    /**
+     * Sents a notify message to all users (so all clients that are online).
+     * @param name The name of the notify message
+     * @param content The payload to send
+     */
+    public sendToAllUsers<T>(name: string, content: T): void {
+        this.send(name, content);
+    }
+
+    /**
+     * Sends a notify message to all open clients with the given users logged in.
+     * @param name The name of th enotify message
+     * @param content The payload to send.
+     * @param users Multiple user ids.
+     */
+    public sendToUsers<T>(name: string, content: T, ...users: number[]): void {
+        this.send(name, content, users);
+    }
+
+    /**
+     * Sends a notify message to all given channels.
+     * @param name The name of th enotify message
+     * @param content The payload to send.
+     * @param channels Multiple channels to send this message to.
+     */
+    public sendToChannels<T>(name: string, content: T, ...channels: string[]): void {
+        if (channels.length < 1) {
+            throw new Error('You have to provide at least one channel');
+        }
+        this.send(name, content, null, channels);
+    }
+
+    /**
+     * General send function for notify messages.
+     * @param name The name of the notify message
+     * @param content The payload to send.
+     * @param users Either an array of IDs or `true` meaning of sending this message to all online users clients.
+     * @param channels An array of channels to send this message to.
+     */
+    public send<T>(name: string, content: T, users?: number[] | boolean, channels?: string[]): void {
+        const notify: NotifyRequest<T> = {
+            name: name,
+            content: content
+        };
+        if (typeof users === 'boolean' && users !== true) {
+            throw new Error('You just can give true as a boolean to send this message to all users.');
+        }
+        if (users !== null) {
+            notify.users = users;
+        }
+        if (channels !== null) {
+            notify.replyChannels = channels;
+        }
+        this.websocketService.send('notify', notify);
+    }
+
+    /**
+     * Returns a general observalbe of all notify messages.
+     */
+    public getObservable(): Observable<NotifyResponse<any>> {
+        return this.notifySubject.asObservable();
+    }
+
+    /**
+     * Returns an observable for a specific type of messages.
+     * @param name The name of all messages to observe.
+     */
+    public getMessageObservable<T>(name: string): Observable<NotifyResponse<T>> {
+        if (!this.messageSubjects[name]) {
+            this.messageSubjects[name] = new Subject<NotifyResponse<any>>();
+        }
+        return this.messageSubjects[name].asObservable() as Observable<NotifyResponse<T>>;
+    }
+}

client/src/app/core/core-services/offline.service.spec.ts

@@ -0,0 +1,18 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from 'e2e-imports.module';
+
+import { OfflineService } from './offline.service';
+
+describe('OfflineService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [OfflineService]
+        });
+    });
+
+    it('should be created', inject([OfflineService], (service: OfflineService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/offline.service.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { BannerDefinition, BannerService } from '../ui-services/banner.service';
+
+/**
+ * This service handles everything connected with being offline.
+ *
+ * TODO: This is just a stub. Needs to be done in the future; Maybe we cancel this whole concept
+ * of this service. We'll see what happens here..
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class OfflineService {
+    /**
+     * BehaviorSubject to receive further status values.
+     */
+    private offline = new BehaviorSubject<boolean>(false);
+    private bannerDefinition: BannerDefinition = {
+        text: _('Offline mode'),
+        icon: 'cloud_off'
+    };
+
+    public constructor(private banner: BannerService, translate: TranslateService) {
+        translate.onLangChange.subscribe(() => {
+            this.bannerDefinition.text = translate.instant(this.bannerDefinition.text);
+        });
+    }
+
+    /**
+     * Determines of you are either in Offline mode or not connected via websocket
+     *
+     * @returns whether the client is offline or not connected
+     */
+    public isOffline(): Observable<boolean> {
+        return this.offline;
+    }
+
+    /**
+     * Sets the offline flag. Restores the DataStoreService to the last known configuration.
+     */
+    public goOfflineBecauseFailedWhoAmI(): void {
+        if (!this.offline.getValue()) {
+            console.log('offline because whoami failed.');
+        }
+        this.goOffline();
+    }
+
+    /**
+     * Sets the offline flag, because there is no connection to the server.
+     */
+    public goOfflineBecauseConnectionLost(): void {
+        if (!this.offline.getValue()) {
+            console.log('offline because connection lost.');
+        }
+        this.goOffline();
+    }
+
+    /**
+     * Helper function to set offline status
+     */
+    private goOffline(): void {
+        this.offline.next(true);
+        this.banner.addBanner(this.bannerDefinition);
+    }
+
+    /**
+     * Function to return to online-status.
+     */
+    public goOnline(): void {
+        this.offline.next(false);
+        this.banner.removeBanner(this.bannerDefinition);
+    }
+}

client/src/app/core/core-services/openslides-status.service.spec.ts

@@ -0,0 +1,18 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from 'e2e-imports.module';
+
+import { OpenSlidesStatusService } from './openslides-status.service';
+
+describe('OpenSlidesStatusService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [OpenSlidesStatusService]
+        });
+    });
+
+    it('should be created', inject([OpenSlidesStatusService], (service: OpenSlidesStatusService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/openslides-status.service.ts

@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+
+import { History } from 'app/shared/models/core/history';
+import { BannerDefinition, BannerService } from '../ui-services/banner.service';
+
+/**
+ * Holds information about OpenSlides. This is not included into other services to
+ * avoid circular dependencies.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class OpenSlidesStatusService {
+    /**
+     * in History mode, saves the history point.
+     */
+    private history: History = null;
+    private bannerDefinition: BannerDefinition = {
+        type: 'history'
+    };
+
+    /**
+     * Returns, if OpenSlides is in the history mode.
+     */
+    public get isInHistoryMode(): boolean {
+        return !!this.history;
+    }
+
+    public isPrioritizedClient = false;
+
+    /**
+     * Ctor, does nothing.
+     */
+    public constructor(private banner: BannerService) {}
+
+    /**
+     * Calls the getLocaleString function of the history object, if present.
+     *
+     * @param format the required date representation format
+     * @returns the timestamp as string
+     */
+    public getHistoryTimeStamp(format: string): string {
+        return this.history ? this.history.getLocaleString(format) : null;
+    }
+
+    /**
+     * Enters the history mode
+     */
+    public enterHistoryMode(history: History): void {
+        this.history = history;
+        this.banner.addBanner(this.bannerDefinition);
+    }
+
+    /**
+     * Leaves the history mode
+     */
+    public leaveHistoryMode(): void {
+        this.history = null;
+        this.banner.removeBanner(this.bannerDefinition);
+    }
+}

client/src/app/core/core-services/openslides.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { OpenSlidesService } from './openslides.service';
+
+describe('OpenSlidesService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [OpenSlidesService]
+        });
+    });
+
+    it('should be created', inject([OpenSlidesService], (service: OpenSlidesService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/openslides.service.ts

@@ -0,0 +1,195 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { BehaviorSubject } from 'rxjs';
+
+import { AutoupdateService } from './autoupdate.service';
+import { ConstantsService } from './constants.service';
+import { DataStoreService } from './data-store.service';
+import { OperatorService } from './operator.service';
+import { StorageService } from './storage.service';
+import { WebsocketService } from './websocket.service';
+
+/**
+ * Handles the bootup/showdown of this application.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class OpenSlidesService {
+    /**
+     * If the user tries to access a certain URL without being authenticated, the URL will be stored here
+     */
+    public redirectUrl: string;
+
+    /**
+     * Subject to hold the flag `booted`.
+     */
+    public readonly booted = new BehaviorSubject(false);
+
+    /**
+     * Saves, if OpenSlides is fully booted. This means, that a user must be logged in
+     * (Anonymous is also a user in this case). This is the case after `afterLoginBootup`.
+     */
+    public get isBooted(): boolean {
+        return this.booted.value;
+    }
+
+    /**
+     * Constructor to create the OpenSlidesService. Registers itself to the WebsocketService.
+     * @param storageService
+     * @param operator
+     * @param websocketService
+     * @param router
+     * @param autoupdateService
+     * @param DS
+     */
+    public constructor(
+        private storageService: StorageService,
+        private operator: OperatorService,
+        private websocketService: WebsocketService,
+        private router: Router,
+        private autoupdateService: AutoupdateService,
+        private DS: DataStoreService,
+        private constantsService: ConstantsService
+    ) {
+        // Handler that gets called, if the websocket connection reconnects after a disconnection.
+        // There might have changed something on the server, so we check the operator, if he changed.
+        websocketService.retryReconnectEvent.subscribe(() => {
+            this.checkOperator();
+        });
+
+        this.bootup();
+    }
+
+    /**
+     * the bootup-sequence: Do a whoami request and if it was successful, do
+     * {@method afterLoginBootup}. If not, redirect the user to the login page.
+     */
+    public async bootup(): Promise<void> {
+        // start autoupdate if the user is logged in:
+        let response = await this.operator.whoAmIFromStorage();
+        const needToCheckOperator = !!response;
+
+        if (!response) {
+            response = await this.operator.whoAmI();
+        }
+
+        if (!response.user && !response.guest_enabled) {
+            if (!location.pathname.includes('error')) {
+                this.redirectUrl = location.pathname;
+            }
+            this.redirectToLoginIfNotSubpage();
+        } else {
+            await this.afterLoginBootup(response.user_id);
+        }
+
+        if (needToCheckOperator) {
+            // Check for the operator via a async whoami (so no await here)
+            // to validate, that the cache was correct.
+            this.checkOperator(false);
+        }
+    }
+
+    /**
+     * Redirects the user to /login, if he isn't on a subpage.
+     */
+    private redirectToLoginIfNotSubpage(): void {
+        if (!this.redirectUrl || !this.redirectUrl.includes('/login/')) {
+            // Goto login, if the user isn't on a subpage like
+            // legal notice or reset passwort view.
+            // If other routing requests are active (e.g. to `/` or `/error`)
+            // wait for the authguard to finish to navigate to /login. This
+            // redirect is more important than the other ones.
+            setTimeout(() => {
+                this.router.navigate(['/login']);
+            });
+        }
+    }
+
+    /**
+     * the login bootup-sequence: Check (and maybe clear) the cache und setup the DataStore
+     * and websocket. This "login" also may be the "login" of an anonymous when he is using
+     * OpenSlides as a guest.
+     * @param userId the id or null for guest
+     */
+    public async afterLoginBootup(userId: number | null): Promise<void> {
+        // Check, which user was logged in last time
+        const lastUserId = await this.storageService.get<number>('lastUserLoggedIn');
+        // if the user changed, reset the cache and save the new user.
+        if (userId !== lastUserId) {
+            await this.DS.clear();
+            await this.storageService.set('lastUserLoggedIn', userId);
+        }
+        await this.setupDataStoreAndWebSocket();
+        // Now finally booted.
+        this.booted.next(true);
+    }
+
+    /**
+     * Init DS from cache and after this start the websocket service.
+     */
+    private async setupDataStoreAndWebSocket(): Promise<void> {
+        const changeId = await this.DS.initFromStorage();
+        // disconnect the WS connection, if there was one. This is needed
+        // to update the connection parameters, namely the cookies. If the user
+        // is changed, the WS needs to reconnect, so the new connection holds the new
+        // user information.
+        if (this.websocketService.isConnected) {
+            await this.websocketService.close(); // Wait for the disconnect.
+        }
+        await this.websocketService.connect(changeId); // Request changes after changeId.
+    }
+
+    /**
+     * Shuts down OpenSlides. The websocket connection is closed and the operator is not set.
+     */
+    public async shutdown(): Promise<void> {
+        await this.websocketService.close();
+        this.booted.next(false);
+    }
+
+    /**
+     * Shutdown and bootup.
+     */
+    public async reboot(): Promise<void> {
+        await this.shutdown();
+        await this.bootup();
+    }
+
+    /**
+     * Clears the client cache and restarts OpenSlides. Results in "flickering" of the
+     * login mask, because the cached operator is also cleared.
+     */
+    public async reset(): Promise<void> {
+        await this.shutdown();
+        await this.storageService.clear();
+        await this.bootup();
+    }
+
+    /**
+     * Verify that the operator is the same as it was before. Should be alled on a reconnect.
+     */
+    private async checkOperator(requestChanges: boolean = true): Promise<void> {
+        const response = await this.operator.whoAmI();
+        // User logged off.
+        if (!response.user && !response.guest_enabled) {
+            this.websocketService.cancelReconnectenRetry();
+            await this.shutdown();
+            this.redirectToLoginIfNotSubpage();
+        } else {
+            if (
+                (this.operator.user && this.operator.user.id !== response.user_id) ||
+                (!this.operator.user && response.user_id)
+            ) {
+                // user changed
+                await this.DS.clear();
+                await this.reboot();
+            } else if (requestChanges) {
+                // User is still the same, but check for missed autoupdates.
+                this.autoupdateService.requestChanges();
+                this.constantsService.refresh();
+            }
+        }
+    }
+}

client/src/app/core/core-services/operator.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { OperatorService } from './operator.service';
+
+describe('OperatorService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [OperatorService]
+        });
+    });
+
+    it('should be created', inject([OperatorService], (service: OperatorService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/operator.service.ts

@@ -0,0 +1,475 @@
+import { Injectable } from '@angular/core';
+
+import { environment } from 'environments/environment';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { auditTime, filter } from 'rxjs/operators';
+
+import { Group } from 'app/shared/models/users/group';
+import { ViewUser } from 'app/site/users/models/view-user';
+import { CollectionStringMapperService } from './collection-string-mapper.service';
+import { DataStoreService } from './data-store.service';
+import { Deferred } from '../promises/deferred';
+import { HttpService } from './http.service';
+import { OfflineService } from './offline.service';
+import { OnAfterAppsLoaded } from '../definitions/on-after-apps-loaded';
+import { OpenSlidesStatusService } from './openslides-status.service';
+import { StorageService } from './storage.service';
+import { DEFAULT_AUTH_TYPE, User, UserAuthType } from '../../shared/models/users/user';
+import { UserRepositoryService } from '../repositories/users/user-repository.service';
+
+/**
+ * Permissions on the client are just strings. This makes clear, that
+ * permissions instead of arbitrary strings should be given.
+ */
+export enum Permission {
+    agendaCanManage = 'agenda.can_manage',
+    agendaCanSee = 'agenda.can_see',
+    agendaCanSeeInternalItems = 'agenda.can_see_internal_items',
+    agendaCanManageListOfSpeakers = 'agenda.can_manage_list_of_speakers',
+    agendaCanSeeListOfSpeakers = 'agenda.can_see_list_of_speakers',
+    agendaCanBeSpeaker = 'agenda.can_be_speaker',
+    assignmentsCanManage = 'assignments.can_manage',
+    assignmentsCanNominateOther = 'assignments.can_nominate_other',
+    assignmentsCanNominateSelf = 'assignments.can_nominate_self',
+    assignmentsCanSee = 'assignments.can_see',
+    coreCanManageConfig = 'core.can_manage_config',
+    coreCanManageLogosAndFonts = 'core.can_manage_logos_and_fonts',
+    coreCanSeeHistory = 'core.can_see_history',
+    coreCanManageProjector = 'core.can_manage_projector',
+    coreCanSeeFrontpage = 'core.can_see_frontpage',
+    coreCanSeeProjector = 'core.can_see_projector',
+    coreCanManageTags = 'core.can_manage_tags',
+    coreCanSeeLiveStream = 'core.can_see_livestream',
+    mediafilesCanManage = 'mediafiles.can_manage',
+    mediafilesCanSee = 'mediafiles.can_see',
+    motionsCanCreate = 'motions.can_create',
+    motionsCanCreateAmendments = 'motions.can_create_amendments',
+    motionsCanManage = 'motions.can_manage',
+    motionsCanManageMetadata = 'motions.can_manage_metadata',
+    motionsCanManagePolls = 'motions.can_manage_polls',
+    motionsCanSee = 'motions.can_see',
+    motionsCanSeeInternal = 'motions.can_see_internal',
+    motionsCanSupport = 'motions.can_support',
+    usersCanChangePassword = 'users.can_change_password',
+    usersCanManage = 'users.can_manage',
+    usersCanSeeExtraData = 'users.can_see_extra_data',
+    usersCanSeeName = 'users.can_see_name'
+}
+
+/**
+ * Response format of the WhoAmI request.
+ */
+export interface WhoAmI {
+    user_id: number;
+    guest_enabled: boolean;
+    user: User;
+    auth_type: UserAuthType;
+    permissions: Permission[];
+}
+
+function isWhoAmI(obj: any): obj is WhoAmI {
+    if (!obj) {
+        return false;
+    }
+    const whoAmI = obj as WhoAmI;
+    return (
+        whoAmI.guest_enabled !== undefined &&
+        whoAmI.user !== undefined &&
+        whoAmI.user_id !== undefined &&
+        whoAmI.permissions !== undefined &&
+        whoAmI.auth_type !== undefined
+    );
+}
+
+const WHOAMI_STORAGE_KEY = 'whoami';
+
+/**
+ * The operator represents the user who is using OpenSlides.
+ *
+ * Changes in operator can be observed, directives do so on order to show
+ * or hide certain information.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class OperatorService implements OnAfterAppsLoaded {
+    /**
+     * The operator.
+     */
+    private _user: User;
+
+    public get user(): User {
+        return this._user;
+    }
+
+    /**
+     * The operator as a view user. We need a separation here, because
+     * we need to acces the operators permissions, before we get data
+     * from the server to build the view user.
+     */
+    private _viewUser: ViewUser;
+
+    /**
+     * Get the user that corresponds to operator.
+     */
+    public get viewUser(): ViewUser {
+        return this._viewUser;
+    }
+
+    public get isAnonymous(): boolean {
+        return !this.user || this.user.id === 0;
+    }
+
+    public get isSuperAdmin(): boolean {
+        return this.isInGroupIdsNonAdminCheck(2);
+    }
+
+    public readonly authType: BehaviorSubject<UserAuthType> = new BehaviorSubject(DEFAULT_AUTH_TYPE);
+
+    /**
+     * Save, if guests are enabled.
+     */
+    public get guestsEnabled(): boolean {
+        return this.currentWhoAmI ? this.currentWhoAmI.guest_enabled : false;
+    }
+
+    /**
+     * The permissions of the operator. Updated via {@method updatePermissions}.
+     */
+    private permissions: Permission[] = [];
+
+    /**
+     * The subject that can be observed by other instances using observing functions.
+     */
+    private operatorSubject: BehaviorSubject<User> = new BehaviorSubject<User>(null);
+
+    /**
+     * Subject for the operator as a view user.
+     */
+    private viewOperatorSubject: BehaviorSubject<ViewUser> = new BehaviorSubject<ViewUser>(null);
+
+    /**
+     * Do not access the repo before it wasn't loaded. Will be true after `onAfterAppsLoaded`.
+     */
+    private userRepository: UserRepositoryService | null;
+
+    private _currentWhoAmI: WhoAmI | null = null;
+    private _defaultWhoAmI: WhoAmI = {
+        user_id: null,
+        guest_enabled: false,
+        user: null,
+        auth_type: DEFAULT_AUTH_TYPE,
+        permissions: []
+    };
+
+    /**
+     * The current WhoAmI response to extract the user (the operator) from.
+     */
+    private get currentWhoAmI(): WhoAmI {
+        return this._currentWhoAmI || this._defaultWhoAmI;
+    }
+
+    private set currentWhoAmI(value: WhoAmI | null) {
+        this._currentWhoAmI = value;
+
+        // Resetting the default whoami, when the current whoami isn't there. This
+        // is for a fresh restart and do not have (old) changed values in this.defaultWhoAmI
+        if (!value) {
+            this._defaultWhoAmI = this.getDefaultWhoAmIResponse();
+        }
+    }
+
+    private readonly _loaded: Deferred<void> = new Deferred();
+
+    public get loaded(): Promise<void> {
+        return this._loaded;
+    }
+
+    /**
+     * This is for the viewUser check, if the user id has changed, on a user update.
+     */
+    private lastUserId: number | null = null;
+
+    /**
+     * The subscription to the viewuser from the user repository.
+     */
+    private viewOperatorSubscription: Subscription;
+
+    /**
+     * Sets up an observer for watching changes in the DS. If the operator user or groups are changed,
+     * the operator's permissions are updated.
+     *
+     * @param http
+     * @param DS
+     * @param offlineService
+     */
+    public constructor(
+        private http: HttpService,
+        private DS: DataStoreService,
+        private offlineService: OfflineService,
+        private collectionStringMapper: CollectionStringMapperService,
+        private storageService: StorageService,
+        private OSStatus: OpenSlidesStatusService
+    ) {
+        this.DS.getChangeObservable(User).subscribe(newModel => {
+            if (this._user && this._user.id === newModel.id) {
+                this._user = newModel;
+                this.updateUserInCurrentWhoAmI();
+            }
+        });
+        this.DS.getChangeObservable(Group)
+            .pipe(
+                filter(
+                    model =>
+                        // Any group has changed if we have an operator or
+                        // group 1 (default) for anonymous changed
+                        !!this._user || model.id === 1
+                ),
+                auditTime(10)
+            )
+            .subscribe(() => this.updatePermissions());
+
+        // Watches the user observable to update the viewUser for the operator.
+        this.getUserObservable().subscribe(user => {
+            const userId = user ? user.id : null;
+            if ((!user && this.lastUserId === null) || userId === this.lastUserId) {
+                return; // The user didn't changed.
+            }
+            this.lastUserId = userId;
+
+            // User changed: clear subscription and subscribe to the new user (if there is one)
+            if (this.viewOperatorSubscription) {
+                this.viewOperatorSubscription.unsubscribe();
+            }
+
+            if (user && this.userRepository) {
+                this.viewOperatorSubscription = this.userRepository
+                    .getViewModelObservable(user.id)
+                    .subscribe(viewUser => {
+                        this._viewUser = viewUser;
+                        this.viewOperatorSubject.next(viewUser);
+                    });
+            } else {
+                // The operator is anonymous.
+                this.viewOperatorSubject.next(null);
+            }
+        });
+    }
+
+    /**
+     * Load the repo to get a view user.
+     */
+    public onAfterAppsLoaded(): void {
+        this.userRepository = this.collectionStringMapper.getRepository(ViewUser) as UserRepositoryService;
+        if (this.user) {
+            this._viewUser = this.userRepository.getViewModel(this.user.id);
+        }
+        this.viewOperatorSubject.next(this._viewUser);
+    }
+
+    /**
+     * Gets the current WhoAmI response from the storage.
+     */
+    public async whoAmIFromStorage(): Promise<WhoAmI | null> {
+        let response: WhoAmI | null = null;
+        try {
+            response = await this.storageService.get<WhoAmI>(WHOAMI_STORAGE_KEY);
+            if (!isWhoAmI(response)) {
+                response = null;
+            }
+        } catch (e) {}
+
+        if (response) {
+            await this.updateCurrentWhoAmI(response);
+        }
+        return response;
+    }
+
+    public async clearWhoAmIFromStorage(): Promise<void> {
+        await this.storageService.remove(WHOAMI_STORAGE_KEY);
+    }
+
+    /**
+     * Sets the operator user. Will be saved to storage
+     * @param user The new operator.
+     */
+    public async setWhoAmI(whoami: WhoAmI | null): Promise<void> {
+        if (whoami === null) {
+            whoami = this.getDefaultWhoAmIResponse();
+        }
+        await this.updateCurrentWhoAmI(whoami);
+    }
+
+    /**
+     * Calls `/apps/users/whoami` to find out the real operator.
+     *
+     * @returns The response of the WhoAmI request.
+     */
+    public async whoAmI(): Promise<WhoAmI> {
+        try {
+            const response = await this.http.get(environment.urlPrefix + '/users/whoami/');
+            if (isWhoAmI(response)) {
+                await this.updateCurrentWhoAmI(response);
+            } else {
+                this.offlineService.goOfflineBecauseFailedWhoAmI();
+            }
+        } catch (e) {
+            this.offlineService.goOfflineBecauseFailedWhoAmI();
+        }
+        return this.currentWhoAmI;
+    }
+
+    /**
+     * Saves the user to storage by wrapping it into a (maybe existing)
+     * WhoAMI response.
+     */
+    private async updateUserInCurrentWhoAmI(): Promise<void> {
+        if (this.isAnonymous) {
+            this.currentWhoAmI.user_id = null;
+            this.currentWhoAmI.user = null;
+        } else {
+            this.currentWhoAmI.user_id = this.user.id;
+            this.currentWhoAmI.user = this.user;
+        }
+        this.currentWhoAmI.permissions = this.permissions;
+        await this.updateCurrentWhoAmI();
+    }
+
+    /**
+     * Updates the user and update the permissions.
+     */
+    private async updateCurrentWhoAmI(whoami?: WhoAmI): Promise<void> {
+        if (whoami) {
+            this.currentWhoAmI = whoami;
+        } else {
+            whoami = this.currentWhoAmI;
+        }
+
+        this._user = whoami ? whoami.user : null;
+        this.authType.next(whoami ? whoami.auth_type : DEFAULT_AUTH_TYPE);
+        await this.updatePermissions();
+        this._loaded.resolve();
+    }
+
+    /**
+     * @returns an observable for the operator as a user.
+     */
+    public getUserObservable(): Observable<User> {
+        return this.operatorSubject.asObservable();
+    }
+
+    /**
+     * @returns an observable for the operator as a viewUser. Note, that
+     * the viewUser might not be there, so for reliable (and not display) information,
+     * use the `getUserObservable`.
+     */
+    public getViewUserObservable(): Observable<ViewUser> {
+        return this.viewOperatorSubject.asObservable();
+    }
+
+    /**
+     * Checks, if the operator has at least one of the given permissions.
+     * @param checkPerms The permissions to check, if at least one matches.
+     */
+    public hasPerms(...checkPerms: Permission[]): boolean {
+        if (this._user && this._user.groups_id.includes(2)) {
+            return true;
+        }
+        return checkPerms.some(permission => {
+            return this.permissions.includes(permission);
+        });
+    }
+
+    /**
+     * Returns true, if the operator is in at least one group or he is in the admin group.
+     * @param groups The groups to check
+     */
+    public isInGroup(...groups: Group[]): boolean {
+        return this.isInGroupIds(...groups.map(group => group.id));
+    }
+
+    /**
+     * Returns true, if the operator is in at least one group or he is in the admin group.
+     * @param groups The group ids to check
+     */
+    public isInGroupIds(...groupIds: number[]): boolean {
+        if (!this.isInGroupIdsNonAdminCheck(...groupIds)) {
+            // An admin has all perms and is technically in every group.
+            return this.user && this.user.groups_id.includes(2);
+        }
+        return true;
+    }
+
+    /**
+     * Returns true, if the operator is in at least one group.
+     * @param groups The group ids to check
+     */
+    public isInGroupIdsNonAdminCheck(...groupIds: number[]): boolean {
+        if (!this.user) {
+            return groupIds.includes(1); // any anonymous is in the default group.
+        }
+        return groupIds.some(id => this.user.groups_id.includes(id));
+    }
+
+    /**
+     * Update the operators permissions and publish the operator afterwards.
+     * Saves the current WhoAmI to storage with the updated permissions
+     */
+    private async updatePermissions(): Promise<void> {
+        this.permissions = [];
+
+        // If we do not have any groups, take the permissions from the
+        // latest WhoAmI response.
+        if (this.DS.getAll(Group).length === 0) {
+            if (this.currentWhoAmI) {
+                this.permissions = this.currentWhoAmI.permissions;
+            }
+        } else {
+            // Anonymous or users in the default group.
+            if (!this.user || this.user.groups_id.length === 0) {
+                const defaultGroup: Group = this.DS.get<Group>('users/group', 1);
+                if (defaultGroup && defaultGroup.permissions instanceof Array) {
+                    this.permissions = defaultGroup.permissions;
+                }
+            } else {
+                const permissionSet = new Set<Permission>();
+                this.DS.getMany(Group, this.user.groups_id).forEach(group => {
+                    group.permissions.forEach(permission => {
+                        permissionSet.add(permission);
+                    });
+                });
+                this.permissions = Array.from(permissionSet.values());
+            }
+        }
+
+        // Save perms to current WhoAmI
+        this.currentWhoAmI.permissions = this.permissions;
+
+        if (!this.OSStatus.isInHistoryMode) {
+            await this.storageService.set(WHOAMI_STORAGE_KEY, this.currentWhoAmI);
+        }
+
+        // publish changes in the operator.
+        this.operatorSubject.next(this.user);
+    }
+
+    /**
+     * Set the operators presence to isPresent
+     */
+    public async setPresence(isPresent: boolean): Promise<void> {
+        await this.http.post(environment.urlPrefix + '/users/setpresence/', isPresent);
+    }
+
+    /**
+     * Returns a default WhoAmI response
+     */
+    private getDefaultWhoAmIResponse(): WhoAmI {
+        return {
+            user_id: null,
+            guest_enabled: false,
+            user: null,
+            auth_type: DEFAULT_AUTH_TYPE,
+            permissions: []
+        };
+    }
+}

client/src/app/core/core-services/ping.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { PingService } from './ping.service';
+
+describe('PingService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [PingService]
+        });
+    });
+
+    it('should be created', inject([PingService], (service: PingService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/ping.service.ts

@@ -0,0 +1,86 @@
+import { Injectable } from '@angular/core';
+
+import { ConstantsService } from './constants.service';
+import { Deferred } from '../promises/deferred';
+import { TimeoutPromise } from '../promises/timeout-promise';
+import { WebsocketService } from './websocket.service';
+
+interface OpenSlidesSettings {
+    PING_INTERVAL?: number;
+    PING_TIMEOUT?: number;
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PingService {
+    /**
+     * The interval.
+     */
+    private pingInterval: any;
+
+    private intervalTime = 30000;
+
+    private timeoutTime = 5000;
+
+    private lastLatency: number | null = null;
+
+    public constructor(private websocketService: WebsocketService, private constantsService: ConstantsService) {
+        this.setup();
+    }
+
+    private async setup(): Promise<void> {
+        const gotConstants = new Deferred();
+
+        this.constantsService.get<OpenSlidesSettings>('Settings').subscribe(settings => {
+            this.intervalTime = settings.PING_INTERVAL || 30000;
+            this.timeoutTime = settings.PING_TIMEOUT || 5000;
+            gotConstants.resolve();
+        });
+        await gotConstants;
+
+        // Connects the ping-pong mechanism to the opening and closing of the connection.
+        this.websocketService.closeEvent.subscribe(() => this.stopPing());
+        this.websocketService.generalConnectEvent.subscribe(() => this.startPing());
+        if (this.websocketService.isConnected) {
+            this.startPing();
+        }
+    }
+
+    /**
+     * Starts the ping-mechanism
+     */
+    private startPing(): void {
+        if (this.pingInterval) {
+            return;
+        }
+
+        this.pingInterval = setInterval(async () => {
+            const start = performance.now();
+            try {
+                await TimeoutPromise(
+                    this.websocketService.sendAndGetResponse('ping', this.lastLatency),
+                    this.timeoutTime
+                );
+                this.lastLatency = performance.now() - start;
+                if (this.lastLatency > 1000) {
+                    console.warn(`Ping took ${this.lastLatency / 1000} seconds.`);
+                }
+            } catch (e) {
+                console.warn(`The server didn't respond to ping within ${this.timeoutTime / 1000} seconds.`);
+                this.stopPing();
+                this.websocketService.simulateAbnormalClose();
+            }
+        }, this.intervalTime);
+    }
+
+    /**
+     * Clears the ping interval
+     */
+    private stopPing(): void {
+        if (this.pingInterval) {
+            clearInterval(this.pingInterval);
+            this.pingInterval = null;
+        }
+    }
+}

client/src/app/core/core-services/prioritize.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { PrioritizeService } from './prioritize.service';
+
+describe('PrioritizeService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [PrioritizeService]
+        });
+    });
+
+    it('should be created', inject([PrioritizeService], (service: PrioritizeService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/prioritize.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+
+import { ConstantsService } from './constants.service';
+import { DataStoreService } from './data-store.service';
+import { OpenSlidesStatusService } from './openslides-status.service';
+import { OperatorService } from './operator.service';
+import { WebsocketService } from './websocket.service';
+
+interface OpenSlidesSettings {
+    PRIORITIZED_GROUP_IDS?: number[];
+}
+
+/**
+ * Cares about prioritizing a client. Checks, if the operator is in one of
+ * some prioritized groups. These group ids come from the server. If the prio-
+ * ritization changes, the websocket connection gets reconnected.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class PrioritizeService {
+    private prioritizedGroupIds: number[] = [];
+
+    public constructor(
+        constantsService: ConstantsService,
+        private websocketService: WebsocketService,
+        private DS: DataStoreService,
+        private openSlidesStatusService: OpenSlidesStatusService,
+        private operator: OperatorService
+    ) {
+        constantsService.get<OpenSlidesSettings>('Settings').subscribe(settings => {
+            this.prioritizedGroupIds = settings.PRIORITIZED_GROUP_IDS || [];
+            this.checkPrioritization();
+        });
+        operator.getUserObservable().subscribe(() => this.checkPrioritization());
+    }
+
+    private checkPrioritization(): void {
+        const opPrioritized = this.operator.isInGroupIdsNonAdminCheck(...this.prioritizedGroupIds);
+        if (this.openSlidesStatusService.isPrioritizedClient !== opPrioritized) {
+            console.log('Alter prioritization:', opPrioritized);
+            this.openSlidesStatusService.isPrioritizedClient = opPrioritized;
+            this.websocketService.reconnect(this.DS.maxChangeId);
+        }
+    }
+}

client/src/app/core/core-services/projector-data.service.spec.ts

@@ -0,0 +1,16 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { ProjectorDataService } from './projector-data.service';
+
+describe('ProjectorDataService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [ProjectorDataService]
+        });
+    });
+    it('should be created', inject([ProjectorDataService], (service: ProjectorDataService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/projector-data.service.ts

@@ -0,0 +1,154 @@
+import { Injectable } from '@angular/core';
+
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { auditTime } from 'rxjs/operators';
+
+import { WebsocketService } from 'app/core/core-services/websocket.service';
+import { Projector, ProjectorElement } from 'app/shared/models/core/projector';
+
+export interface SlideData<T = { error?: string }, P extends ProjectorElement = ProjectorElement> {
+    data: T;
+    element: P;
+    error?: string;
+}
+
+export type ProjectorData = SlideData[];
+
+interface AllProjectorData {
+    [id: number]: ProjectorData | { error: string };
+}
+
+/**
+ * Received data from server.
+ */
+interface ProjectorWebsocketMessage {
+    /**
+     * The `change_id` of the current update.
+     */
+    change_id: number;
+
+    /**
+     * The necessary new projector-data.
+     */
+    data: AllProjectorData;
+}
+
+/**
+ * This service handles the websocket connection for the projector data.
+ * Each projector instance registers itself by calling `getProjectorObservable`.
+ * A projector should deregister itself, when the component is destroyed.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class ProjectorDataService {
+    /**
+     * Counts the open projector instances per projector id.
+     */
+    private openProjectorInstances: { [id: number]: number } = {};
+
+    /**
+     * Holds the current projector data for each projector.
+     */
+    private currentProjectorData: { [id: number]: BehaviorSubject<ProjectorData | null> } = {};
+
+    /**
+     * When multiple projectory are requested, debounce these requests to just issue
+     * one request, with all the needed projectors.
+     */
+    private readonly updateProjectorDataDebounceSubject = new Subject<void>();
+
+    /**
+     * Holds the current change id to check, if the update contains new content or a deprecated one.
+     */
+    private currentChangeId = 0;
+
+    /**
+     * Constructor.
+     *
+     * @param websocketService
+     */
+    public constructor(private websocketService: WebsocketService) {
+        // Dispatch projector data.
+        this.websocketService.getOberservable('projector').subscribe((update: ProjectorWebsocketMessage) => {
+            if (this.currentChangeId > update.change_id) {
+                return;
+            }
+            Object.keys(update.data).forEach(_id => {
+                const id = parseInt(_id, 10);
+                if (this.currentProjectorData[id]) {
+                    this.currentProjectorData[id].next(update.data[id] as ProjectorData);
+                }
+            });
+            this.currentChangeId = update.change_id;
+        });
+
+        // The service need to re-register, if the websocket connection was lost.
+        this.websocketService.generalConnectEvent.subscribe(() => this.updateProjectorDataSubscription());
+
+        // With a bit of debounce, update the needed projectors.
+        this.updateProjectorDataDebounceSubject.pipe(auditTime(10)).subscribe(() => {
+            const allActiveProjectorIds = Object.keys(this.openProjectorInstances)
+                .map(id => parseInt(id, 10))
+                .filter(id => this.openProjectorInstances[id] > 0);
+            this.websocketService.send('listenToProjectors', { projector_ids: allActiveProjectorIds });
+        });
+    }
+
+    /**
+     * Gets an observable for the projector data.
+     *
+     * @param projectorId The requested projector
+     * @return an observable for the projector data of the given projector.
+     */
+    public getProjectorObservable(projectorId: number): Observable<ProjectorData | null> {
+        // Count projectors.
+        if (!this.openProjectorInstances[projectorId]) {
+            this.openProjectorInstances[projectorId] = 1;
+            if (!this.currentProjectorData[projectorId]) {
+                this.currentProjectorData[projectorId] = new BehaviorSubject<ProjectorData | null>(null);
+            }
+        } else {
+            this.openProjectorInstances[projectorId]++;
+        }
+
+        // Projector opened the first time.
+        if (this.openProjectorInstances[projectorId] === 1) {
+            this.updateProjectorDataSubscription();
+        }
+        return this.currentProjectorData[projectorId].asObservable();
+    }
+
+    /**
+     * Unsubscribe data from the server, if the last projector was closed.
+     *
+     * @param projectorId the projector.
+     */
+    public projectorClosed(projectorId: number): void {
+        if (this.openProjectorInstances[projectorId]) {
+            this.openProjectorInstances[projectorId]--;
+        }
+        if (this.openProjectorInstances[projectorId] === 0) {
+            this.updateProjectorDataSubscription();
+            this.currentProjectorData[projectorId].next(null);
+        }
+    }
+
+    /**
+     * Requests to update the data subscription to the server.
+     */
+    private updateProjectorDataSubscription(): void {
+        this.updateProjectorDataDebounceSubject.next();
+    }
+
+    /**
+     * @returns the available projectior data for the given projector. Note that the data
+     * might not be there, if there is no subscribtion for this projector. But the
+     * data, if exist, is always the current data.
+     */
+    public getAvailableProjectorData(projector: Projector): ProjectorData | null {
+        if (this.currentProjectorData[projector.id]) {
+            return this.currentProjectorData[projector.id].getValue();
+        }
+    }
+}

client/src/app/core/core-services/projector.service.spec.ts

@@ -0,0 +1,18 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from 'e2e-imports.module';
+
+import { ProjectorService } from './projector.service';
+
+describe('ProjectorService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [ProjectorService]
+        });
+    });
+
+    it('should be created', inject([ProjectorService], (service: ProjectorService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/projector.service.ts

@@ -0,0 +1,429 @@
+import { Injectable } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { BaseModel } from 'app/shared/models/base/base-model';
+import { ProjectionDefault } from 'app/shared/models/core/projection-default';
+import {
+    elementIdentifies,
+    IdentifiableProjectorElement,
+    Projector,
+    ProjectorElement,
+    ProjectorElements
+} from 'app/shared/models/core/projector';
+import { BaseProjectableViewModel } from 'app/site/base/base-projectable-view-model';
+import {
+    isProjectable,
+    isProjectorElementBuildDeskriptor,
+    Projectable,
+    ProjectorElementBuildDeskriptor
+} from 'app/site/base/projectable';
+import { SlideManager } from 'app/slides/services/slide-manager.service';
+import { ConfigService } from '../ui-services/config.service';
+import { DataStoreService } from './data-store.service';
+import { HttpService } from './http.service';
+import { ProjectorDataService } from './projector-data.service';
+import { ViewModelStoreService } from './view-model-store.service';
+
+export interface ProjectorTitle {
+    title: string;
+    subtitle?: string;
+}
+
+/**
+ * This service cares about Projectables being projected and manage all projection-related
+ * actions.
+ *
+ * We cannot access the ProjectorRepository here, so we will deal with plain projector objects.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class ProjectorService {
+    /**
+     * Constructor.
+     *
+     * @param DS
+     * @param dataSend
+     */
+    public constructor(
+        private DS: DataStoreService,
+        private http: HttpService,
+        private slideManager: SlideManager,
+        private viewModelStore: ViewModelStoreService,
+        private translate: TranslateService,
+        private configService: ConfigService,
+        private projectorDataService: ProjectorDataService
+    ) {}
+
+    /**
+     * Retusn the identifiable projector element from the given types of slides/elements/descriptors
+     *
+     * @param obj Something related to IdentifiableProjectorElement
+     * @returns the identifiable projector element from obj.
+     */
+    private getProjectorElement(
+        obj: Projectable | ProjectorElementBuildDeskriptor | IdentifiableProjectorElement
+    ): IdentifiableProjectorElement {
+        if (isProjectable(obj)) {
+            return obj.getSlide(this.configService).getBasicProjectorElement({});
+        } else if (isProjectorElementBuildDeskriptor(obj)) {
+            return obj.getBasicProjectorElement({});
+        } else {
+            return obj;
+        }
+    }
+
+    /**
+     * Checks, if a given object is projected.
+     *
+     * @param obj The object in question
+     * @returns true, if the object is projected on one projector.
+     */
+    public isProjected(obj: Projectable | ProjectorElementBuildDeskriptor | IdentifiableProjectorElement): boolean {
+        const element = this.getProjectorElement(obj);
+        return this.DS.getAll<Projector>('core/projector').some(projector => {
+            return projector.isElementShown(element);
+        });
+    }
+
+    /**
+     * Get all projectors where the object is prejected on.
+     *
+     * @param obj The object in question
+     * @return All projectors, where this Object is projected on
+     */
+    public getProjectorsWhichAreProjecting(
+        obj: Projectable | ProjectorElementBuildDeskriptor | IdentifiableProjectorElement
+    ): Projector[] {
+        const element = this.getProjectorElement(obj);
+        return this.DS.getAll<Projector>('core/projector').filter(projector => {
+            return projector.isElementShown(element);
+        });
+    }
+
+    /**
+     * Checks, if the object is projected on the given projector.
+     *
+     * @param obj The object
+     * @param projector The projector to test
+     * @returns true, if the object is projected on the projector.
+     */
+    public isProjectedOn(
+        obj: Projectable | ProjectorElementBuildDeskriptor | IdentifiableProjectorElement,
+        projector: Projector
+    ): boolean {
+        return projector.isElementShown(this.getProjectorElement(obj));
+    }
+
+    /**
+     * Projects the given ProjectorElement on the given projectors. Removes the element
+     * from all non-given projectors
+     *
+     * @param projectors All projectors where to add the element.
+     * @param element The element in question.
+     */
+    public projectOnMultiple(projectors: Projector[], element: IdentifiableProjectorElement): void {
+        this.DS.getAll<Projector>('core/projector').forEach(projector => {
+            if (projectors.includes(projector)) {
+                this.projectOn(projector, element);
+            } else if (projector.isElementShown(element)) {
+                this.removeFrom(projector, element);
+            }
+        });
+    }
+
+    /**
+     * Projcets the given object on the projector. If the object is non-stable, all other non-stable
+     * elements will be removed and added to the history.
+     *
+     * @param projector The projector to add the object to.
+     * @param obj The object to project
+     */
+    public async projectOn(
+        projector: Projector,
+        obj: Projectable | ProjectorElementBuildDeskriptor | IdentifiableProjectorElement
+    ): Promise<void> {
+        const element = this.getProjectorElement(obj);
+
+        if (element.stable) {
+            // remove the same element, if it is currently projected
+            projector.removeElements(element);
+            // Add this stable element
+            projector.addElement(element);
+            await this.projectRequest(projector, projector.elements);
+        } else {
+            // For non-stable elements remove all other non-stable elements, add them to the history and
+            // add the one new element to the projector.
+            const removedElements = projector.removeAllNonStableElements();
+            let changed = removedElements.length > 0;
+
+            if (element) {
+                projector.addElement(element);
+                changed = true;
+            }
+            if (changed) {
+                await this.projectRequest(projector, projector.elements, null, removedElements, false, true);
+            }
+        }
+    }
+
+    /**
+     * Removes the given object from the projector. Non stable elements will be added to the history.
+     *
+     * @param projector The projector
+     * @param obj the object to unproject
+     */
+    public async removeFrom(
+        projector: Projector,
+        obj: Projectable | ProjectorElementBuildDeskriptor | IdentifiableProjectorElement
+    ): Promise<void> {
+        const element = this.getProjectorElement(obj);
+
+        const removedElements = projector.removeElements(element);
+        if (removedElements.length > 0) {
+            if (element.stable) {
+                await this.projectRequest(projector, projector.elements);
+            } else {
+                // For non-stable elements: Add removed elements to the history.
+                await this.projectRequest(projector, projector.elements, null, removedElements);
+            }
+        }
+    }
+
+    public async updateElement(
+        projector: Projector,
+        obj: Projectable | ProjectorElementBuildDeskriptor | IdentifiableProjectorElement
+    ): Promise<void> {
+        const element = this.getProjectorElement(obj);
+        projector.replaceElements(element);
+        await this.projectRequest(projector, projector.elements, projector.elements_preview);
+    }
+
+    /**
+     * Executes the request to change projector elements.
+     *
+     * Note: Just one of `appendToHistory` and `deleteLastHistoryElement` can be given.
+     *
+     * @param projector The affected projector
+     * @param elements (optional) Elements to set.
+     * @param preview (optional) preview to set
+     * @param appendToHistory (optional) Elements to be appended to the history
+     * @param deleteLastHistroyElement (optional) If given, the last history element will be removed.
+     */
+    private async projectRequest(
+        projector: Projector,
+        elements?: ProjectorElements,
+        preview?: ProjectorElements,
+        appendToHistory?: ProjectorElements,
+        deleteLastHistroyElement?: boolean,
+        resetScroll?: boolean
+    ): Promise<void> {
+        const requestData: any = {};
+        if (elements) {
+            requestData.elements = this.cleanupElements(projector, elements);
+        }
+        if (preview) {
+            requestData.preview = preview;
+        }
+        if (appendToHistory && appendToHistory.length) {
+            requestData.append_to_history = appendToHistory;
+        }
+        if (deleteLastHistroyElement) {
+            requestData.delete_last_history_element = true;
+        }
+        if (appendToHistory && appendToHistory.length && deleteLastHistroyElement) {
+            throw new Error('You cannot append to the history and delete the last element at the same time');
+        }
+        if (resetScroll) {
+            requestData.reset_scroll = resetScroll;
+        }
+        await this.http.post(`/rest/core/projector/${projector.id}/project/`, requestData);
+    }
+
+    /**
+     * Cleans up stable elements with errors from the projector
+     *
+     * @param projector The projector
+     * @param elements The elements to clean up
+     * @reutns the cleaned up elements.
+     */
+    private cleanupElements(projector: Projector, elements: ProjectorElements): ProjectorElements {
+        const projectorData = this.projectorDataService.getAvailableProjectorData(projector);
+
+        if (projectorData) {
+            projectorData.forEach(entry => {
+                if (entry.data.error && entry.element.stable) {
+                    // Remove this element
+                    const idElementToRemove = this.slideManager.getIdentifiableProjectorElement(entry.element);
+                    elements = elements.filter(element => {
+                        return !elementIdentifies(idElementToRemove, element);
+                    });
+                }
+            });
+        }
+
+        return elements;
+    }
+
+    /**
+     * Given a projectiondefault, we want to retrieve the projector, that is assigned
+     * to this default.
+     *
+     * @param projectiondefault The projection default
+     * @return the projector associated to the given projectiondefault.
+     */
+    public getProjectorForDefault(projectiondefault: string): Projector | null {
+        const pd = this.DS.find(ProjectionDefault, _pd => _pd.name === projectiondefault);
+        if (pd) {
+            return this.DS.get<Projector>(Projector, pd.projector_id);
+        } else {
+            return null;
+        }
+    }
+
+    /**
+     * Asserts, that the given element is mappable to a model or view model.
+     * Throws an error, if this assertion fails.
+     *
+     * @param element The element to check
+     */
+    private assertElementIsMappable(element: IdentifiableProjectorElement): void {
+        if (!this.slideManager.canSlideBeMappedToModel(element.name)) {
+            throw new Error('This projector element cannot be mapped to a model');
+        }
+        const identifiers = element.getIdentifiers();
+        if (!identifiers.includes('name') || !identifiers.includes('id')) {
+            throw new Error('To map this element to a model, a name and id is needed.');
+        }
+    }
+
+    /**
+     * Returns a model associated with the identifiable projector element. Throws an error,
+     * if the element is not mappable.
+     *
+     * @param element The projector element
+     * @returns the model from the projector element
+     */
+    public getModelFromProjectorElement<T extends BaseModel>(element: IdentifiableProjectorElement): T {
+        this.assertElementIsMappable(element);
+        return this.DS.get<T>(element.name, element.id);
+    }
+
+    /**
+     * Returns a view model associated with the identifiable projector element. Throws an error,
+     * if the element is not mappable.
+     *
+     * @param element The projector element
+     * @returns the view model from the projector element
+     */
+    public getViewModelFromProjectorElement<T extends BaseProjectableViewModel>(
+        element: IdentifiableProjectorElement
+    ): T {
+        this.assertElementIsMappable(element);
+        const viewModel = this.viewModelStore.get<T>(element.name, element.id);
+        if (viewModel && !isProjectable(viewModel)) {
+            console.error('The view model is not projectable', viewModel, element);
+        }
+        return viewModel;
+    }
+
+    /**
+     */
+    public getSlideTitle(element: ProjectorElement): ProjectorTitle {
+        if (this.slideManager.canSlideBeMappedToModel(element.name)) {
+            const idElement = this.slideManager.getIdentifiableProjectorElement(element);
+            const viewModel = this.getViewModelFromProjectorElement(idElement);
+            if (viewModel) {
+                return viewModel.getProjectorTitle();
+            }
+        }
+        const configuration = this.slideManager.getSlideConfiguration(element.name);
+        if (configuration.getSlideTitle) {
+            return configuration.getSlideTitle(element, this.translate, this.viewModelStore);
+        }
+
+        return { title: this.translate.instant(this.slideManager.getSlideVerboseName(element.name)) };
+    }
+
+    /**
+     * Projects the next slide in the queue. Moves all currently projected
+     * non-stable slides to the history.
+     *
+     * @param projector The projector
+     */
+    public async projectNextSlide(projector: Projector): Promise<void> {
+        await this.projectPreviewSlide(projector, 0);
+    }
+
+    /**
+     * Projects one slide (given by the index of the preview) on the given projector. Moves
+     * all current projected non-stable elements to the history.
+     *
+     * @param projector The projector
+     * @param previewIndex The index in the `elements_preview` array.
+     */
+    public async projectPreviewSlide(projector: Projector, previewIndex: number): Promise<void> {
+        if (projector.elements_preview.length === 0 || previewIndex >= projector.elements_preview.length) {
+            return;
+        }
+
+        const removedElements = projector.removeAllNonStableElements();
+        projector.addElement(projector.elements_preview.splice(previewIndex, 1)[0]);
+        await this.projectRequest(
+            projector,
+            projector.elements,
+            projector.elements_preview,
+            removedElements,
+            false,
+            true
+        );
+    }
+
+    /**
+     * Projects the last slide of the history. This slide will be removed from the history.
+     *
+     * @param projector The projector
+     */
+    public async projectPreviousSlide(projector: Projector): Promise<void> {
+        if (projector.elements_history.length === 0) {
+            return;
+        }
+        // Get the last element from the history
+        const lastElements: ProjectorElements = projector.elements_history[projector.elements_history.length - 1];
+        let lastElement: ProjectorElement = null;
+        if (lastElements.length > 0) {
+            lastElement = lastElements[0];
+        }
+
+        // Add all current elements to the preview.
+        const removedElements = projector.removeAllNonStableElements();
+        removedElements.forEach(e => projector.elements_preview.unshift(e));
+
+        // Add last element
+        if (lastElement) {
+            projector.addElement(lastElement);
+        }
+        await this.projectRequest(projector, projector.elements, projector.elements_preview, null, true, true);
+    }
+
+    /**
+     * Saves the preview of the projector
+     *
+     * @param projector The projector to save the preview.
+     */
+    public async savePreview(projector: Projector): Promise<void> {
+        await this.projectRequest(projector, null, projector.elements_preview);
+    }
+
+    /**
+     * Appends the given element to the preview.
+     *
+     * @param projector The projector
+     * @param element The element to add to the preview.
+     */
+    public async addElementToPreview(projector: Projector, element: ProjectorElement): Promise<void> {
+        projector.elements_preview.push(element);
+        await this.projectRequest(projector, null, projector.elements_preview);
+    }
+}

client/src/app/core/core-services/pwa.service.spec.ts

@@ -0,0 +1,18 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from 'e2e-imports.module';
+
+import { PwaService } from './pwa.service';
+
+describe('PwaService', () => {
+    beforeEach(() =>
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [PwaService]
+        })
+    );
+
+    it('should be created', inject([PwaService], (service: PwaService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/pwa.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
+
+/**
+ * Service for Progressive Web App options
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class PwaService {
+    public promptEvent;
+
+    public constructor(swUpdate: SwUpdate) {
+        // check if an update is available
+        swUpdate.available.subscribe(event => {
+            // TODO: ask user if app should update now
+            window.location.reload();
+        });
+
+        // install button
+        window.addEventListener('beforeinstallprompt', event => {
+            this.promptEvent = event;
+        });
+    }
+}

client/src/app/core/core-services/relation-cache.service.spec.ts

@@ -0,0 +1,16 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { RelationCacheService } from './relation-cache.service';
+
+describe('RelationCacheService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [RelationCacheService]
+        });
+    });
+    it('should be created', inject([RelationCacheService], (service: RelationCacheService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/relation-cache.service.ts

@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+
+export interface CacheChangeIds {
+    [elementId: string]: number;
+}
+
+/**
+ * Handles caching metadata for the relation manager.
+ *
+ * Mainly holds an object mapping element ids to their last updates change ids.
+ * The manager can detect invalid caches, if the change id in the cache's metadata
+ * diverges from the change ids in this service.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class RelationCacheService {
+    private cache: {
+        [elementId: string]: number;
+    } = {};
+
+    public constructor() {}
+
+    /**
+     * Reset the cache.
+     */
+    public reset(): void {
+        this.cache = {};
+    }
+
+    /**
+     * Deletes models from this cache.
+     *
+     * @param collection Collection
+     * @param ids Ids from all models in the collection
+     */
+    public registerDeletedModels(collection: string, ids: number[]): void {
+        ids.forEach(id => {
+            const elementId = collection + ':' + id;
+            delete this.cache[elementId];
+        });
+    }
+
+    /**
+     * Adds models to the cache with the given change id.
+     *
+     * @param collection Collection
+     * @param ids Ids from all models in the collection
+     * @param changeId The change id to put into the cache
+     */
+    public registerChangedModels(collection: string, ids: number[], changeId: number): void {
+        ids.forEach(id => {
+            const elementId = collection + ':' + id;
+            this.cache[elementId] = changeId;
+        });
+    }
+
+    /**
+     * Queries the change id for one element.
+     *
+     * @param elementId The element to query.
+     */
+    public query(elementId: string): number | null {
+        return this.cache[elementId] || null;
+    }
+
+    /**
+     * Checks, if all given change ids are valid.
+     */
+    public checkCacheValidity(changeIds: CacheChangeIds): boolean {
+        if (!changeIds) {
+            return false;
+        }
+
+        const elementIds = Object.keys(changeIds);
+        if (!elementIds.length) {
+            return false;
+        }
+
+        return elementIds.every(elementId => {
+            return this.query(elementId) === changeIds[elementId];
+        });
+    }
+}

client/src/app/core/core-services/relation-manager.service.spec.ts

@@ -0,0 +1,16 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { RelationManagerService } from './relation-manager.service';
+
+describe('RelationManagerService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [RelationManagerService]
+        });
+    });
+    it('should be created', inject([RelationManagerService], (service: RelationManagerService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/relation-manager.service.ts

@@ -0,0 +1,254 @@
+import { Injectable } from '@angular/core';
+
+import { BaseModel } from 'app/shared/models/base/base-model';
+import { BaseViewModel, ViewModelConstructor } from 'app/site/base/base-view-model';
+import { ModelDescriptor, NestedModelDescriptors } from '../repositories/base-repository';
+import { CacheChangeIds, RelationCacheService } from './relation-cache.service';
+import {
+    isCustomRelationDefinition,
+    isGenericRelationDefinition,
+    isNormalRelationDefinition,
+    isReverseRelationDefinition,
+    RelationDefinition
+} from '../definitions/relations';
+import { ViewModelStoreService } from './view-model-store.service';
+
+/**
+ * Manages relations between view models. This service is and should only used by the
+ * base repository to offload managing relations between view models.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class RelationManagerService {
+    public constructor(
+        private viewModelStoreService: ViewModelStoreService,
+        private relationCacheService: RelationCacheService
+    ) {}
+
+    public handleRelation<M extends BaseModel, V extends BaseViewModel>(
+        model: M,
+        viewModel: V,
+        relation: RelationDefinition
+    ): any {
+        if (isNormalRelationDefinition(relation)) {
+            if (
+                (relation.type === 'M2M' || relation.type === 'O2M') &&
+                model[relation.ownIdKey] &&
+                model[relation.ownIdKey].constructor === Array
+            ) {
+                const foreignViewModels = this.viewModelStoreService.getMany(
+                    relation.foreignViewModel,
+                    model[relation.ownIdKey]
+                );
+                this.sortViewModels(foreignViewModels, relation.order);
+                return foreignViewModels;
+            } else if (relation.type === 'M2O') {
+                const foreignViewModel = this.viewModelStoreService.get(
+                    relation.foreignViewModel,
+                    model[relation.ownIdKey]
+                );
+                return foreignViewModel;
+            }
+        } else if (isReverseRelationDefinition(relation)) {
+            if (relation.type === 'M2M') {
+                const foreignViewModels = this.viewModelStoreService.filter(
+                    relation.foreignViewModel,
+                    foreignViewModel =>
+                        foreignViewModel[relation.foreignIdKey] &&
+                        foreignViewModel[relation.foreignIdKey].constructor === Array &&
+                        foreignViewModel[relation.foreignIdKey].includes(model.id)
+                );
+                this.sortViewModels(foreignViewModels, relation.order);
+                return foreignViewModels;
+            } else if (relation.type === 'O2M') {
+                const foreignViewModels = this.viewModelStoreService.filter(
+                    relation.foreignViewModel,
+                    foreignViewModel =>
+                        foreignViewModel[relation.foreignIdKey] && foreignViewModel[relation.foreignIdKey] === model.id
+                );
+                this.sortViewModels(foreignViewModels, relation.order);
+                return foreignViewModels;
+            } else if (relation.type === 'M2O') {
+                const foreignViewModel = this.viewModelStoreService.find(
+                    relation.foreignViewModel,
+                    _foreignViewModel =>
+                        _foreignViewModel[relation.foreignIdKey] &&
+                        _foreignViewModel[relation.foreignIdKey] === model.id
+                );
+                return foreignViewModel;
+            }
+        } else if (isGenericRelationDefinition(relation)) {
+            const contentObject = this.viewModelStoreService.get<BaseViewModel>(
+                model[relation.ownContentObjectDataKey].collection,
+                model[relation.ownContentObjectDataKey].id
+            );
+            if (contentObject && relation.isVForeign(contentObject)) {
+                return contentObject;
+            }
+        } else if (isCustomRelationDefinition(relation)) {
+            return relation.get(model, viewModel);
+        }
+    }
+
+    public handleCachedRelation<V extends BaseViewModel>(
+        property: string,
+        target: V,
+        model: BaseModel,
+        viewModel: BaseViewModel,
+        relation: RelationDefinition
+    ): any {
+        // No cache for reverse relations.
+        // The issue: we cannot invalidate the cache, if a new object is created (The
+        // following example is for a O2M foreign relation):
+        // There is no possibility to detect the create case: The target does not update,
+        // all related models does not update. The autoupdate does not provide the created-
+        // information. So we may check, if the relaten has changed in length every time. But
+        // this is the same as just resolving the relation every time it is requested. So no cache here.
+        if (isReverseRelationDefinition(relation)) {
+            return this.handleRelation(model, viewModel, relation) as BaseViewModel | BaseViewModel[];
+        }
+
+        let result: any;
+
+        const cacheProperty = '__' + property;
+        const cachePropertyChangeIds = cacheProperty + '_cids';
+        let cached: boolean = cacheProperty in target;
+        let changeIds: CacheChangeIds | null = null;
+        if (cached) {
+            result = target[cacheProperty];
+            changeIds = target[cachePropertyChangeIds];
+        }
+
+        if (!isCustomRelationDefinition(relation)) {
+            if (cached) {
+                cached = this.relationCacheService.checkCacheValidity(changeIds);
+            }
+
+            if (!cached) {
+                result = this.handleRelation(model, viewModel, relation) as BaseViewModel | BaseViewModel[];
+
+                if (result) {
+                    // Cache it:
+                    target[cacheProperty] = result;
+                    const newChangeIds = {};
+                    if (Array.isArray(result)) {
+                        result.forEach(
+                            (_vm: BaseViewModel) =>
+                                (newChangeIds[_vm.elementId] = this.relationCacheService.query(_vm.elementId))
+                        );
+                    } else {
+                        newChangeIds[result.elementId] = this.relationCacheService.query(result.elementId);
+                    }
+                    target[cachePropertyChangeIds] = newChangeIds;
+                } else {
+                    delete target[cacheProperty];
+                }
+            }
+        } else {
+            // Custom relations
+            const obj = relation.getCacheObjectToCheck(viewModel);
+            if (cached) {
+                if (obj && changeIds && changeIds[obj.elementId]) {
+                    cached = this.relationCacheService.query(obj.elementId) === changeIds[obj.elementId];
+                } else {
+                    cached = false;
+                }
+            }
+
+            if (!cached) {
+                result = this.handleRelation(model, viewModel, relation);
+
+                if (result && obj) {
+                    target[cacheProperty] = result;
+                    target[cachePropertyChangeIds] = {};
+                    target[cachePropertyChangeIds][obj.elementId] = this.relationCacheService.query(obj.elementId);
+                } else {
+                    delete target[cachePropertyChangeIds];
+                }
+            }
+        }
+
+        return result;
+    }
+
+    /**
+     * Sorts the array of foreign view models in the given view models for the given relation.
+     */
+    public sortViewModels(viewModels: BaseViewModel[], order?: string): void {
+        viewModels.sort((a: BaseViewModel, b: BaseViewModel) => {
+            if (!order || a[order] === b[order]) {
+                return a.id - b.id;
+            } else {
+                return a[order] - b[order];
+            }
+        });
+    }
+
+    public createViewModel<M extends BaseModel, V extends BaseViewModel>(
+        model: M,
+        viewModelCtor: ViewModelConstructor<V>,
+        relationsByKey: { [key: string]: RelationDefinition },
+        nestedModelDescriptors: NestedModelDescriptors
+    ): V {
+        let viewModel = new viewModelCtor(model);
+        viewModel = new Proxy(viewModel, {
+            get: (target: V, property) => {
+                let result: any;
+                const _model: M = target.getModel();
+                const relation = typeof property === 'string' ? relationsByKey[property] : null;
+
+                // try to find a getter for property
+                if (property in target) {
+                    // iterate over prototype chain
+                    let prototypeFunc = viewModelCtor,
+                        descriptor = null;
+                    do {
+                        descriptor = Object.getOwnPropertyDescriptor(prototypeFunc.prototype, property);
+                        if (!descriptor || !descriptor.get) {
+                            prototypeFunc = Object.getPrototypeOf(prototypeFunc);
+                        }
+                    } while (!(descriptor && descriptor.get) && prototypeFunc && prototypeFunc.prototype);
+
+                    if (descriptor && descriptor.get) {
+                        // if getter was found in prototype chain, bind it with this proxy for right `this` access
+                        result = descriptor.get.bind(viewModel)();
+                    } else {
+                        result = target[property];
+                        // console.log(property, target);
+                    }
+                } else if (property in _model) {
+                    result = _model[property];
+                } else if (relation) {
+                    result = this.handleCachedRelation(<any>property, target, _model, viewModel, relation);
+                }
+                return result;
+            }
+        });
+
+        // set nested models
+        (nestedModelDescriptors[model.collectionString] || []).forEach(
+            (modelDescriptor: ModelDescriptor<BaseModel, BaseViewModel>) => {
+                const nestedModels = (model[modelDescriptor.ownKey] || []).map((nestedModel: object) => {
+                    return new modelDescriptor.foreignModel(nestedModel);
+                });
+                const nestedViewModels = nestedModels.map(nestedModel => {
+                    const nestedViewModel = this.createViewModel(
+                        nestedModel,
+                        modelDescriptor.foreignViewModel,
+                        modelDescriptor.relationDefinitionsByKey,
+                        nestedModelDescriptors
+                    );
+                    Object.keys(modelDescriptor.titles || {}).forEach(name => {
+                        nestedViewModel[name] = () => modelDescriptor.titles[name](nestedViewModel);
+                    });
+                    return nestedViewModel;
+                });
+                this.sortViewModels(nestedViewModels, modelDescriptor.order);
+
+                viewModel[modelDescriptor.ownKey] = nestedViewModels;
+            }
+        );
+        return viewModel;
+    }
+}

client/src/app/core/core-services/servertime.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { ServertimeService } from './servertime.service';
+
+describe('ServertimeService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [ServertimeService]
+        });
+    });
+
+    it('should be created', inject([ServertimeService], (service: ServertimeService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/servertime.service.ts

@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+
+import { environment } from 'environments/environment.prod';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { HttpService } from './http.service';
+
+/**
+ * This service provides the timeoffset to the server and a user of this service
+ * can query the servertime.
+ *
+ * This service needs to be started with `startScheduler` which will update
+ * the servertime frequently.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class ServertimeService {
+    // TODO: couple this with the offlineService: Just retry often, if we are online.
+    // When we are offline, this is not necessary.
+    private static FAILURE_TIMEOUT = 30;
+    private static NORMAL_TIMEOUT = 60 * 5;
+
+    /**
+     * The server offset in milliseconds
+     */
+    private serverOffsetSubject = new BehaviorSubject<number>(0);
+
+    public constructor(private http: HttpService) {}
+
+    /**
+     * Starts the scheduler to sync with the server.
+     */
+    public startScheduler(): void {
+        this.scheduleNextRefresh(0.1);
+    }
+
+    /**
+     * Get an observable for the server offset.
+     */
+    public getServerOffsetObservable(): Observable<number> {
+        return this.serverOffsetSubject.asObservable();
+    }
+
+    /**
+     * Schedules the next sync with the server.
+     *
+     * @param seconds The timeout in seconds to the refresh.
+     */
+    private scheduleNextRefresh(seconds: number): void {
+        setTimeout(async () => {
+            let timeout = ServertimeService.NORMAL_TIMEOUT;
+            try {
+                await this.refreshServertime();
+            } catch (e) {
+                timeout = ServertimeService.FAILURE_TIMEOUT;
+            }
+            this.scheduleNextRefresh(timeout);
+        }, 1000 * seconds);
+    }
+
+    /**
+     * Queries the servertime and calculates the offset.
+     */
+    private async refreshServertime(): Promise<void> {
+        // servertime is the time in seconds.
+        const servertime = await this.http.get<number>(environment.urlPrefix + '/core/servertime/');
+        if (typeof servertime !== 'number') {
+            throw new Error('The returned servertime is not a number');
+        }
+        this.serverOffsetSubject.next(Math.floor(Date.now() - servertime * 1000));
+    }
+
+    /**
+     * Calculate the time of the server.
+     */
+    public getServertime(): number {
+        return Date.now() - this.serverOffsetSubject.getValue();
+    }
+}

client/src/app/core/core-services/storage.service.spec.ts

@@ -0,0 +1,18 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from 'e2e-imports.module';
+
+import { StorageService } from './storage.service';
+
+describe('StorageService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [StorageService]
+        });
+    });
+
+    it('should be created', inject([StorageService], (service: StorageService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/storage.service.ts

@@ -0,0 +1,90 @@
+import { Injectable } from '@angular/core';
+
+import { LocalStorage } from '@ngx-pwa/local-storage';
+import { Observable } from 'rxjs';
+
+import { OpenSlidesStatusService } from './openslides-status.service';
+
+/**
+ * Provides an async API to an key-value store using ngx-pwa which is internally
+ * using IndexedDB or localStorage as a fallback.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class StorageService {
+    private noClearKeys: string[] = [];
+
+    /**
+     * Constructor to create the StorageService. Needs the localStorage service.
+     * @param localStorage
+     */
+    public constructor(private localStorage: LocalStorage, private OSStatus: OpenSlidesStatusService) {}
+
+    public addNoClearKey(key: string): void {
+        this.noClearKeys.push(key);
+    }
+
+    /**
+     * Sets the item into the store asynchronously.
+     * @param key
+     * @param item
+     */
+    public async set(key: string, item: any): Promise<void> {
+        this.assertNotHistoryMode();
+        if (item === null || item === undefined) {
+            await this.remove(key); // You cannot do a setItem with null or undefined...
+        } else {
+            if (!(await this.localStorage.setItem(key, item).toPromise())) {
+                throw new Error('Could not set the item.');
+            }
+        }
+    }
+
+    /**
+     * get a value from the store. You need to subscribe to the request to retrieve the value.
+     *
+     * @param key The key to get the value from
+     * @returns The requested value to the key
+     */
+    public async get<T>(key: string): Promise<T> {
+        return ((await this.localStorage.getItem<T>(key)) as Observable<T>).toPromise();
+    }
+
+    /**
+     * Remove the key from the store.
+     * @param key The key to remove the value from
+     */
+    public async remove(key: string): Promise<void> {
+        this.assertNotHistoryMode();
+        if (!(await this.localStorage.removeItem(key).toPromise())) {
+            throw new Error('Could not delete the item.');
+        }
+    }
+
+    /**
+     * Clear the whole cache except for keys given in `addNoClearKey`.
+     */
+    public async clear(): Promise<void> {
+        this.assertNotHistoryMode();
+        const savedData: { [key: string]: any } = {};
+        for (const key of this.noClearKeys) {
+            savedData[key] = await this.get(key);
+        }
+        if (!(await this.localStorage.clear().toPromise())) {
+            throw new Error('Could not clear the storage.');
+        }
+        for (const key of this.noClearKeys) {
+            await this.set(key, savedData[key]);
+        }
+    }
+
+    /**
+     * Throws an error, if we are in history mode.
+     */
+    private assertNotHistoryMode(): void {
+        if (this.OSStatus.isInHistoryMode) {
+            throw new Error('You cannot use the storageService in histroy mode.');
+        }
+    }
+}

client/src/app/core/core-services/time-travel.service.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from 'e2e-imports.module';
+
+import { TimeTravelService } from './time-travel.service';
+
+describe('TimeTravelService', () => {
+    beforeEach(() =>
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [TimeTravelService]
+        })
+    );
+
+    it('should be created', () => {
+        const service: TimeTravelService = TestBed.inject(TimeTravelService);
+        expect(service).toBeTruthy();
+    });
+});

client/src/app/core/core-services/time-travel.service.ts

@@ -0,0 +1,107 @@
+import { Injectable } from '@angular/core';
+
+import { environment } from 'environments/environment';
+
+import { BaseModel } from 'app/shared/models/base/base-model';
+import { History } from 'app/shared/models/core/history';
+import { CollectionStringMapperService } from './collection-string-mapper.service';
+import { DataStoreService, DataStoreUpdateManagerService } from './data-store.service';
+import { HttpService } from './http.service';
+import { OpenSlidesStatusService } from './openslides-status.service';
+import { OpenSlidesService } from './openslides.service';
+import { WebsocketService } from './websocket.service';
+
+interface HistoryData {
+    [collection: string]: BaseModel[];
+}
+
+/**
+ * Service to enable browsing OpenSlides in a previous version.
+ *
+ * This should stop auto updates, save the current ChangeID and overwrite the DataStore with old Values
+ * from the servers History.
+ *
+ * Restoring is nor possible yet. Simply reload
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class TimeTravelService {
+    /**
+     * Constructs the time travel service
+     *
+     * @param httpService To fetch the history data
+     * @param webSocketService to disable websocket connection
+     * @param modelMapperService to cast history objects into models
+     * @param DS to overwrite the dataStore
+     * @param OSStatus Sets the history status
+     * @param OpenSlides For restarting OpenSlide when exiting the history mode
+     */
+    public constructor(
+        private httpService: HttpService,
+        private webSocketService: WebsocketService,
+        private modelMapperService: CollectionStringMapperService,
+        private DS: DataStoreService,
+        private OSStatus: OpenSlidesStatusService,
+        private OpenSlides: OpenSlidesService,
+        private DSUpdateManager: DataStoreUpdateManagerService
+    ) {}
+
+    /**
+     * Main entry point to set OpenSlides to another history point.
+     *
+     * @param history the desired point in the history of OpenSlides
+     */
+    public async loadHistoryPoint(history: History): Promise<void> {
+        const updateSlot = await this.DSUpdateManager.getNewUpdateSlot(this.DS);
+
+        await this.stopTime(history);
+        const historyData: HistoryData = await this.getHistoryData(history);
+
+        const allModels = [];
+        Object.keys(historyData).forEach(collection => {
+            const targetClass = this.modelMapperService.getModelConstructor(collection);
+            historyData[collection].forEach(model => {
+                allModels.push(new targetClass(model));
+            });
+        });
+        await this.DS.set(allModels, 0);
+
+        this.DSUpdateManager.commit(updateSlot, 1, true);
+    }
+
+    /**
+     * Leaves the history mode. Just restart OpenSlides:
+     * The active user is checked, a new WS connection established and
+     * all missed auto updates are requested.
+     */
+    public async resumeTime(): Promise<void> {
+        this.OSStatus.leaveHistoryMode();
+        await this.DS.set();
+        await this.OpenSlides.reboot();
+    }
+
+    /**
+     * Read the history on a given time
+     *
+     * @param date the Date object
+     * @returns the full history on the given date
+     */
+    private async getHistoryData(history: History): Promise<HistoryData> {
+        const queryParams = { timestamp: Math.ceil(history.timestamp) };
+        return await this.httpService.get<HistoryData>(
+            `${environment.urlPrefix}/core/history/data/`,
+            null,
+            queryParams
+        );
+    }
+
+    /**
+     * Clears the DataStore and stops the WebSocket connection
+     */
+    private async stopTime(history: History): Promise<void> {
+        await this.webSocketService.close();
+        await this.DS.set(); // Same as clear, but not persistent.
+        this.OSStatus.enterHistoryMode(history);
+    }
+}

client/src/app/core/core-services/view-model-store.service.spec.ts

@@ -0,0 +1,16 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { ViewModelStoreService } from './view-model-store.service';
+
+describe('ViewModelStoreService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [ViewModelStoreService]
+        });
+    });
+    it('should be created', inject([ViewModelStoreService], (service: ViewModelStoreService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/view-model-store.service.ts

@@ -0,0 +1,96 @@
+import { Injectable } from '@angular/core';
+
+import { BaseViewModel, ViewModelConstructor } from 'app/site/base/base-view-model';
+import { BaseRepository } from '../repositories/base-repository';
+import { CollectionStringMapperService } from './collection-string-mapper.service';
+
+/**
+ * This service takes care of handling view models.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class ViewModelStoreService {
+    /**
+     * @param mapperService
+     */
+    public constructor(private mapperService: CollectionStringMapperService) {}
+
+    /**
+     * gets the repository from a collection string or a view model constructor.
+     *
+     * @param collectionType The collection string or constructor.
+     */
+    private getRepository<V extends BaseViewModel>(
+        collectionType: ViewModelConstructor<V> | string
+    ): BaseRepository<V, any, any> {
+        return this.mapperService.getRepository(collectionType) as BaseRepository<V, any, any>;
+    }
+
+    /**
+     * Returns the view model identified by the collectionString and id
+     *
+     * @param collectionString The collection of the view model
+     * @param id The id of the view model
+     */
+    public get<V extends BaseViewModel>(collectionType: ViewModelConstructor<V> | string, id: number): V {
+        return this.getRepository(collectionType).getViewModel(id);
+    }
+
+    /**
+     * Returns all view models for the given ids.
+     *
+     * @param collectionType The collection of the view model
+     * @param ids All ids to match
+     */
+    public getMany<T extends BaseViewModel>(collectionType: ViewModelConstructor<T> | string, ids?: number[]): T[] {
+        if (!ids) {
+            return [];
+        }
+        const repository = this.getRepository<T>(collectionType);
+
+        return ids
+            .map(id => {
+                return repository.getViewModel(id);
+            })
+            .filter(model => !!model); // remove non valid models.
+    }
+
+    /**
+     * Gets all view models from a collection
+     *
+     * @param collectionString  The collection
+     * @returns all models from the collection
+     */
+    public getAll<T extends BaseViewModel>(collectionType: ViewModelConstructor<T> | string): T[] {
+        return this.getRepository(collectionType).getViewModelList();
+    }
+
+    /**
+     * Get all view models from a collection, that satisfy the callback
+     *
+     * @param collectionString The collection
+     * @param callback The function to check
+     * @returns all matched view models of the collection
+     */
+    public filter<T extends BaseViewModel>(
+        collectionType: ViewModelConstructor<T> | string,
+        callback: (model: T) => boolean
+    ): T[] {
+        return this.getAll<T>(collectionType).filter(callback);
+    }
+
+    /**
+     * Finds one view model from the collection, that satisfies the callback
+     *
+     * @param collectionString The collection
+     * @param callback THe callback to satisfy
+     * @returns a found view model or null, if nothing was found.
+     */
+    public find<T extends BaseViewModel>(
+        collectionType: ViewModelConstructor<T> | string,
+        callback: (model: T) => boolean
+    ): T {
+        return this.getAll<T>(collectionType).find(callback);
+    }
+}

client/src/app/core/core-services/websocket.service.spec.ts

@@ -0,0 +1,17 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { E2EImportsModule } from '../../../e2e-imports.module';
+import { WebsocketService } from './websocket.service';
+
+describe('WebsocketService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [E2EImportsModule],
+            providers: [WebsocketService]
+        });
+    });
+
+    it('should be created', inject([WebsocketService], (service: WebsocketService) => {
+        expect(service).toBeTruthy();
+    }));
+});

client/src/app/core/core-services/websocket.service.ts

@@ -0,0 +1,551 @@
+import { EventEmitter, Injectable, NgZone } from '@angular/core';
+import { MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+
+import { compress, decompress } from 'lz4js';
+import { Observable, Subject } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { OfflineService } from './offline.service';
+import { OpenSlidesStatusService } from './openslides-status.service';
+import { formatQueryParams, QueryParams } from '../definitions/query-params';
+
+/**
+ * The generic message format in which messages are send and recieved by the server.
+ */
+interface BaseWebsocketMessage {
+    type: string;
+    content: any;
+}
+
+/**
+ * Outgoing messages must have an id.
+ */
+interface OutgoingWebsocketMessage extends BaseWebsocketMessage {
+    id: string;
+}
+
+/**
+ * Incomming messages may have an `in_response`, if they are an answer to a previously
+ * submitted request.
+ */
+interface IncommingWebsocketMessage extends BaseWebsocketMessage {
+    in_response?: string;
+}
+
+/**
+ * The format of a messages content, if the message type is "error"
+ */
+interface WebsocketErrorContent {
+    code: number;
+    message: string;
+}
+
+function isWebsocketErrorContent(obj: any): obj is WebsocketErrorContent {
+    return !!obj && obj.code !== undefined && obj.message !== undefined;
+}
+
+/**
+ * All (custom) error codes that are used to pass error information
+ * from the server to the client
+ */
+export const WEBSOCKET_ERROR_CODES = {
+    NOT_AUTHORIZED: 100,
+    CHANGE_ID_TOO_HIGH: 101,
+    WRONG_FORMAT: 102
+};
+
+/**
+ * Service that handles WebSocket connections. Other services can register themselfs
+ * with {@method getOberservable} for a specific type of messages. The content will be published.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class WebsocketService {
+    /**
+     * The reference to the snackbar entry that is shown, if the connection is lost.
+     */
+    private connectionErrorNotice: MatSnackBarRef<SimpleSnackBar>;
+
+    /**
+     * Subjects that will be called, if a reconnect after a retry (e.g. with a previous
+     * connection loss) was successful.
+     */
+    private readonly _retryReconnectEvent: EventEmitter<void> = new EventEmitter<void>();
+
+    /**
+     * Getter for the retry reconnect event.
+     */
+    public get retryReconnectEvent(): EventEmitter<void> {
+        return this._retryReconnectEvent;
+    }
+
+    /**
+     * Subjects that will be called, if connect took place, but not a retry reconnect.
+     * THis is the complement from the generalConnectEvent to the retryReconnectEvent.
+     */
+    private readonly _noRetryConnectEvent: EventEmitter<void> = new EventEmitter<void>();
+
+    /**
+     * Getter for the no-retry connect event.
+     */
+    public get noRetryConnectEvent(): EventEmitter<void> {
+        return this._noRetryConnectEvent;
+    }
+
+    /**
+     * Listeners will be nofitied, if the wesocket connection is establiched.
+     */
+    private readonly _generalConnectEvent: EventEmitter<void> = new EventEmitter<void>();
+
+    /**
+     * Getter for the connect event.
+     */
+    public get generalConnectEvent(): EventEmitter<void> {
+        return this._generalConnectEvent;
+    }
+
+    /**
+     * Listeners will be nofitied, if the wesocket connection is closed.
+     */
+    private readonly _closeEvent: EventEmitter<void> = new EventEmitter<void>();
+
+    /**
+     * Getter for the close event.
+     */
+    public get closeEvent(): EventEmitter<void> {
+        return this._closeEvent;
+    }
+
+    /**
+     * The subject for all websocket *message* errors (no connection errors).
+     */
+    private readonly _errorResponseSubject = new Subject<WebsocketErrorContent>();
+
+    /**
+     * The error response obersable for all websocket message errors.
+     */
+    public get errorResponseObservable(): Observable<WebsocketErrorContent> {
+        return this._errorResponseSubject.asObservable();
+    }
+
+    /**
+     * Saves, if the connection is open
+     */
+    private _connectionOpen = false;
+
+    /**
+     * Whether the WebSocket connection is established
+     */
+    public get isConnected(): boolean {
+        return this._connectionOpen;
+    }
+
+    private sendQueueWhileNotConnected: (string | ArrayBuffer)[] = [];
+
+    /**
+     * The websocket.
+     */
+    private websocket: WebSocket | null;
+    private websocketId: string | null;
+
+    /**
+     * Subjects for types of websocket messages. A subscriber can get an Observable by {@function getOberservable}.
+     */
+    private subjects: { [type: string]: Subject<any> } = {};
+
+    /**
+     * Callbacks for a waiting response. If any callback returns true, the message/error will not be propagated with the
+     * responsible subjects for the message type.
+     */
+    private responseCallbacks: {
+        [id: string]: [(val: any) => boolean, (error: WebsocketErrorContent) => boolean];
+    } = {};
+
+    /**
+     * Saves, if the WS Connection should be closed (e.g. after an explicit `close()`). Prohibits
+     * retry connection attempts.
+     */
+    private shouldBeClosed = true;
+
+    /**
+     * Counter for delaying the offline message.
+     */
+    private retryCounter = 0;
+
+    /**
+     * The timeout in the onClose-handler for the next reconnect retry.
+     */
+    private retryTimeout: any = null;
+
+    /**
+     * Constructor that handles the router
+     *
+     * @param zone
+     * @param router
+     * @param openSlidesStatusService
+     * @param offlineService
+     */
+    public constructor(
+        private zone: NgZone,
+        private router: Router,
+        private openSlidesStatusService: OpenSlidesStatusService,
+        private offlineService: OfflineService
+    ) {}
+
+    /**
+     * Creates a new WebSocket connection and handles incomming events.
+     *
+     * Uses NgZone to let all callbacks run in the angular context.
+     */
+    public async connect(changeId: number | null = null, retry: boolean = false): Promise<void> {
+        const websocketId = Math.random().toString(36).substring(7);
+        this.websocketId = websocketId;
+
+        if (this.websocket) {
+            this.websocket.close();
+            this.websocket = null;
+        }
+
+        if (!retry) {
+            this.shouldBeClosed = false;
+        }
+
+        const queryParams: QueryParams = {};
+
+        if (changeId !== null) {
+            queryParams.change_id = changeId;
+        }
+
+        // Create the websocket
+        let socketPath = location.protocol === 'https:' ? 'wss://' : 'ws://';
+        socketPath += window.location.host;
+        if (this.openSlidesStatusService.isPrioritizedClient) {
+            socketPath += '/prioritize';
+        }
+        socketPath += '/ws/';
+        socketPath += formatQueryParams(queryParams);
+
+        this.websocket = new WebSocket(socketPath);
+        this.websocket.binaryType = 'arraybuffer';
+
+        // connection established. If this connect attept was a retry,
+        // The error notice will be removed and the reconnectSubject is published.
+        this.websocket.onopen = (event: Event) => {
+            if (this.websocketId !== websocketId) {
+                return;
+            }
+            this.zone.run(() => {
+                this.retryCounter = 0;
+
+                if (this.shouldBeClosed) {
+                    this.offlineService.goOnline();
+                    return;
+                }
+
+                this._connectionOpen = true;
+                if (retry) {
+                    this.offlineService.goOnline();
+                    this._retryReconnectEvent.emit();
+                } else {
+                    this._noRetryConnectEvent.emit();
+                }
+                this._generalConnectEvent.emit();
+                this.sendQueueWhileNotConnected.forEach(entry => {
+                    this.websocket.send(entry);
+                });
+                this.sendQueueWhileNotConnected = [];
+            });
+        };
+
+        this.websocket.onmessage = (event: MessageEvent) => {
+            if (this.websocketId !== websocketId) {
+                return;
+            }
+            this.zone.run(() => {
+                this.handleMessage(event.data);
+            });
+        };
+
+        this.websocket.onclose = (event: CloseEvent) => {
+            if (this.websocketId !== websocketId) {
+                return;
+            }
+            this.zone.run(() => {
+                this.onclose();
+            });
+        };
+
+        this.websocket.onerror = (event: ErrorEvent) => {
+            if (this.websocketId !== websocketId) {
+                return;
+            }
+            // place for proper error handling and debugging.
+            // Required to get more information about errors
+            this.zone.run(() => {
+                console.warn('WS error event:', event);
+            });
+        };
+    }
+
+    /**
+     * Handles an incomming message.
+     *
+     * @param data The message
+     */
+    private handleMessage(data: string | ArrayBuffer): void {
+        if (data instanceof ArrayBuffer) {
+            const compressedSize = data.byteLength;
+            const decompressedBuffer: Uint8Array = decompress(new Uint8Array(data));
+            console.debug(
+                `Recieved ${compressedSize / 1024} KB (${
+                    decompressedBuffer.byteLength / 1024
+                } KB uncompressed), ratio ${decompressedBuffer.byteLength / compressedSize}`
+            );
+            data = this.arrayBufferToString(decompressedBuffer);
+        }
+
+        const message: IncommingWebsocketMessage = JSON.parse(data);
+        console.debug('Received', message);
+        const type = message.type;
+        const inResponse = message.in_response;
+        const callbacks = this.responseCallbacks[inResponse];
+        if (callbacks) {
+            delete this.responseCallbacks[inResponse];
+        }
+
+        if (type === 'error') {
+            if (!isWebsocketErrorContent(message.content)) {
+                console.error('Websocket error without standard form!', message);
+                return;
+            }
+
+            // Print this to the console.
+            const error = message.content;
+            const errorDescription =
+                Object.keys(WEBSOCKET_ERROR_CODES).find(key => WEBSOCKET_ERROR_CODES[key] === error.code) ||
+                'unknown code';
+            console.error(`Websocket error with code=${error.code} (${errorDescription}):`, error.message);
+
+            // call the error callback, if there is any. If it returns true (means "handled"),
+            // the errorResponseSubject will not be called
+            if (inResponse && callbacks && callbacks[1] && callbacks[1](error)) {
+                return;
+            }
+            this._errorResponseSubject.next(error);
+            return;
+        }
+
+        // Try to fire a response callback directly. If it returnes true, the message is handeled
+        // and not distributed further
+        if (inResponse && callbacks && callbacks[0](message.content)) {
+            return;
+        }
+
+        if (this.subjects[type]) {
+            // Pass the content to the registered subscribers.
+            this.subjects[type].next(message.content);
+        } else {
+            console.warn(
+                `Got unknown websocket message type "${type}" (inResponse: ${inResponse}) with content`,
+                message.content
+            );
+        }
+    }
+
+    /**
+     * Closes the connection error notice
+     */
+    private onclose(): void {
+        if (this.websocket) {
+            this.websocketId = null; // set to null, so now further events will be
+            // registered with the line below.
+            this.websocket.close(); // Cleanup old connection
+            this.websocket = null;
+        }
+        this._connectionOpen = false;
+        // 1000 is a normal close, like the close on logout
+        this._closeEvent.emit();
+        if (!this.shouldBeClosed) {
+            // Do not show the message snackbar on the projector
+            // tests for /projector and /projector/<id>
+            const onProjector = this.router.url.match(/^\/projector(\/[0-9]+\/?)?$/);
+            if (this.retryCounter <= 3) {
+                this.retryCounter++;
+            }
+
+            if (!this.connectionErrorNotice && !onProjector && this.retryCounter > 3) {
+                this.offlineService.goOfflineBecauseConnectionLost();
+            }
+
+            // A random retry timeout between 2000 and 5000 ms.
+            const timeout = Math.floor(Math.random() * 3000 + 2000);
+            this.retryTimeout = setTimeout(() => {
+                this.retryTimeout = null;
+                this.connect(null, true);
+            }, timeout);
+        }
+    }
+
+    public cancelReconnectenRetry(): void {
+        if (this.retryTimeout) {
+            clearTimeout(this.retryTimeout);
+            this.retryTimeout = null;
+        }
+    }
+
+    /**
+     * Closes the websocket connection.
+     */
+    public async close(): Promise<void> {
+        this.shouldBeClosed = true;
+        this.offlineService.goOnline();
+        if (this.websocket) {
+            this.websocket.close();
+            this.websocket = null;
+            await this.closeEvent.pipe(take(1)).toPromise();
+        }
+    }
+
+    /**
+     * Simulates an abnormal close.
+     *
+     * Internally does not set `shouldBeClosed`, so a reconnect is forced.
+     */
+    public simulateAbnormalClose(): void {
+        this.onclose();
+    }
+
+    /**
+     * closes and reopens the connection. If the connection was closed before,
+     * it will be just opened.
+     *
+     * @param options The options for the new connection
+     */
+    public async reconnect(changeId: number | null = null): Promise<void> {
+        await this.close();
+        await this.connect(changeId);
+    }
+
+    /**
+     * Returns an observable for messages of the given type.
+     * @param type the message type
+     */
+    public getOberservable<T>(type: string): Observable<T> {
+        if (!this.subjects[type]) {
+            this.subjects[type] = new Subject<T>();
+        }
+        return this.subjects[type].asObservable();
+    }
+
+    /**
+     * Sends a message to the server with the content and the given type.
+     *
+     * @param type the message type
+     * @param content the actual content
+     * @param success an optional success callback for a response. If it returns true, the message will not be
+     * propagated through the recieve subjects.
+     * @param error an optional error callback for a response. If it returns true, the error will not be propagated
+     * with the error subject.
+     * @param id an optional id for the message. If not given, a random id will be generated and returned.
+     * @returns the message id
+     */
+    public send<T, R>(
+        type: string,
+        content: T,
+        success?: (val: R) => boolean,
+        error?: (error: WebsocketErrorContent) => boolean,
+        id?: string
+    ): string {
+        if (!this.websocket) {
+            return;
+        }
+
+        const message: OutgoingWebsocketMessage = {
+            type: type,
+            content: content,
+            id: id
+        };
+
+        // create message id if not given. Required by the server.
+        if (!message.id) {
+            message.id = '';
+            const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+            for (let i = 0; i < 8; i++) {
+                message.id += possible.charAt(Math.floor(Math.random() * possible.length));
+            }
+        }
+
+        if (success) {
+            this.responseCallbacks[message.id] = [success, error];
+        }
+
+        const jsonMessage = JSON.stringify(message);
+        const bytesMessage = this.stringToBuffer(jsonMessage);
+
+        const compressedMessage: ArrayBuffer = compress(bytesMessage);
+        const ratio = bytesMessage.byteLength / compressedMessage.byteLength;
+
+        const toSend = ratio > 1 ? compressedMessage : jsonMessage;
+
+        if (this.isConnected) {
+            this.websocket.send(toSend);
+        } else {
+            this.sendQueueWhileNotConnected.push(toSend);
+        }
+
+        return message.id;
+    }
+
+    /**
+     * Sends a message and waits for the response
+     *
+     * @param type the message type
+     * @param content the actual content
+     * @param id an optional id for the message. If not given, a random id will be generated and returned.
+     */
+    public sendAndGetResponse<T, R>(type: string, content: T, id?: string): Promise<R> {
+        return new Promise<R>((resolve, reject) => {
+            this.send<T, R>(
+                type,
+                content,
+                val => {
+                    resolve(val);
+                    return true;
+                },
+                val => {
+                    reject(val);
+                    return true;
+                },
+                id
+            );
+        });
+    }
+
+    /**
+     * Converts an ArrayBuffer to a String.
+     *
+     * @param buffer - Buffer to convert
+     * @returns String
+     */
+    private arrayBufferToString(buffer: Uint8Array): string {
+        return Array.from(buffer)
+            .map(code => String.fromCharCode(code))
+            .join('');
+    }
+
+    /**
+     * Converts a String to an ArrayBuffer.
+     *
+     * @param str - String to convert.
+     * @returns bufferView.
+     */
+    private stringToBuffer(str: string): Uint8Array {
+        const bufferView = new Uint8Array();
+        for (let i = 0; i < str.length; i++) {
+            bufferView[i] = str.charCodeAt(i);
+        }
+        return bufferView;
+    }
+}

client/src/app/core/core.module.spec.ts

@@ -0,0 +1,13 @@
+import { CoreModule } from './core.module';
+
+describe('CoreModule', () => {
+    let coreModule: CoreModule;
+
+    beforeEach(() => {
+        coreModule = new CoreModule(null);
+    });
+
+    it('should create an instance', () => {
+        expect(coreModule).toBeTruthy();
+    });
+});

client/src/app/core/core.module.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule, Optional, SkipSelf, Type } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+
+import { OnAfterAppsLoaded } from './definitions/on-after-apps-loaded';
+import { OperatorService } from './core-services/operator.service';
+
+export const ServicesToLoadOnAppsLoaded: Type<OnAfterAppsLoaded>[] = [OperatorService];
+
+/**
+ * Global Core Module.
+ */
+@NgModule({
+    imports: [CommonModule],
+    providers: [Title]
+})
+export class CoreModule {
+    /** make sure CoreModule is imported only by one NgModule, the AppModule */
+    public constructor(
+        @Optional()
+        @SkipSelf()
+        parentModule: CoreModule
+    ) {
+        if (parentModule) {
+            throw new Error('CoreModule is already loaded. Import only in AppModule');
+        }
+    }
+}

client/src/app/core/definitions/app-config.ts

@@ -0,0 +1,42 @@
+import { Type } from '@angular/core';
+
+import { BaseViewModel, ViewModelConstructor } from 'app/site/base/base-view-model';
+import { BaseModel, ModelConstructor } from '../../shared/models/base/base-model';
+import { BaseRepository } from '../repositories/base-repository';
+import { MainMenuEntry } from '../core-services/main-menu.service';
+import { Searchable } from '../../site/base/searchable';
+
+interface BaseModelEntry {
+    repository: Type<BaseRepository<any, any, any>>;
+    model: ModelConstructor<BaseModel>;
+}
+
+export interface ModelEntry extends BaseModelEntry {
+    viewModel: ViewModelConstructor<BaseViewModel>;
+}
+
+export interface SearchableModelEntry extends BaseModelEntry {
+    viewModel: ViewModelConstructor<BaseViewModel & Searchable>;
+    searchOrder: number;
+    openInNewTab?: boolean;
+}
+
+/**
+ * The configuration of an app.
+ */
+export interface AppConfig {
+    /**
+     * The name.
+     */
+    name: string;
+
+    /**
+     * All models, that should be registered.
+     */
+    models?: (ModelEntry | SearchableModelEntry)[];
+
+    /**
+     * Main menu entries.
+     */
+    mainMenuEntries?: MainMenuEntry[];
+}

client/src/app/core/definitions/has-view-model-list-observable.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export interface HasViewModelListObservable<V> {
+    getViewModelListObservable(): Observable<V[]>;
+}