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

[frontend] Add spinner when loading

Browse source
This commit is contained in:
Cathy Hu 2020-09-11 15:38:46 +02:00
parent d6fc38504a
commit bc4b57aaef
17 changed files with 475 additions and 348 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html
View file

@ -10,40 +10,46 @@
<mat-icon>add</mat-icon>
</button>
</form>
<ng-container *ngIf="badwords$ | async as badwords">
<mat-list *ngIf="badwords.length !== 0; else empty">
<mat-list-item *ngFor="let badword of badwords">
<div class="entry">
<div class="regex">
{{ badword.pattern }}
<ng-container *ngIf="badwords$ | loading | async as badwords">
<ng-template [ngIf]="badwords.value">
<mat-list *ngIf="badwords.value.length !== 0; else empty">
<mat-list-item *ngFor="let badword of badwords.value">
<div class="entry">
<div class="regex">
{{ badword.pattern }}
</div>
<button
mat-icon-button
color="primary"
aria-label="Edit"
class="button"
(click)="onEdit(badword.id)"
>
<mat-icon>edit</mat-icon>
</button>
<button
mat-icon-button
color="warn"
aria-label="Delete"
class="button"
(click)="onDelete(badword.id)"
>
<mat-icon>delete</mat-icon>
</button>
</div>
<button
mat-icon-button
color="primary"
aria-label="Edit"
class="button"
(click)="onEdit(badword.id)"
>
<mat-icon>edit</mat-icon>
</button>
<button
mat-icon-button
color="warn"
aria-label="Delete"
class="button"
(click)="onDelete(badword.id)"
>
<mat-icon>delete</mat-icon>
</button>
</div>
<mat-divider></mat-divider>
</mat-list-item>
</mat-list>
<mat-divider></mat-divider>
</mat-list-item>
</mat-list>
<ng-template #empty>
<div class="error-msg">No badwords configured yet.</div>
</ng-template>
</ng-template>
<ng-template [ngIf]="badwords.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="badwords.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</ng-container>
<ng-template #empty>
<div class="error-msg">
No badwords configured yet.
</div>
</ng-template>
</mat-card-content>
</mat-card>

72
kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html
View file

@ -10,40 +10,46 @@
<mat-icon>add</mat-icon>
</button>
</form>
<ng-container *ngIf="triggers$ | async as triggers">
<mat-list *ngIf="triggers.length !== 0; else empty">
<mat-list-item *ngFor="let trigger of triggers">
<div class="entry">
<div class="regex">
{{ trigger.pattern }}
<ng-container *ngIf="triggers$ | loading | async as triggers">
<ng-template [ngIf]="triggers.value">
<mat-list *ngIf="triggers.value.length !== 0; else empty">
<mat-list-item *ngFor="let trigger of triggers.value">
<div class="entry">
<div class="regex">
{{ trigger.pattern }}
</div>
<button
mat-icon-button
color="primary"
aria-label="Edit"
class="button"
(click)="onEdit(trigger.id)"
>
<mat-icon>edit</mat-icon>
</button>
<button
mat-icon-button
color="warn"
aria-label="Delete"
class="button"
(click)="onDelete(trigger.id)"
>
<mat-icon>delete</mat-icon>
</button>
</div>
<button
mat-icon-button
color="primary"
aria-label="Edit"
class="button"
(click)="onEdit(trigger.id)"
>
<mat-icon>edit</mat-icon>
</button>
<button
mat-icon-button
color="warn"
aria-label="Delete"
class="button"
(click)="onDelete(trigger.id)"
>
<mat-icon>delete</mat-icon>
</button>
</div>
<mat-divider></mat-divider>
</mat-list-item>
</mat-list>
<mat-divider></mat-divider>
</mat-list-item>
</mat-list>
<ng-template #empty>
<div class="error-msg">No triggers configured yet.</div>
</ng-template>
</ng-template>
<ng-template [ngIf]="triggers.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="triggers.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</ng-container>
<ng-template #empty>
<div class="error-msg">
No triggers configured yet.
</div>
</ng-template>
</mat-card-content>
</mat-card>

