[frontend] Add initial design for platforms

kibicara-frontend/src/app/dashboard/board/board.component.html

@@ -15,7 +15,7 @@
       <app-hoodsettings [hoodId]="hoodId"> </app-hoodsettings>
     </mat-tab>
     <mat-tab label="Platforms">
-      <app-platforms></app-platforms>
+      <app-platforms [hoodId]="hoodId"></app-platforms>
     </mat-tab>
     <mat-tab label="Hoodpage">
       <app-hoodpage [hoodId]="hoodId"></app-hoodpage>

kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.html

@@ -1 +1,5 @@
-<p>platforms works!</p>
+<div class="platforms-container">
+  <app-email-settings [hoodId]="hoodId"></app-email-settings>
+  <app-twitter-settings [hoodId]="hoodId"></app-twitter-settings>
+  <app-telegram-settings [hoodId]="hoodId"></app-telegram-settings>
+</div>

kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.scss

@@ -0,0 +1,11 @@
+.platforms-container {
+  margin: 10px;
+  display: grid;
+  gap: 10px;
+  align-items: stretch;
+  justify-items: stretch;
+  grid-template-columns: 1fr 1fr 1fr;
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+}

kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
   selector: 'app-platforms',
@@ -6,6 +6,8 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./platforms.component.scss'],
 })
 export class PlatformsComponent implements OnInit {
+  @Input() hoodId;
+
   constructor() {}
 
   ngOnInit(): void {}

kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html

@@ -0,0 +1,40 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>E-Mails</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <mat-list *ngIf="emails$ | async as emails">
+      <mat-list-item *ngIf="emails.length === 0">
+        <button mat-menu-item>
+          <mat-icon>add</mat-icon>
+          <span> Add a platform connection!</span>
+        </button>
+        <mat-divider></mat-divider>
+      </mat-list-item>
+      <mat-list-item *ngFor="let email of emails">
+        <div class="entry">
+          Telegramdummy
+          <mat-slide-toggle></mat-slide-toggle>
+          <button
+            mat-icon-button
+            [matMenuTriggerFor]="menu"
+            aria-label="Example icon-button with a menu"
+          >
+            <mat-icon>more_vert</mat-icon>
+          </button>
+        </div>
+        <mat-divider></mat-divider>
+      </mat-list-item>
+    </mat-list>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item>
+        <mat-icon>delete</mat-icon>
+        <span>Delete</span>
+      </button>
+      <button mat-menu-item>
+        <mat-icon>add</mat-icon>
+        <span>Add another</span>
+      </button>
+    </mat-menu>
+  </mat-card-content>
+</mat-card>

kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss

@@ -0,0 +1,6 @@
+.entry {
+  display: grid;
+  grid-template-columns: 4fr 40px 20px;
+  width: 100%;
+  align-items: center;
+}

kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.spec.ts

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

kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { EmailService } from 'src/app/core/api';
+
+@Component({
+  selector: 'app-email-settings',
+  templateUrl: './email-settings.component.html',
+  styleUrls: ['./email-settings.component.scss'],
+})
+export class EmailSettingsComponent implements OnInit {
+  @Input() hoodId;
+  emails$: Observable<Array<any>>;
+
+  constructor(private emailService: EmailService) {}
+
+  ngOnInit(): void {
+    this.emails$ = this.emailService.getEmails(this.hoodId);
+  }
+}

kibicara-frontend/src/app/platforms/platforms.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TelegramSettingsComponent } from './telegram/telegram-settings/telegram-settings.component';
+import { SharedModule } from '../shared/shared.module';
+import { TwitterSettingsComponent } from './twitter/twitter-settings/twitter-settings.component';
+import { EmailSettingsComponent } from './email/email-settings/email-settings.component';
+
+@NgModule({
+  declarations: [
+    TelegramSettingsComponent,
+    TwitterSettingsComponent,
+    EmailSettingsComponent,
+  ],
+  imports: [CommonModule, SharedModule],
+  exports: [
+    TelegramSettingsComponent,
+    TwitterSettingsComponent,
+    EmailSettingsComponent,
+  ],
+})
+export class PlatformsModule {}

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html

