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

Style bits redone

Browse Source
This commit is contained in:
Debucquoy Anthony
2024-04-13 15:56:43 +02:00
parent 106bf96a98
commit 2e02cd8870
2 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/Apps/Forums.vue
View File

@ -18,7 +18,6 @@ const selectedCourse = ref();
const selectedForum = ref(); const selectedForum = ref();
const Role = (await getSelf()).role; const Role = (await getSelf()).role;
const addForum = ref(false);
const addForumName = ref(""); const addForumName = ref("");
const addPost = ref(false); const addPost = ref(false);
const addPostSubject = ref(""); const addPostSubject = ref("");
@ -33,10 +32,10 @@ const addPostContent = ref("");
<option v-for="course in courses" :value="course.courseId">{{course.title}}</option> <option v-for="course in courses" :value="course.courseId">{{course.title}}</option>
</select> </select>
<select id="forum" value="" v-model="selectedForum" @change="getPostsOfForum(selectedForum)" v-if="ForumsOfCurrentCourse != null"> <select id="forum" value="" v-model="selectedForum" @change="getPostsOfForum(selectedForum !== 'create' ? selectedForum : null)" v-if="ForumsOfCurrentCourse != null">
<option v-for="forum in ForumsOfCurrentCourse" :value=forum.id>{{forum.name}}</option> <option v-for="forum in ForumsOfCurrentCourse" :value=forum.id>{{forum.name}}</option>
<option v-if="(Role === 'Admin' || Role === 'Teacher') && ForumsOfCurrentCourse != null" value="create">Create Forum</option>
</select> </select>
<button v-if="(Role === 'Admin' || Role === 'Teacher') && ForumsOfCurrentCourse != null " id="createPost" @click="addForum = true">+</button>
</div> </div>
<div id="PostSelector" v-if="PostsOfCurrentForum != null"> <div id="PostSelector" v-if="PostsOfCurrentForum != null">
<div @click="fetchPost(post.id)" class="postItem" v-for="post in PostsOfCurrentForum" :key="post.id">{{ post.subject }}</div> <div @click="fetchPost(post.id)" class="postItem" v-for="post in PostsOfCurrentForum" :key="post.id">{{ post.subject }}</div>
@ -49,14 +48,14 @@ const addPostContent = ref("");
</div> </div>
<div id="Messages"> <div id="Messages">
<p v-for="msg in fetchedPost.answers">{{msg.author.firtName}} {{msg.author.lastName}} - {{msg.content}}</p> <p v-for="msg in fetchedPost.answers">{{msg.author.firtName}} {{msg.author.lastName}} - {{msg.content}}</p>
<input v-if=!fetchedPost.locked type="text" placeholder="response" @keyup.enter="sendAnswer(fetchedPost.id, $event.target.value)"/> <input v-if=!fetchedPost.locked type="text" placeholder="response" @keyup.enter="sendAnswer(fetchedPost.id, $event.target.value); $event.target.value = ''"/>
</div> </div>
</div> </div>
</div> </div>
<div class=popup v-if="addForum || addPost" @click.self="addForum = false; addPost = false" > <div class=popup v-if="selectedForum === 'create' || addPost" @click.self="selectedForum = ''; addPost = false" >
<!-- Popup to add forum --> <!-- Popup to add forum -->
<div id="addForumForm" v-if=addForum @keyup.enter="createForum(selectedCourse, addForumName); addForum = false;"> <div id="addForumForm" v-if="selectedForum === 'create'" @keyup.enter="createForum(selectedCourse, addForumName); selectedForum = '';">
<label>New Forum:</label> <label>New Forum:</label>
<input type="text" placeholder="Name" v-model=addForumName /> <input type="text" placeholder="Name" v-model=addForumName />
</div> </div>
@ -64,9 +63,9 @@ const addPostContent = ref("");
<!-- Popup to add Post --> <!-- Popup to add Post -->
<div id="addPostForm" v-if=addPost> <div id="addPostForm" v-if=addPost>
<label>New Post:</label> <label>New Post:</label>
<input type="text" placeholder="subject" v-model=addPostSubject @keyup.enter="createPost(selectedForum, addPostSubject, addPostContent); addForum = false;"/> <input type="text" placeholder="subject" v-model=addPostSubject @keyup.enter="createPost(selectedForum, addPostSubject, addPostContent); addPost = false;"/>
<textarea v-model="addPostContent" placeholder=content></textarea> <textarea v-model="addPostContent" placeholder=content></textarea>
<input type="submit" value="send" @click="createPost(selectedForum, addPostSubject, addPostContent); addForum = false;"> <input type="submit" value="send" @click="createPost(selectedForum, addPostSubject, addPostContent); addPost = false;">
</div> </div>
</div> </div>
@ -139,11 +138,15 @@ const addPostContent = ref("");
text-align: center; text-align: center;
} }
#ForumSelector button{ #PostSelector button{
background-color: green; background-color: green;
color: white;
border: none; border: none;
border-radius: 25%; height: 4vh;
margin: 10px; margin: 5px;
border-radius: 0 30px 30px 0;
align-items: center;
justify-content: center;
} }
#PostSelector{ #PostSelector{
@ -187,7 +190,12 @@ const addPostContent = ref("");
#Post{ #Post{
padding: 25px; padding: 25px;
color: white;
}
#Post > h1{
text-align: center;
text-decoration: underline;
} }
#Messages{ #Messages{

2
frontend/src/rest/forum.js
View File

@ -25,8 +25,10 @@ export function createForum(id, name){
* List post of a specified forum * List post of a specified forum
*/ */
export async function getPostsOfForum(id){ export async function getPostsOfForum(id){
if(id != null){
PostsOfCurrentForum.value = await restGet("/forum/" + id); PostsOfCurrentForum.value = await restGet("/forum/" + id);
} }
}
export function createPost(id, subject, content){ export function createPost(id, subject, content){
restPost("/forum/" + id, {subject: subject, content: content}).then(_ => getPostsOfForum(id)); restPost("/forum/" + id, {subject: subject, content: content}).then(_ => getPostsOfForum(id));