ticketfrei/ticketfrei3
8
1
Fork 0
Code Issues 11 Pull requests 2 Projects 1 Releases Wiki Activity

[frontend] Add initial design for platforms

Browse source
This commit is contained in:
Cathy Hu 2020-08-28 13:25:51 +02:00
parent c01585a4d8
commit 0d902cb9f8
18 changed files with 319 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
kibicara-frontend/src/app/dashboard/board/board.component.html
View file

@ -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>

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

@ -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>

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

@ -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;
}
}

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

@ -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 {}

40
kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html Normal file
View file

@ -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>

6
kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss Normal file
View file

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

24
kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.spec.ts Normal file
View file

@ -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();
});
});

19
kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.ts Normal file
View file

@ -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);
}
}

21
kibicara-frontend/src/app/platforms/platforms.module.ts Normal file
View file

@ -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 {}

44
kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html Normal file
View file

@ -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>

6
kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.scss Normal file
View file

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

24
kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.spec.ts Normal file
View file

@ -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();
});
});

19
kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts Normal file
View file

@ -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);
}
}

44
kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html Normal file
View file

@ -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>

6
kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.scss Normal file
View file

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

24
kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.spec.ts Normal file
View file

@ -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();
});
});

19
kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.ts Normal file
View file

@ -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);
}
}

3
kibicara-frontend/src/app/shared/material/material.module.ts
View file

@ -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 {}