@@ -0,0 +1,44 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Telegram</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <mat-list *ngIf="telegrams$ | async as telegrams">
+      <mat-list-item *ngIf="telegrams.length === 0">
+        <button mat-menu-item>
+          <mat-icon>add</mat-icon>
+          <span> Add a platform connection!</span>
+        </button>
+        <mat-divider></mat-divider>
+      </mat-list-item>
+      <mat-list-item *ngFor="let telegram of telegrams">
+        <div class="entry">
+          Telegramdummy
+          <mat-slide-toggle></mat-slide-toggle>
+          <button
+            mat-icon-button
+            [matMenuTriggerFor]="menu"
+            aria-label="Example icon-button with a menu"
+          >
+            <mat-icon>more_vert</mat-icon>
+          </button>
+        </div>
+        <mat-divider></mat-divider>
+      </mat-list-item>
+    </mat-list>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item>
+        <mat-icon>edit</mat-icon>
+        <span>Edit</span>
+      </button>
+      <button mat-menu-item>
+        <mat-icon>delete</mat-icon>
+        <span>Delete</span>
+      </button>
+      <button mat-menu-item>
+        <mat-icon>add</mat-icon>
+        <span>Add another</span>
+      </button>
+    </mat-menu>
+  </mat-card-content>
+</mat-card>

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.scss

@@ -0,0 +1,6 @@
+.entry {
+  display: grid;
+  grid-template-columns: 4fr 40px 20px;
+  width: 100%;
+  align-items: center;
+}

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.spec.ts

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

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { TelegramService } from 'src/app/core/api';
+import { Observer, Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-telegram-settings',
+  templateUrl: './telegram-settings.component.html',
+  styleUrls: ['./telegram-settings.component.scss'],
+})
+export class TelegramSettingsComponent implements OnInit {
+  @Input() hoodId;
+  telegrams$: Observable<Array<any>>;
+
+  constructor(private telegramService: TelegramService) {}
+
+  ngOnInit(): void {
+    this.telegrams$ = this.telegramService.getTelegrams(this.hoodId);
+  }
+}

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html

@@ -0,0 +1,44 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Twitter</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <mat-list *ngIf="twitters$ | async as twitters">
+      <mat-list-item *ngIf="twitters.length === 0">
+        <button mat-menu-item>
+          <mat-icon>add</mat-icon>
+          <span> Add a platform connection!</span>
+        </button>
+        <mat-divider></mat-divider>
+      </mat-list-item>
+      <mat-list-item *ngFor="let twitter of twitters">
+        <div class="entry">
+          Twitterdummy
+          <mat-slide-toggle></mat-slide-toggle>
+          <button
+            mat-icon-button
+            [matMenuTriggerFor]="menu"
+            aria-label="Example icon-button with a menu"
+          >
+            <mat-icon>more_vert</mat-icon>
+          </button>
+        </div>
+        <mat-divider></mat-divider>
+      </mat-list-item>
+    </mat-list>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item>
+        <mat-icon>edit</mat-icon>
+        <span>Edit</span>
+      </button>
+      <button mat-menu-item>
+        <mat-icon>delete</mat-icon>
+        <span>Delete</span>
+      </button>
+      <button mat-menu-item>
+        <mat-icon>add</mat-icon>
+        <span>Add another</span>
+      </button>
+    </mat-menu>
+  </mat-card-content>
+</mat-card>

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.scss

@@ -0,0 +1,6 @@
+.entry {
+  display: grid;
+  grid-template-columns: 4fr 40px 20px;
+  width: 100%;
+  align-items: center;
+}

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.spec.ts

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

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { TwitterService } from 'src/app/core/api';
+
+@Component({
+  selector: 'app-twitter-settings',
+  templateUrl: './twitter-settings.component.html',
+  styleUrls: ['./twitter-settings.component.scss'],
+})
+export class TwitterSettingsComponent implements OnInit {
+  @Input() hoodId;
+  twitters$: Observable<Array<any>>;
+
+  constructor(private twitterService: TwitterService) {}
+
+  ngOnInit(): void {
+    this.twitters$ = this.twitterService.getTwitters(this.hoodId);
+  }
+}

kibicara-frontend/src/app/shared/material/material.module.ts

@@ -10,6 +10,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatInputModule } from '@angular/material/input';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 @NgModule({
   declarations: [],
@@ -25,6 +26,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
     MatInputModule,
     MatDialogModule,
     MatSnackBarModule,
+    MatSlideToggleModule,
   ],
   exports: [
     MatButtonModule,
@@ -38,6 +40,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
     MatInputModule,
     MatDialogModule,
     MatSnackBarModule,
+    MatSlideToggleModule,
   ],
 })
 export class MaterialModule {}