70
kibicara-frontend/src/app/dashboard/hoods/hoods.component.html
View file

@ -7,37 +7,47 @@
technology for your community to florish!
</p>
<div class="hoods-container">
<mat-selection-list [multiple]="false">
<div mat-subheader>Configure your hoods</div>
<mat-divider></mat-divider>
<a
*ngFor="let hood of hoods$ | async"
[routerLink]="['/dashboard/hoods', hood.id]"
matTooltip="Edit settings of {{ hood.name }}"
>
<mat-list-option>
<div class="list-entry-container">
<mat-icon>settings</mat-icon>
<div class="list-entry">
Your Hood - <strong>{{ hood.name }}</strong>
</div>
</div>
<ng-container *ngIf="hoods$ | loading | async as hoods">
<ng-template [ngIf]="hoods.value">
<mat-selection-list [multiple]="false">
<div mat-subheader>Configure your hoods</div>
<mat-divider></mat-divider>
</mat-list-option>
</a>
</mat-selection-list>
<mat-list>
<div mat-subheader></div>
<mat-list-item *ngFor="let hood of hoods$ | async">
<a
[routerLink]="['/hoods', hood.id]"
target="_blank"
matTooltip="View public page of hood {{ hood.name }}"
>
<mat-icon class="open-icon">open_in_new</mat-icon>
</a>
</mat-list-item>
</mat-list>
<a
*ngFor="let hood of hoods.value"
[routerLink]="['/dashboard/hoods', hood.id]"
matTooltip="Edit settings of {{ hood.name }}"
>
<mat-list-option>
<div class="list-entry-container">
<mat-icon>settings</mat-icon>
<div class="list-entry">
Your Hood - <strong>{{ hood.name }}</strong>
</div>
</div>
<mat-divider></mat-divider>
</mat-list-option>
</a>
</mat-selection-list>
<mat-list>
<div mat-subheader></div>
<mat-list-item *ngFor="let hood of hoods.value">
<a
[routerLink]="['/hoods', hood.id]"
target="_blank"
matTooltip="View public page of hood {{ hood.name }}"
>
<mat-icon class="open-icon">open_in_new</mat-icon>
</a>
</mat-list-item>
</mat-list>
</ng-template>
<ng-template [ngIf]="hoods.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="hoods.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</ng-container>
</div>
<button

100
kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.html
View file

