Style bits redone
This commit is contained in:
		@ -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{
 | 
				
			||||||
 | 
				
			|||||||
@ -25,7 +25,9 @@ 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){
 | 
				
			||||||
	PostsOfCurrentForum.value = await restGet("/forum/" + id);
 | 
						if(id != null){
 | 
				
			||||||
 | 
							PostsOfCurrentForum.value = await restGet("/forum/" + id);
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function createPost(id, subject, content){
 | 
					export function createPost(id, subject, content){
 | 
				
			||||||
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user