Malte

clients/desktop/package.json

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "9.2.0",
-    "@angular-devkit/build-angular": "0.1000.5",
+    "@angular-devkit/build-angular": "0.1100.4",
     "@angular-eslint/builder": "0.0.1-alpha.32",
     "@angular-eslint/eslint-plugin": "0.0.1-alpha.32",
     "@angular-eslint/eslint-plugin-template": "0.0.1-alpha.32",
@@ -54,6 +54,7 @@
     "@types/dom-mediacapture-record": "1.0.7",
     "@types/jasmine": "3.5.12",
     "@types/jasminewd2": "2.0.8",
+    "@types/lodash": "4.14.164",
     "@types/mocha": "8.0.2",
     "@types/node": "12.12.6",
     "@typescript-eslint/eslint-plugin": "3.9.0",
@@ -90,16 +91,23 @@
     "node": ">=10.13.0"
   },
   "dependencies": {
+    "@angular-material-components/datetime-picker": "4.0.5",
     "@angular/animations": "10.2.3",
     "@angular/cdk": "10.2.0",
+    "@angular/forms": "^10.0.0 || ^11.0.0-0",
     "@angular/material": "10.2.0",
     "@socialstuff/utilities": "0.6.2",
     "@trale/persistence": "0.1.7",
     "@trale/transport": "0.3.2",
+    "deep-diff": "1.0.2",
     "custom-electron-titlebar": "3.2.5",
     "electron-titlebar": "0.0.3",
     "idb": "5.0.6",
+    "lodash": "4.17.20",
     "moment": "2.29.1",
+    "ng-inline-svg": "11.0.1",
+    "npm-lifecycle": "3.1.5",
+    "observe": "1.4.1",
     "particles.js": "2.0.0",
     "sweetalert2": "10.9.0",
     "systeminformation": "4.27.7",

clients/desktop/src/app/admin/Dashboard/dashboard-view/dashboard-view.component.html

@@ -0,0 +1,3 @@
+<div class="tile-grid">
+  <app-information-type-tile (click)="changeTile(tileInformation.id)" [active]="activeTile === tileInformation.id" [tileInformation]="tileInformation" *ngFor="let tileInformation of tileInformations"></app-information-type-tile>
+</div>

clients/desktop/src/app/admin/Dashboard/dashboard-view/dashboard-view.component.scss

@@ -0,0 +1,7 @@
+@import "../../../styles/colors";
+
+.tile-grid {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-evenly;
+}

clients/desktop/src/app/admin/Dashboard/dashboard-view/dashboard-view.component.spec.ts

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

clients/desktop/src/app/admin/Dashboard/dashboard-view/dashboard-view.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+
+/**
+ * This component is loaded over the router-outlet into the "SettingsView" Component. In the app-routing module it is decided, that this is the standard
+ * component shown when logged in as an admin. Currently it shows dummy data, in the Future it will show general information about the Usage of the SocialStuff
+ * Server like amount of members number of open invites and so on. It is important to consider that all the data which will be shown, will not violate privacy standards
+ * of the users.
+  */
+
+@Component({
+  selector: 'app-dashboard-view',
+  templateUrl: './dashboard-view.component.html',
+  styleUrls: ['./dashboard-view.component.scss']
+})
+
+export class DashboardViewComponent implements OnInit {
+
+  private tileInformations = [
+    {
+      name: 'Open Invites',
+      id: 'openInvites',
+      amount: 405
+    },
+    {
+      name: 'Number of Users',
+      id: 'nbUsers',
+      amount: 3455
+    },
+    {
+      name: 'Active Users',
+      id: 'activeUsers',
+      amount: 212
+    },
+    {
+      name: 'Reported Users',
+      id: 'reportedUsers',
+      amount: 4
+    }
+  ];
+
+  private activeTile = 'openInvites';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  private changeTile(id): void {
+    this.activeTile = id;
+  }
+
+}

clients/desktop/src/app/admin/Dashboard/information-type-tile/information-type-tile.component.html

@@ -0,0 +1,4 @@
+<div [class]="active ? 'information-tile-card selected' : 'information-tile-card'">
+  <span class="title">{{tileInformation.name}}</span>
+  <span class="amount">{{tileInformation.amount}}</span>
+</div>

clients/desktop/src/app/admin/Dashboard/information-type-tile/information-type-tile.component.scss

@@ -0,0 +1,37 @@
+@import "../../../styles/colors";
+
+.information-tile-card {
+  width: 200px;
+  height: 100px;
+  background-color: $frenchRasperry;
+  color: $plainWhite;
+  text-align: center;
+  margin: 20px;
+  padding: 20px;
+  position: relative;
+}
+
+.information-tile-card:hover {
+  -webkit-box-shadow: 0px 1px 22px -5px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 1px 22px -5px rgba(0,0,0,0.75);
+  box-shadow: 0px 1px 22px -5px rgba(0,0,0,0.75);
+  cursor: pointer;
+}
+
+.selected {
+  background-color: $green;
+  color: black;
+}
+
+.title {
+  font-size: 20px;
+}
+
+.amount {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  font-size: 40px;
+  bottom: 30px;
+  left: 0;
+}

clients/desktop/src/app/admin/Dashboard/information-type-tile/information-type-tile.component.spec.ts

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

clients/desktop/src/app/admin/Dashboard/information-type-tile/information-type-tile.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-information-type-tile',
+  templateUrl: './information-type-tile.component.html',
+  styleUrls: ['./information-type-tile.component.scss']
+})
+export class InformationTypeTileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  @Input() tileInformation = {name: '', id: '', amount: 0};
+  @Input() active = false;
+
+}