@ -1,43 +1,61 @@
<div *ngIf="emails$ | async as emails">
<mat-card *ngIf="emails.length !== 0">
<mat-card-header>
<div mat-card-avatar class="email"></div>
<mat-card-title class="platform-title">
E-Mail
<button mat-icon-button aria-label="How to use">
<mat-icon
matTooltip="How to send and receive hood broadcast messages with email"
class="info-button"
(click)="onInfoClick()"
>info</mat-icon
<div *ngIf="emails$ | loading | async as emails">
<ng-template [ngIf]="emails.value">
<mat-card>
<mat-card-header>
<div mat-card-avatar class="email"></div>
<mat-card-title class="platform-title">
E-Mail
<button mat-icon-button aria-label="How to use">
<mat-icon
matTooltip="How to send and receive hood broadcast messages with email"
class="info-button"
(click)="onInfoClick()"
>info</mat-icon
>
</button>
</mat-card-title>
</mat-card-header>
<mat-card-content *ngIf="emails.value.length !== 0; else noEmail">
<h3>Subscribe to E-Mail list:</h3>
<form class="input" [formGroup]="form" (ngSubmit)="onSubmit()">
<mat-form-field>
<mat-label>Your E-Mail</mat-label>
<input formControlName="email" matInput />
</mat-form-field>
<button
mat-icon-button
color="primary"
aria-label="Add"
class="button"
>
</button>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<h3>Subscribe to E-Mail list:</h3>
<form class="input" [formGroup]="form" (ngSubmit)="onSubmit()">
<mat-form-field>
<mat-label>Your E-Mail</mat-label>
<input formControlName="email" matInput />
</mat-form-field>
<button mat-icon-button color="primary" aria-label="Add" class="button">
<mat-icon>person_add</mat-icon>
</button>
</form>
<mat-divider></mat-divider>
<h3>Send e-mail to hood:</h3>
<mat-selection-list [multiple]="false" class="list">
<a
*ngFor="let email of emails"
href="mailto:{{ email.name }}@{{ emailDomain }}"
>
<mat-list-option>
{{ email.name }}@{{ emailDomain }}
<mat-divider></mat-divider>
</mat-list-option>
</a>
</mat-selection-list>
</mat-card-content>
</mat-card>
<mat-icon>person_add</mat-icon>
</button>
</form>
<mat-divider></mat-divider>
<h3>Send e-mail to hood:</h3>
<mat-selection-list [multiple]="false" class="list">
<a
*ngFor="let email of emails.value"
href="mailto:{{ email.name }}@{{ emailDomain }}"
>
<mat-list-option>
{{ email.name }}@{{ emailDomain }}
<mat-divider></mat-divider>
</mat-list-option>
</a>
</mat-selection-list>
</mat-card-content>
</mat-card>
<ng-template #noEmail>
<mat-card-content>
Unfortunately your hood admin has not configured E-Mail as platform yet.
</mat-card-content>
</ng-template>
</ng-template>
<ng-template [ngIf]="emails.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="emails.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</div>

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

@ -14,50 +14,58 @@
</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-list *ngIf="emails$ | async as emails">
<mat-list-item *ngIf="emails.length === 0; else startButton">
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
</button>
<mat-divider></mat-divider>
</mat-list-item>
<ng-template #startButton>
<mat-list-item>
<div class="toggle-container">
<mat-slide-toggle
name="enableEmails"
class="toggle"
(change)="onToggle()"
[(ngModel)]="start"
></mat-slide-toggle>
</div>
<mat-divider></mat-divider>
</mat-list-item>
</ng-template>
<mat-list-item *ngFor="let email of emails">
<div class="entry">
{{ email.name }}@{{ domain }}
<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-menu #menu="matMenu">
<button mat-menu-item (click)="onDelete(email.id)">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<mat-list *ngIf="emails$ | loading | async as emails">
<ng-template [ngIf]="emails.value">
<mat-list-item *ngIf="emails.value.length === 0; else startButton">
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span>Add another</span>
<span> Add a platform connection!</span>
</button>
</mat-menu>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list-item>
<ng-template #startButton>
<mat-list-item>
<div class="toggle-container">
<mat-slide-toggle
name="enableEmails"
class="toggle"
(change)="onToggle()"
[(ngModel)]="start"
></mat-slide-toggle>
</div>
<mat-divider></mat-divider>
</mat-list-item>
</ng-template>
<mat-list-item *ngFor="let email of emails.value">
<div class="entry">
{{ email.name }}@{{ domain }}
<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-menu #menu="matMenu">
<button mat-menu-item (click)="onDelete(email.id)">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span>Add another</span>
</button>
</mat-menu>
</mat-list-item>
</ng-template>
<ng-template [ngIf]="emails.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="emails.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</mat-list>
</mat-card-content>
</mat-card>

74
kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.html
View file

