feat(core): initial commit

2022-07-12 20:44:26 +02:00 · 2022-07-12 20:44:26 +02:00 · be32a075b4
commit be32a075b4
44 changed files with 2991 additions and 0 deletions
--- a/.docs/screenshot.png
+++ b/.docs/screenshot.png
--- a/.drone.yml
+++ b/.drone.yml
@ -0,0 +1,32 @@
+kind: pipeline
+name: default
+
+steps:
+- name: install
+  image: node:18-alpine
+  commands:
+  - corepack pnpm@7.5.1 install
+
+- name: build
+  image: node:18-alpine
+  commands:
+  - corepack pnpm@7.5.1 build
+
+- name: deploy
+  image: plugins/docker
+  settings:
+    registry: registry.cliffbreak.de
+    repo: registry.cliffbreak.de/kispi-core
+    username:
+      from_secret: docker_username
+    password:
+      from_secret: docker_password
+  when:
+    event:
+    - push
+    - tag
+    - promote
+
+trigger:
+  branch:
+  - master
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,144 @@
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue-scoped-css/vue3-recommended',
+  ],
+  parser: 'vue-eslint-parser',
+  env: {
+    'node': true,
+    'es6': true,
+  },
+  rules: {
+    'camelcase': ['error', {
+      'properties': 'always',
+      'ignoreDestructuring': false,
+      'ignoreImports': false,
+    }],
+    'comma-dangle': ['error', 'always-multiline'],
+    'comma-spacing': ['error', { 'before': false, 'after': true }],
+    'curly': ['error', 'all'],
+    'eol-last': ['error', 'never'],
+    'indent': ['error', 2],
+    'key-spacing': ['error', {
+      'beforeColon': false,
+      'afterColon': true,
+      'mode': 'strict',
+    }],
+    'keyword-spacing': ['error', {
+      'after': true,
+      'overrides': {
+        'if': { 'after': false },
+        'for': { 'after': false },
+        'while': { 'after': false },
+      },
+    }],
+    'max-classes-per-file': ['error', 1],
+    'max-len': ['error', 150],
+    'no-console': ['warn'],
+    'no-empty': ['error', { 'allowEmptyCatch': false }],
+    'no-multi-spaces': ['error', { 'ignoreEOLComments': false }],
+    'no-trailing-spaces': ['error', { 'ignoreComments': false }],
+    'no-warning-comments': ['warn', { 'location': 'start' }],
+    'object-curly-spacing': ['error', 'always'],
+    'quotes': ['error', 'single'],
+    'semi': ['error', 'always'],
+    'sort-vars': ['error', { 'ignoreCase': true }],
+    'space-before-blocks': ['error', 'always'],
+    'space-before-function-paren': ['error', {
+      'anonymous': 'always',
+      'named': 'never',
+      'asyncArrow': 'always',
+    }],
+    'space-in-parens': ['error', 'never'],
+    'spaced-comment': ['error', 'always'],
+  },
+  overrides: [
+    {
+      files: ['*.js'],
+      parserOptions: {
+        'sourceType': 'module',
+      },
+      env: {
+        'browser': true,
+      },
+    },
+    {
+      files: ['*.ts', '*.vue'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+        'project': 'tsconfig.json',
+        extraFileExtensions: ['.vue'],
+      },
+      plugins: [
+        '@typescript-eslint',
+      ],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      globals: {
+        defineProps: 'readonly',
+        defineEmits: 'readonly',
+        defineExpose: 'readonly',
+      },
+      rules: {
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            'selector': 'default',
+            'format': ['camelCase'],
+          },
+          {
+            'selector': 'variable',
+            'modifiers': ['const'],
+            'format': ['PascalCase', 'camelCase', 'UPPER_CASE'],
+          },
+          {
+            'selector': ['parameter', 'property'],
+            'format': ['camelCase'],
+            'leadingUnderscore': 'allow',
+          },
+          {
+            'selector': 'typeLike',
+            'format': ['PascalCase'],
+          },
+          {
+            'selector': 'interface',
+            'format': ['PascalCase'],
+            'prefix': ['I'],
+          },
+          {
+            'selector': 'enumMember',
+            'format': ['UPPER_CASE'],
+          },
+          {
+            'selector': 'variable',
+            'types': ['boolean'],
+            'format': ['PascalCase'],
+            'prefix': ['is', 'should', 'has', 'can', 'did', 'will'],
+          },
+        ],
+        '@typescript-eslint/no-empty-interface': ['error', { 'allowSingleExtends': false }],
+        'quotes': 'off',
+        '@typescript-eslint/quotes': ['error', 'single'],
+        '@typescript-eslint/type-annotation-spacing': ['error', { 'before': false, 'after': true }],
+        'vue/singleline-html-element-content-newline': 0,
+        'vue/require-v-for-key': 'off',
+        'vue/no-v-html': 'off',
+        'vue/html-self-closing': ['error', {
+          'html': {
+            'void': 'any',
+            'normal': 'always',
+            'component': 'always',
+          },
+          'svg': 'always',
+          'math': 'always',
+        }],
+      },
+    },
+  ],
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,22 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "streetsidesoftware.code-spell-checker",
+    "usernamehw.errorlens",
+    "dbaeumer.vscode-eslint",
+    "streetsidesoftware.code-spell-checker-german",
+    "jasonlhy.hungry-delete",
+    "gruntfuggly.todo-tree",
+    "Vue.volar"
+  ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,18 @@
+{
+  "cSpell.words": [
+    "appwrite",
+    "camelcase",
+    "checkin",
+    "cliffbreak",
+    "corepack",
+    "daisyui",
+    "Gitea",
+    "heroicons",
+    "kispi",
+    "pnpm",
+    "tailwindcss",
+    "vite",
+    "vitejs",
+    "vueuse"
+  ]
+}
--- a/COMMIT_CONVENTION.md
+++ b/COMMIT_CONVENTION.md
@ -0,0 +1,79 @@
+### Commit Message Format
+
+Each commit message consists of a **header**, a **body** and a **footer**.  
+The header has a special format that includes a **type**, a **scope** and a **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+Any line of the commit message cannot be longer 100 characters! This allows the message to be easier to read on Gitea as well as in various git tools.
+
+Footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-using-keywords/) if any.
+
+Samples:
+
+```
+docs(changelog): update change log to beta.5
+```
+```
+style(webapp): reorder imports
+```
+```
+fix(appwrite): need to depend on latest rxjs and zone.js
+
+The version in our package.json gets copied to the one we publish, and users need the latest of these.
+```
+
+### Revert
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
+### Type
+Must be one of the following:
+
+* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
+* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
+* **docs**: Documentation only changes
+* **feat**: A new feature
+* **fix**: A bug fix
+* **perf**: A code change that improves performance
+* **refactor**: A code change that neither fixes a bug nor adds a feature
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+* **test**: Adding missing tests or correcting existing tests
+* **bump**: Bump a version to X
+
+### Scope
+The following is the list of supported scopes (more to come):
+
+* **core** used for changes to the whole project
+* **webapp** used for changes made in the webapp
+* **appwrite** used for changes made in the Appwrite cloud functions
+* **changelog**: used for updating the release notes in CHANGELOG.md
+* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`)
+
+
+### Subject
+The subject contains succinct description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* don't capitalize first letter
+* no dot (.) at the end
+
+### Body
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+The footer should contain any information about **Breaking Changes** and is also the place to
+reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
+
+### More Infos
+To generate a changelog **[generate-changelog](https://github.com/lob/generate-changelog)** is used.
--- a/7
+++ b/7
@ -0,0 +1,7 @@
+FROM steebchen/nginx-spa:stable
+
+COPY dist/ /app
+
+EXPOSE 80
+
+CMD ["nginx"]
--- a/README.md
+++ b/README.md
@ -0,0 +1,65 @@
+<h1 align="center">🔥 Core - Kinderspielstadt Öhringen 🔥</h1>
+<h3 align="center">Verwaltung + Bank + Radio = ❤️</h1>
+<p align="center">
+<img height="600px" src=".docs/screenshot.png" alt="screenshot"/>
+</p>
+
+This is our repository containing all required resources to run the "Core" WebApp from the "Kinderspielstadt Öhringen".  
+This repository also contains all the required Appwrite cloud functions if any exist.
+
+## 🚀 Getting Started
+
+The following instructions will get you a copy of the project up and running on your local machine for development and testing purposes.  
+See deployment for notes on how to deploy the project on a live system.
+
+### 🍽️ Prerequisites
+
+`NodeJS (including PNPM)` is required to run this project.  
+Also a hosted instance of `Appwrite` is required.  
+
+### 📦 Installing
+
+At first clone this repository to your local machine by using
+
+```
+git clone https://git.cliffbreak.de/Kontast/Core.git
+```
+
+Change to the cloned repository
+
+```
+cd Core
+```
+
+To install all required packages run
+
+```
+pnpm install
+```
+
+To start the webapp in development mode run the following npm script
+
+```
+pnpm run dev
+```
+
+## 🧑‍💻 Configure Visual Studio Code
+If you haven't a instance of Visual Studio Code up and running download the latest version [here](https://code.visualstudio.com/download).  
+Install the recommended extensions by opening the Extensions-Tab (Ctrl+Shift+X).  
+Enter `@recommended` and install all extensions.  
+After that restart Visual Studio Code to apply all changes.
+
+## 🎉 Contributing
+Please refer to our **[COMMIT_CONVENTION](COMMIT_CONVENTION.md)**
+
+## 🏗️ Built With
+
+* [Node.js](https://nodejs.org/) - The JavaScript runtime used as the projects base
+* [PNPM](https://pnpm.io/) - Faster alternative to npm for managing dependencies
+* [Vue.js](https://vuejs.org/) - The Frontend Web Framework
+* [Vite](https://vitejs.dev/) - Used Frontend Tooling
+* [Appwrite](https://docs.mongodb.com/) - The hosted Backend used for this application
+
+## 🤵 Authors
+
+* **Simon Giesel** - *Project Lead & Initial work* - [Simon Giesel](https://git.cliffbreak.de/SimGie)
--- a/index.html
+++ b/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#ffc40d">
+  <meta name="theme-color" content="#ffffff">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Kinderspielstadt Öhringen</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,35 @@
+{
+  "name": "core",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "lint": "eslint -c .eslintrc.js src/",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/vue": "^1.0.6",
+    "@vueuse/core": "^8.9.2",
+    "daisyui": "^2.19.0",
+    "vue": "^3.2.37",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.3",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "autoprefixer": "^10.4.7",
+    "eslint": "^8.19.0",
+    "eslint-plugin-vue": "^9.2.0",
+    "eslint-plugin-vue-scoped-css": "^2.2.0",
+    "postcss": "^8.4.14",
+    "sass": "^1.53.0",
+    "tailwindcss": "^3.1.6",
+    "typescript": "^4.7.4",
+    "vite": "^2.9.14",
+    "vue-eslint-parser": "^9.0.3",
+    "vue-tsc": "^0.38.5"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/browserconfig.xml
+++ b/public/browserconfig.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#b91d47</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/mstile-150x150.png
+++ b/public/mstile-150x150.png
--- a/public/safari-pinned-tab.svg
+++ b/public/safari-pinned-tab.svg
@ -0,0 +1,162 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1181.000000pt" height="1181.000000pt" viewBox="0 0 1181.000000 1181.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1181.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M8929 10966 c-19 -7 -39 -24 -49 -42 -15 -30 -16 -266 -16 -3380 l1
+-3349 310 0 310 0 1 3335 c1 1959 -2 3350 -8 3372 -16 67 -39 73 -295 74 -133
+0 -235 -4 -254 -10z"/>
+<path d="M414 9835 l0 -855 81 0 80 0 0 445 c0 245 3 445 6 445 5 0 541 -544
+769 -781 l105 -109 117 0 117 0 -156 158 c-85 86 -290 293 -454 460 -164 166
+-299 306 -299 310 0 4 42 44 93 89 50 45 112 101 137 124 50 46 175 159 211
+190 13 11 42 37 64 58 22 20 111 101 198 179 l157 142 -112 0 -113 -1 -100
+-91 c-55 -50 -140 -128 -189 -172 -49 -45 -100 -90 -112 -101 -12 -11 -54 -49
+-94 -85 -40 -36 -82 -74 -94 -85 -13 -11 -60 -55 -107 -97 -110 -100 -131
+-118 -138 -118 -3 0 -6 168 -6 373 l0 372 -80 3 -81 3 0 -856z"/>
+<path d="M1825 9835 l0 -855 80 0 80 0 0 855 0 855 -80 0 -80 0 0 -855z"/>
+<path d="M2394 9835 l0 -855 81 0 80 0 0 745 c0 410 2 745 5 745 3 -1 18 -19
+33 -41 16 -23 132 -190 259 -373 127 -182 348 -499 490 -703 l260 -373 104 0
+104 0 0 855 0 855 -80 0 -80 0 -1 -37 c0 -21 0 -356 -1 -745 0 -390 -3 -708
+-7 -708 -3 0 -55 72 -116 160 -113 165 -169 244 -643 925 l-278 400 -105 3
+-105 3 0 -856z"/>
+<path d="M4192 9835 l-1 -857 362 5 c199 2 373 7 387 10 14 4 39 9 55 12 216
+42 424 183 527 359 202 343 155 818 -107 1079 -71 72 -126 110 -228 157 -164
+76 -252 88 -664 89 l-331 2 0 -856z m678 689 c316 -48 523 -219 596 -489 20
+-74 26 -258 12 -343 -24 -143 -84 -257 -184 -354 -102 -98 -214 -151 -419
+-194 -16 -3 -141 -8 -276 -11 l-245 -5 -1 706 0 707 216 -2 c119 -1 254 -8
+301 -15z"/>
+<path d="M5958 10683 c0 -5 -2 -389 -3 -855 l-1 -848 542 0 542 0 3 43 c2 23
+3 57 1 74 l-3 33 -462 2 -462 3 0 328 0 327 417 0 417 0 -1 73 -1 72 -416 5
+-416 5 -1 285 c0 157 2 291 4 298 3 9 101 12 443 12 344 0 439 3 440 13 1 15
+1 119 0 130 -1 4 -235 7 -521 7 -286 0 -521 -3 -522 -7z"/>
+<path d="M7325 9836 l0 -856 80 0 80 0 0 403 0 402 149 0 150 0 71 -120 c300
+-502 356 -595 378 -635 l25 -45 91 -3 c50 -1 91 -1 91 2 0 2 -20 37 -45 78
+-24 40 -57 96 -74 123 -16 28 -106 176 -200 330 l-170 280 86 22 c191 51 305
+157 337 315 26 126 6 254 -54 346 -63 98 -135 146 -275 183 -72 20 -113 22
+-400 26 l-320 5 0 -856z m630 692 c184 -39 289 -169 265 -325 -17 -106 -71
+-177 -166 -219 -82 -36 -162 -45 -374 -42 l-195 3 0 285 c-1 157 1 291 3 298
+6 16 391 16 467 0z"/>
+<path d="M9650 8955 l0 -1601 930 1 930 0 0 230 0 230 -150 -1 c-119 -1 -150
+2 -151 13 0 7 -1 105 -1 218 0 113 1 210 1 215 1 6 58 10 151 10 l150 0 0 228
+0 229 -137 -2 c-76 0 -145 1 -153 3 -13 3 -15 35 -13 225 1 122 2 224 2 227 1
+3 69 5 151 5 l150 -1 0 228 0 228 -32 1 c-18 0 -87 1 -153 2 l-119 2 -1 215
+c0 118 1 221 3 228 3 9 43 12 153 12 l149 0 0 228 0 229 -930 0 -930 0 0
+-1602z m991 476 c1 -3 2 -60 3 -126 l2 -120 126 0 127 0 -2 -230 -2 -230 -122
+1 c-82 0 -123 -3 -124 -10 -1 -6 -2 -63 -3 -126 l-1 -115 -227 -1 c-162 -1
+-228 2 -228 10 -1 6 -2 63 -3 126 l-2 115 -123 0 c-67 0 -123 2 -123 5 -1 3
+-2 105 -3 227 -1 148 2 224 9 226 5 2 57 3 115 2 58 -1 111 0 118 3 9 3 13 21
+12 56 -1 28 -1 83 -1 123 l1 71 225 0 c124 -1 226 -4 226 -7z"/>
+<path d="M8316 8691 c-26 -10 -30 -45 -8 -64 16 -15 20 -15 40 -1 24 17 29 43
+10 62 -13 13 -15 14 -42 3z"/>
+<path d="M7785 8654 c3 -35 7 -37 120 -78 55 -20 165 -60 244 -89 136 -51 142
+-55 115 -64 -130 -47 -425 -157 -451 -169 -30 -14 -35 -25 -24 -61 1 -2 31 9
+69 23 37 14 74 27 82 29 23 6 412 154 417 158 10 11 10 47 0 55 -7 5 -41 19
+-77 32 -36 13 -83 31 -105 40 -37 16 -104 41 -317 120 l-76 29 3 -25z"/>
+<path d="M995 8394 c-11 -2 -45 -9 -75 -15 -246 -49 -425 -214 -469 -436 -14
+-70 -7 -225 13 -294 38 -128 130 -235 264 -307 42 -22 177 -75 300 -116 239
+-82 281 -100 355 -153 89 -66 130 -150 129 -273 -1 -110 -41 -200 -125 -277
+-92 -84 -209 -123 -360 -119 -191 6 -333 78 -427 216 -13 19 -25 37 -26 38 -2
+3 -159 -96 -183 -114 -13 -10 91 -124 162 -177 78 -59 228 -118 341 -135 94
+-13 296 -7 366 12 316 85 490 348 441 666 -27 172 -122 291 -303 379 -57 28
+-146 62 -198 77 -324 89 -478 175 -529 294 -50 116 -44 257 15 357 72 124 202
+190 389 198 165 7 271 -31 375 -135 33 -33 62 -60 65 -60 3 0 41 26 85 59 l80
+59 -58 60 c-87 90 -181 145 -307 178 -58 15 -279 28 -320 18z"/>
+<path d="M2074 7311 l0 -1041 98 0 98 0 0 495 0 495 263 0 c276 1 307 3 399
+26 268 68 422 267 412 536 -6 164 -53 271 -163 371 -76 68 -160 105 -326 143
+-16 4 -199 9 -405 11 l-376 4 0 -1040z m751 844 c98 -19 152 -44 216 -103 82
+-75 104 -129 103 -257 0 -88 -3 -106 -26 -150 -34 -65 -89 -119 -152 -150 -93
+-45 -169 -55 -443 -55 l-253 0 0 365 0 366 243 -1 c158 -1 266 -6 312 -15z"/>
+<path d="M3685 7313 l0 -1038 98 -3 97 -3 0 1041 0 1040 -98 0 -97 0 0 -1037z"/>
+<path d="M4374 7310 l1 -1040 660 0 660 0 0 90 1 90 -563 0 -563 0 0 405 0
+405 505 0 505 0 0 90 0 90 -505 0 -505 0 0 365 0 365 333 0 c182 0 425 0 540
+0 l207 0 0 90 0 90 -638 0 -638 0 0 -1040z"/>
+<path d="M6045 7313 l0 -1038 583 -3 582 -2 0 90 0 90 -485 0 -485 0 0 950 0
+950 -98 0 -97 0 0 -1037z"/>
+<path d="M8307 8138 c-29 -22 -10 -68 28 -68 35 0 46 37 19 64 -19 19 -25 20
+-47 4z"/>
+<path d="M8319 7975 c-1 -3 -2 -74 -3 -157 l-1 -153 -112 0 -113 -1 0 143 0
+143 -25 0 -24 0 -3 -142 -3 -143 -97 0 c-59 0 -99 4 -99 10 -1 5 -3 69 -4 140
+-3 163 -2 154 -22 150 -10 -2 -20 -4 -23 -4 -3 -1 -5 -80 -5 -176 l0 -175 290
+0 290 0 -1 178 c-1 97 -2 180 -3 185 -1 8 -40 10 -42 2z"/>
+<path d="M7789 7267 c0 -7 -2 -20 -4 -29 -3 -16 15 -17 213 -17 120 0 235 0
+257 0 l40 -1 -50 -33 c-120 -80 -451 -312 -457 -321 -3 -5 -5 -21 -4 -35 l3
+-26 289 0 c308 0 293 -2 285 43 0 4 -113 7 -251 7 -184 0 -246 3 -237 11 6 6
+50 37 97 69 399 273 397 271 395 307 l-2 33 -286 2 c-211 1 -287 -2 -288 -10z"/>
+<path d="M8318 6703 c-3 -4 -4 -74 -4 -155 1 -94 -2 -148 -9 -149 -5 -1 -56
+-2 -112 -3 l-103 -1 0 142 0 143 -25 0 -25 0 0 -143 0 -143 -97 2 c-54 1 -100
+2 -103 3 -3 0 -5 64 -5 141 0 78 -2 145 -5 150 -3 5 -14 8 -25 6 -19 -3 -20
+-12 -20 -170 0 -92 2 -172 6 -177 3 -6 121 -8 290 -7 l284 3 0 180 c0 177 0
+180 -22 183 -11 2 -23 0 -25 -5z"/>
+<path d="M8055 6188 c-3 -7 -4 -51 -2 -98 2 -83 3 -85 26 -85 23 0 24 3 23 67
+l-1 66 74 4 c114 5 127 0 141 -50 19 -65 12 -179 -14 -229 -88 -168 -369 -164
+-457 7 -22 42 -28 144 -11 191 7 21 23 49 35 65 l22 28 -21 20 c-21 21 -21 21
+-36 1 -42 -55 -57 -101 -60 -181 -3 -71 0 -87 25 -140 38 -80 112 -144 190
+-162 60 -14 165 -6 219 18 70 30 133 101 157 175 22 70 16 186 -13 261 l-20
+49 -136 3 c-103 2 -138 -1 -141 -10z"/>
+<path d="M7786 5563 c-16 -40 -4 -42 250 -41 135 0 247 -2 249 -3 1 -2 -65
+-50 -149 -107 -330 -225 -349 -239 -352 -264 -5 -49 -5 -48 296 -46 273 3 283
+4 286 23 2 11 -1 22 -6 25 -5 3 -119 5 -254 5 -135 0 -246 1 -246 2 0 2 242
+170 442 307 63 43 67 50 59 105 0 5 -123 9 -286 8 -228 0 -285 -3 -289 -14z"/>
+<path d="M860 5324 c-113 -25 -231 -91 -297 -164 -33 -36 -91 -158 -98 -205
+-18 -121 -2 -236 47 -328 63 -118 165 -182 431 -271 268 -90 338 -131 389
+-229 32 -62 31 -193 -2 -262 -113 -232 -488 -277 -685 -81 -28 28 -58 61 -66
+74 l-14 22 -77 -51 -78 -51 20 -28 c64 -89 191 -173 320 -210 100 -29 278 -36
+375 -14 238 54 395 234 397 458 1 102 -9 153 -42 221 -59 123 -176 203 -390
+268 -300 92 -385 140 -441 249 -31 61 -34 183 -6 256 50 131 194 211 375 209
+126 -1 208 -35 293 -121 l46 -47 63 44 c35 24 65 48 67 53 6 17 -64 90 -120
+128 -90 59 -193 88 -327 92 -77 2 -136 -2 -180 -12z"/>
+<path d="M1620 5225 l0 -75 298 -2 297 -3 1 -795 0 -795 82 -3 82 -3 0 801 0
+800 300 0 300 0 0 75 0 75 -680 0 -680 0 0 -75z"/>
+<path d="M3381 4923 c-91 -208 -175 -400 -187 -428 -12 -27 -108 -248 -214
+-490 -105 -242 -194 -443 -197 -447 -2 -5 35 -8 84 -8 l88 0 97 228 96 227
+465 3 464 2 94 -230 94 -230 93 0 92 0 -16 38 c-8 20 -38 91 -66 157 -48 116
+-70 168 -89 210 -5 11 -46 110 -92 220 -46 110 -171 408 -278 662 l-194 463
+-85 0 -85 0 -164 -377z m444 -298 c43 -104 102 -248 132 -318 29 -71 53 -133
+53 -138 0 -5 -160 -9 -395 -9 -217 0 -395 3 -395 6 0 6 292 695 331 781 10 23
+19 44 19 46 0 3 12 31 26 63 l26 59 63 -150 c34 -82 97 -235 140 -340z"/>
+<path d="M4619 5278 c-2 -12 -4 -405 -3 -873 l1 -850 344 0 c401 0 447 4 589
+53 130 45 229 107 322 204 170 174 255 455 224 733 -22 195 -127 412 -253 526
+-39 35 -157 119 -167 119 -3 0 -29 11 -58 25 -47 21 -140 50 -233 71 -16 4
+-195 9 -396 11 l-366 5 -4 -24z m669 -140 c110 -17 188 -40 277 -83 150 -73
+244 -166 310 -310 45 -96 62 -183 63 -311 2 -326 -140 -548 -426 -664 -127
+-51 -204 -62 -479 -68 l-253 -4 0 727 0 726 226 -2 c124 -1 251 -6 282 -11z"/>
+<path d="M6200 5225 l0 -75 298 0 298 0 0 -797 0 -798 82 -3 82 -3 0 158 c0
+87 0 447 0 801 l0 642 300 0 300 0 0 75 0 75 -680 0 -680 0 0 -75z"/>
+<path d="M7785 4938 l-1 -28 292 0 291 0 -2 27 -1 28 -290 0 -289 0 0 -27z"/>
+<path d="M8235 4740 c-71 -43 -136 -79 -142 -80 -7 0 -13 8 -13 18 0 59 -69
+122 -133 122 -75 0 -130 -39 -148 -104 -12 -41 -20 -220 -11 -243 3 -10 71
+-13 293 -13 269 0 289 1 286 18 -5 35 -15 38 -146 37 l-131 -1 0 51 0 51 123
+72 c67 40 128 76 136 81 10 6 26 71 17 71 0 0 -59 -36 -131 -80z m-243 -11
+c32 -17 49 -76 46 -159 l-3 -75 -90 -1 c-49 0 -95 2 -101 3 -14 5 -11 147 4
+183 24 61 84 81 144 49z"/>
+<path d="M7790 4300 c-14 -9 -5 -43 13 -49 9 -3 66 -6 127 -5 l110 1 -2 -161
+-3 -161 -115 -1 c-146 -2 -136 0 -136 -29 l0 -25 291 0 292 0 -2 28 -1 27
+-137 0 -137 -1 0 162 0 161 128 1 c70 0 132 1 138 1 5 1 10 12 10 26 0 24 -3
+25 -60 26 -365 3 -509 3 -516 -1z"/>
+<path d="M8620 4053 c-58 -29 -60 -36 -60 -313 0 -184 4 -262 13 -280 27 -55
+26 -55 608 -55 497 0 537 2 563 18 15 10 31 29 36 43 13 33 13 505 0 538 -5
+14 -21 33 -36 43 -25 16 -67 18 -564 18 -396 0 -542 -3 -560 -12z"/>
+<path d="M7994 3760 c-32 -9 -70 -22 -84 -30 -39 -21 -91 -81 -114 -130 -23
+-52 -31 -176 -14 -218 31 -76 41 -92 79 -127 61 -55 120 -78 204 -78 83 -1
+109 4 162 31 108 56 164 173 148 312 -21 177 -200 290 -381 240z m202 -70 c93
+-46 141 -136 131 -246 -13 -137 -126 -223 -279 -212 -88 7 -150 43 -193 112
+-26 44 -30 58 -30 125 0 88 16 129 69 180 71 69 206 87 302 41z"/>
+<path d="M7646 3571 c-17 -18 -17 -20 3 -40 26 -26 33 -26 53 -3 11 12 13 24
+7 40 -10 27 -40 29 -63 3z"/>
+<path d="M7652 3418 c-16 -16 -15 -43 3 -58 32 -26 78 25 49 54 -19 19 -36 20
+-52 4z"/>
+<path d="M8719 3271 c-22 -7 -1217 -1209 -1233 -1238 -14 -28 -30 -93 -30
+-123 1 -27 16 -84 32 -115 8 -16 358 -373 777 -792 579 -580 772 -767 806
+-782 59 -27 149 -27 208 -1 34 16 230 206 807 783 628 628 767 771 785 812 27
+60 27 140 0 200 -14 32 -172 196 -628 651 l-608 609 -452 0 c-249 0 -458 -2
+-464 -4z m892 -895 c239 -238 441 -441 448 -450 11 -13 -44 -72 -435 -463
+l-449 -448 -442 442 c-244 244 -444 448 -445 454 -3 9 868 894 883 898 3 0
+201 -194 440 -433z"/>
+</g>
+</svg>
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@ -0,0 +1,19 @@
+{
+    "name": "Kinderspielstadt Öhringen",
+    "short_name": "KiSpi Öhringen",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,62 @@
+<template>
+  <MoleculeNavigationDrawer
+    :drawer-id="drawerId"
+    :navigation-entries="navigationEntries"
+  >
+    <router-view />
+  </MoleculeNavigationDrawer>
+</template>
+
+<script setup lang="ts">
+import {
+  IdentificationIcon,
+  LibraryIcon,
+  LogoutIcon,
+  MusicNoteIcon,
+  TrendingUpIcon,
+  UserIcon,
+} from '@heroicons/vue/outline';
+import { INavigationEntry } from './interfaces/navigation-entry.interface';
+import MoleculeNavigationDrawer from './components/molecules/MoleculeNavigationDrawer.vue';
+
+const drawerId = 'default-drawer';
+const navigationEntries: INavigationEntry[] = [
+  {
+    name: 'Stammdaten',
+    icon: UserIcon,
+    to: '/data',
+  },
+  {
+    name: 'Einstempeln',
+    icon: IdentificationIcon,
+    to: '/checkin',
+  },
+  {
+    name: 'Bank',
+    icon: LibraryIcon,
+    to: '/bank',
+  },
+  {
+    name: 'Börse',
+    icon: TrendingUpIcon,
+    to: '/stocks',
+  },
+  {
+    name: 'Radio',
+    icon: MusicNoteIcon,
+    to: '/radio',
+  },
+  {
+    name: 'divider',
+    to: '',
+  },
+  {
+    name: 'Abmelden',
+    icon: LogoutIcon,
+    to: '/logout',
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo_white.png
+++ b/src/assets/logo_white.png
--- a/src/components/atoms/AtomLogo.vue
+++ b/src/components/atoms/AtomLogo.vue
@ -0,0 +1,18 @@
+<template>
+  <img
+    v-if="isDark"
+    src="../../assets/logo_white.png"
+  />
+  <img
+    v-else
+    src="../../assets/logo.png"
+  />
+</template>
+
+<script lang="ts" setup>
+import { isDark } from '../../utils/darkMode';
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/components/atoms/AtomSwap.vue
+++ b/src/components/atoms/AtomSwap.vue
@ -0,0 +1,39 @@
+<template>
+  <label class="swap swap-rotate">
+    <input
+      type="checkbox"
+      :checked="checked"
+    />
+    <component
+      :is="onIcon"
+      class="swap-on h-6 w-6"
+    />
+    <component
+      :is="offIcon"
+      class="swap-off h-6 w-6"
+    />
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { FunctionalComponent, PropType } from 'vue';
+
+defineProps({
+  onIcon: {
+    type: Object as PropType<FunctionalComponent>,
+    required: true,
+  },
+  offIcon: {
+    type: Object as PropType<FunctionalComponent>,
+    required: true,
+  },
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/components/molecules/MoleculeNavigationDrawer.vue
+++ b/src/components/molecules/MoleculeNavigationDrawer.vue
@ -0,0 +1,88 @@
+<template>
+  <div class="drawer drawer-mobile">
+    <input
+      :id="drawerId"
+      type="checkbox"
+      class="drawer-toggle"
+    />
+    <div class="drawer-content flex flex-col lg:p-6 lg:pt-0 bg-base-200 h-screen">
+      <div
+        class="navbar shadow-lg bg-neutral-focus text-neutral-content lg:hidden sticky top-0 z-50 max-w-7xl place-self-center"
+      >
+        <div class="flex-none">
+          <label
+            :for="drawerId"
+            class="btn btn-ghost rounded-btn lg:hidden"
+          >
+            <MenuIcon class="h-7 w-7" />
+          </label>
+          <label
+            tabindex="0"
+            class="btn btn-ghost avatar"
+          >
+            <AtomLogo class="w-12" />
+          </label>
+        </div>
+      </div>
+      <slot />
+    </div>
+    <div class="drawer-side">
+      <label
+        :for="drawerId"
+        class="drawer-overlay"
+      />
+      <ul class="menu p-4 overflow-y-auto w-80">
+        <li class="pointer-events-none">
+          <a>
+            <AtomLogo class="w-28" />
+          </a>
+        </li>
+        <li
+          v-for="navigationEntry of navigationEntries"
+          :class="navigationEntry.name === 'divider' ? 'menu-title' : null"
+        >
+          <RouterLink
+            v-if="navigationEntry.name !== 'divider'"
+            :to="navigationEntry.to"
+            active-class="active"
+          >
+            <component
+              :is="navigationEntry.icon"
+              class="h-6 w-6"
+            />{{ navigationEntry.name }}
+          </RouterLink>
+        </li>
+        <AtomSwap
+          class="mt-auto place-self-end"
+          :on-icon="SunIcon"
+          :off-icon="MoonIcon"
+          :checked="isDark"
+          @change="toggleDark()"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { isDark, toggleDark } from '../../utils/darkMode';
+import { INavigationEntry } from '../../interfaces/navigation-entry.interface';
+import { MenuIcon, MoonIcon, SunIcon } from '@heroicons/vue/outline';
+import AtomLogo from '../atoms/AtomLogo.vue';
+import AtomSwap from '../atoms/AtomSwap.vue';
+
+defineProps({
+  drawerId: {
+    type: String,
+    required: true,
+  },
+  navigationEntries: {
+    type: Array as PropType<INavigationEntry[]>,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/components/views/BankView.vue
+++ b/src/components/views/BankView.vue
@ -0,0 +1,11 @@
+<template>
+  #Bank
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/components/views/CheckInView.vue
+++ b/src/components/views/CheckInView.vue
@ -0,0 +1,11 @@
+<template>
+  #CheckIn
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/components/views/DataView.vue
+++ b/src/components/views/DataView.vue
@ -0,0 +1,11 @@
+<template>
+  #Data
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/components/views/RadioView.vue
+++ b/src/components/views/RadioView.vue
@ -0,0 +1,11 @@
+<template>
+  #Radio
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/components/views/StocksView.vue
+++ b/src/components/views/StocksView.vue
@ -0,0 +1,11 @@
+<template>
+  #Stocks
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -0,0 +1,8 @@
+// / <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/interfaces/navigation-entry.interface.ts
+++ b/src/interfaces/navigation-entry.interface.ts
@ -0,0 +1,8 @@
+import { FunctionalComponent } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+
+export interface INavigationEntry {
+  name: string;
+  to: RouteLocationRaw;
+  icon?: FunctionalComponent;
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './index.css';
+import router from './router/router';
+
+const app = createApp(App);
+
+app.use(router);
+
+app.mount('#app');
--- a/src/router/router.ts
+++ b/src/router/router.ts
@ -0,0 +1,36 @@
+import * as VueRouter from 'vue-router';
+import DataView from '../components/views/DataView.vue';
+import CheckInView from '../components/views/CheckInView.vue';
+import BankView from '../components/views/BankView.vue';
+import StocksView from '../components/views/StocksView.vue';
+import RadioView from '../components/views/RadioView.vue';
+
+const routes = [
+  {
+    path: '/data',
+    component: DataView,
+  },
+  {
+    path: '/checkin',
+    component: CheckInView,
+  },
+  {
+    path: '/bank',
+    component: BankView,
+  },
+  {
+    path: '/stocks',
+    component: StocksView,
+  },
+  {
+    path: '/radio',
+    component: RadioView,
+  },
+];
+
+const router = VueRouter.createRouter({
+  history: VueRouter.createWebHistory(),
+  routes,
+});
+
+export default router;
--- a/src/utils/darkMode.ts
+++ b/src/utils/darkMode.ts
@ -0,0 +1,9 @@
+import { useDark, useToggle } from '@vueuse/core';
+
+export const isDark = useDark({
+  selector: 'body',
+  attribute: 'data-theme',
+  valueDark: 'dark',
+  valueLight: 'light',
+});
+export const toggleDark = useToggle(isDark);
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/typography'), require('daisyui')],
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})