Implement tab-switch

puzzle · Apr 5, 2024 · 77f7894 · 77f7894
1 parent 5928ce6
commit 77f7894
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 9 deletions.
diff --git a/frontend/src/app/overview/overview.component.html b/frontend/src/app/overview/overview.component.html
@@ -3,14 +3,46 @@
 <app-application-top-bar [hasAdminAccess]="hasAdminAccess"></app-application-top-bar>
 <app-application-banner id="bannerComponent"></app-application-banner>
 <div id="overview" class="overviewContainer px-sm-4" [ngStyle]="{ 'padding-top.px': overviewPadding | async }">
-  <app-team
-    [hasAdminAccess]="hasAdminAccess"
-    *ngFor="let overviewEntity of overviewEntities$ | async; trackBy: trackByFn"
-    [overviewEntity]="overviewEntity"
-  >
-  </app-team>
-  <div *ngIf="(overviewEntities$ | async)?.length == 0" class="d-flex align-items-center flex-column pt-5 gap-5">
-    <p>Kein Team ausgewählt</p>
-    <img src="assets/images/puzzle-p.svg" alt="" width="242" class="puzzle-logo" />
+  <div class="mt-3">
+    <div class="d-flex">
+      <div
+        [style.cursor]="'pointer'"
+        [ngClass]="{ active: isOverview, 'non-active': !isOverview }"
+        class="overview tab-title tabfocus"
+        (click)="switchPage('overview')"
+        (keydown.enter)="switchPage('overview')"
+        tabindex="0"
+      >
+        Overview
+      </div>
+      <div
+        [style.cursor]="'pointer'"
+        [ngClass]="{ active: !isOverview, 'non-active': isOverview }"
+        class="diagram tab-title tabfocus"
+        (click)="switchPage('diagram')"
+        (keydown.enter)="switchPage('diagram')"
+        tabindex="0"
+      >
+        Diagramm
+      </div>
+      <div class="buffer tab-title flex-fill"></div>
+    </div>
   </div>
+
+  <div *ngIf="isOverview; else diagram">
+    <app-team
+      [hasAdminAccess]="hasAdminAccess"
+      *ngFor="let overviewEntity of overviewEntities$ | async; trackBy: trackByFn"
+      [overviewEntity]="overviewEntity"
+    >
+    </app-team>
+    <div *ngIf="(overviewEntities$ | async)?.length == 0" class="d-flex align-items-center flex-column pt-5 gap-5">
+      <p>Kein Team ausgewählt</p>
+      <img src="assets/images/puzzle-p.svg" alt="" width="242" class="puzzle-logo" />
+    </div>
+  </div>
+
+  <ng-template #diagram>
+    <h1>Test</h1>
+  </ng-template>
 </div>
diff --git a/frontend/src/app/overview/overview.component.scss b/frontend/src/app/overview/overview.component.scss
@@ -13,3 +13,46 @@
 .puzzle-logo {
   filter: invert(38%) sepia(31%) saturate(216%) hue-rotate(167deg) brightness(96%) contrast(85%);
 }
+
+.active {
+  border-left: #909090 1px solid;
+  border-top: #909090 1px solid;
+  border-right: #909090 1px solid;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  background: white;
+  color: black;
+}
+
+.non-active {
+  color: #9c9c9c;
+  border-bottom: #909090 1px solid;
+}
+
+.tab-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 39px;
+  margin-bottom: 16px;
+}
+
+.buffer {
+  border-bottom: #909090 1px solid;
+}
+
+.tabfocus {
+  outline: none;
+  &:focus-visible {
+    border-radius: 5px;
+    border: 2px solid #1a4e83;
+  }
+}
+
+.overview {
+  width: 87px;
+}
+
+.diagram {
+  width: 100px;
+}
diff --git a/frontend/src/app/overview/overview.component.ts b/frontend/src/app/overview/overview.component.ts
@@ -18,6 +18,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
   private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);
   hasAdminAccess: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
   overviewPadding: Subject<number> = new Subject();
+  isOverview: boolean = true;
 
   constructor(
     private overviewService: OverviewService,
@@ -81,4 +82,13 @@ export class OverviewComponent implements OnInit, OnDestroy {
     this.destroyed$.next(true);
     this.destroyed$.complete();
   }
+
+  switchPage(input: string) {
+    if (input == 'diagram') {
+      this.isOverview = false;
+    } else {
+      this.isOverview = true;
+      this.loadOverviewWithParams();
+    }
+  }
 }