diff options
Diffstat (limited to 'src/app/modules/app-starter')
5 files changed, 274 insertions, 0 deletions
diff --git a/src/app/modules/app-starter/app-starter-routing.module.ts b/src/app/modules/app-starter/app-starter-routing.module.ts new file mode 100644 index 0000000..6696d3a --- /dev/null +++ b/src/app/modules/app-starter/app-starter-routing.module.ts @@ -0,0 +1,31 @@ +/* + * Copyright (c) 2022. Deutsche Telekom AG + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { AppStarterComponent } from './app-starter.component'; +import { AuthGuard } from '../../guards/auth.guard'; + +const routes: Routes = [{ path: '', component: AppStarterComponent, canActivate: [AuthGuard] }]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class AppStarterRoutingModule {} diff --git a/src/app/modules/app-starter/app-starter.component.css b/src/app/modules/app-starter/app-starter.component.css new file mode 100644 index 0000000..8ec276c --- /dev/null +++ b/src/app/modules/app-starter/app-starter.component.css @@ -0,0 +1,122 @@ +/* + * Copyright (c) 2022. Deutsche Telekom AG + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + +.card-img-top { + width: 60%; + height: 5vw; + object-fit: contain; +} + +.card-deck > div { + display: flex; + flex: 1 0 0; + flex-direction: column; +} + +.card-deck > div:not(:last-child) { + margin-right: 15px; +} + +.card-deck { + width: 90%; + margin-left: 2%; +} + +.card-deck > div:not(:first-child) { + margin-left: 15px; +} + +.my-group-title { + color: var(--primary); +} + +.card { + border-radius: 20px; + cursor: pointer; + transition: 0.4s; + min-width: 200px; + max-width: 200px; + min-height: 250px; + max-height: 250px; + text-align: center; + margin-right: 2.25rem; +} + +.card-body { + padding-bottom: 0; +} + +.card-title { + min-height: 87px; + font-size: 14px; +} + +/* Works together with bootstraps responsive image class +https://stackoverflow.com/questions/53721711/how-to-set-responsive-images-max-width-bootstrap-4#53723494 +*/ +.img-max { + max-width: 115px; + width: 100%; +} + +.card:hover { + transform: scale(1.1, 1.1); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.disabled-card:hover { + transform: none !important; + box-shadow: none !important; + transition: none !important; +} + +a, +a:hover { + color: #262626; + text-decoration: none; +} + +a:hover { + cursor: pointer; +} + +.nav-tabs, +.nav-links { + border-bottom: 1px solid #b2b2b2; +} + +.nav-link { + background-color: transparent; +} +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: var(--primary); + background-color: #fff; + border-color: #b2b2b2 #b2b2b2 #fff; +} + +.nav-link:focus { + border-style: none; +} + +/* I will leave this for future purpose in case we will have disabled tiles in the Portal */ +/* .disabled-tiles { + opacity: 0.5; + cursor: not-allowed !important; +} */ diff --git a/src/app/modules/app-starter/app-starter.component.html b/src/app/modules/app-starter/app-starter.component.html new file mode 100644 index 0000000..aae2bf3 --- /dev/null +++ b/src/app/modules/app-starter/app-starter.component.html @@ -0,0 +1,47 @@ +<!-- + ~ Copyright (c) 2022. Deutsche Telekom AG + ~ + ~ Licensed under the Apache License, Version 2.0 (the "License"); + ~ you may not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~ + ~ SPDX-License-Identifier: Apache-2.0 + --> + + +<app-breadcrumb> + <app-breadcrumb-item> + <a [routerLink]="['/dashboard']">{{ 'layout.menu.items.home' | translate }}</a> + </app-breadcrumb-item> + <app-breadcrumb-item> + <span aria-current="page">{{ 'appStarter.title' | translate }}</span> + </app-breadcrumb-item> +</app-breadcrumb> +<h2>{{ 'appStarter.title' | translate }}</h2> +<hr /> +<div class="d-flex flex-wrap cards my-5"> + <ng-container *ngIf="tiles$ | async as tiles"> + <div class="card mb-5 qa_tiles_wrapper" *ngFor="let tile of tiles" [ngbTooltip]="'appStarter.tiles.tooltips.enum.' + tile.id | translate"> + <a class="card-block stretched-link text-decoration-none my-3 qa_tiles_not_disabled" [href]="tile.redirectUrl" target="_blank"> + <img + src="assets/images/tiles/{{ tile.imageUrl }}" + class="img-fluid img-max rounded my-2 qa_tiles_not_disabled_img" + alt="{{ tile.imageAltText }}" + /> + <div class="card-body qa_tiles_not_disabled_body"> + <p class="card-title qa_tiles_not_disabled_title">{{ tile.title }}</p> + </div> + </a> + </div> + </ng-container> +</div> + + diff --git a/src/app/modules/app-starter/app-starter.component.ts b/src/app/modules/app-starter/app-starter.component.ts new file mode 100644 index 0000000..c08467f --- /dev/null +++ b/src/app/modules/app-starter/app-starter.component.ts @@ -0,0 +1,45 @@ +/* + * Copyright (c) 2022. Deutsche Telekom AG + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + +import { Component, OnInit } from '@angular/core'; +import { map } from 'rxjs/operators'; +import { environment } from 'src/environments/environment'; +import { from, Observable, of } from 'rxjs'; +import { Tile } from 'src/app/model/tile'; + +@Component({ + selector: 'app-app-starter', + templateUrl: './app-starter.component.html', + styleUrls: ['./app-starter.component.css'], +}) +export class AppStarterComponent implements OnInit { + //I will leave this for future purpose in case we will have disabled tiles in the Portal + // disabledTiles:number[] = [11,12,13] + + private readonly hostname = environment.hostname.replace('portal-ui-', ''); + + public readonly tiles$: Observable<Tile[]> = from(fetch('/assets/tiles/tiles.json?t=' + Date.now()).then(rsp => rsp.json())) + .pipe( + map(tiles => (tiles.items as Tile[])), + map(tiles => tiles.map(tile => ({ ...tile, redirectUrl: tile.redirectUrl.replace(/HOSTNAME/i, this.hostname) }))), + ); + + + ngOnInit(): void {} +} diff --git a/src/app/modules/app-starter/app-starter.module.ts b/src/app/modules/app-starter/app-starter.module.ts new file mode 100644 index 0000000..ebbd0ce --- /dev/null +++ b/src/app/modules/app-starter/app-starter.module.ts @@ -0,0 +1,29 @@ +/* + * Copyright (c) 2022. Deutsche Telekom AG + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + +import { NgModule } from '@angular/core'; +import { AppStarterComponent } from './app-starter.component'; +import { AppStarterRoutingModule } from './app-starter-routing.module'; +import { SharedModule } from '../../shared.module'; + +@NgModule({ + declarations: [AppStarterComponent], + imports: [AppStarterRoutingModule, SharedModule], +}) +export class AppStarterModule {} |