Style bits redone
This commit is contained in:
		| @ -18,7 +18,6 @@ const selectedCourse = ref(); | ||||
| const selectedForum = ref(); | ||||
| const Role = (await getSelf()).role; | ||||
|  | ||||
| const addForum = ref(false); | ||||
| const addForumName = ref(""); | ||||
| const addPost = ref(false); | ||||
| const addPostSubject = ref(""); | ||||
| @ -33,10 +32,10 @@ const addPostContent = ref(""); | ||||
| 				<option v-for="course in courses" :value="course.courseId">{{course.title}}</option> | ||||
| 			</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-if="(Role === 'Admin' || Role === 'Teacher') && ForumsOfCurrentCourse != null" value="create">Create Forum</option> | ||||
| 			</select> | ||||
| 			<button v-if="(Role === 'Admin' || Role === 'Teacher') && ForumsOfCurrentCourse != null " id="createPost" @click="addForum = true">+</button> | ||||
| 		</div> | ||||
| 		<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> | ||||
| @ -49,14 +48,14 @@ const addPostContent = ref(""); | ||||
| 			</div> | ||||
| 			<div id="Messages"> | ||||
| 				<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 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 --> | ||||
| 		<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> | ||||
| 			<input type="text" placeholder="Name" v-model=addForumName  /> | ||||
| 		</div> | ||||
| @ -64,9 +63,9 @@ const addPostContent = ref(""); | ||||
| 		<!-- Popup to add Post --> | ||||
| 		<div id="addPostForm" v-if=addPost> | ||||
| 			<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> | ||||
| 			<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> | ||||
| @ -139,11 +138,15 @@ const addPostContent = ref(""); | ||||
| 	text-align: center; | ||||
| } | ||||
|  | ||||
| #ForumSelector button{ | ||||
| #PostSelector button{ | ||||
| 	background-color: green; | ||||
| 	color: white; | ||||
| 	border: none; | ||||
| 	border-radius: 25%; | ||||
| 	margin: 10px; | ||||
| 	height: 4vh; | ||||
| 	margin: 5px; | ||||
| 	border-radius: 0 30px 30px 0; | ||||
| 	align-items: center; | ||||
| 	justify-content: center; | ||||
| } | ||||
|  | ||||
| #PostSelector{ | ||||
| @ -187,7 +190,12 @@ const addPostContent = ref(""); | ||||
|  | ||||
| #Post{ | ||||
| 	padding: 25px; | ||||
| 	color: white; | ||||
| } | ||||
|  | ||||
| #Post > h1{ | ||||
| 	text-align: center; | ||||
| 	text-decoration: underline; | ||||
| } | ||||
|  | ||||
| #Messages{ | ||||
|  | ||||
| @ -25,7 +25,9 @@ export function createForum(id, name){ | ||||
|  * List post of a specified forum | ||||
|  */ | ||||
| export async function getPostsOfForum(id){ | ||||
| 	PostsOfCurrentForum.value = await restGet("/forum/" + id); | ||||
| 	if(id != null){ | ||||
| 		PostsOfCurrentForum.value = await restGet("/forum/" + id); | ||||
| 	} | ||||
| } | ||||
|  | ||||
| export function createPost(id, subject, content){ | ||||
|  | ||||
		Reference in New Issue
	
	Block a user