added services grid view

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { TokensComponent } from './pages/tokens/tokens.component';
 import { InvitesComponent } from './pages/invites/invites.component';
 import { PermissionsComponent } from './ui/permissions/permissions.component';
 import { ProfileFieldDialog, ProfileFieldsComponent, ProfileFieldBlob } from './ui/profilefields/profilefields.component';
+import { ServicesGridComponent } from './ui/servicesgrid/servicesgrid.component';
 import { ServicesTableComponent } from './ui/servicestable/servicestable.component';
 import { ProfileFieldPgpBlob } from './ui/profilefields/binary/pgp/profilefield.pgp-blob';
 import { QuotasComponent } from './ui/quotas/quotas.component';
@@ -85,7 +86,7 @@ export class XhrInterceptor implements HttpInterceptor {
     ServicesComponent,
     PermissionsComponent,
     ProfileFieldsComponent, ProfileFieldDialog, ProfileFieldBlob, ProfileFieldPgpBlob,
-    ServicesTableComponent,
+    ServicesGridComponent, ServicesTableComponent,
     QuotasComponent,
     SecurityComponent,
     SecurityTotpDialog,

src/app/pages/services/services.component.html

@@ -1,13 +1,39 @@
-<h3>{{'services' | i18n}}</h3>
+<header>
+  <h3>{{'services' | i18n}}</h3>
+  <span class="spacer"></span>
+  <mat-button-toggle-group [(ngModel)]="view" (change)="updateView()">
+    <mat-button-toggle value="grid">
+      <mat-icon>view_module</mat-icon>
+    </mat-button-toggle>
+    <mat-button-toggle value="table">
+      <mat-icon>toc</mat-icon>
+    </mat-button-toggle>
+  </mat-button-toggle-group>
+
+</header>
 
 <mat-progress-bar *ngIf="!baseServices" mode="indeterminate"></mat-progress-bar>
 
 <p *ngIf="baseServices && baseServices.length == 0">{{'services.empty' | i18n}}</p>
 
-<app-services-table *ngIf="baseServices" [services]="baseServices"></app-services-table>
+<div *ngIf="view=='grid'">
+  <app-services-grid *ngIf="baseServices" [services]="baseServices"></app-services-grid>
+  <br>
+  <div *ngFor="let item of serviceCategory | keyvalue">
+    <h4>{{'services.category.' + item.key | i18n}}</h4>
 
-<div *ngFor="let item of serviceCategory | keyvalue">
+    <app-services-grid [services]="item.value"></app-services-grid>
+    <br>
+  </div>
+</div>
+
+<div *ngIf="view=='table'">
+  <app-services-table *ngIf="baseServices" [services]="baseServices"></app-services-table>
+  <br>
+  <div *ngFor="let item of serviceCategory | keyvalue">
     <h4>{{'services.category.' + item.key | i18n}}</h4>
 
     <app-services-table [services]="item.value"></app-services-table>
+    <br>
+  </div>
 </div>

src/app/pages/services/services.component.scss

@@ -1,10 +1,11 @@
-mat-card {
+header {
   display: flex;
-  flex-direction: column;
-  height: 100%;
-}
 
-mat-card-content {
-  flex-grow: 1;
-  overflow: auto;
+  h3 {
+    display: inline-block
+  }
+
+  mat-button-toggle-group {
+    margin: 8px;
+  }
 }

src/app/pages/services/services.component.ts

@@ -12,10 +12,14 @@ export class ServicesComponent implements OnInit {
 
   baseServices: Array<any>;
   serviceCategory: any = {};
+  view = 'grid';
 
   constructor(private serviceService: ServiceService, private i18n: I18nService) { }
 
   ngOnInit(): void {
+
+    this.view = localStorage.getItem("bstly.servicesView") || 'grid';
+
     this.serviceService.services().subscribe((data: Array<any>) => {
       let that = this;
       that.baseServices = [];
@@ -32,4 +36,8 @@ export class ServicesComponent implements OnInit {
     })
   }
 
+  updateView(): void {
+    localStorage.setItem("bstly.servicesView", this.view);
+  }
+
 }

src/app/ui/servicesgrid/servicesgrid.component.html

@@ -0,0 +1,31 @@
+<div fxLayout="row wrap" fxLayoutGap="24px grid">
+    <div fxFlex="33%" fxFlex.sm="50%" fxFlex.xs="100%" *ngFor="let service of services">
+        <mat-card>
+            <a *ngIf="service.url" href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'"
+                color="accent">
+                <mat-card-header>
+                    <mat-icon mat-card-avatar>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
+                    <mat-card-title> <strong>{{'services.' + service.name + '.title' | i18n}}</strong>
+                        <mat-icon *ngIf="!service.sameSite" inline="true">
+                            open_in_new</mat-icon>
+                    </mat-card-title>
+                    <mat-card-subtitle>{{'services.' + service.name + '.subtitle' | i18n}}</mat-card-subtitle>
+                </mat-card-header>
+            </a>
+
+            <mat-card-header *ngIf="!service.url">
+                <mat-icon mat-card-avatar>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
+                <mat-card-title> <strong>{{'services.' + service.name + '.title' | i18n}}</strong>
+                </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>
+            </mat-card-actions>
+        </mat-card>
+    </div>
+</div>

src/app/ui/servicesgrid/servicesgrid.component.scss

@@ -0,0 +1,22 @@
+@import '../../../variables.scss';
+
+mat-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+
+    mat-card-title {
+      color: $accent;
+    }
+  }
+
+  mat-card-content {
+    flex-grow: 1;
+    overflow: auto;
+  }
+
+}

src/app/ui/servicesgrid/servicesgrid.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Sort } from '@angular/material/sort';
+import { I18nService } from '../../services/i18n.service';
+
+@Component({
+  selector: 'app-services-grid',
+  templateUrl: './servicesgrid.component.html',
+  styleUrls: [ './servicesgrid.component.scss' ]
+})
+export class ServicesGridComponent implements OnInit {
+
+  @Input() services;
+
+  constructor(private i18n: I18nService) { }
+
+  ngOnInit(): void {
+    this.sortData({ "active": "name", "direction": "asc" });
+  }
+
+  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);
+  }
+}

src/environments/environment.ts

@@ -4,8 +4,8 @@
 
 export const environment = {
   production: false,
-  // apiUrl : 'http://localhost:9000',
-  apiUrl : 'https://api.bstly.lh8.de',
+  apiUrl : 'http://localhost:9000',
+  //apiUrl : 'https://api.bstly.lh8.de',
 };
 
 /*