clients/desktop/src/app/admin/SideNav/navigation-container/navigation-container.component.scss

@@ -7,8 +7,8 @@
 
 #sidenav-container {
   position: absolute;
-  top: 60px;
-  bottom: 60px;
+  top: 100px;
+  bottom: 0;
   left: 0;
   right: 0;
 }

clients/desktop/src/app/admin/SideNav/navigation-container/navigation-container.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {routesSettings} from '../../../app-routing.module';
+import {routesAdmin} from '../../../app-routing.module';
 import {Route} from '@angular/router';
 
 @Component({
@@ -10,33 +10,33 @@ import {Route} from '@angular/router';
 
 export class NavigationContainerComponent implements OnInit {
 
-  navigationItems = [];
+  public navigationItems = [];
 
 
 
   private add(children: Array<Route>): Array<any> {
-    const items = [];
-    children.forEach(route => {
-      if (!route.data.ignore) {
-        const navigationItem = {
-          path: route.data.parent ? `${route.data.parent}/${route.path}` : route.path,
-          name: route.data.name,
-          icon: route.data.icon,
-          subRoutes: []
-        };
-        if (route.children) {
-          navigationItem.subRoutes = this.add(route.children);
-        }
-        items.push(navigationItem);
+    return children.filter(route => !route.data.ignore).map(route => {
+      const navigationItem = {
+        path: route.data.parent ? `${route.data.parent}/${route.path}` : route.path,
+        name: route.data.name,
+        icon: route.data.icon,
+        subRoutes: []
+      };
+      console.log('1: ', navigationItem);
+      if (route.children) {
+        navigationItem.subRoutes = this.add(route.children);
       }
+      console.log('2: ', navigationItem);
+      return navigationItem;
     });
-    return items;
   }
 
   constructor() { }
 
   ngOnInit(): void {
-    this.navigationItems = this.add(routesSettings[0].children);
+    console.log(routesAdmin[0]);
+    this.navigationItems = this.add(routesAdmin[0].children);
+    console.log('HHH', this.navigationItems)
   }
 
 }

clients/desktop/src/app/admin/SideNav/navigation-item/navigation-item.component.ts

@@ -13,11 +13,11 @@ export class NavigationItemComponent implements OnInit {
 
   constructor(location: Location, router: Router) {
     router.events.subscribe(val => {
-      if (location.path() != '') {
+      if (location.path() !== '') {
         this.currentRoute = location.path().split('/')[1];
       } else {
         this.currentRoute = 'Home';
-      }
+      };
     });
   }
 

clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.html

@@ -0,0 +1,20 @@
+<table style="padding-top: 100px">
+  <tr>
+    <td>
+      Invite Code
+    </td>
+    <td>
+      Expiration Date
+    </td>
+    <td>
+      Usage Limitation
+    </td>
+    <td>
+      Times Used
+    </td>
+    <td></td>
+  </tr>
+</table>
+<table>
+  <app-invite-code-row [reload]="reload" *ngFor="let inviteCode of inviteCodes" [inviteCode]="inviteCode"></app-invite-code-row>
+</table>

clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.scss

@@ -0,0 +1,65 @@
+@import "../../../../../styles/colors";
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0 !important;
+  width: 100%;
+  color: $plainWhite;
+  table-layout: auto;
+}
+
+tr {
+  width: 100%;
+}
+
+td {
+  text-align: left;
+  padding: 8px;
+  min-width: 200px;
+  width: 100%;
+}
+
+
+.text-field {
+  border-radius: 50px;
+  background-color: $plumViolet;
+  padding: 15px;
+  color: $plainWhite;
+  width: 80%;
+  border: none;
+  height: 20px;
+}
+
+.search-bar::placeholder {
+  color: $plainWhite;
+}
+
+.save-btn {
+  border-radius: 50px;
+  border: none;
+  background-color: $coralRed;
+  color: $plainWhite;
+  height: 50px;
+  min-width: 150px;
+  text-transform: uppercase;
+}
+
+@keyframes spinner {
+  to {transform: rotate(360deg);}
+}
+
+.spinner:before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  border-top-color: #000000;
+  animation: spinner .8s linear infinite;
+}