@ -1,32 +1,46 @@
<div *ngIf="telegrams$ | async as telegrams">
<mat-card *ngIf="telegrams.length !== 0">
<mat-card-header>
<div mat-card-avatar class="telegram"></div>
<mat-card-title class="platform-title">
Telegram
<button mat-icon-button aria-label="How to use">
<mat-icon
matTooltip="How to send and receive hood broadcast messages with telegram"
class="info-button"
(click)="onInfoClick()"
>info</mat-icon
<div *ngIf="telegrams$ | loading | async as telegrams">
<ng-template [ngIf]="telegrams.value">
<mat-card>
<mat-card-header>
<div mat-card-avatar class="telegram"></div>
<mat-card-title class="platform-title">
Telegram
<button mat-icon-button aria-label="How to use">
<mat-icon
matTooltip="How to send and receive hood broadcast messages with telegram"
class="info-button"
(click)="onInfoClick()"
>info</mat-icon
>
</button>
</mat-card-title>
</mat-card-header>
<mat-card-content *ngIf="telegrams.value.length !== 0; else noTelegram">
<mat-selection-list [multiple]="false" class="list">
<a
*ngFor="let telegram of telegrams.value"
href="https://t.me/{{ telegram.username }}"
routerLinkActive="router-link-active"
>
</button>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-selection-list [multiple]="false" class="list">
<a
*ngFor="let telegram of telegrams"
href="https://t.me/{{ telegram.username }}"
routerLinkActive="router-link-active"
>
<mat-list-option>
@{{ telegram.username }}
<mat-divider></mat-divider>
</mat-list-option>
</a>
</mat-selection-list>
</mat-card-content>
</mat-card>
<mat-list-option>
@{{ telegram.username }}
<mat-divider></mat-divider>
</mat-list-option>
</a>
</mat-selection-list>
</mat-card-content>
</mat-card>
<ng-template #noTelegram>
<mat-card-content>
Unfortunately your hood admin has not configured Telegram as platform
yet.
</mat-card-content>
</ng-template>
</ng-template>
<ng-template [ngIf]="telegrams.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="telegrams.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</div>

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

@ -14,45 +14,53 @@
</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 (click)="onCreate()">
<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">
@{{ telegram.username }}
<mat-slide-toggle
[checked]="telegram.enabled === 1"
(change)="onChange(telegram)"
></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-menu #menu="matMenu">
<button mat-menu-item (click)="onEdit(telegram.id)">
<mat-icon>edit</mat-icon>
<span>Edit</span>
</button>
<button mat-menu-item (click)="onDelete(telegram.id)">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<mat-list *ngIf="telegrams$ | loading | async as telegrams">
<ng-template [ngIf]="telegrams.value">
<mat-list-item *ngIf="telegrams.value.length === 0">
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span>Add another</span>
<span> Add a platform connection!</span>
</button>
</mat-menu>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list-item>
<mat-list-item *ngFor="let telegram of telegrams.value">
<div class="entry">
@{{ telegram.username }}
<mat-slide-toggle
[checked]="telegram.enabled === 1"
(change)="onChange(telegram)"
></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-menu #menu="matMenu">
<button mat-menu-item (click)="onEdit(telegram.id)">
<mat-icon>edit</mat-icon>
<span>Edit</span>
</button>
<button mat-menu-item (click)="onDelete(telegram.id)">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span>Add another</span>
</button>
</mat-menu>
</mat-list-item>
</ng-template>
<ng-template [ngIf]="telegrams.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="telegrams.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</mat-list>
</mat-card-content>
</mat-card>

74
kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html
View file

