PGL/Clyde
3
2
Fork 3
Code Issues 13 Pull Requests Actions Projects 3 Releases 2 Wiki Activity

first version of the frontend for messages

Browse Source
This commit is contained in:
Debucquoy Anthony
2024-03-23 01:06:32 +01:00
parent 2dfa0a0ee0
commit 7b9f021c24
2 changed files with 158 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/Apps/Msg.vue
View File

@ -1,12 +1,35 @@
<!----------------------------------------------------
File: Msg.vue
Author: Anthony Debucquoy
Scope: Extension messagerie
Description: Main msg page
----------------------------------------------------->
<script setup>
import { ref } from 'vue'
import { ref, reactive } from 'vue'
import { getDiscussions, currentDiscussion, fetchDiscussion } from '@/rest/msg.js'
const discussionsList = reactive(await getDiscussions());
</script>
<template>
<div id="msg">
<div id="discList"></div>
<div id="discussion"></div>
<div id="discList">
<div @click="fetchDiscussion(discussion.id)" class="discItem" v-for="discussion in discussionsList" :key="discussion.id">{{ discussion.name }}</div>
</div>
<div id="discussion">
<h1 id=msgName >{{currentDiscussion.name}}</h1>
<div id=msgs>
<div class="msg" v-for="msg in currentDiscussion.msgs" :sender="msg.sender" :key="msg.id">
{{ msg.text }}
</div>
</div>
<div id=messageBox>
<input type="text" name="messageBox" value="">
<input type="submit" name="" id="" value="send">
</div>
</div>
</div>
</template>
@ -25,13 +48,84 @@ div#discList{
margin: 30px 0 30px 30px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 10px;
overflow: hidden;
padding: 10px;
}
.discItem{
color: darkorange;
display: flex;
font-family: sans-serif;
font-weight: bold;
height: 4vh;
margin: 5px;
border-radius: 0 30px 30px 0;
align-items: center;
justify-content: center;
border: 1px solid darkorange;
}
div#discussion{
display: flex;
flex-direction: column;
margin: 30px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
#msgName{
text-align: center;
display: block;
background-color: #0202f755;
border-radius: 5px;
color: white;
width: 75%;
margin: 30px auto;
}
.discItem:hover{
background-color: gray;
}
#msgs{
display: flex;
flex-grow: 1;
flex-direction: column;
}
.msg {
background-color: aliceblue;
font-family: sans-serif;
margin: 10px;
padding: 5px;
border-radius: 3px;
max-width: 50%;
align-self: start;
}
.msg[sender=true]{
background-color: darkorange;
align-self: end;
}
#messageBox{
display: flex;
margin: 10px;
border-radius: 5px;
}
#messageBox input[type="text"]{
align-self: end;
flex-grow: 1;
}
#messageBox input[type="submit"]{
position: absolute;
right: 50px;
margin: 2px;
border: none;
padding: 0 10px;
}
</style>