From f252abd963cbab4220c5374c4c1ea67fbeafb376 Mon Sep 17 00:00:00 2001
From: Ruslan Rabadanov <ruslanrabadanov2101@gmail.com>
Date: Thu, 27 Mar 2025 22:43:01 +0100
Subject: [PATCH] FE-8 Containerize app with docker compose; update styles of
dashboard page
---
Dockerfile | 11 ++++++++++
docker-compose.yml | 12 +++++++++++
.../dashboard-chart-frames.component.html | 2 +-
...oard-chart-information-rate.component.html | 2 +-
.../dashboard-chart-protocol.component.html | 2 +-
.../dashboard-statistics.component.scss | 13 ++++++------
.../dashboard/dashboard.component.html | 3 ---
.../dashboard/dashboard.component.ts | 2 --
.../components/header/header.component.html | 7 -------
.../page-wrapper/page-wrapper.component.html | 20 ++++++++++++-------
.../page-wrapper/page-wrapper.component.scss | 10 ++++++++--
11 files changed, 54 insertions(+), 30 deletions(-)
create mode 100644 Dockerfile
create mode 100644 docker-compose.yml
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..dc6e3fd
--- /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 0000000..0dd09cd
--- /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/components/dashboard-chart-frames/dashboard-chart-frames.component.html b/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.html
index ce1f83f..73abc52 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 ce1f83f..73abc52 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 ce1f83f..73abc52 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 6c25990..3896929 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 ee374a8..53187e7 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 9d0e380..413e8c3 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 156bfd9..f536f99 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 fae4904..bce274e 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 4d82ce4..25d0cf1 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;
+}
--
GitLab