From 7d895039bf5b3183bd4fc4baf425d177db1da9da Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Sun, 2 Apr 2023 13:06:29 +0200
Subject: [PATCH] Add API Error Toast

---
 client/package.json   |  1 +
 client/pnpm-lock.yaml | 12 ++++++++++++
 client/src/api.ts     |  4 ++++
 client/src/main.ts    |  3 +++
 4 files changed, 20 insertions(+)

diff --git a/client/package.json b/client/package.json
index a5abd1b..86ba8cd 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,7 @@
     "vue": "^3.2.45",
     "vue-i18n": "9",
     "vue-router": "4",
+    "vue-toast-notification": "^3.0",
     "ws": "^8.13.0"
   },
   "devDependencies": {
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index ef0eb35..b7f959c 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -43,6 +43,9 @@ dependencies:
   vue-router:
     specifier: '4'
     version: 4.1.6(vue@3.2.47)
+  vue-toast-notification:
+    specifier: ^3.0
+    version: 3.1.1(vue@3.2.47)
   ws:
     specifier: ^8.13.0
     version: 8.13.0
@@ -3887,6 +3890,15 @@ packages:
       he: 1.2.0
     dev: true
 
+  /vue-toast-notification@3.1.1(vue@3.2.47):
+    resolution: {integrity: sha512-DXEE38NxXFCNinKI+MyZBMWsaqE9Lwxg9GkMVkzKXY1ACCeNztBXuUiSvKMe36dnnYd1qnlP+cWNSvHlkt5xNA==}
+    engines: {node: '>=12.15.0'}
+    peerDependencies:
+      vue: ^3.0
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
   /vue-tsc@1.2.0(typescript@4.9.5):
     resolution: {integrity: sha512-rIlzqdrhyPYyLG9zxsVRa+JEseeS9s8F2BbVVVWRRsTZvJO2BbhLEb2HW3MY+DFma0378tnIqs+vfTzbcQtRFw==}
     hasBin: true
diff --git a/client/src/api.ts b/client/src/api.ts
index 99a5aa6..6712627 100644
--- a/client/src/api.ts
+++ b/client/src/api.ts
@@ -1,6 +1,9 @@
 // import WebSocketServer  from 'ws';
 import JsonRPC from 'simple-jsonrpc-js';
 import axios from "axios";
+import { useToast } from 'vue-toast-notification';
+
+const $toast = useToast();
 
 let jrpc = new JsonRPC.connect_xhr('/api');
 // let socket = new WebSocket("ws://"+ window.location.host +"/ws/api");
@@ -21,6 +24,7 @@ export async function apiCall(method: string, params: Record<string, any>): Prom
     if (ex.code === 401) {
       UnauthorizedCallback();
     } else {
+      $toast.error(method+ ': ' + ex.message);
       console.debug("api call epic fail", ex);
     }
     return { Data: null, Error: ex};
diff --git a/client/src/main.ts b/client/src/main.ts
index 5f3fd12..362bd1f 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -3,11 +3,13 @@ import './global-styles/components.css';
 import './global-styles/colors.css';
 import './global-styles/mlfe.css';
 import './global-styles/transitions.css';
+import 'vue-toast-notification/dist/theme-default.css';
 
 import App from './App.vue';
 import { createHead } from '@vueuse/head';
 import { createRouter, createWebHistory } from 'vue-router';
 import routes from '~pages';
+import ToastPlugin from 'vue-toast-notification';
 
 const app = createApp(App);
 const head = createHead();
@@ -18,5 +20,6 @@ const router = createRouter({
 
 app.use(router);
 app.use(head);
+app.use(ToastPlugin);
 
 app.mount('#app');