diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1d9799e..afa1bcc 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/pages/services/services.component.html b/src/app/pages/services/services.component.html index cfe56d5..b3b7dc7 100644 --- a/src/app/pages/services/services.component.html +++ b/src/app/pages/services/services.component.html @@ -1,13 +1,39 @@ -

{{'services' | i18n}}

+
+

{{'services' | i18n}}

+ + + + view_module + + + toc + + + +

{{'services.empty' | i18n}}

- +
+ +
+
+

{{'services.category.' + item.key | i18n}}

-
-

{{'services.category.' + item.key | i18n}}

+ +
+
+
- +
+ +
+
+

{{'services.category.' + item.key | i18n}}

+ + +
+
\ No newline at end of file diff --git a/src/app/pages/services/services.component.scss b/src/app/pages/services/services.component.scss index 6479517..1664270 100644 --- a/src/app/pages/services/services.component.scss +++ b/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; + } } diff --git a/src/app/pages/services/services.component.ts b/src/app/pages/services/services.component.ts index d6d1b79..2a6255a 100644 --- a/src/app/pages/services/services.component.ts +++ b/src/app/pages/services/services.component.ts @@ -12,10 +12,14 @@ export class ServicesComponent implements OnInit { baseServices: Array; 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) => { let that = this; that.baseServices = []; @@ -32,4 +36,8 @@ export class ServicesComponent implements OnInit { }) } + updateView(): void { + localStorage.setItem("bstly.servicesView", this.view); + } + } diff --git a/src/app/ui/servicesgrid/servicesgrid.component.html b/src/app/ui/servicesgrid/servicesgrid.component.html new file mode 100644 index 0000000..15ef990 --- /dev/null +++ b/src/app/ui/servicesgrid/servicesgrid.component.html @@ -0,0 +1,31 @@ +
+
+ + + + {{'services.' + service.name + '.icon' | i18n}} + {{'services.' + service.name + '.title' | i18n}} + + open_in_new + + {{'services.' + service.name + '.subtitle' | i18n}} + + + + + {{'services.' + service.name + '.icon' | i18n}} + {{'services.' + service.name + '.title' | i18n}} + + {{'services.' + service.name + '.subtitle' | i18n}} + + +

+ {{ 'services.' + service.name + '.text' | i18n}} +

+ + + + +
+
\ No newline at end of file diff --git a/src/app/ui/servicesgrid/servicesgrid.component.scss b/src/app/ui/servicesgrid/servicesgrid.component.scss new file mode 100644 index 0000000..7abeef1 --- /dev/null +++ b/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; + } + +} diff --git a/src/app/ui/servicesgrid/servicesgrid.component.ts b/src/app/ui/servicesgrid/servicesgrid.component.ts new file mode 100644 index 0000000..93d6066 --- /dev/null +++ b/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); + } +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index d263ddc..d3ac5fe 100644 --- a/src/environments/environment.ts +++ b/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', }; /*