69 lines
2.5 KiB
HTML
69 lines
2.5 KiB
HTML
<mat-card appearance="outlined">
|
|
<mat-card-header>
|
|
<div mat-card-avatar class="mastodon"></div>
|
|
<mat-card-title class="platform-title">
|
|
Mastodon
|
|
<button mat-icon-button aria-label="How to use">
|
|
<mat-icon
|
|
matTooltip="How to add an mastodon bot to your hood"
|
|
class="info-button"
|
|
(click)="onInfoClick()"
|
|
>info</mat-icon
|
|
>
|
|
</button>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<mat-list *ngIf="mastodons$ | loading | async as mastodons">
|
|
<ng-template [ngIf]="mastodons.value">
|
|
<mat-list-item *ngIf="mastodons.value.length === 0">
|
|
<button class="add-button" mat-button (click)="onCreate()">
|
|
<div class="in-add-button">
|
|
<mat-icon>add</mat-icon>
|
|
<span> Add a platform connection!</span>
|
|
</div>
|
|
</button>
|
|
<mat-divider></mat-divider>
|
|
</mat-list-item>
|
|
<mat-list-item *ngFor="let mastodon of mastodons.value">
|
|
<div class="entry">
|
|
@{{ mastodon.username }}
|
|
<mat-slide-toggle
|
|
[checked]="mastodon.enabled === 1"
|
|
(change)="onChange(mastodon)"
|
|
></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(mastodon.id)">
|
|
<mat-icon>edit</mat-icon>
|
|
<span>Edit</span>
|
|
</button>
|
|
<button mat-menu-item (click)="onDelete(mastodon.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]="mastodons.error"
|
|
><mat-icon class="warning">warning</mat-icon></ng-template
|
|
>
|
|
<ng-template [ngIf]="mastodons.loading">
|
|
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
|
|
</ng-template>
|
|
</mat-list>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
|