Merge pull request #3 from cardinal-app/feature/e2e-demo/main

Feature/e2e demo/main

Dockerfile

@@ -0,0 +1,6 @@
+FROM node:alpine
+WORKDIR /usr/src/app
+COPY . /usr/src/app
+RUN npm install -g @angular/cli
+RUN npm install
+CMD ["ng", "serve", "--host", "0.0.0.0"]

package.json

@@ -64,4 +64,4 @@
     "tslib": "^2.6.2",
     "typescript": "~5.2.2"
   }
-}
+}

src/app/app.component.html

@@ -18,15 +18,45 @@
         <p>Home</p>
       </a>
     </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faPencil"></fa-icon>
+        <p>Author</p>
+      </a>
+    </div>
     <div class="nav-item">
       <a routerLink="/fit-track" routerLinkActive="active">
         <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
         <p>Fit Track</p>
       </a>
     </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faCoins"></fa-icon>
+        <p>Finance</p>
+      </a>
+    </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faCameraRetro"></fa-icon>
+        <p>Retro</p>
+      </a>
+    </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faList"></fa-icon>
+        <p>Todo</p>
+      </a>
+    </div>
+    <div class="nav-item">
+      <a routerLink="/pending" routerLinkActive="active">
+        <fa-icon class="icon" [icon]="faHammer"></fa-icon>
+        <p>Work Log</p>
+      </a>
+    </div>
   </nav>
-  <div class="user">
-    <img id="avatar" src="/assets/avatar.png">
+  <div class="user" (click)="logout()">
+    <img id="avatar" alt="avatar" src="/assets/avatar.png">
   </div>
 }
 <footer><p>Jrsmth 2024</p></footer>

src/app/app.component.scss