@ -1,32 +1,46 @@
<div *ngIf="twitters$ | async as twitters">
<mat-card *ngIf="twitters.length !== 0">
<mat-card-header>
<div mat-card-avatar class="twitter"></div>
<mat-card-title class="platform-title">
Twitter
<button mat-icon-button aria-label="How to use">
<mat-icon
matTooltip="How to send and receive hood broadcast messages with twitter"
class="info-button"
(click)="onInfoClick()"
>info</mat-icon
<div *ngIf="twitters$ | loading | async as twitters">
<ng-template [ngIf]="twitters.value">
<mat-card>
<mat-card-header>
<div mat-card-avatar class="twitter"></div>
<mat-card-title class="platform-title">
Twitter
<button mat-icon-button aria-label="How to use">
<mat-icon
matTooltip="How to send and receive hood broadcast messages with twitter"
class="info-button"
(click)="onInfoClick()"
>info</mat-icon
>
</button>
</mat-card-title>
</mat-card-header>
<mat-card-content *ngIf="twitters.value.length !== 0; else noTwitter">
<mat-selection-list [multiple]="false" class="list">
<a
*ngFor="let twitter of twitters.value"
href="https://twitter.com/{{ twitter.username }}"
routerLinkActive="router-link-active"
>
</button>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-selection-list [multiple]="false" class="list">
<a
*ngFor="let twitter of twitters"
href="https://twitter.com/{{ twitter.username }}"
routerLinkActive="router-link-active"
>
<mat-list-option>
@{{ twitter.username }}
<mat-divider></mat-divider>
</mat-list-option>
</a>
</mat-selection-list>
</mat-card-content>
</mat-card>
<mat-list-option>
@{{ twitter.username }}
<mat-divider></mat-divider>
</mat-list-option>
</a>
</mat-selection-list>
</mat-card-content>
</mat-card>
<ng-template #noTwitter>
<mat-card-content>
Unfortunately your hood admin has not configured Twitter as platform
yet.
</mat-card-content>
</ng-template>
</ng-template>
<ng-template [ngIf]="twitters.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="twitters.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</div>

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

@ -14,41 +14,49 @@
</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-list *ngIf="twitters$ | async as twitters">
<mat-list-item *ngIf="(twitters | twitterCorpses).length === 0">
<button mat-menu-item (click)="onCreate()">
<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 | twitterCorpses">
<div class="entry">
@{{ twitter.username }}
<mat-slide-toggle
[checked]="twitter.enabled === 1"
(change)="onChange(twitter)"
></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-menu #menu="matMenu">
<button mat-menu-item (click)="onDelete(twitter.id)">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<mat-list *ngIf="twitters$ | loading | async as twitters">
<ng-template [ngIf]="twitters.value">
<mat-list-item *ngIf="(twitters.value | twitterCorpses).length === 0">
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span>Add another</span>
<span> Add a platform connection!</span>
</button>
</mat-menu>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list-item>
<mat-list-item *ngFor="let twitter of twitters.value | twitterCorpses">
<div class="entry">
@{{ twitter.username }}
<mat-slide-toggle
[checked]="twitter.enabled === 1"
(change)="onChange(twitter)"
></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-menu #menu="matMenu">
<button mat-menu-item (click)="onDelete(twitter.id)">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span>Add another</span>
</button>
</mat-menu>
</mat-list-item>
</ng-template>
<ng-template [ngIf]="twitters.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="twitters.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</mat-list>
</mat-card-content>
</mat-card>

15
kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.html
View file

@ -1,8 +1,9 @@
<app-heading-one [title]="hood.name"></app-heading-one>
<div class="public-margin container">
<div class="markdown">
<markdown [data]="hood.landingpage"></markdown>
<ng-container *ngIf="hood$ | async as hood">
<app-heading-one [title]="hood.name"></app-heading-one>
<div class="public-margin container">
<div class="markdown">
<markdown [data]="hood.landingpage"></markdown>
</div>
<app-platforms-info-page [hoodId]="hoodId"></app-platforms-info-page>
</div>
<app-platforms-info-page [hoodId]="hoodId"></app-platforms-info-page>
</div>
</ng-container>

9
kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.ts
View file

