Skip to content
Snippets Groups Projects
Commit 308444f1 authored by alec.schmidt's avatar alec.schmidt
Browse files

misc changes and upgrades

parent d050b79b
Branches
No related tags found
No related merge requests found
Showing
with 204 additions and 14 deletions
...@@ -24,6 +24,5 @@ export type Answer = { ...@@ -24,6 +24,5 @@ export type Answer = {
} }
export type Category = { export type Category = {
id: number;
category: string; category: string;
}; };
\ No newline at end of file
...@@ -11,12 +11,17 @@ ...@@ -11,12 +11,17 @@
<td class="whitespace-nowrap px-6 py-4">{{user.username}}</td> <td class="whitespace-nowrap px-6 py-4">{{user.username}}</td>
<td class="whitespace-nowrap px-6 py-4">{{user.admin}}</td> <td class="whitespace-nowrap px-6 py-4">{{user.admin}}</td>
<td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="showUpdateModal(user)">UPDATE</button></td> <td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="showUpdateModal(user)">UPDATE</button></td>
<td><button class="bg-red-400 w-fit border-2 border-red-600 rounded-lg px-2 hover:bg-red-500 mt-2" (click)="deleteUser(user)">DELETE</button></td> <td><button class="bg-red-400 w-fit border-2 border-red-600 rounded-lg px-2 hover:bg-red-500 mt-2" (click)="deleteUserConfirm(user)">DELETE</button></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="grid grid-cols-2 gap-10">
<div class="flex flex-row justify-between">
<button (click)="modalQuestionCreate=true;" class="mt-20 bg-white w-fit border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2">Create Question</button> <button (click)="modalQuestionCreate=true;" class="mt-20 bg-white w-fit border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2">Create Question</button>
<button (click)="modalCategoryCreate=true;" class="mt-20 bg-white w-fit border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2">Create Category</button>
</div>
</div>
<div class="grid grid-cols-2 gap-10"> <div class="grid grid-cols-2 gap-10">
<table class="table-auto w-full h-fit text-left"> <table class="table-auto w-full h-fit text-left">
...@@ -26,14 +31,15 @@ ...@@ -26,14 +31,15 @@
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let question of questions" class="border-b dark:border-neutral-500"> <tr *ngFor="let question of questions" class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 max-w-sm break-all">{{question.question}}</td> <td class="px-6 py-4 max-w-sm break-all">{{question.question}}</td>
<td class="whitespace-nowrap px-6 py-4">{{question.category}}</td> <td class="whitespace-nowrap px-6 py-4">{{question.category}}</td>
<td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="showQuestionUpdateModal(question)">UPDATE</button></td> <td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="showQuestionUpdateModal(question)">UPDATE</button></td>
<td><button class="bg-red-400 w-fit border-2 border-red-600 rounded-lg px-2 hover:bg-red-300 mt-2" (click)="deleteQuestion(question)">DELETE</button></td> <td><button class="bg-red-400 w-fit border-2 border-red-600 rounded-lg px-2 hover:bg-red-300 mt-2" (click)="deleteQuestionConfirm(question)">DELETE</button></td>
<td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="showSelectedAnswers(question.id)"></button></td> <td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="showSelectedAnswers(question.id)"></button></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="table-auto w-full h-fit text-left"> <table class="table-auto w-full h-fit text-left">
<thead class="border-b font-medium dark:border-neutral-500"> <thead class="border-b font-medium dark:border-neutral-500">
<th class="px-6 py-4">Answer</th> <th class="px-6 py-4">Answer</th>
...@@ -44,7 +50,7 @@ ...@@ -44,7 +50,7 @@
<td class="whitespace-nowrap px-6 py-4">{{answer.text_answer}}</td> <td class="whitespace-nowrap px-6 py-4">{{answer.text_answer}}</td>
<td class="whitespace-nowrap px-6 py-4">{{answer.correct}}</td> <td class="whitespace-nowrap px-6 py-4">{{answer.correct}}</td>
<td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="showAnswerUpdateModal(answer)">UPDATE</button></td> <td><button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="showAnswerUpdateModal(answer)">UPDATE</button></td>
<td><button class="bg-red-400 w-fit border-2 border-red-600 rounded-lg px-2 hover:bg-red-300 mt-2" (click)="deleteAnswer(answer)">DELETE</button></td> <td><button class="bg-red-400 w-fit border-2 border-red-600 rounded-lg px-2 hover:bg-red-300 mt-2" (click)="deleteAnswerConfirm(answer)">DELETE</button></td>
</tr> </tr>
</tbody> </tbody>
<button *ngIf="buttonCreateAnswer" class=" bg-white w-fit border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" (click)="modalAnswerCreate = true;">Add Answer</button> <button *ngIf="buttonCreateAnswer" class=" bg-white w-fit border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" (click)="modalAnswerCreate = true;">Add Answer</button>
...@@ -52,7 +58,17 @@ ...@@ -52,7 +58,17 @@
</div> </div>
<div *ngIf="confirmUserDelete">
<app-deletion-confirmation (confirm)="deleteUser(userToEdit)" (cancel)="confirmUserDelete=false" ></app-deletion-confirmation>
</div>
<div *ngIf="confirmQuestionDelete">
<app-deletion-confirmation (confirm)="deleteQuestion(questionToEdit)" (cancel)="confirmQuestionDelete=false" ></app-deletion-confirmation>
</div>
<div *ngIf="confirmAnswerDelete">
<app-deletion-confirmation (confirm)="deleteAnswer(answerToEdit)" (cancel)="confirmAnswerDelete=false" ></app-deletion-confirmation>
</div>
<div *ngIf="modalUpdate"> <div *ngIf="modalUpdate">
<app-update-user [user]="userToEdit" (closeModal)="modalUpdate=false;"></app-update-user> <app-update-user [user]="userToEdit" (closeModal)="modalUpdate=false;"></app-update-user>
...@@ -76,4 +92,7 @@ ...@@ -76,4 +92,7 @@
<div *ngIf="modalAnswerUpdate"> <div *ngIf="modalAnswerUpdate">
<app-update-answer [answer]="answerToEdit" (closeModal)="modalAnswerUpdate=false" ></app-update-answer> <app-update-answer [answer]="answerToEdit" (closeModal)="modalAnswerUpdate=false" ></app-update-answer>
</div> </div>
<div *ngIf="modalCategoryCreate">
<app-create-category (closeModal)="modalCategoryCreate=false"></app-create-category>
</div>
</div> </div>
...@@ -30,6 +30,10 @@ export class AdminComponent implements OnInit { ...@@ -30,6 +30,10 @@ export class AdminComponent implements OnInit {
modalQuestionUpdate: boolean = false; modalQuestionUpdate: boolean = false;
modalAnswerCreate: boolean = false; modalAnswerCreate: boolean = false;
modalAnswerUpdate: boolean = false; modalAnswerUpdate: boolean = false;
modalCategoryCreate: boolean = false;
confirmUserDelete: boolean = false;
confirmQuestionDelete: boolean = false;
confirmAnswerDelete: boolean = false;
constructor( constructor(
private router: Router, private router: Router,
...@@ -70,14 +74,17 @@ export class AdminComponent implements OnInit { ...@@ -70,14 +74,17 @@ export class AdminComponent implements OnInit {
deleteUser(user:User) { deleteUser(user:User) {
this.userController.deleteUser(user); this.userController.deleteUser(user);
this.confirmUserDelete = false;
} }
deleteQuestion(question: Question) { deleteQuestion(question: Question) {
this.questionController.deleteQuestion(question); this.questionController.deleteQuestion(question);
this.confirmQuestionDelete = false;
} }
deleteAnswer(answer: Answer) { deleteAnswer(answer: Answer) {
this.questionController.deleteAnswer(answer); this.questionController.deleteAnswer(answer);
this.confirmAnswerDelete = false;
} }
showUpdateModal(user: User){ showUpdateModal(user: User){
...@@ -95,4 +102,18 @@ export class AdminComponent implements OnInit { ...@@ -95,4 +102,18 @@ export class AdminComponent implements OnInit {
this.modalAnswerUpdate = true; this.modalAnswerUpdate = true;
} }
deleteUserConfirm(user: User) {
this.userToEdit = user;
this.confirmUserDelete = true;
}
deleteQuestionConfirm(question: Question) {
this.questionToEdit = question;
this.confirmQuestionDelete = true;
}
deleteAnswerConfirm(answer: Answer) {
this.answerToEdit = answer;
this.confirmAnswerDelete = true;
}
} }
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
<app-user-dropdown [username]="auth.getUsername()"></app-user-dropdown> <app-user-dropdown [username]="auth.getUsername()"></app-user-dropdown>
</div> </div>
<main class="w-full h-full"> <main class="w-full h-full">
<router-outlet> <router-outlet>
</router-outlet> </router-outlet>
......
...@@ -10,7 +10,7 @@ import { AuthenticationService } from './services/authentication.service'; ...@@ -10,7 +10,7 @@ import { AuthenticationService } from './services/authentication.service';
export class AppComponent { export class AppComponent {
title = 'frontend'; title = 'frontend';
userDropdownModal: boolean = false userDropdownModal: boolean = false;
constructor( constructor(
public router: Router, public router: Router,
......
...@@ -16,6 +16,8 @@ import { CreateAnswerComponent } from './question-shit/create-answer/create-answ ...@@ -16,6 +16,8 @@ import { CreateAnswerComponent } from './question-shit/create-answer/create-answ
import { UpdateQuestionComponent } from './question-shit/update-question/update-question.component'; import { UpdateQuestionComponent } from './question-shit/update-question/update-question.component';
import { UpdateAnswerComponent } from './question-shit/update-answer/update-answer.component'; import { UpdateAnswerComponent } from './question-shit/update-answer/update-answer.component';
import { UserDropdownComponent } from './user-dropdown/user-dropdown.component'; import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
import { CreateCategoryComponent } from './question-shit/create-category/create-category.component';
import { DeletionConfirmationComponent } from './deletion-confirmation/deletion-confirmation.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -29,7 +31,9 @@ import { UserDropdownComponent } from './user-dropdown/user-dropdown.component'; ...@@ -29,7 +31,9 @@ import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
CreateAnswerComponent, CreateAnswerComponent,
UpdateQuestionComponent, UpdateQuestionComponent,
UpdateAnswerComponent, UpdateAnswerComponent,
UserDropdownComponent UserDropdownComponent,
CreateCategoryComponent,
DeletionConfirmationComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
<div class="z-10 relative">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex flex-col min-h-full justify-center p-4 text-center items-center sm:p-0">
<div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 p-2 w-48">
<h1 class="mt-2 mx-2 font-bold">Are you sure ?</h1>
<div class="flex flex-row justify-between">
<button class="bg-red-400 w-fit border-2 border-red-600 rounded-lg px-2 hover:bg-red-500 mt-2" (click)="confirm.emit()">Confirm</button>
<button class="bg-teal-200 w-fit border-2 border-teal-600 rounded-lg px-2 hover:bg-teal-400 mt-2" (click)="cancel.emit()">Cancel</button>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DeletionConfirmationComponent } from './deletion-confirmation.component';
describe('DeletionConfirmationComponent', () => {
let component: DeletionConfirmationComponent;
let fixture: ComponentFixture<DeletionConfirmationComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [DeletionConfirmationComponent]
});
fixture = TestBed.createComponent(DeletionConfirmationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-deletion-confirmation',
templateUrl: './deletion-confirmation.component.html',
styleUrls: ['./deletion-confirmation.component.css']
})
export class DeletionConfirmationComponent {
@Output() cancel: EventEmitter<void> = new EventEmitter<void>();
@Output() confirm: EventEmitter<void> = new EventEmitter<void>();
}
<div class="z-10 relative">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex flex-col min-h-full justify-center p-4 text-center items-center sm:p-0">
<div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 ">
<h1 class="mt-2 mx-2 font-bold">Create Category</h1>
<form [formGroup]="createCategory" (ngSubmit)="onSubmit()" class="flex flex-col pb-2 mx-2">
<input class="border-b-4 mt-2 w-full" type="text" placeholder="Text" formControlName="category">
<div class="flex flex-row justify-between">
<button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" type="submit">Create</button>
<button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" (click)="closeModal.emit()">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CreateCategoryComponent } from './create-category.component';
describe('CreateCategoryComponent', () => {
let component: CreateCategoryComponent;
let fixture: ComponentFixture<CreateCategoryComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [CreateCategoryComponent]
});
fixture = TestBed.createComponent(CreateCategoryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Category } from 'src/app/Types/types';
import { QuestionsService } from 'src/app/services/questions.service';
@Component({
selector: 'app-create-category',
templateUrl: './create-category.component.html',
styleUrls: ['./create-category.component.css']
})
export class CreateCategoryComponent {
createCategory: FormGroup;
@Output() closeModal: EventEmitter<string> = new EventEmitter<string>();
constructor(private questionsController: QuestionsService) { }
ngOnInit(): void {
this.createCategory = new FormGroup({
category: new FormControl('', Validators.required)
});
}
onSubmit() {
const category = this.createCategory.get("category")!.value;
const newCategory: Category = {
category: category
}
this.questionsController.addCategory(newCategory);
this.closeModal.emit();
}
}
...@@ -59,10 +59,14 @@ export class AuthenticationService { ...@@ -59,10 +59,14 @@ export class AuthenticationService {
} }
getUsername(): string { getUsername(): string {
const user = this.getDecodedAccessToken() as User; const user = this.getUser();
if(user === null) if(user === null)
return "Guest"; return "Guest";
return user.username; return user.username;
} }
getUser(): User {
return this.getDecodedAccessToken() as User;
}
} }
...@@ -84,4 +84,10 @@ export class QuestionsService { ...@@ -84,4 +84,10 @@ export class QuestionsService {
}) })
} }
addCategory(category: Category) {
this.http.post(ROUTE + "/category", category).subscribe(() => {
this.fetchCategories();
})
}
} }
...@@ -51,4 +51,11 @@ export class UsersService { ...@@ -51,4 +51,11 @@ export class UsersService {
this.http.patch<User>(ROUTE + "/" + user.id.toString(), user).subscribe(res => this.fetchUsers()) this.http.patch<User>(ROUTE + "/" + user.id.toString(), user).subscribe(res => this.fetchUsers())
} }
updateUsername(user: User) {
this.http.patch<User>(ROUTE + "/" + user.id.toString(), user).subscribe(res => {
this.auth.logout();
this.auth.login(user.username, user.password);
})
}
} }
...@@ -4,8 +4,12 @@ ...@@ -4,8 +4,12 @@
<div class="rounded-lg bg-gray-300 p-2"> <div class="rounded-lg bg-gray-300 p-2">
<h1 class="font-bold">User Infos</h1> <h1 class="font-bold">User Infos</h1>
<h1>{{username}}</h1> <h1>{{username}}</h1>
<button *ngIf="auth.isLoggedIn()" class="border-2 border-black rounded-lg px-2 bg-gray-400 hover:bg-gray-500">Change Username</button> <button *ngIf="auth.isLoggedIn()" class="border-2 border-black rounded-lg px-2 bg-gray-400 hover:bg-gray-500" (click)="userUpdateModal=true">Change Username</button>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="userUpdateModal">
<app-update-user [user]="auth.getUser()" (closeModal)="userUpdateModal=false" ></app-update-user>
</div>
\ No newline at end of file
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { User } from '../Types/types'; import { User } from '../Types/types';
import { AuthenticationService } from '../services/authentication.service'; import { AuthenticationService } from '../services/authentication.service';
import { UsersService } from '../services/users.service';
@Component({ @Component({
selector: 'app-user-dropdown', selector: 'app-user-dropdown',
...@@ -10,8 +11,10 @@ import { AuthenticationService } from '../services/authentication.service'; ...@@ -10,8 +11,10 @@ import { AuthenticationService } from '../services/authentication.service';
export class UserDropdownComponent implements OnInit { export class UserDropdownComponent implements OnInit {
@Input() username!: string; @Input() username!: string;
userUpdateModal: boolean = false;
constructor(public auth: AuthenticationService) {} constructor(public auth: AuthenticationService,
private userController: UsersService) {}
ngOnInit(): void { ngOnInit(): void {
if (this.username === undefined) if (this.username === undefined)
......
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
<form [formGroup]="updateUser" (ngSubmit)="onSubmit()" class="flex flex-col pb-2 mx-2"> <form [formGroup]="updateUser" (ngSubmit)="onSubmit()" class="flex flex-col pb-2 mx-2">
<input class="border-b-4 mt-2 w-full" type="text" formControlName="username"> <input class="border-b-4 mt-2 w-full" type="text" formControlName="username">
<div class="my-2 border-b-4"> <input *ngIf="!auth.isAdmin()" class="border-b-4 mt-2 w-full" type="password" placeholder="Password" formControlName="password">
<div *ngIf="auth.isAdmin()" class="my-2 border-b-4">
<label class="mt-2 w-fit">Admin</label><input class="ml-6" type="checkbox" formControlName="admin"> <label class="mt-2 w-fit">Admin</label><input class="ml-6" type="checkbox" formControlName="admin">
</div> </div>
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment