feat(ZMS-2936 MPDZBS): new zmscitizenview initial setup webcomponent

.github/workflows/maven-node-build.yaml

@@ -0,0 +1,35 @@
+name: Frontend Build
+
+on:
+  push:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      TZ: Europe/Berlin # timezone
+    strategy:
+      fail-fast: false
+      matrix:
+        include: # hier müssen die Pfade angegeben werden
+          - app-path: zmscitizenview
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - if:  ${{hashFiles(format('./{0}/package.json', matrix.app-path))!=null}}
+        id: node
+        uses: it-at-m/.github/.github/actions/action-npm-build@main
+        with:
+          app-path:  "${{ matrix.app-path }}"
+      - if:  ${{hashFiles(format('./{0}/pom.xml', matrix.app-path))!=null}}
+        id: maven
+        uses: it-at-m/.github/.github/actions/action-maven-build@main
+        with:
+          app-path: "${{ matrix.app-path }}"
+      - uses: it-at-m/.github/.github/actions/action-build-image@main
+        with:
+          path: "${{  matrix.app-path }}"
+          image-name: "${{  matrix.app-path }}"
+          artifact-name: ${{join(steps.*.outputs.artifact-name)}}
+          registry-password: ${{ secrets.GITHUB_TOKEN }}
+          registry-username: ${{ github.actor }}
+          image-tags: "branch-${{ github.ref_name }}"

zmscitizenview/.browserslistrc

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

zmscitizenview/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

zmscitizenview/.env.production

@@ -0,0 +1,3 @@
+VITE_NODE_ENV=production
+VITE_VUE_APP_API_URL=/buergeransicht
+VITE_VUE_APP_SERVICE_BASE_URL="https://stadt.muenchen.de/service/info/"

zmscitizenview/.gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+target
+
+# local env files
+.env.local
+.env.*.local
+.env.development
+.env.*.development
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

zmscitizenview/.prettierignore

@@ -0,0 +1,4 @@
+dist
+target
+node_modules
+processes/post-build.js

zmscitizenview/.prettierrc.json

@@ -0,0 +1 @@
+"@muenchen/prettier-codeformat"

zmscitizenview/Dockerfile

@@ -0,0 +1,11 @@
+# For documentation see https://github.com/sclorg/nginx-container
+FROM registry.access.redhat.com/ubi9/nginx-124:9.5-1731599569@sha256:17899b0ddb0c2dabf03edc6d4bbe073dc1fe0908331b37b9133a852d5a6006fc
+
+# Copy built web application
+COPY dist .
+
+# Copy custom nginx configurations
+COPY docker/nginx/*.conf "${NGINX_DEFAULT_CONF_PATH}"
+
+# Start the web server
+CMD nginx -g "daemon off;"

zmscitizenview/docker/nginx/compression.conf

@@ -0,0 +1,7 @@
+gzip on;
+gzip_http_version 1.1;
+gzip_min_length   1100;
+gzip_vary         on;
+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;
+gzip_comp_level   9;

zmscitizenview/docker/nginx/health.conf

@@ -0,0 +1,7 @@
+location /actuator/health {
+    access_log off;
+    add_header 'Content-Type' 'application/json';
+    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
+    add_header Cache-Control 'no-cache';
+    return 200 '{"status":"UP"}';
+}

zmscitizenview/eslint.config.js

@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import vuePrettierEslintConfigSkipFormatting from "@vue/eslint-config-prettier/skip-formatting";
+import vueTsEslintConfig from "@vue/eslint-config-typescript";
+import { ESLint } from "eslint";
+import vueEslintConfig from "eslint-plugin-vue";
+
+export default [
+  ...ESLint.defaultConfig,
+  js.configs.recommended,
+  ...vueEslintConfig.configs["flat/recommended"],
+  ...vueTsEslintConfig({
+    extends: ["strict", "stylistic"],
+  }),
+  vuePrettierEslintConfigSkipFormatting,
+  {
+    ignores: ["dist", "target", "node_modules", "env.d.ts"],
+  },
+  {
+    rules: {
+      "no-console": ["error", { allow: ["debug"] }],
+      "vue/component-name-in-template-casing": [
+        "error",
+        "kebab-case",
+        { registeredComponentsOnly: false },
+      ],
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+];

zmscitizenview/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="/favicon.ico" rel="icon">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <title>Terminvereinbarung Bürgeransicht Webcomponent</title>
+
+    <!-- Muenchen.de-Styles -->
+    <link
+            rel="stylesheet"
+            href="https://assets.muenchen.de/mde/1.0.7/css/muenchende-fontfaces.css"
+    />
+    <link
+            rel="stylesheet"
+            href="https://assets.muenchen.de/mde/1.0.7/css/muenchende-style.css"
+    />
+
+    <!-- built files will be auto injected -->
+    <script src="src/main.ts" type="module"></script>
+
+</head>
+<body>
+
+<noscript>
+    <strong>Damit das Widget korrekt funktioniert, muss Javascript aktiviert werden.</strong>
+</noscript>
+
+<i18n-host>
+    <zms-appointment-wrapped></zms-appointment-wrapped>
+</i18n-host>
+
+<script type="text/javascript">
+    const element = document.getElementsByTagName('zms-appointment-wrapped')[0]
+    const urlElements = window.location.hash.split('/')
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+
+    if (urlElements.length >= 3 && urlElements[1] === 'services') {
+        element.setAttribute('service-id', urlElements[2])
+    }
+
+    if (urlElements.length >= 5 && urlElements[3] === 'locations') {
+        element.setAttribute('location-id', urlElements[4])
+    }
+
+    if (urlElements.length === 4 && urlElements[1] === 'appointment' && urlElements[2] === 'confirm') {
+        element.setAttribute('confirm-appointment-hash', urlElements[3])
+    }
+
+    if (urlElements.length === 3 && urlElements[1] === 'appointment') {
+        element.setAttribute('appointment-hash', urlElements[2])
+    }
+
+    if (params.get('exclusiveLocation')) {
+        element.setAttribute('exclusive-location', '1')
+    }
+</script>
+
+</body>
+
+</html>