home.md

-# FluxioFrontend
-
-The repository is mainly written in TypeScript and uses Vue to create a SPA (Single Page Application). If you want more information about the project itself you should have a look inside [Fluxios ducumentation](https://git.h2t.iar.kit.edu/student-projects/pse-ss23/web-based-statecharts/skgui-documentation).
-
-## Instalation
+<h1 style="text-align: center;">Fluxio Frontend</h1>
+<h3 style="text-align: center;">Benedikt Engel, Julian Tusch, Yusuf Duran, Daniel Coman, Moritz Gleissner</h3>
+
+<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
+
+## Table of Contents
+- [Introduction](#introduction)
+- [Installation](#installation)
+  - [Use Docker](#use-docker)
+- [Development](#development)
+
+## Introduction
+
+The repository is mainly written in TypeScript and uses Vue to create a SPA (Single Page Application). If you want more information about the project itself you should have a look inside [Fluxios ducumentation](https://git.h2t.iar.kit.edu/student-projects/pse-ss23/web-based-statecharts/skgui-documentation) or the repositorys [wiki](https://git.h2t.iar.kit.edu/student-projects/pse-ss23/web-based-statecharts/fluxiofrontend/-/wikis/home) page.
+
+### Languages and Tools:
+#### Main Languages and Framework
+
+<p align="left">
+  <a href="https://www.typescriptlang.org/" target="_blank" rel="noreferrer">
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg" alt="typescript" width="40" height="40"/>
+  </a>
+  <a href="https://vuejs.org/" target="_blank" rel="noreferrer">
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/vuejs/vuejs-original-wordmark.svg" alt="vuejs" width="40" height="40"/>
+  </a>
+</p>
+
+#### Build and other Tools
+
+<p align="left">
+  <a href="https://vitejs.dev/" target="_blank" rel="noreferrer">
+    <img src="https://raw.githubusercontent.com/vitejs/vite/main/docs/public/logo.svg" alt="vite" width="40" height="40"/>
+  </a>
+  <a href="https://eslint.org/" target="_blank" rel="noreferrer">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/ESLint_logo.svg" alt="eslint" width="40" height="40"/>
+  </a>
+  <a href="https://typedoc.org/" target="_blank" rel="noreferrer">
+    <img src="https://cdn.discordapp.com/attachments/1035160734172192888/1148649794701623366/logo-321.svg" alt="typedoc" width="40" height="40"/>
+  </a>
+</p>
+
+#### Testing
+
+<p align="left">
+  <a href="https://vitest.dev/" target="_blank" rel="noreferrer">
+    <img src="https://raw.githubusercontent.com/vitest-dev/vitest/main/docs/public/logo.svg" alt="vitest" width="40" height="40"/>
+  </a>
+    <a href="https://playwright.dev/" target="_blank" rel="noreferrer">
+    <img src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/playwright.svg" alt="playwright" width="40" height="40"/>
+  </a>
+</p>
+
+#### Deployment
+
+<w align="left">
+  <a href="https://www.docker.com/" target="_blank" rel="noreferrer">
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg" alt="docker" width="40" height="40"/>
+  </a>
+  <a href="https://www.nginx.com" target="_blank" rel="noreferrer">
+    <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/nginx/nginx-original.svg" alt="nginx" width="40" height="40"/>
+  </a>
+</p>
+
+## Installation
 
 Fluxio Frontend provides a Docker file with nginx for easy deployment. If you can't or don't want to use Docker you can provide fluxiofrontends static files with other methodes. You can ether compile them yourself or look inside the CI/CD pipeline and download the newest version of the dist/ folder.
 
@@ -10,13 +69,24 @@ FluxioFrontend provides a Docker file with nginx for easy deployment. If you can
 
 For this you need to have [Docker installed](https://docs.docker.com/engine/install/) and the Docker.service should be running. You can check this with `docker info` or use `docker ps` to display a list of you running Docker containers.
 
-#### Get Docker image
+<details>
+<summary><h4>Get Docker image</h4></summary>
+
+First login to the Gitlabs docker registry:
 
 ``` sh
-git ....
+docker login git.h2t.iar.kit.edu:5050
 ```
 
-#### Build your own Docker image
+Pull the dock image:
+
+``` sh
+docker pull git.h2t.iar.kit.edu:5050/student-projects/pse-ss23/web-based-statecharts/fluxiofrontend:latest
+```
+</details>
+
+<details>
+<summary><h4>Build your own Docker image</h4></summary>
 
 You should have cloned this repository to your local machine and be inside you repositorys folder.
 
@@ -24,6 +94,8 @@ You should have cloned this repository to your local machine and be inside you r
 docker build -t fluxiofrontend .
 ```
 
+</details>
+
 #### Run Docker image
 
 ``` sh
@@ -34,7 +106,7 @@ docker run --name fluxiofrontend --restart=always -p 8080:80 -d fluxiofrontend
 
 ### Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) but one maniac development on Emacs so it works too.
 
 ### Type Support for `.vue` Imports in TS
 
@@ -69,12 +141,26 @@ npm run dev
 npm run build
 ```
 
+#### Build Documentation with [TypeDoc](https://typedoc.org/)
+
+```sh
+npm run build:doc
+```
+
 #### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 ```sh
 npm run test:unit
 ```
 
+#### Run Integration Tests with [Playwright](https://playwright.dev/)
+
+Requires the [provider mock](https://git.h2t.iar.kit.edu/student-projects/pse-ss23/web-based-statecharts/provider-mock) to run.
+
+```sh
+npm run test:integration
+```
+
 #### Lint with [ESLint](https://eslint.org/)
 
 ```sh