Add some admin page stuff

src/app/app.module.ts

@@ -59,11 +59,12 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatNativeDateModule, MatProgressBarModule} from '@angular/material/';
+import {MatGridListModule, MatNativeDateModule, MatProgressBarModule} from '@angular/material/';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import {LightboxModule} from 'ngx-lightbox';
+import { AdminpageComponent } from './components/adminpage/adminpage.component';
 
 
 const config: SocketIoConfig = {url: 'http://localhost:4444', options: {}};
@@ -76,6 +77,7 @@ const appRoutes: Routes = [
   {path: 'register', component: RegisterComponent},
   {path: 'about', component: AboutComponent},
   {path: 'imprint', component: ImprintComponent},
+  {path: 'admin', component: AdminpageComponent},
 ];
 
 @NgModule({
@@ -104,6 +106,7 @@ const appRoutes: Routes = [
     UserlistComponent,
     DialogFileUploadComponent,
     DialogGroupFileUploadComponent,
+    AdminpageComponent,
   ],
   imports: [
     BrowserModule,
@@ -150,6 +153,7 @@ const appRoutes: Routes = [
     MatProgressBarModule,
     LightboxModule,
     ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
+    MatGridListModule,
   ],
   entryComponents: [
     DialogCreateGroupComponent,

src/app/components/adminpage/adminpage.component.html

@@ -0,0 +1,46 @@
+<div id="adminpage">
+  <h1>Administration</h1>
+  <div class="grid">
+    <div class="column">
+      <div class="column-header">
+        <h2>Levels</h2>
+      </div>
+    </div>
+    <div class="column">
+      <div class="column-header">
+        <h2>Activities</h2>
+      </div>
+      <div>
+        <mat-form-field class="input">
+          <input matInput type="text" placeholder="Activity name">
+        </mat-form-field>
+        <mat-table [dataSource]="activitySource" matSort>
+          <ng-container matColumnDef="points">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> points</th>
+            <td mat-cell *matCellDef="let action"> {{action.points}} </td>
+          </ng-container>
+
+          <!-- Name Column -->
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> action</th>
+            <td mat-cell *matCellDef="let action"> {{action.name}} </td>
+          </ng-container>
+
+          <!-- description Column -->
+          <ng-container matColumnDef="description">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> description</th>
+            <td mat-cell *matCellDef="let action"> {{action.description}} </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedActivityColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedActivityColumns;"></tr>
+        </mat-table>
+      </div>
+    </div>
+    <div class="column">
+      <div class="column-header">
+        <h2>Blacklist</h2>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/adminpage/adminpage.component.sass

@@ -0,0 +1,18 @@
+@import "../../../styles/mixins.sass"
+
+#adminpage
+  margin: 1em
+
+  .grid
+    display: grid
+    grid-template: 100% / 33% 33% 33%
+    .column-header
+      text-align: center
+
+    .column
+      &:nth-child(1)
+        @include gridPosition(1, 2, 1, 2)
+      &:nth-child(2)
+        @include gridPosition(1, 2, 2, 3)
+      &:nth-child(3)
+        @include gridPosition(1, 2, 3, 4)

src/app/components/adminpage/adminpage.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminpageComponent } from './adminpage.component';
+
+describe('AdminpageComponent', () => {
+  let component: AdminpageComponent;
+  let fixture: ComponentFixture<AdminpageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AdminpageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminpageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/adminpage/adminpage.component.ts

@@ -0,0 +1,31 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {Levellist} from '../../models/levellist';
+import {ActivityService} from '../../services/activity/activity.service';
+import {Activitylist} from '../../models/activity';
+import {MatTableDataSource} from '@angular/material/table';
+import {MatSort} from '@angular/material/sort';
+
+@Component({
+  selector: 'app-adminpage',
+  templateUrl: './adminpage.component.html',
+  styleUrls: ['./adminpage.component.sass']
+})
+export class AdminpageComponent implements OnInit {
+
+  public activitySource: MatTableDataSource<any>;
+  public displayedActivityColumns = ['points', 'name', 'description'];
+
+  @ViewChild(MatSort, {static: true}) activitySort: MatSort;
+
+  constructor(private activityService: ActivityService) {
+  }
+
+  ngOnInit() {
+    this.activityService.getActivities();
+    this.activityService.activitylist.subscribe(response => {
+      this.activitySource = new MatTableDataSource(response.Actions);
+      this.activitySource.sort = this.activitySort;
+    });
+  }
+
+}

src/app/components/main-navigation/main-navigation.component.html

@@ -125,7 +125,13 @@
         <div [hidden]="loggedIn">
           <button mat-menu-item routerLink="/login">
             <mat-icon>exit_to_app</mat-icon>
-            <span>login</span>
+            <span>Login</span>
+          </button>
+        </div>
+        <div [hidden]="!user.isAdmin">
+          <button mat-menu-item routerLink="/admin">
+            <mat-icon>settings</mat-icon>
+            <span>Administration</span>
           </button>
         </div>
       </mat-menu>

src/app/models/interfaces/IUser.ts

@@ -45,4 +45,6 @@ export interface IUser {
   eventCount: number;
 
   events: any[];
+
+  isAdmin?: boolean;
 }

src/app/models/user.ts

@@ -18,6 +18,7 @@ export class User {
   joinedAt: string;
   friendCount: number;
   groupCount: number;
+  isAdmin: boolean = false;
 
   darkmode = false;
 
@@ -79,6 +80,9 @@ export class User {
       this.receivedRequests = userDataResponse.receivedRequests
         .map(request => new FriendRequest(request.id, request.sender.id, request.sender.handle, request.sender.name));
     }
+    if (userDataResponse.isAdmin) {
+      this.isAdmin = true;
+    }
     return this;
   }
 

src/app/services/login/login.service.ts

@@ -47,6 +47,7 @@ const graphqlQuery = `mutation($email: String!, $pwHash: String!) {
       id
     },
     settings
+    isAdmin
   }
 }`;