1
0
forked from PGL/Clyde

messsaging on the frontend

This commit is contained in:
Debucquoy Anthony 2024-03-27 19:52:48 +01:00
parent b4499e04c7
commit 1522d74ed3
Signed by: tonitch
GPG Key ID: A78D6421F083D42E
2 changed files with 41 additions and 67 deletions

View File

@ -7,9 +7,9 @@
<script setup> <script setup>
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import { getDiscussions, currentDiscussion, fetchDiscussion, createDiscussion } from '@/rest/msg.js' import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName} from '@/rest/msg.js'
const discussionsList = reactive(await getDiscussions()); const msgContent = ref("");
</script> </script>
@ -17,18 +17,18 @@
<div id="msg"> <div id="msg">
<div id="discList"> <div id="discList">
<div @click="fetchDiscussion(discussion.id)" class="discItem" v-for="discussion in discussionsList" :key="discussion.id">{{ discussion.name }}</div> <div @click="fetchDiscussion(discussion.id)" class="discItem" v-for="discussion in discussionsList" :key="discussion.id">{{ discussion.name }}</div>
<button id="createDiscussion" @click="createDiscussion('New Discussion').then( e => discussionsList.push(e) )">+</button> <button id="createDiscussion" @click="createDiscussion('New Discussion')">+</button>
</div> </div>
<div id="discussion"> <div id="discussion">
<h1 id=msgName >{{currentDiscussion.name}}</h1> <h1 id=msgName ><input class="InputTitle" type="text" @blur="updateDiscussionName(currentDiscussion.id, currentDiscussion.name)" v-model="currentDiscussion.name"></h1>
<div id=msgs> <div id=msgs>
<div class="msg" v-for="msg in currentDiscussion.msgs" :sender="msg.sender" :key="msg.id"> <div class="msg" v-for="msg in currentDiscussion.msgs" :sender="msg.sender" :key="msg.id">
{{ msg.text }} {{ msg.content }}
</div> </div>
</div> </div>
<div id=messageBox> <div id=messageBox>
<input type="text" name="messageBox" value=""> <input type="text" v-model="msgContent">
<input type="submit" name="" id="" value="send"> <input type="submit" @click="sendMessage(currentDiscussion.id, msgContent, null)" value="send">
</div> </div>
</div> </div>
</div> </div>
@ -56,6 +56,11 @@ div#discList{
} }
.InputTitle{
all: inherit;
margin: auto;
}
.discItem{ .discItem{
color: darkorange; color: darkorange;
display: flex; display: flex;
@ -91,7 +96,7 @@ div#discussion{
#msgName{ #msgName{
text-align: center; text-align: center;
display: block; display: block;
background-color: #0202f755; background-color: #2a1981;
border-radius: 5px; border-radius: 5px;
color: white; color: white;
width: 75%; width: 75%;

View File

@ -5,78 +5,47 @@
* Description: Messages frontend api consumer * Description: Messages frontend api consumer
*******************************************************/ *******************************************************/
import { restGet, restPost } from './restConsumer.js' import { restGet, restPost, restPatch } from './restConsumer.js'
import { ref } from 'vue' import { ref } from 'vue'
export const currentDiscussion = ref({});
/** /**
* @return array of
* - id * - id
* - name * - name
* - members * - members
*/ */
export async function getDiscussions(){ export const discussionsList = ref({});
return restGet("/discussions"); export const currentDiscussion = ref({});
}
export async function fetchDiscussion(id){
currentDiscussion.value = {
id: id,
name: "Discussion#2",
msgs: [
{
id: 1,
author: 1,
sender: true,
attachment: null,
text: "Hello world!"
},
{
id: 2,
author: 2,
sender: false,
attachment: null,
text: "Hello What?"
},
{
id: 3,
author: 2,
sender: false,
attachment: null,
text: "You morron"
},
{
id: 4,
author: 1,
sender: true,
attachment: null,
text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
},
// {
// id: 5,
// author: 1,
// sender: true,
// attachment: null,
// text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
// },
{
id: 6,
author: 2,
sender: false,
attachment: null,
text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}
]
}
// currentDiscussion.value = restGet("/discussion/" + id);
}
export async function createDiscussion(name){ export async function createDiscussion(name){
return restPost("/discussion", {name: name}); let disc = await restPost("/discussion", {name: name});
discussionsList.value.push(disc);
} }
export async function invite(id, regNo){ export async function invite(id, regNo){
restPost("/discussion/"+ id+ "/invite", {user: regNo}); restPost("/discussion/"+ id+ "/invite", {user: regNo});
} }
export async function sendMessage(id, content, responseId){
let data = {
content: content,
response: responseId,
}
restPost("/discussion/" + id, data);
}
export async function updateDiscussionName(id, name){
restPatch("/discussion/" + id, {name: name}).then(() => fetchDiscussions());
}
async function fetchDiscussions(){
discussionsList.value = await restGet("/discussions");
}
export async function fetchDiscussion(id){
currentDiscussion.value = await restGet("/discussion/" + id);
}
await fetchDiscussions();