Draft: vue3 & Pinia Migration (#114)

* chore: migrtated to vue3 & pinia

* fix: missing package.lock added

* chore: update Map

* chore: map loading updated

* fix: sonar properties readded

* upgrade packacge-lock

* chore(actions): node version updated

* chore: Update Node.js version to 20.x

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.editorconfig

@@ -1,18 +1,10 @@
-# top-most EditorConfig file
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-end_of_line = lf
-charset = utf-8
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.{js,jsx,ts,tsx,vue,y{a,}ml}]
+[*.{js,jsx,ts,tsx,vue}]
 indent_style = space
 indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
 
 [*.{md}]
 indent_style = space
 indent_size = 2
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false

.env

@@ -0,0 +1,2 @@
+VITE_APP_AIRTABLE_TOKEN=keyxSG4cLVrJWeOUv
+VITE_APP_GTAG_ID=G-R88JSEDEBT

.eslintrc.js

@@ -4,15 +4,13 @@ module.exports = {
     node: true
   },
   extends: [
-    'plugin:vue/essential',
-    '@vue/standard'
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vuetify/base',
+    "@vue/eslint-config-typescript"
   ],
   parserOptions: {
-    parser: 'babel-eslint'
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    ecmaVersion: "latest",
   },
   overrides: [
     {

.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.gitignore

@@ -1,112 +1,22 @@
-# Logs
-logs
-*.log
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
+pnpm-debug.log*
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# IDEA
+# Editor directories and files
 .idea
-*.iml
-
-# VS Code
-*.vscode
-.vscode/settings.json
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,71 +1,79 @@
-# Mülli-App (Sybit Coding Camp 2021: 2.11. - 5.11.2021)
+# Vuetify (Default)
 
+This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
 
-[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+## ❗️ Important Links
 
-The webbased application supports the citizens of "Landkreis Konstanz" in Germany to dispose the waste properly and to find the nearest recycling station: https://muelli.app
+- 📄 [Docs](https://vuetifyjs.com/)
+- 🚨 [Issues](https://issues.vuetifyjs.com/)
+- 🏬 [Store](https://store.vuetifyjs.com/)
+- 🎮 [Playground](https://play.vuetifyjs.com/)
+- 💬 [Discord](https://community.vuetifyjs.com)
 
-- Testsystem: [![Netlify Status](https://api.netlify.com/api/v1/badges/7ee1ed26-e7a2-403a-8e20-332a7216475e/deploy-status)](https://app.netlify.com/sites/d1-coding-camp/deploys)
-- Produktiv: [![Netlify Status](https://api.netlify.com/api/v1/badges/25d8012e-6d1a-40c6-b43b-5ed17c1204e6/deploy-status)](https://app.netlify.com/sites/muelli/deploys)
+## 💿 Install
 
-## Sybit Coding Camp 2021: 2.11. - 5.11.2021
+Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
 
-Within the one week Sybit Coding-Camp ten teenagers were guided by
-the apprentices of Sybit building the web application: "Mülli".
+| Package Manager                                                | Command        |
+|---------------------------------------------------------------|----------------|
+| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
+| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
+| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
+| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
 
-## Partner of the Project
+After completing the installation, your environment is ready for Vuetify development.
 
-The project is supported by several municipalities:
-<https://airtable.com/embed/shrJyBkwkIxzvZfLh?backgroundColor=green>
+## ✨ Features
 
-![municipalities](/public/img/municipalities.png)
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
+- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
+- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
+- 💻 **Enhanced Development Experience**: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. [TypeScript](https://www.typescriptlang.org/) | [ESLint Plugin Vue](https://eslint.vuejs.org/)
+- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
+- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
+- 🛠️ **Strongly-Typed Vue**: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc)
 
----
+These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
 
-## Development
+## 💡 Usage
 
-### Project setup
+This section covers how to start the development server and build your project for production.
 
-Please ask the existing team for the .env file. Without it no connection to Airtable can be established.
+### Starting the Development Server
 
-```sh
-npm install
-```
-
-#### Compiles and hot-reloads for development
+To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
 
-```sh
-npm run serve
+```bash
+yarn dev
 ```
 
-#### Compiles and minifies for production
+(Repeat for npm, pnpm, and bun with respective commands.)
 
-```sh
-npm run build
-```
+### Building for Production
 
-#### Lints and fixes files
+To build your project for production, use:
 
-```sh
-npm run lint
+```bash
+yarn build
 ```
 
----
-
-#### ESLint Configuration in IntelliJ IDEA
+(Repeat for npm, pnpm, and bun with respective commands.)
 
-Go to Settings and search for _ESLint_
+Once the build process is completed, your application will be ready for deployment in a production environment.
 
-Activate the following:
+## 💪 Support Vuetify Development
 
-- _Automatic ESLint configuration_
-- Run eslint --fix on save
+This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
 
-## Import Locations
+- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
+- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
+- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
+- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
+- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
+- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
+- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
 
-How to import ESRI shape files into the application?
+## 📑 License
+[MIT](http://opensource.org/licenses/MIT)
 
-- Useful video: <https://youtu.be/U7BPHZhCbP4>
-- Tool to reorder and enhance exported CVS file: <https://www.editcsvonline.com/>
-- Import CVS file into Airtable by creating new table. Then copy&paste rows to ```Location``` table.
+Copyright (c) 2016-present Vuetify, LLC

components.d.ts

@@ -0,0 +1,37 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    BackButton: typeof import('./src/components/navigation/BackButton.vue')['default']
+    BottomNavigation: typeof import('./src/components/navigation/BottomNavigation.vue')['default']
+    DataReloadButton: typeof import('./src/components/DataReloadButton.vue')['default']
+    EventCard: typeof import('./src/components/problemstoffmobil/EventCard.vue')['default']
+    HeadlineBar: typeof import('./src/components/HeadlineBar.vue')['default']
+    LoadingSpinner: typeof import('./src/components/LoadingSpinner.vue')['default']
+    LocationMap: typeof import('./src/components/map/LocationMap.vue')['default']
+    LocationMetricCard: typeof import('./src/components/metric/LocationMetricCard.vue')['default']
+    MapNavigationCard: typeof import('./src/components/map/MapNavigationCard.vue')['default']
+    MarkdownWrapper: typeof import('./src/components/MarkdownWrapper.vue')['default']
+    MaterialCallToActionButton: typeof import('./src/components/material/MaterialCallToActionButton.vue')['default']
+    MaterialMetricCard: typeof import('./src/components/metric/MaterialMetricCard.vue')['default']
+    MaterialSearchbar: typeof import('./src/components/searchbar/MaterialSearchbar.vue')['default']
+    MaterialTargetDetail: typeof import('./src/components/material/MaterialTargetDetail.vue')['default']
+    MunicipalityFilter: typeof import('./src/components/problemstoffmobil/MunicipalityFilter.vue')['default']
+    PartnerCard: typeof import('./src/components/partner/PartnerCard.vue')['default']
+    PartnerCarousel: typeof import('./src/components/partner/PartnerCarousel.vue')['default']
+    PartnerMetricCard: typeof import('./src/components/metric/PartnerMetricCard.vue')['default']
+    PressCard: typeof import('./src/components/press/PressCard.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    ShareButton: typeof import('./src/components/navigation/ShareButton.vue')['default']
+    TargetChip: typeof import('./src/components/target/TargetChip.vue')['default']
+    TargetImage: typeof import('./src/components/target/TargetImage.vue')['default']
+    TipCard: typeof import('./src/components/tips/TipCard.vue')['default']
+    TippMetricCard: typeof import('./src/components/metric/TippMetricCard.vue')['default']
+  }
+}