add invites

This commit is contained in:
_Bastler
2021-05-06 21:26:57 +02:00
parent 3e02cbb353
commit c8a10eb73c
12 changed files with 1213 additions and 892 deletions
+31 -21
View File
@@ -2,24 +2,34 @@
<p *ngIf="!services || services.length == 0">{{'services.empty' | i18n}}</p>
<div fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex="33.33%" fxFlex.sm="50%" fxFlex.xs="100%" *ngFor="let service of services">
<mat-card>
<mat-card-header>
<mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
<mat-card-title>{{'services.' + service.name + '.title' | i18n}}</mat-card-title>
<mat-card-subtitle>{{'services.' + service.name + '.subtitle' | i18n}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
{{ 'services.' + service.name + '.text' | i18n}}
</p>
</mat-card-content>
<mat-card-actions>
<a href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-raised-button
color="accent">{{'services.goto' | i18n}} <mat-icon *ngIf="!service.sameSite" inline="true">
open_in_new</mat-icon></a>
</mat-card-actions>
</mat-card>
</div>
</div>
<table *ngIf="services && services.length > 0" mat-table matSort [dataSource]="services" (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="desc">
<ng-container matColumnDef="icon">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let service">
<mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'service.name' | i18n}} </th>
<td mat-cell *matCellDef="let service" class="text-center">
<a href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-button color="accent">
<strong>{{'services.' + service.name + '.title' | i18n}}</strong>
<mat-icon *ngIf="!service.sameSite" inline="true">
open_in_new</mat-icon>
</a>
<div><small>{{'services.' + service.name + '.subtitle' | i18n}}</small></div>
</td>
</ng-container>
<ng-container matColumnDef="text">
<th mat-header-cell *matHeaderCellDef> {{'service.text' | i18n}} </th>
<td mat-cell *matCellDef="let service">{{ 'services.' + service.name + '.text' | i18n}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="serviceColumns"></tr>
<tr mat-row *matRowDef="let myRowData; columns: serviceColumns"></tr>
</table>
+26 -3
View File
@@ -1,5 +1,7 @@
import { Component, OnInit, Input } from '@angular/core';
import { ServiceService } from '../../services/service.service';
import {Component, OnInit} from '@angular/core';
import {Sort} from '@angular/material/sort';
import {ServiceService} from '../../services/service.service';
import {I18nService} from '../../services/i18n.service';
@Component({
selector: 'app-services',
@@ -9,13 +11,34 @@ import { ServiceService } from '../../services/service.service';
export class ServicesComponent implements OnInit {
services = [];
serviceColumns = ["icon", "name", "text"];
constructor(private serviceService: ServiceService) { }
constructor(private serviceService: ServiceService, private i18n: I18nService) {}
ngOnInit(): void {
this.serviceService.services().subscribe((data: any) => {
this.services = data;
this.sortData({"active": "name", "direction": "desc"});
})
}
sortData(sort: Sort) {
const data = this.services.slice();
if(!sort.active || sort.direction === '') {
this.services = data;
return;
}
this.services = data.sort((a, b) => {
const isAsc = sort.direction === 'asc';
switch(sort.active) {
case 'name': return this.compare(this.i18n.get('services.' + a.name + '.title', []), this.i18n.get('services.' + b.name + '.title', []), isAsc);
default: return 0;
}
});
}
compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
}