Merge pull request #633 from it-at-m/564-exemplarische-backend-kommun…

…ikation

564 exemplarische backend kommunikation

wls-gui-wahllokalsystem/src/App.vue

@@ -22,6 +22,26 @@
           cols="3"
           class="d-flex align-center justify-end"
         >
+          <v-tooltip
+            location="bottom"
+            text="Backend Communication Examples"
+          >
+            <template #activator="{ props }">
+              <router-link
+                v-bind="props"
+                :to="{ name: EXAMPLE_ROUTES_BACKEND }"
+              >
+                <v-btn
+                  icon="$messageText"
+                  variant="text"
+                  density="comfortable"
+                  size="x-large"
+                  color="white"
+                >
+                </v-btn>
+              </router-link>
+            </template>
+          </v-tooltip>
           <v-tooltip
             location="bottom"
             text="Routing Examples"
@@ -94,7 +114,7 @@ import {
 import { getUser } from "@/api/user-client";
 import Ad2ImageAvatar from "@/components/common/Ad2ImageAvatar.vue";
 import TheSnackbar from "@/components/TheSnackbar.vue";
-import { EXAMPLE_ROUTES_NEWROUTE } from "@/constants";
+import { EXAMPLE_ROUTES_BACKEND, EXAMPLE_ROUTES_NEWROUTE } from "@/constants";
 import { useSnackbarStore } from "@/stores/snackbar";
 import { useUserStore } from "@/stores/user";
 import User, { UserLocalDevelopment } from "@/types/User";

wls-gui-wahllokalsystem/src/api/WLSException.ts

@@ -0,0 +1,18 @@
+export default class WLSException {
+  constructor(
+    public readonly category: string,
+    public readonly code: string,
+    public readonly message: string,
+    public readonly service: string
+  ) {}
+
+  static isWLSException(obj: any): obj is WLSException {
+    return (
+      obj &&
+      typeof obj.category === "string" &&
+      typeof obj.code === "string" &&
+      typeof obj.message === "string" &&
+      typeof obj.service === "string"
+    );
+  }
+}

wls-gui-wahllokalsystem/src/api/fetch-utils.ts

@@ -1,4 +1,5 @@
 import { ApiError } from "@/api/ApiError";
+import WLSException from "@/api/WLSException";
 import { STATUS_INDICATORS } from "@/constants";
 
 /**
@@ -118,6 +119,34 @@ export function defaultCatchHandler(
   });
 }
 
+export function wlsResponseHandler(response: Response): Promise<Response> {
+  if (!response.ok || response.status === 204) {
+    return Promise.reject(response);
+  } else {
+    return Promise.resolve(response);
+  }
+}
+
+export function wlsCatchHandler(response: Response): PromiseLike<never> {
+  if (response.status === 204) {
+    throw new ApiError({
+      level: STATUS_INDICATORS.INFO,
+      message: "Es konnten keine Daten gefunden werden",
+    });
+  }
+  if (response.status === 400) {
+    return response.json().then((content) => {
+      if (WLSException.isWLSException(content)) {
+        return Promise.reject(new ApiError({ message: content.message }));
+      } else {
+        return Promise.reject(new ApiError({ message: "Error: Bad Request" }));
+      }
+    });
+  } else {
+    return Promise.reject(new ApiError({ message: "unbekannter fehler" }));
+  }
+}
+
 /**
  * Builds the headers for the request.
  * @returns {Headers}

wls-gui-wahllokalsystem/src/api/wls-clients/broadcast-service/BroadcastMessageToRead.ts

@@ -0,0 +1,5 @@
+export interface BroadcastMessageToRead {
+  readonly oid: string;
+  readonly wahlbezirkIDs: string[];
+  readonly nachricht: string;
+}

wls-gui-wahllokalsystem/src/api/wls-clients/broadcast-service/BroadcastMessageToSend.ts

@@ -0,0 +1,6 @@
+export default class BroadcastMessageToSend {
+  constructor(
+    public wahlbezirkIDs: string[],
+    public nachricht: string
+  ) {}
+}

wls-gui-wahllokalsystem/src/api/wls-clients/broadcast-service/broadcast-client.ts

@@ -0,0 +1,39 @@
+import {
+  getConfig,
+  postConfig,
+  wlsCatchHandler,
+  wlsResponseHandler,
+} from "@/api/fetch-utils";
+import BroadcastMessageToSend from "@/api/wls-clients/broadcast-service/BroadcastMessageToSend";
+
+export const BROADCAST_API_URL = new URL(
+  "/api/broadcast-service/businessActions/",
+  window.location.origin
+).toString();
+
+export function getBroadcastMessage(wahlbezirkID: string): Promise<Response> {
+  return fetch(`${BROADCAST_API_URL}getMessage/` + wahlbezirkID, getConfig())
+    .then(wlsResponseHandler)
+    .catch(wlsCatchHandler);
+}
+
+export function postBroadcastMessage(
+  wahlbezirkIDs: string[],
+  message: string
+): Promise<Response> {
+  return fetch(
+    `${BROADCAST_API_URL}broadcast`,
+    postConfig(new BroadcastMessageToSend(wahlbezirkIDs, message))
+  )
+    .then(wlsResponseHandler)
+    .catch(wlsCatchHandler);
+}
+
+export function broadcastMessageRead(nachrichtID: string): Promise<Response> {
+  return fetch(
+    `${BROADCAST_API_URL}messageRead/` + nachrichtID,
+    postConfig(nachrichtID)
+  )
+    .then(wlsResponseHandler)
+    .catch(wlsCatchHandler);
+}

wls-gui-wahllokalsystem/src/constants.ts

@@ -2,6 +2,7 @@ export const ROUTES_HOME = "home";
 export const EXAMPLE_ROUTES_NEWROUTE = "newroute";
 export const EXAMPLE_ROUTES_NOTFOUND = "404";
 export const EXAMPLE_ROUTES_DYNAMIC = "dynamic";
+export const EXAMPLE_ROUTES_BACKEND = "talk-to-backend";
 
 export const AD2IMAGE_URL = import.meta.env.VITE_AD2IMAGE_URL;
 

wls-gui-wahllokalsystem/src/plugins/router.ts

@@ -3,11 +3,13 @@ import { createRouter, createWebHashHistory } from "vue-router";
 
 import ExampleDynamicComponent from "@/components/ExampleDynamicComponent.vue";
 import {
+  EXAMPLE_ROUTES_BACKEND,
   EXAMPLE_ROUTES_DYNAMIC,
   EXAMPLE_ROUTES_NEWROUTE,
   EXAMPLE_ROUTES_NOTFOUND,
   ROUTES_HOME,
 } from "@/constants";
+import ExampleBackendCommunicationView from "@/views/ExampleBackendCommunicationView.vue";
 import ExampleError404View from "@/views/ExampleError404View.vue";
 import ExampleNewRouteView from "@/views/ExampleNewRouteView.vue";
 import HomeView from "@/views/HomeView.vue";
@@ -19,6 +21,12 @@ const routes = [
     component: HomeView,
     meta: {},
   },
+  {
+    path: "/talk-to-backend",
+    name: EXAMPLE_ROUTES_BACKEND,
+    component: ExampleBackendCommunicationView,
+    meta: {},
+  },
   {
     path: "/newroute",
     name: EXAMPLE_ROUTES_NEWROUTE,

wls-gui-wahllokalsystem/src/plugins/vuetify.ts

@@ -1,6 +1,6 @@
 import "vuetify/styles";
 
-import { mdiHome, mdiRoutes } from "@mdi/js";
+import { mdiHome, mdiMessageText, mdiRoutes } from "@mdi/js";
 import { createVuetify } from "vuetify";
 import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
 
@@ -11,6 +11,7 @@ export default createVuetify({
       ...aliases,
       home: mdiHome,
       routes: mdiRoutes,
+      messageText: mdiMessageText,
     },
     sets: {
       mdi,

wls-gui-wahllokalsystem/src/views/ExampleBackendCommunicationView.vue

@@ -0,0 +1,82 @@
+<template>
+  <v-container>
+    <v-col class="text-center">
+      <h2>This view shows how communication with backend-services will work</h2>
+    </v-col>
+    <v-responsive class="mx-auto">
+      <v-col class="text-center">
+        <h4>Get or Post a Broadcast message:</h4>
+        <br />
+        <v-text-field
+          v-model="messageInput"
+          class="ml-auto mr-auto"
+          width="350"
+          clearable
+          label="ID"
+        ></v-text-field>
+        <v-btn @click="postMessage(['wbz-1', 'wbz-2'])"
+          >post message with fetch utils
+        </v-btn>
+        <p v-if="errors.post">{{ errors.post }}</p>
+        <br />
+        <br />
+        <v-btn @click="getMessage('wbz-1')"
+          >get message with fetch utils
+        </v-btn>
+        <pre v-if="message"> {{ message }} </pre>
+        <p v-if="errors.get">{{ errors.get }}</p>
+        <p v-if="errors.read">{{ errors.read }}</p>
+      </v-col>
+    </v-responsive>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import type { BroadcastMessageToRead } from "@/api/wls-clients/broadcast-service/BroadcastMessageToRead";
+
+import { ref } from "vue";
+import {
+  VBtn,
+  VCol,
+  VContainer,
+  VResponsive,
+  VTextField,
+} from "vuetify/components";
+
+import {
+  broadcastMessageRead,
+  getBroadcastMessage,
+  postBroadcastMessage,
+} from "@/api/wls-clients/broadcast-service/broadcast-client";
+
+const messageInput = ref("Broadcast Message");
+const message = ref("");
+const errors = ref({ get: "", post: "", read: "" });
+let messageId = "";
+
+async function getMessage(wahlbezirkID: string) {
+  errors.value.get = "";
+  message.value = "";
+  try {
+    const response = await getBroadcastMessage(wahlbezirkID);
+    const content: BroadcastMessageToRead = await response.json();
+    message.value = content.nachricht;
+    messageId = content.oid;
+
+    await broadcastMessageRead(messageId).catch((e) => {
+      errors.value.read =
+        "Es ist ein Fehler beim Lesen der Nachricht aufgetreten";
+    });
+  } catch (e) {
+    errors.value.get = (e as Error).message;
+  }
+}
+
+function postMessage(wahlbezirkIDs: string[]) {
+  errors.value.post = "";
+  postBroadcastMessage(wahlbezirkIDs, messageInput.value).catch((e) => {
+    errors.value.post = e.message;
+  });
+  messageInput.value = "";
+}
+</script>