Merge branch 'FE-8-Containerization-and-refactoring' into 'main'

FE-9: Containerization and Refactoring

Closes #9

See merge request !9

Dockerfile

+FROM node:22 AS build-stage
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+RUN npm install -g @angular/cli
+
+CMD ["ng", "serve", "--host", "0.0.0.0"]

docker-compose.yml

+services:
+  miars-ng:
+    build: .
+    volumes:
+      - .:/app
+      - node_modules:/app/node_modules
+    ports:
+      - "4200:4200"
+    command: ["npm", "run", "start", "--", "--host", "0.0.0.0", "--poll=2000"]
+
+volumes:
+  node_modules:

src/app/app.config.ts

 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withHashLocation } from '@angular/router';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { providePrimeNG } from 'primeng/config';
 
@@ -10,7 +10,7 @@ import { provideHttpClient, withInterceptors } from '@angular/common/http';
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
+    provideRouter(routes, withHashLocation()),
     provideAnimationsAsync(),
     provideHttpClient(withInterceptors([MockInterceptor])),
     providePrimeNG(),

src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.html

@@ -17,4 +17,4 @@
   </div>
 </div>
 
-<p-chart type="line" [data]="data()" [options]="options" />
+<p-chart type="line" [data]="data()" [options]="options" [height]="'600px'" />

src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.html

@@ -17,4 +17,4 @@
   </div>
 </div>
 
-<p-chart type="line" [data]="data()" [options]="options" />
+<p-chart type="line" [data]="data()" [options]="options" [height]="'600px'" />

src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.html

@@ -17,4 +17,4 @@
   </div>
 </div>
 
-<p-chart type="line" [data]="data()" [options]="options" />
+<p-chart type="line" [data]="data()" [options]="options" [height]="'600px'" />

src/app/components/dashboard-statistics/dashboard-statistics.component.scss

@@ -17,7 +17,7 @@
     flex-direction: column;
     justify-content: space-between;
     font-weight: 500;
-    font-size: map.get(vars.$text, 'lg');
+    padding: map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'xxxl');
 
     &__table {
       &__time {
@@ -40,12 +40,12 @@
           border-top: 1px solid map.get(vars.$grey, 30);
         }
 
-        th, td {
+        th,
+        td {
           width: 20%;
           padding: map.get(vars.$spacing, 'sm');
           text-align: left;
         }
-
       }
 
       &__protocols {
@@ -56,7 +56,8 @@
         margin-top: map.get(vars.$text, 'lg');
         width: 100%;
 
-        th, td {
+        th,
+        td {
           width: 20%;
           padding: map.get(vars.$spacing, 'sm');
           text-align: left;
@@ -75,12 +76,12 @@
         margin-top: map.get(vars.$spacing, 'lg');
         width: 100%;
 
-
         tbody td {
           border-top: 1px solid map.get(vars.$grey, 30);
         }
 
-        th, td {
+        th,
+        td {
           width: 25%;
           padding: map.get(vars.$spacing, 'sm');
           text-align: left;

src/app/components/dashboard/dashboard.component.html

@@ -33,7 +33,4 @@
       }
     </mat-expansion-panel>
   </mat-accordion>
-
-  <!--@todo: find other way to fix scrolling to the top of the page-->
-  <p-skeleton height="300px" />
 </app-page-wrapper>

src/app/components/dashboard/dashboard.component.ts

@@ -15,7 +15,6 @@ import { DashboardSettingsComponent } from '../dashboard-settings/dashboard-sett
 import { ConfigurationApi } from '../../api/configuration.api';
 import { SettingsService } from '../../service/settings.service';
 import { AsyncPipe } from '@angular/common';
-import { Skeleton } from 'primeng/skeleton';
 
 @Component({
   selector: 'app-dashboard',
@@ -27,7 +26,6 @@ import { Skeleton } from 'primeng/skeleton';
     DashboardStatisticsComponent,
     DashboardChartsComponent,
     AsyncPipe,
-    Skeleton,
   ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss',

src/app/components/header/header.component.html

@@ -11,11 +11,4 @@
       Help
     </button>
   </div>
-  <mat-divider [vertical]="true"></mat-divider>
-  <div class="button-container">
-    <button mat-button>
-      <mat-icon>account_circle</mat-icon>
-      Profile
-    </button>
-  </div>
 </div>

src/app/components/page-wrapper/page-wrapper.component.html

-<div class="page-header">
-  <div class="page-header__title">
-    <ng-content select="[title]"></ng-content>
+<div class="page-wrapper">
+  <div class="page-header">
+    <div class="page-header__title">
+      <ng-content select="[title]"></ng-content>
+    </div>
+    <ng-content select="[actions]"></ng-content>
+  </div>
+  <mat-divider />
+  <div class="page-body">
+    <ng-content />
   </div>
-  <ng-content select="[actions]"></ng-content>
 </div>
-<mat-divider />
-<div class="page-body">
-  <ng-content />
+<div class="copyright">
+  Copyright &copy; 2025
+  <a href="https://pg.edu.pl/">Gdańsk University of Technology</a>
 </div>

src/app/components/page-wrapper/page-wrapper.component.scss

 @use '../../../vars';
 @use 'sass:map';
 
-:host {
+.page-wrapper {
   display: block;
   min-height: calc(100vh - 2 * vars.$headerHeight);
 
-  margin: map.get(vars.$spacing, 'xl');
+  margin: map.get(vars.$spacing, 'xl') map.get(vars.$spacing, 'xl')
+    map.get(vars.$spacing, 'none');
   background-color: map.get(vars.$grey, 0);
   border-radius: map.get(vars.$radius, 'xs');
 
@@ -28,3 +29,8 @@
     }
   }
 }
+
+.copyright {
+  margin: map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'xl');
+  text-align: right;
+}

src/app/components/sidenav/sidenav.component.html

@@ -5,7 +5,7 @@
         <div
           class="button-container"
           [ngClass]="{
-            'button-container__active': router.url === '/configuration',
+            'button-container__active': currentPage() === '/configuration',
           }"
           routerLink="/configuration">
           <mat-icon>settings</mat-icon>
@@ -14,7 +14,7 @@
         <div
           class="button-container"
           [ngClass]="{
-            'button-container__active': router.url === '/dashboard',
+            'button-container__active': currentPage() === '/dashboard',
           }"
           routerLink="/dashboard">
           <mat-icon>trending_up</mat-icon>

src/app/components/sidenav/sidenav.component.ts

@@ -37,7 +37,7 @@ export class SidenavComponent {
     afterNextRender(() => {
       this.router.events.subscribe(event => {
         if (event instanceof NavigationEnd) {
-          this.currentPage.set(event.url);
+          this.currentPage.set(event.urlAfterRedirects);
         }
       });
       this.drawer()?.open();