diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..dc6e3fd9e650892608430b5988c0e4f3bf5da859
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,11 @@
+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"]
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000000000000000000000000000000000000..0dd09cdb1db1c1dbb005b924b4523907b6fd4acd
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,12 @@
+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:
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 40e49cbd7de244f64cdea9137b81fb9edfb9e497..66590473c12eae5bf31a2f2c436ad490bb562066 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,5 +1,5 @@
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(),
diff --git a/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.html b/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.html
index ce1f83fe6455c4803838efe6afa49606b4d2fa1a..73abc52ac24132fb2b7a19811b93f3b87df59b40 100644
--- a/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.html
+++ b/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'" />
diff --git a/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.html b/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.html
index ce1f83fe6455c4803838efe6afa49606b4d2fa1a..73abc52ac24132fb2b7a19811b93f3b87df59b40 100644
--- a/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.html
+++ b/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'" />
diff --git a/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.html b/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.html
index ce1f83fe6455c4803838efe6afa49606b4d2fa1a..73abc52ac24132fb2b7a19811b93f3b87df59b40 100644
--- a/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.html
+++ b/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'" />
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.scss b/src/app/components/dashboard-statistics/dashboard-statistics.component.scss
index 6c25990eaae01dad2680ea01405b7a3d1d7c40ce..38969298bd36297a37040ed32539d56727a18fe9 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.scss
+++ b/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;
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index ee374a8e181499a0e5c307eae156665632ecc1dd..53187e701d12d4bc99664886939615ffa2e4678a 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/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>
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index 9d0e3807214bf517cf012cb831c731eb362b2063..413e8c3d3c28fc0e903ef3b0d252323a977c9599 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/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',
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 156bfd96874760cb331ec90fce313f1f133af30a..f536f99c8f46c1df1a01b8b58fb18b5d92579729 100644
--- a/src/app/components/header/header.component.html
+++ b/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>
diff --git a/src/app/components/page-wrapper/page-wrapper.component.html b/src/app/components/page-wrapper/page-wrapper.component.html
index fae4904e34fac12ee085461926655beb2b7366aa..bce274edae264e685965ca48f11e14d37f55632e 100644
--- a/src/app/components/page-wrapper/page-wrapper.component.html
+++ b/src/app/components/page-wrapper/page-wrapper.component.html
@@ -1,10 +1,16 @@
-<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 © 2025
+ <a href="https://pg.edu.pl/">GdaĹsk University of Technology</a>
</div>
diff --git a/src/app/components/page-wrapper/page-wrapper.component.scss b/src/app/components/page-wrapper/page-wrapper.component.scss
index 4d82ce4e970f23b4a74a7ad9e485e5aa2d3e8dd5..25d0cf1b822973a42e7543b363fd30cc2fff01b3 100644
--- a/src/app/components/page-wrapper/page-wrapper.component.scss
+++ b/src/app/components/page-wrapper/page-wrapper.component.scss
@@ -1,11 +1,12 @@
@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;
+}
diff --git a/src/app/components/sidenav/sidenav.component.html b/src/app/components/sidenav/sidenav.component.html
index a5b543efb4d853e6602a76badfab61347cf9c045..e7659c42538bd9d8942e0f24f5d65ae0f620c813 100644
--- a/src/app/components/sidenav/sidenav.component.html
+++ b/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>
diff --git a/src/app/components/sidenav/sidenav.component.ts b/src/app/components/sidenav/sidenav.component.ts
index dc9691e497cfa41019a7a9e8e73d4208598c0ed8..957234d80884347d0565c36737e6e6d0258ec66e 100644
--- a/src/app/components/sidenav/sidenav.component.ts
+++ b/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();