- gif search

- added models to parse the tenor-api-response correctly
- continued with designing the main chat-page

src/App.vue

@@ -12,7 +12,7 @@ defineOptions({
   <router-view />
 </template>
 
-<style scoped>
+<style>
 header {
   line-height: 1.5;
   display: flex;
@@ -21,4 +21,26 @@ header {
   justify-content: center;
   padding-top: 7vh;
 }
+
+/* CUSTOM SCROLLBAR DESIGN START */
+/* width */
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: white;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+/* CUSTOM SCROLLBAR DESIGN ENDE */
 </style>

src/components/MessageComponent.vue

@@ -19,16 +19,18 @@
   .message {
     border-radius: 10px;
     max-width: 15rem;
-    padding: 5px;
+    padding: 7px;
+    margin:3px;
+    box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);
   }
 
   .sent {
-    background: blue;
+    background: #729EA1;
     margin-left: auto;
     margin-right: 0;
   }
 
   .received {
-    background: red;
+    background: white;
   }
 </style>

src/main.ts

@@ -19,7 +19,7 @@ app.use(createPinia());
  * @param redirectUri: URL, zu der nach dem Login weitergeleitet wird. Hierbei wird die Port des Frontends aus der .env-Datei verwendet.
  */
 
-const keycloak = new Keycloak({
+/*const keycloak = new Keycloak({
   url: 'http://localhost:8083/',
   realm: 'PraxistransferKeycloak',
   clientId: 'praxistransfer'
@@ -52,11 +52,11 @@ if (keycloak.subject != null) {
   if(userStore.userLoaded) {
     console.log("Hier ist der Bruder: " + JSON.stringify(userStore.user));
   }*/
-  userStore.loadPtpUsersByKeycloakID(keycloak.subject).then(user => {
+  /*userStore.loadPtpUsersByKeycloakID(keycloak.subject).then(user => {
     console.log(JSON.stringify(user));
   })
 } else {
   console.log("hier ist was schlimmes passiert menno");
-}
+}*/
 
 

src/models.ts

@@ -10,3 +10,26 @@ export interface responseModel {
   message: string;
   response: any;
 }
+
+export interface tenorGif {
+  url: string,
+  duration: number,
+  preview: string,
+  dims: Array<number>,
+  size: number,
+}
+
+export interface testType {
+  nanogif: tenorGif,
+  mediumgif: tenorGif,
+}
+
+export interface tenorResponseElement {
+  id: string,
+  title: string,
+  media_formats: testType,
+}
+
+export interface tenorResponse {
+  results: Array<tenorGif>,
+}

src/stores/tenor-store.ts

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+import {api} from 'boot/axios';
+import { ptpUser, responseModel, tenorResponseElement } from 'src/models';
+import Keycloak from 'keycloak-js';
+
+export const useTenorStore = defineStore('tenorStore', {
+  state: () => ({
+    gifs: [] as Array<tenorResponseElement>,
+    gifsLoaded: false,
+  }),
+  getters: {
+
+  },
+  actions: {
+    getGifsBySearchTerm(searchTerm : string) {
+      this.loadGifsBySearchTerm(searchTerm).then((response : any) => {
+        this.gifs = response.data.results;
+        this.gifsLoaded = true;
+        console.log(this.gifsLoaded + " / from store");
+      });
+    },
+    async loadGifsBySearchTerm(searchTerm : string) : Promise<any> {
+      return await api.get("https://tenor.googleapis.com/v2/search?q="+searchTerm+"&key=AIzaSyBXsUPCjnmjXwcdqMLsyhrH1zm_6VYH_fY&client_key=praxistransferProjekt&limit=10");
+    }
+  },
+});