@@ -44,7 +44,7 @@ nav {
 
     a {
       text-decoration: none;
-      color: $white50;
+      color: $text-dark;
 
       &.active {
         color: $mirage;
@@ -75,7 +75,7 @@ nav {
     p {
       font-size: 9px;
       margin-top: .25rem;
-      color: $white50;
+      color: $text-dark;
     }
 
     &:hover {

src/app/app.component.ts

@@ -4,16 +4,9 @@ import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/route
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { HomeComponent } from "./structure/home/home.component";
 import {
-  faCog,
-  faHouse,
-  faPersonRunning,
-  faQuestion,
-  faSearch,
-  faUser,
-  faX,
-  faY,
-  faBell
+  faCog, faHouse, faPersonRunning, faQuestion, faSearch, faBell, faPencil, faCoins, faList, faHammer, faCameraRetro
 } from "@fortawesome/free-solid-svg-icons";
+import {AuthenticationService} from "./core/service/auth/authentication-service";
 
 @Component({
   selector: 'app-root',
@@ -28,13 +21,19 @@ export class AppComponent {
   protected readonly faQuestion = faQuestion;
   protected readonly faBell = faBell;
   protected readonly faSearch = faSearch;
-
-  protected readonly faUser = faUser;
   protected readonly faPersonRunning = faPersonRunning;
   protected readonly faHouse = faHouse;
-  protected readonly faX = faX;
-  protected readonly faY = faY;
+  protected readonly faPencil = faPencil;
+  protected readonly faCoins = faCoins;
+  protected readonly faList = faList;
+  protected readonly faHammer = faHammer;
+  protected readonly faCameraRetro = faCameraRetro;
+
+  constructor(public router: Router, private authService: AuthenticationService) {}
 
-  constructor(public router: Router) {}
+  logout(): void {
+    this.authService.removeToken();
+    this.router.navigate(['/auth']);
+  }
 
 }

src/app/core/component/accordion/accordion.component.html

@@ -5,9 +5,9 @@ <h2 [class.expanded]="expanded">
       {{ title }}
     </h2>
   </div>
-  <div class="accordion-content">
     @if (expanded) {
-      <ng-content></ng-content>
+      <div class="accordion-content">
+        <ng-content></ng-content>
+      </div>
     }
-  </div>
 </section>

src/app/core/component/accordion/accordion.component.scss

@@ -5,15 +5,17 @@ section {
 
   .accordion-header {
     cursor: pointer;
-    padding-top: 2rem;
     border-top: 1px solid $pearl25;
+    padding-top: 2rem;
+    margin-bottom: 2rem;
 
     h2 {
       text-transform: uppercase;
-      font-size: 1.25rem;
+      font-size: 18px;
       font-weight: $semi-bold;
       letter-spacing: 2px;
-      color: $pearl;
+      color: $walnut50;
+      transition: .5s;
 
       &.expanded {
         color: $walnut;
@@ -22,7 +24,7 @@ section {
   }
 
   .accordion-content {
-    margin-top: 2rem;
+    animation: close .5s;
   }
 
 }

src/app/core/component/container/container.component.html

@@ -1,5 +1,5 @@
 <section>
-  <div class="row">
+  <div class="row" [class.short]="short">
     <div class="column">
       <ng-content></ng-content>
     </div>

src/app/core/component/container/container.component.scss

@@ -1,8 +1,10 @@
+@import "base";
+
 section {
-  margin: 0 8rem;
+  margin: 0 $wallet-gutter;
 
   .row {
-    margin-top: 4rem;
+    margin-bottom: 4rem;
   }
 
   .column {

src/app/core/component/container/container.component.ts

@@ -12,5 +12,6 @@ export class ContainerComponent {
 
   @Input() rows: string = '1';
   @Input() columns: string = '1';
+  @Input() short: boolean = false;
 
 }

src/app/core/component/pill/pill.component.html

@@ -0,0 +1,4 @@
+<div>
+  <fa-icon class="icon" [icon]="icon"></fa-icon>
+  <span>{{ value }}</span>
+</div>

src/app/core/component/pill/pill.component.scss

@@ -0,0 +1,31 @@
+@import "base";
+
+div {
+  display: flex;
+  justify-content: left;
+  gap: .75rem;
+  background: -webkit-linear-gradient(90deg, $denim 0%, $havelock 100%);
+  padding: .375rem 2rem .375rem .375rem;
+  border-radius: 2rem;
+  width: max-content;
+
+  .icon {
+    background-color: $white;
+    border-radius: 50%;
+    height: 2.5rem;
+    aspect-ratio: 1/1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    color: color-mix(in srgb, $denim 50%, $havelock);
+  }
+
+  span {
+    color: $white;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 2px;
+    line-height: 2.5rem;
+  }
+}

src/app/core/component/pill/pill.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {FaIconComponent} from "@fortawesome/angular-fontawesome";
+import {IconDefinition} from "@fortawesome/free-regular-svg-icons";
+import {faCircle} from "@fortawesome/free-solid-svg-icons";
+
+@Component({
+  selector: 'pill',
+  standalone: true,
+  imports: [CommonModule, FaIconComponent],
+  templateUrl: './pill.component.html',
+  styleUrl: './pill.component.scss'
+})
+export class PillComponent {
+
+  @Input() icon: IconDefinition = faCircle;
+  @Input() value: string = '';
+  @Input() tooltip: string = '';
+  @Input() small: boolean = false;
+  @Input() withoutIcon: boolean = true;
+
+  protected readonly default = faCircle;
+
+}

src/app/core/component/side-bar/side-bar.component.html

@@ -1,3 +1,14 @@
 <section>
   <h1>{{ title }}</h1>
+  <hr>
+  <nav>
+    <p (click)="openAddWeekDialog()">Add Week</p>
+    <p>Import</p>
+    <p>Export</p>
+  </nav>
+  <hr>
+  <nav>
+    <p>Training</p>
+    <p>Config</p>
+  </nav>
 </section>

src/app/core/component/side-bar/side-bar.component.scss

@@ -3,7 +3,7 @@
 section {
   height: 100%;
   width: 20rem;
-  background: linear-gradient(0deg, $black 20%, $valencia50 50%, $zest75 90%, $zest 100%);
+  background: linear-gradient(0deg, $valencia50 0%, $valencia 50%, $zest 100%);
   border-radius: 3.5rem 0 0 0;
   position: absolute;
   top: 0;
@@ -12,11 +12,37 @@ section {
   z-index: 100;
 
   h1 {
-    background: -webkit-linear-gradient(90deg, $white00 0%, $white 30%, $white 70%, $white00 100%);
+    background: -webkit-linear-gradient(90deg, $white00 0%, $white 15%, $white 85%, $white00 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 1.25rem;
-    margin: 2.75rem 3rem;
-    letter-spacing: 1px;
+    margin: 3rem 3rem 2rem 3rem;
+    letter-spacing: 2px;
+    font-weight: $semi-bold;
+  }
+
+  hr {
+    color: $white;
+    opacity: .25;
+    width: 75%;
+    margin: auto;
+  }
+
+  nav {
+    margin: 2rem 3rem;
+
+    p {
+      color: $robin;
+      cursor: pointer;
+      transition: .1s;
+      margin: 1.5rem 0;
+      font-weight: $bold;
+      font-size: 14px;
+      opacity: .85;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
 }

src/app/core/component/side-bar/side-bar.component.ts

@@ -1,5 +1,8 @@
-import { Component, Input } from "@angular/core";
+import {Component, EventEmitter, Input, Output} from "@angular/core";
 import { CommonModule } from "@angular/common";
+import {Week} from "../../model/fit-track/week";
+import {MatDialog} from "@angular/material/dialog";
+import {AddWeekComponent} from "../../../structure/fit-track/admin/add-week/add-week.component";
 
 @Component({
   selector: 'side-bar',
@@ -12,4 +15,20 @@ export class SideBarComponent {
 
   @Input() title: string = '';
 
+  @Output() newWeek = new EventEmitter<Week>();
+
+  constructor(private dialog: MatDialog) {
+  }
+
+  openAddWeekDialog() {
+    const dialogRef = this.dialog.open(AddWeekComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(`Dialog result: ${result}`);
+      // pass back the week...
+
+      this.newWeek.emit(result);
+    });
+  }
+
 }

src/app/core/guard/auth-guard.ts

@@ -8,7 +8,7 @@ export class AuthGuard {
   constructor (private authService: AuthenticationService, private router: Router) {}
 
   canActivate(): boolean {
-    const userAuthenticated = this.authService.hasValidAuthToken();
+    const userAuthenticated = this.authService.hasValidToken();
 
     if (!userAuthenticated) {
       this.router.navigate(

src/app/core/service/auth/authentication-service.ts

@@ -8,8 +8,12 @@ export class AuthenticationService {
 
   constructor(private localStorage: LocalStorageService) {}
 
-  hasValidAuthToken() {
+  hasValidToken() {
     return !!this.localStorage.get('authToken');
   }
 
+  removeToken(): void {
+    this.localStorage.remove('authToken');
+  }
+
 }

src/app/core/service/storage/local-storage-service.ts

@@ -17,4 +17,8 @@ export class LocalStorageService {
     }
   }
 
+  remove(key: string): void {
+    localStorage.removeItem(key);
+  }
+
 }