diff --git a/package-lock.json b/package-lock.json index 0bf9597..a0785d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "devDependencies": { "@intlify/vite-plugin-vue-i18n": "^3.3.1", "@quasar/app-vite": "^1.8.5", - "@quasar/cli": "^2.4.0", + "@quasar/cli": "^2.4.1", "@types/node": "^12.20.21", "@typescript-eslint/eslint-plugin": "^5.10.0", "@typescript-eslint/parser": "^5.10.0", @@ -590,9 +590,9 @@ } }, "node_modules/@quasar/cli": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.4.0.tgz", - "integrity": "sha512-VhmNnVFy/eLgKqofJh6dXYudMVhXDdCqNY/d1oPR1saMXsmqYB9tJKaW1FJIlPnnY3oDlcYwMSUeQwc4pehWyQ==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.4.1.tgz", + "integrity": "sha512-MrOmlqdkQhBxfPMbSrch3O7ClCAc0sLTLp9AWLzdB7uNaLbxcLP6zXN8+EPhDzFfMyxdG7jBP0FKEi7Wh+ezrQ==", "dev": true, "dependencies": { "@quasar/ssl-certificate": "^1.0.0", @@ -601,7 +601,7 @@ "connect-history-api-fallback": "^2.0.0", "cors": "^2.8.5", "cross-spawn": "^7.0.3", - "express": "^4.18.3", + "express": "^4.19.2", "fs-extra": "^11.2.0", "http-proxy-middleware": "^2.0.6", "kolorist": "^1.8.0", @@ -8102,9 +8102,9 @@ } }, "@quasar/cli": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.4.0.tgz", - "integrity": "sha512-VhmNnVFy/eLgKqofJh6dXYudMVhXDdCqNY/d1oPR1saMXsmqYB9tJKaW1FJIlPnnY3oDlcYwMSUeQwc4pehWyQ==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.4.1.tgz", + "integrity": "sha512-MrOmlqdkQhBxfPMbSrch3O7ClCAc0sLTLp9AWLzdB7uNaLbxcLP6zXN8+EPhDzFfMyxdG7jBP0FKEi7Wh+ezrQ==", "dev": true, "requires": { "@quasar/ssl-certificate": "^1.0.0", @@ -8113,7 +8113,7 @@ "connect-history-api-fallback": "^2.0.0", "cors": "^2.8.5", "cross-spawn": "^7.0.3", - "express": "^4.18.3", + "express": "^4.19.2", "fs-extra": "^11.2.0", "http-proxy-middleware": "^2.0.6", "kolorist": "^1.8.0", diff --git a/package.json b/package.json index eed6fe4..e9c9327 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "devDependencies": { "@intlify/vite-plugin-vue-i18n": "^3.3.1", "@quasar/app-vite": "^1.8.5", - "@quasar/cli": "^2.4.0", + "@quasar/cli": "^2.4.1", "@types/node": "^12.20.21", "@typescript-eslint/eslint-plugin": "^5.10.0", "@typescript-eslint/parser": "^5.10.0", diff --git a/src/components/ProfileCardComponent.vue b/src/components/ProfileCardComponent.vue index ae08e36..26e5b73 100644 --- a/src/components/ProfileCardComponent.vue +++ b/src/components/ProfileCardComponent.vue @@ -1,25 +1,23 @@ @@ -31,7 +29,7 @@ const profilePicture = "url("+props.profilePictureUrl+")"; border-radius: 50%; background-size: cover; background-position: center; - background-image: v-bind('profilePicture'); + } .profileCard { @@ -46,4 +44,8 @@ const profilePicture = "url("+props.profilePictureUrl+")"; transition: .3s; background: rgba(0,0,0,0.2); } + + .selected { + background: rgba(0,0,0,0.2); + } diff --git a/src/models.ts b/src/models.ts index 6c37bd5..0e5a3fc 100644 --- a/src/models.ts +++ b/src/models.ts @@ -3,6 +3,17 @@ export interface ptpUser { firstName: string; lastName: string; username: string; + status?: string; + profilePictureUrl?: string; +} + +export interface ptpTestUser { + id: string; + firstName: string; + lastName: string; + username: string; + status?: string; + profilePictureUrl?: string; } export interface responseModel { diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue index 54b1e90..b9c7d53 100644 --- a/src/pages/IndexPage.vue +++ b/src/pages/IndexPage.vue @@ -1,5 +1,93 @@ -
- -
- +
+ +
No search results found
@@ -32,7 +125,29 @@
-

Hier werden dann die Chats angezeigt

+

Chats, in denen du Mitglied bist:

+
+
+
+
{{ chat.displayName }}
+
+
+
Ist ein Chat für zwei
+
+ +

+ {{ member.id }} +

+ +
+
+ +
(u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || searchQuery == '*') && u.id != userStore.id).map((u) => { return {label: u.firstName + ' ' + u.lastName, value: u.id}})" type="checkbox" color="primary" inline > -
-
- -
-

Chats:

-
-
{{ chat.displayName }}
-
-

{{ ptpUser.id }}

-
-
-
-
- -
Nutzerdaten
-
-

{{ userStore.user?.firstName }}

-

{{ userStore.user?.lastName }}

-

{{ userStore.user?.username }}

-

{{ userStore.user?.id }}

-
+ +
-
-
+
+
+

Das ist der Beginn deines Chats mit {{selectedUser.firstName}} {{selectedUser.lastName}}

+
+
+

Du hast schonmal mit dem geschrieben wie schön

+ +
+
@@ -165,7 +268,7 @@ import MessageComponent from 'components/MessageComponent.vue'; import { useTenorStore } from 'stores/tenor-store'; import ProfileCardComponent from 'components/ProfileCardComponent.vue'; - import {message} from 'src/models'; + import {message, ptpTestUser} from 'src/models'; import {useUserStore} from 'stores/user-store'; import { useChatStore } from 'stores/chat-store'; @@ -173,6 +276,10 @@ name: 'IndexPage' }); + const tenorStore = useTenorStore(); + const userStore = useUserStore(); + const chatStore = useChatStore(); + const searchQuery = ref("") const message = ref(""); const gifSearch = ref(""); @@ -180,6 +287,10 @@ const userSearch = ref(''); const usersForChat = ref([] as string[]); + const settingsDialog = ref(true); + + const newStatus = ref(""); + const activeMenu = ref("search"); @@ -236,9 +347,7 @@ changed.value = true; } - const tenorStore = useTenorStore(); - const userStore = useUserStore(); - const chatStore = useChatStore(); + function getGifs() { @@ -289,12 +398,32 @@ chatName = "Chat"; } await chatStore.createChat(chatName, usersForChat.value); + loadChats(); } const loadChats = async() => { await chatStore.loadChatsByUser(); }; + const selectedUser = ref({} as ptpTestUser); + + function selectUser(user : ptpTestUser) { + selectedUser.value = user; + } + + function hasChatWith(id : string) : boolean { + // Hier wird geprüft, ob es ein Chat mit einem bestimmten anderen Nutzer existiert + const chatExists = chatStore.chats.find((chat) => chat.members.length === 2 && chat.members.find((member) => member.id === id)); + + if(chatExists) return true; + + return false; + } + + + // Init methods + loadChats(); + diff --git a/src/stores/chat-store.ts b/src/stores/chat-store.ts index 74e324f..98876d1 100644 --- a/src/stores/chat-store.ts +++ b/src/stores/chat-store.ts @@ -1,12 +1,13 @@ import { defineStore } from 'pinia'; -import { chat } from 'src/models'; +import {chat, responseModel} from 'src/models'; import { api } from 'src/boot/axios'; import { useUserStore } from 'stores/user-store'; export const useChatStore = defineStore('chatStore',{ state:() => ({ chats: [] as chat[], - chatsLoaded: false + chatsLoaded: false, + chatExistsReponse: false, }), actions: { async getChatsByUser(): Promise { @@ -33,6 +34,13 @@ export const useChatStore = defineStore('chatStore',{ } console.log(members); return (await api.post("/chats/create/" + chatName, members)).data; + }, + async loadDoesChatExist(keycloakID : string, otherKeycloakID : string) : Promise { + return (await api.get("/chats/"+keycloakID+"/"+otherKeycloakID)).data; + }, + doesChatExist(keycloakID : string, otherKeycloakID : string) { + this.loadDoesChatExist(keycloakID, otherKeycloakID) + .then(m => this.chatExistsReponse = m.success); } } }); diff --git a/src/stores/tenor-store.ts b/src/stores/tenor-store.ts index 893af5a..bce5463 100644 --- a/src/stores/tenor-store.ts +++ b/src/stores/tenor-store.ts @@ -1,6 +1,6 @@ import { defineStore } from 'pinia'; import {api} from 'boot/axios'; -import { ptpUser, responseModel, tenorResponseElement } from 'src/models'; +import { tenorResponseElement } from 'src/models'; import Keycloak from 'keycloak-js'; export const useTenorStore = defineStore('tenorStore', { diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts index 7ff9eb7..6e5f17b 100644 --- a/src/stores/user-store.ts +++ b/src/stores/user-store.ts @@ -49,6 +49,17 @@ export const useUserStore = defineStore('userStore', { getAllPtpUsers() { this.loadAllPtpUsers().then((response : ptpUser[]) => { this.users = response; + + this.users.forEach((user : ptpUser) => { + if(user.profilePictureUrl == null) { + user.profilePictureUrl = "https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0"; + } + + if(user.status == null) { + user.status = "Hey there, I am using ptpChat!"; + } + }) + this.usersLoaded = true; }) },