@ -10,7 +10,7 @@ import { first } from 'rxjs/operators';
})
export class HoodpageComponent implements OnInit {
hoodId;
hood: BodyHood;
hood$;
constructor(
private route: ActivatedRoute,
@ -21,12 +21,7 @@ export class HoodpageComponent implements OnInit {
ngOnInit(): void {
this.hoodId = this.route.snapshot.params.id;
if (this.hoodId) {
this.hoodsService
.getHood(this.hoodId)
.pipe(first())
.subscribe((data) => {
this.hood = data;
});
this.hood$ = this.hoodsService.getHood(this.hoodId);
}
}
}

46
kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.html
View file

@ -13,29 +13,33 @@
</mat-form-field>
<mat-selection-list
[multiple]="false"
*ngIf="hoods$ | async; let hoods; else: noHoods"
*ngIf="hoods$ | loading | async; let hoods"
class="list"
>
<a
[routerLink]="['/organizers']"
*ngIf="(hoods | filter: searchText).length === 0"
<ng-template [ngIf]="hoods.value">
<a
[routerLink]="['/organizers']"
*ngIf="(hoods.value | filter: searchText).length === 0"
>
<mat-list-option>
<p>No matching hood found. Start by creating <u>a new hood!</u></p>
</mat-list-option>
</a>
<a
*ngFor="let hood of hoods.value | filter: searchText"
[routerLink]="['/hoods', hood.id]"
>
<mat-list-option>
{{ hood.name }}
<mat-divider></mat-divider>
</mat-list-option>
</a>
</ng-template>
<ng-template [ngIf]="hoods.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<mat-list-option>
<p>No matching hood found. Start by creating <u>a new hood!</u></p>
</mat-list-option>
</a>
<a
*ngFor="let hood of hoods | filter: searchText"
[routerLink]="['/hoods', hood.id]"
>
<mat-list-option>
{{ hood.name }}
<mat-divider></mat-divider>
</mat-list-option>
</a>
<ng-template [ngIf]="hoods.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</mat-selection-list>
<ng-template #noHoods>
No hoods available yet. Create
<a [routerLink]="['/dashboard']">a new hood! </a>
</ng-template>
</div>

8
kibicara-frontend/src/app/shared/loading-pipe/loading.pipe.spec.ts Normal file
View file

@ -0,0 +1,8 @@
import { LoadingPipe } from './loading.pipe';
describe('LoadingPipe', () => {
it('create an instance', () => {
const pipe = new LoadingPipe();
expect(pipe).toBeTruthy();
});
});

18
kibicara-frontend/src/app/shared/loading-pipe/loading.pipe.ts Normal file
View file

@ -0,0 +1,18 @@
import { Pipe, PipeTransform } from '@angular/core';
import { map, startWith, catchError } from 'rxjs/operators';
import { of, isObservable } from 'rxjs';
@Pipe({
name: 'loading',
})
export class LoadingPipe implements PipeTransform {
transform(val) {
return isObservable(val)
? val.pipe(
map((value: any) => ({ loading: false, value })),
startWith({ loading: true }),
catchError((error) => of({ loading: false, error }))
)
: val;
}
}

7
kibicara-frontend/src/app/shared/overlay/overlay.component.scss
View file

@ -2,10 +2,3 @@
margin: 10%;
text-align: center;
}
.spinner {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}

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

@ -10,6 +10,7 @@ import { YesNoDialogComponent } from './yes-no-dialog/yes-no-dialog.component';
import { OverlayComponent } from './overlay/overlay.component';
import { HeadingOneComponent } from './heading-one/heading-one.component';
import { FooterComponent } from './footer/footer.component';
import { LoadingPipe } from './loading-pipe/loading.pipe';
@NgModule({
declarations: [
@ -19,6 +20,7 @@ import { FooterComponent } from './footer/footer.component';
OverlayComponent,
HeadingOneComponent,
FooterComponent,
LoadingPipe,
],
imports: [
MaterialModule,
@ -33,6 +35,7 @@ import { FooterComponent } from './footer/footer.component';
NotFoundComponent,
HeadingOneComponent,
FooterComponent,
LoadingPipe,
MaterialModule,
ReactiveFormsModule,
FormsModule,

13
kibicara-frontend/src/sass/styles.scss
View file

@ -74,3 +74,16 @@ a {
}
/* public pages end */
.spinner {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
.warning {
color: red;
text-align: center;
min-width: 100%;
}