Merge remote-tracking branch 'origin/master'
This commit is contained in:
213
frontend/src/Apps/Msg.vue
Normal file
213
frontend/src/Apps/Msg.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<!----------------------------------------------------
|
||||
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, invite, removeMember} from '@/rest/msg.js'
|
||||
|
||||
const msgContent = ref("");
|
||||
const addMember = ref(false);
|
||||
const currentTitle = ref("");
|
||||
|
||||
function formatTime(date){
|
||||
return date.getHours() + ":" + date.getMinutes() + " " + date.getDate() + "/" + date.getMonth();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="msg">
|
||||
<div id="discList">
|
||||
<div @click="fetchDiscussion(discussion.id).then(e => currentTitle = currentDiscussion.name)" 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" v-if="currentDiscussion.length != 0">
|
||||
<h1 id=msgName ><input class="InputTitle" type="text" @change="updateDiscussionName(currentDiscussion.id, currentTitle)" v-model="currentTitle"></h1>
|
||||
<div id=msgs>
|
||||
<div class="msg" v-for="msg in currentDiscussion.msgs" :sender="msg.sender" :key="msg.id">
|
||||
{{ msg.content }}<br/>
|
||||
<span class="sender"><span v-if="!msg.sender">{{ msg.author.firstName }} {{ msg.author.lastName.toUpperCase() }}</span> {{formatTime(new Date(msg.created))}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id=messageBox>
|
||||
<input type="text" @keyup.enter="sendMessage(currentDiscussion.id, msgContent, null); msgContent = ''" v-model="msgContent">
|
||||
<input type="submit" @click="sendMessage(currentDiscussion.id, msgContent, null); msgContent = ''" value="send">
|
||||
</div>
|
||||
</div>
|
||||
<div id="members" v-if="currentDiscussion.length != 0">
|
||||
<div class="memberItem" v-for="member in currentDiscussion.members" @click="removeMember(currentDiscussion.id, member.regNo)" :key="member.id"><span>{{ member.firstName }} {{ member.lastName.toUpperCase() }}</span></div>
|
||||
<input type=text id="addMembers" @focus="addMember = true" @blur="addMember = false;$event.target.value = ''" @change="invite(currentDiscussion.id, $event.target.value)" :placeholder="addMember ? 'Regno' : '+'"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
div#msg{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 20% auto 10%;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
div#members{
|
||||
margin: 30px 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
background-color: red;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
padding: 10px 0 0 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
.memberItem{
|
||||
color: darkorange;
|
||||
display: flex;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
height: 4vh;
|
||||
margin: 5px;
|
||||
border-radius: 30px 0 0 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid darkorange;
|
||||
}
|
||||
|
||||
.memberItem:hover span{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.memberItem:hover{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.memberItem:hover:before{
|
||||
color: white;
|
||||
content: "X"
|
||||
}
|
||||
|
||||
#createDiscussion{
|
||||
height: 4vh;
|
||||
margin: 5px;
|
||||
color: white;
|
||||
background-color: green;
|
||||
border-radius: 0 30px 30px 0;
|
||||
border: none;
|
||||
font-weight: 900;
|
||||
font-size: 2em;
|
||||
}
|
||||
#addMembers{
|
||||
height: 4vh;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background-color: green;
|
||||
border-radius: 30px 0 0 30px;
|
||||
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;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.sender{
|
||||
display: inline-block;
|
||||
color: gray;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.msg[sender=true]{
|
||||
background-color: darkorange;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
#messageBox{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#messageBox input[type="text"]{
|
||||
all: inherit;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#messageBox input[type="submit"]{
|
||||
border: inherit;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -10,6 +10,7 @@ import Courses from "@/Apps/ManageCourses.vue"
|
||||
import Users from "@/Apps/UsersList.vue"
|
||||
import Students from "@/Apps/StudentsList.vue"
|
||||
import ResearcherProfile from "@/Apps/ScientificPublications/ResearcherProfile.vue";
|
||||
import Msg from "@/Apps/Msg.vue"
|
||||
|
||||
const apps = {
|
||||
'/login': LoginPage,
|
||||
@ -19,6 +20,7 @@ const apps = {
|
||||
'/users-list' : Users,
|
||||
'/students-list' : Students,
|
||||
'/researcher-profile' : ResearcherProfile,
|
||||
'/msg' : Msg,
|
||||
}
|
||||
|
||||
const appsList = {
|
||||
|
||||
60
frontend/src/rest/msg.js
Normal file
60
frontend/src/rest/msg.js
Normal file
@ -0,0 +1,60 @@
|
||||
/*******************************************************
|
||||
* File: msg.js
|
||||
* Author: Anthony Debucquoy
|
||||
* Scope: Extension messagerie
|
||||
* Description: Messages frontend api consumer
|
||||
*******************************************************/
|
||||
|
||||
import { restGet, restPost, restPatch } from './restConsumer.js'
|
||||
import { ref } from 'vue'
|
||||
|
||||
/**
|
||||
* - id
|
||||
* - name
|
||||
* - members
|
||||
*/
|
||||
export const discussionsList = ref();
|
||||
export const currentDiscussion = ref([]);
|
||||
let timerSet = false
|
||||
|
||||
|
||||
export async function createDiscussion(name){
|
||||
let disc = await restPost("/discussion", {name: name});
|
||||
discussionsList.value.push(disc);
|
||||
}
|
||||
|
||||
|
||||
export async function invite(id, regNo){
|
||||
restPatch("/discussion/"+ id+ "/add", {regNo: parseInt(regNo)}).then(() => fetchDiscussion(id))
|
||||
}
|
||||
|
||||
export async function removeMember(id, regNo){
|
||||
restPatch("/discussion/"+ id+ "/remove", {regNo: parseInt(regNo)}).then(() => fetchDiscussion(id))
|
||||
}
|
||||
|
||||
export async function sendMessage(id, content, responseId){
|
||||
let data = {
|
||||
content: content,
|
||||
response: responseId,
|
||||
}
|
||||
restPost("/discussion/" + id, data).then(() => fetchDiscussion(id));
|
||||
}
|
||||
|
||||
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);
|
||||
if(!timerSet){
|
||||
timerSet = true;
|
||||
setTimeout(() => {timerSet = false;fetchDiscussion(currentDiscussion.value.id)} , 5000);
|
||||
}
|
||||
}
|
||||
|
||||
await fetchDiscussions();
|
||||
Reference in New Issue
Block a user