151 lines
2.9 KiB
Vue
151 lines
2.9 KiB
Vue
<!----------------------------------------------------
|
|
File: Msg.vue
|
|
Author: Anthony Debucquoy
|
|
Scope: Extension messagerie
|
|
Description: Main msg page
|
|
----------------------------------------------------->
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue'
|
|
import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName} from '@/rest/msg.js'
|
|
|
|
const msgContent = ref("");
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div id="msg">
|
|
<div id="discList">
|
|
<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')">+</button>
|
|
</div>
|
|
<div id="discussion">
|
|
<h1 id=msgName ><input class="InputTitle" type="text" @blur="updateDiscussionName(currentDiscussion.id, currentDiscussion.name)" v-model="currentDiscussion.name"></h1>
|
|
<div id=msgs>
|
|
<div class="msg" v-for="msg in currentDiscussion.msgs" :sender="msg.sender" :key="msg.id">
|
|
{{ msg.content }}
|
|
</div>
|
|
</div>
|
|
<div id=messageBox>
|
|
<input type="text" v-model="msgContent">
|
|
<input type="submit" @click="sendMessage(currentDiscussion.id, msgContent, null)" value="send">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
div#msg{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: grid;
|
|
grid-template-columns: 20% auto;
|
|
}
|
|
|
|
div#discList{
|
|
margin: 30px 0 30px 30px;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.InputTitle{
|
|
all: inherit;
|
|
margin: auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#createDiscussion{
|
|
height: 4vh;
|
|
margin: 5px;
|
|
color: white;
|
|
background-color: green;
|
|
border-radius: 0 30px 30px 0;
|
|
border: none;
|
|
font-weight: 900;
|
|
font-size: 2em;
|
|
}
|
|
|
|
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: #2a1981;
|
|
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>
|