- added some dummy files (which are referenced but still todo)

- finished frontend setup guides (deploy & develop)

dev/docs/frontend/core/communication.md

+# Communication
+

dev/docs/frontend/core/deploy.md

+# Deployment
\ No newline at end of file

dev/docs/frontend/core/readme.md

+# Core
\ No newline at end of file

dev/docs/frontend/core/staticPages.md

+# Static Pages
\ No newline at end of file

dev/docs/frontend/overview/readme.md

+# Overview
+
+The frontend is designed as an single page application (SPA)
+
+It has only one main html file and load some big js files (which are the real app) to modify the dom
+
+The main js framework used is `react` and for styles/components `semantic ui react` is used
+
+For state management/communication between components `redux` is used
+
+Because YAPeX is a SPA only the data needs to be transferred between the frontend and backend
+For this purpose we have dedicated classes which don't depend on `react` nor `semantic ui`, see [communication](../core/communication.md)
+
+
+## Structure
+
+The frontend has some special files and folders which are explained here
+
+- `customChangedLib/` some frameworks/libraries don't include typescript typings we need to specify them self
+	for every lib a separate directory
+	if we need to rewrite some files inside a lib place the new version inside the appropriate folder for the lib inside `customChangedLib/`
+- `dist/` the output directory of the app, see [deploy](../core/deploy.md)
+- `externalLibsForBundling/` some libs are not available via npm then they can be stored here
+	actually some changes to libs are also stored here [TODO maybe merge or truly separate externalLibsForBundling/ and customChangedLib/ ??]
+- `htmlTemplates/` contains the templates for the main html file for the app
+	there are 2 because one is for developing and one for deployment
+	[ejs](http://www.embeddedjs.com) is used as template language, can be changed inside `webpack.config.dist.js` in the `HtmlWebpackPlugin`
+- `i18n/` is for internationalization stuff, see [i18n](../core/i18n.md)
+- `icons/` contains the image and project files for all used images (e.g. the logo)
+	.afdesign files can be opened with [affinity designer](https://affinity.serif.com/de/designer/) as an alternative for adobe indesign
+- `node_modules/` contains all node modules (libs)
+- `scripts/` contains scripts to perform some tasks
+- `src/` contains the main app
+- `static_pages/` contains some static pages that are separate but part of the frontend, see [static pages](../core/staticPages.md)
+- `typings/` contains typings, managed by typings (typescript typing manager) but obsolete...
+- `.gitignore` gitignore file
+- `count.ignore` can be ignored... used with a private program to count the lines in the project (this file contains the paths to ignore)
+- `debug.ts` controls if the app runs in debug mode or not
+- `FRAGEN.md` contains some questions that are not answered yet for features, fixes, ... that should be some time asked to the admins
+- `package.json` the package file
+- `readme.md` a small setup guide
+- `TODO.md` some ideas for the future
+- `TODOStyle.md` some style ideas
+- `tsconfig.json` the config file for the typescript compiler
+- `tslint.json` the ts lint config file (to configure some linting rules)
+- `typeFixes.md` some fixes for some type definitions that were not fixed in the official typings
+- `webpack.config.dist.js` the webpack config file for deployment
+- `webpack.config.js` the webpack config file for developing
+	this is never referenced only `webpack.config.dist.js` so the right one should be chosen depending on the context

dev/docs/frontend/usedFrameworks.md → dev/docs/frontend/overview/usedFrameworks.md

@@ -2,9 +2,7 @@
 
 Here are all frameworks listed that are used by YAPEX
 
-If you want to get into YAPEX this is a good point to start
-
-The order is like the order inside `frontend/package.json`
+The order is the same as in `frontend/package.json`
 
 
 ## autoprefixer
@@ -19,15 +17,20 @@ Used to transpile the typescript files into .js files during webpack bundling
 ## axios
 
 Used to make XHR requests to the backend (send/receive json data)
-It has many options and supports interceptors to modify requests/responses before sending/receiving e.g. we translate the date/time values from backend or for backend before sending/receiving, also some unknown exceptions are catched here
+It has many options and supports interceptors to modify requests/responses before sending/receiving e.g. we translate the date/time values from backend or for backend before sending/receiving, also some unknown exceptions are caught here
 
 ## babel-plugin-recharts
 
 TODO can be removed because we don't use babel??
 
+## classnames
+
+Not directly used but needed for semantic ui react
+[TODO maybe we can get rid of this?]
+
 ## copy-webpack-plugin
 
-Used to copy some statis files into the output directory, see `frontend/webpack.config.dist.js`
+Used to copy some static files into the output directory, see `frontend/webpack.config.dist.js`
 
 ## crypto-js
 
@@ -240,7 +243,7 @@ Used to minify the bundle files
 
 ## url-loader
 
-Used to bundle fonts with webpack, see `frontned/webpack.config.dist.js`
+Used to bundle fonts with webpack, see `frontend/webpack.config.dist.js`
 
 [TODO the font stuff is somehow not clean/mystical...]
 

dev/docs/frontend/readme.md

+# Dev Docs YAPEX
+
+These are the dev docs for the frontend part of YAPEX
+
+If you are new to the frontend or want to get an overview have a look at [overview](overview/readme.md)
+
+If you want to setup a development environment, setup deployment environment, create a new component, reducer or action have a look inside [tutorials](tutorials/readme.md)
+
+If you want to know something specific or more detailed look inside [core](core/readme.md)

dev/docs/frontend/tutorials/readme.md

+# Tutorials
+
+Here are all tutorials listed for the frontend
+
+- [Setup deploy environment](setupDeploy.md) if you want to build the frontend and don't want to change or develop anything
+- [Setup development environment](setupDev.md) if you want to setup a development environment
+

dev/docs/frontend/tutorials/setupDeploy.md

+# Deployment setup
+
+The file describes how to setup the frontend used to deploy the app.
+
+Actually YAPEX is build on top of platform independent technologies but some scripts are only available in unix (ubuntu/macos should work too)
+Because of this the steps taken in the scripts are described here to reproduce them manually
+
+Most of the time it is wanted that we setup backend, frontend & the other projects and for the structure it is helpful if we place them all inside one folder e.g. called `yapex`. We will refer to this common folder as `yapex` from now on
+
+## 0 Requirements
+
+You need to make sure you have the following programs installed
+these should be accessible via the terminal/console without any path and by there common names (e.g. nodejs --> `node`)
+
+- nodejs/npm
+- git
+
+## 1 Get the code
+
+```bash
+cd yapex
+git clone https://gitlab.informatik.uni-halle.de/Syndrom/frontend-react.git
+cd frontend-react
+```
+
+All further steps assume you are in `yapex/frontend-react/`
+
+## 2 Make sure we are in deploy mode
+
+Currently the file `frontend/deploy.ts` determines if we are in deploy mode and some port stuff.
+
+You need to check the line
+
+```ts
+export const isProduction = false
+```
+
+that `isProduction` is set to `true`.
+
+## 3 Get the libs
+
+Because we use npm to manage libs and because there are sooooo many we don't ship them with the project (this saves us ~200MB of storage in gitlab)
+
+So we download all libs with
+
+```bash
+npm install --production
+```
+
+this can take a while...
+
+## 3.5 Fix the libs
+
+Some libs contain typing errors that need to be fixed before building
+For all fixes see also the file `frontend/typeFixes.md`
+
+open the file `node_modules/redux/index.d.ts`
+and search for the line
+
+```ts
+export type Reducer<S> = <A extends Action>(state: S, action: A) => S;
+```
+
+and replace it with
+
+```ts
+export type Reducer<S> = (state: S, action: Action) => S;
+```
+
+
+## 4 Build
+
+To build the frontend just run the script located at `frontend/scripts/build.sh`
+
+On windows (or if you don't want to use the script) do the following
+
+compile all static pages, then build the frontend
+
+```bash
+
+cd static_pages\firstExternalLoginPage
+..\..\node_modules\.bin/tsc firstLoginExternalLogin.ts
+
+cd ..\passwordMigrationHelper
+..\..\node_modules\.bin/tsc passwordMigrationHelper.ts
+
+cd ..\..
+npm run build
+```
+
+## 5 Grab the output
+
+If everything went well (some warnings are ok) the output is located at `frontend/dist/`
+
+If some backend docs mention the output of the frontend or just the frontend app e.g. for deployment everything inside `frontend/dist/` is meant

dev/docs/frontend/tutorials/setupDev.md

+# Setup
+
+scripts/ anpassen!!
+
+debug.ts !!
+
+typeFixes.md
+
+[Most of this was copied from setup for deployment]
+
+The file describes how to setup the frontend used to deploy the app.
+
+Actually YAPEX is build on top of platform independent technologies but some scripts are only available in unix (ubuntu/macos should work too)
+Because of this the steps taken in the scripts are described here to reproduce them manually
+
+Most of the time it is wanted that we setup backend, frontend & the other projects and for the structure it is helpful if we place them all inside one folder e.g. called `yapex`. We will refer to this common folder as `yapex` from now on
+
+## 0 Requirements
+
+You need to make sure you have the following programs installed
+these should be accessible via the terminal/console without any path and by there common names (e.g. nodejs --> `node`)
+
+- nodejs/npm
+- git
+- an editor/ide like WebStorm or Visual Studio Code
+
+## 1 Get the code
+
+```bash
+cd yapex
+git clone https://gitlab.informatik.uni-halle.de/Syndrom/frontend-react.git
+cd frontend-react
+```
+
+All further steps assume you are in `yapex/frontend-react/`
+
+## 2 Make sure we are in deploy mode & ports are right
+
+Currently the file `frontend/deploy.ts` determines if we are in deploy mode and some port stuff.
+
+You need to check the line
+
+```ts
+export const isProduction = false
+```
+
+that `isProduction` is set to `false`.
+
+check also
+
+```ts
+export const debugOriginUrl = isProduction ? '' : 'http://localhost:5000'
+```
+
+and change the port from 5000 to the port used in the backend
+
+Do this also for
+
+```ts
+export const debugApiHost = isProduction ? '/' :'http://localhost:5000/'
+```
+
+
+## 3 Get the libs
+
+Because we use npm to manage libs and because there are sooooo many we don't ship them with the project (this saves us ~200MB of storage in gitlab)
+
+So we download all libs with
+
+```bash
+npm install
+```
+
+this can take a while...
+
+## 3.5 Fix the libs
+
+Some libs contain typing errors that need to be fixed before building
+For all fixes see also the file `frontend/typeFixes.md`
+
+open the file `node_modules/redux/index.d.ts`
+and search for the line
+
+```ts
+export type Reducer<S> = <A extends Action>(state: S, action: A) => S;
+```
+
+and replace it with
+
+```ts
+export type Reducer<S> = (state: S, action: Action) => S;
+```
+
+
+## 4 Run the dev server
+
+To build the frontend just run the script located at `frontend/scripts/webpackDevServer.sh`
+
+On windows (or if you don't want to use the script) do the following
+
+```bash
+npm run dev
+```
+
+The default port of the dev server is 8080, can be changed in `frontend/package.json` inside the `scripts` section in the `dev` command (somehow specify the port).
+
+If you open the browser at [http://localhost:8080/index.html](http://localhost:8080/index.html) you should see the login site. It won't work until the backend is running but if you see the login side everything in the frontend compiled and is fine.
+
+Now if the dev server is running and you modify a file (WebStorm has delayed writing which is good for this, so changed are only written if WebStorm lose focus or on save shortcut) the dev server will automatically recompile the bundle file (in memory) and reload the browser for you

dev/readme.md

 # YAPEX dev docs
 
+YAPEX is a group of projects
 
+The basic structure is like this
 
+```mermaid
+graph LR;
+Frontend --> Backend
+Backend --> Frontend
 
+Backend --> Test-Server
+Test-Server --> Backend
+
+Test-Server --> Test-Runner
+Test-Runner --> Test-Server
+
+Test-Runner --> User-Program
+User-Program --> Test-Runner
+```
+
+where every part is a separate project
+
+*The parts only communicate with the direct neighbor*
+
+The frontend is documented in [frontend/](frontend/readme.md)
+
+The backend is documented in [backend/](backend/readme.md) TODO!!