Add manage buttons for users and levels, add icon support for buttons

src/app/app-routing.module.ts

@@ -19,6 +19,8 @@ import {ActivityComponent} from "./pages/activity/activity.component";
 import {AuthenticationComponent} from "./pages/authentication/authentication.component";
 import {RegisterComponent} from "./pages/register/register.component";
 import {AdminPanelComponent} from "./pages/admin-panel/admin-panel.component";
+import {AdminLevelComponent} from "./pages/admin-level/admin-level.component";
+import {AdminUserComponent} from "./pages/admin-user/admin-user.component";
 
 const routes: Routes = [
   { path: "", component: MainComponent },
@@ -43,6 +45,8 @@ const routes: Routes = [
   { path: "authentication", component: AuthenticationComponent },
   { path: "register", component: RegisterComponent },
   { path: "admin", component: AdminPanelComponent },
+  { path: "admin/level/:id", component: AdminLevelComponent },
+  { path: "admin/user/:uuid", component: AdminUserComponent },
 ];
 
 if(isDevMode()) {

src/app/app.module.ts

@@ -72,6 +72,8 @@ import { FormCheckboxComponent } from './components/form-checkbox/form-checkbox.
 import { RegisterComponent } from './pages/register/register.component';
 import { AdminPanelComponent } from './pages/admin-panel/admin-panel.component';
 import { AnnouncementComponent } from './components/announcement/announcement.component';
+import { AdminUserComponent } from './pages/admin-user/admin-user.component';
+import { AdminLevelComponent } from './pages/admin-level/admin-level.component';
 
 @NgModule({
   declarations: [
@@ -118,7 +120,9 @@ import { AnnouncementComponent } from './components/announcement/announcement.co
     FormCheckboxComponent,
     RegisterComponent,
     AdminPanelComponent,
-    AnnouncementComponent
+    AnnouncementComponent,
+    AdminUserComponent,
+    AdminLevelComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/dangerous-button/dangerous-button.component.html

@@ -1 +1,4 @@
-<div class="cursor-pointer bg-dangerous hover:bg-red-700 px-5 py-2 rounded-[11px]">{{_text}}</div>
+<div class="cursor-pointer bg-dangerous hover:bg-red-700 px-5 py-2 rounded-[11px]">
+  <fa-icon *ngIf="_icon" [icon]="_icon" class="pr-1.5"></fa-icon>
+  {{_text}}
+</div>

src/app/components/dangerous-button/dangerous-button.component.ts

@@ -1,11 +1,18 @@
 import { Component, Input } from '@angular/core';
+import {IconProp} from "@fortawesome/fontawesome-svg-core";
 
 @Component({
   selector: 'dangerous-button',
   templateUrl: './dangerous-button.component.html',
 })
 export class DangerousButtonComponent {
   _text: string = "NOT SET, FIX ME"
+  _icon: IconProp | undefined;
+
+  @Input()
+  set icon(param: IconProp) {
+    this._icon = param;
+  }
 
   @Input()
   set text(param: string) {

src/app/components/primary-button/primary-button.component.html

@@ -1 +1,4 @@
-<div class="cursor-pointer bg-primary px-5 py-2 rounded-[11px]">{{_text}}</div>
+<div class="cursor-pointer bg-primary px-5 py-2 rounded-[11px]">
+  <fa-icon *ngIf="_icon" [icon]="_icon" class="pr-1.5"></fa-icon>
+  {{_text}}
+</div>

src/app/components/primary-button/primary-button.component.ts

@@ -1,12 +1,18 @@
 import { Component, Input } from '@angular/core';
+import {IconProp} from "@fortawesome/fontawesome-svg-core";
 
 @Component({
   selector: 'primary-button',
   templateUrl: './primary-button.component.html'
 })
 export class PrimaryButtonComponent {
   _text: string = "NOT SET, FIX ME"
+  _icon: IconProp | undefined;
 
+  @Input()
+  set icon(param: IconProp) {
+    this._icon = param;
+  }
   @Input()
   set text(param: string) {
     this._text = param;

src/app/components/secondary-button/secondary-button.component.html

@@ -1 +1,4 @@
-<div class="cursor-pointer bg-secondary transition-colors hover:bg-secondary-hover px-5 py-2 rounded-[11px]">{{_text}}</div>
+<div class="cursor-pointer bg-secondary transition-colors hover:bg-secondary-hover px-5 py-2 rounded-[11px]">
+  <fa-icon *ngIf="_icon" [icon]="_icon" class="pr-1.5"></fa-icon>
+  {{_text}}
+</div>

src/app/components/secondary-button/secondary-button.component.ts

@@ -1,11 +1,18 @@
 import { Component, Input } from '@angular/core';
+import {IconProp} from "@fortawesome/fontawesome-svg-core";
 
 @Component({
   selector: 'secondary-button',
   templateUrl: './secondary-button.component.html'
 })
 export class SecondaryButtonComponent {
-  _text: string = "NOT SET, FIX ME"
+  _text: string = "NOT SET, FIX ME";
+  _icon: IconProp | undefined;
+
+  @Input()
+  set icon(param: IconProp) {
+    this._icon = param;
+  }
 
   @Input()
   set text(param: string) {

src/app/pages/admin-level/admin-level.component.html

@@ -0,0 +1 @@
+<p>admin-level works!</p>

src/app/pages/admin-level/admin-level.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-admin-level',
+  templateUrl: './admin-level.component.html'
+})
+export class AdminLevelComponent {
+
+}

src/app/pages/admin-panel/admin-panel.component.html

@@ -18,7 +18,7 @@
     <form-input name="Title" [icon]="faBullhorn" [id]="announcementTitleId" (keyup)="updateAnnouncementPreview()"></form-input>
     <form-input name="Body" [icon]="faPencil" [id]="announcementBodyId" (keyup)="updateAnnouncementPreview()"></form-input>
 
-    <primary-button text="Publish" (click)="postAnnouncement()" class="w-[19rem] text-center"></primary-button>
+    <primary-button [icon]="faCheck" text="Publish" (click)="postAnnouncement()" class="w-[19rem] text-center"></primary-button>
   </div>
   <div class="w-full">
     <p class="text-xl font-bold">Preview</p>

src/app/pages/admin-panel/admin-panel.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {faPencil} from "@fortawesome/free-solid-svg-icons/faPencil";
 import {ApiClient} from "../../api/api-client";
-import {faBullhorn, faWrench} from "@fortawesome/free-solid-svg-icons";
+import {faBullhorn, faCheck, faWrench} from "@fortawesome/free-solid-svg-icons";
 import {Router} from "@angular/router";
 import {OwnUser} from "../../api/types/own-user";
 import {Announcement} from "../../api/types/announcement";
@@ -76,4 +76,5 @@ export class AdminPanelComponent implements OnInit {
   protected readonly faBullhorn = faBullhorn;
   protected readonly faWrench = faWrench;
   protected readonly undefined = undefined;
+  protected readonly faCheck = faCheck;
 }

src/app/pages/admin-user/admin-user.component.html

@@ -0,0 +1 @@
+<p>admin-user works!</p>

src/app/pages/admin-user/admin-user.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-admin-user',
+  templateUrl: './admin-user.component.html'
+})
+export class AdminUserComponent {
+
+}

src/app/pages/level/level.component.html

@@ -22,6 +22,9 @@
     </div>
   </div>
 </page-header-block>
+<page-header-block *ngIf="ownUser?.role == UserRoles.Admin">
+  <secondary-button text="Manage" class="flex" [icon]="faWrench" [routerLink]="'/admin/level/' + level?.levelId"></secondary-button>
+</page-header-block>
 
 <page-header-block *ngIf="!level">
   <div class="flex gap-3.5 animate-pulse">

src/app/pages/level/level.component.ts

@@ -8,9 +8,11 @@ import { Level } from 'src/app/api/types/level';
 import { Score } from 'src/app/api/types/score';
 import { DropdownOption } from 'src/app/components/form-dropdown/form-dropdown.component';
 import {ActivityPage} from "../../api/types/activity/activity-page";
-import {ActivityEvent} from "../../api/types/activity/activity-event";
 import {User} from "../../api/types/user";
 import {GenerateEmptyList} from "../../app.component";
+import {faWrench} from "@fortawesome/free-solid-svg-icons";
+import {OwnUser} from "../../api/types/own-user";
+import {UserRoles} from "../../api/types/user-roles";
 
 @Component({
   selector: 'app-level',
@@ -22,6 +24,8 @@ export class LevelComponent implements OnInit {
   activity: ActivityPage | undefined
   scoreType: number = 1;
 
+  ownUser: OwnUser | undefined;
+
   scoreTypeId: string = "level-leaderboard-scoretype"
 
   scoreTypes: DropdownOption[] = [
@@ -67,6 +71,11 @@ export class LevelComponent implements OnInit {
         this.getActivity(this.level.levelId);
       });
     });
+
+    this.ownUser = this.apiClient.user;
+    this.apiClient.userWatcher.subscribe((data) => {
+      this.ownUser = data;
+    });
   }
 
   formChanged() {
@@ -129,4 +138,6 @@ export class LevelComponent implements OnInit {
 
   protected readonly GetAssetImageLink = GetAssetImageLink;
   protected readonly GenerateEmptyList = GenerateEmptyList;
+  protected readonly faWrench = faWrench;
+  protected readonly UserRoles = UserRoles;
 }

src/app/pages/user/user.component.html

@@ -22,6 +22,9 @@
     </div>
   </div>
 </page-header-block>
+<page-header-block *ngIf="ownUser?.role == UserRoles.Admin">
+  <secondary-button text="Manage" class="flex" [icon]="faWrench" [routerLink]="'/admin/user/' + user?.userId"></secondary-button>
+</page-header-block>
 
 <page-header-block *ngIf="!user">
   <div class="flex gap-3.5 animate-pulse">

src/app/pages/user/user.component.ts

@@ -6,6 +6,9 @@ import { EMPTY, catchError, of, switchMap, tap } from 'rxjs';
 import {ApiClient, GetAssetImageLink} from 'src/app/api/api-client';
 import { Room } from 'src/app/api/types/rooms/room';
 import { User } from 'src/app/api/types/user';
+import {UserRoles} from "../../api/types/user-roles";
+import {faWrench} from "@fortawesome/free-solid-svg-icons";
+import {OwnUser} from "../../api/types/own-user";
 
 @Component({
   selector: 'app-user',
@@ -15,6 +18,8 @@ export class UserComponent implements OnInit {
     user: User | undefined = undefined;
     room: Room | undefined = undefined;
 
+  ownUser: OwnUser | undefined;
+
     constructor(private route: ActivatedRoute, private apiClient: ApiClient, private router: Router) {}
 
     ngOnInit(): void {
@@ -41,6 +46,11 @@ export class UserComponent implements OnInit {
         return this.getUserByUsername(username);
       }))
       .subscribe();
+
+      this.ownUser = this.apiClient.user;
+      this.apiClient.userWatcher.subscribe((data) => {
+        this.ownUser = data;
+      });
     }
 
     getMoment(timestamp: Date): string {
@@ -106,4 +116,6 @@ export class UserComponent implements OnInit {
     }
 
   protected readonly GetAssetImageLink = GetAssetImageLink;
+  protected readonly UserRoles = UserRoles;
+  protected readonly faWrench = faWrench;
 }