diff --git a/angular.json b/angular.json
index 9c8e09fa077eb4e65ad953e82bce5a397e8aa13e..db183f8d7a1f6f93c988433b16fbc935283b6695 100644
--- a/angular.json
+++ b/angular.json
@@ -32,6 +32,7 @@
}
],
"styles": [
+ "@angular/material/prebuilt-themes/rose-red.css",
"src/styles.scss"
],
"scripts": []
@@ -91,6 +92,7 @@
}
],
"styles": [
+ "@angular/material/prebuilt-themes/rose-red.css",
"src/styles.scss"
],
"scripts": []
diff --git a/package-lock.json b/package-lock.json
index a810b37d6808c22879fc4d285757db1333ae7e9a..347cf0590622cf40ad377963bc60d3021a6e6da6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,14 +9,17 @@
"version": "0.0.0",
"dependencies": {
"@angular/animations": "^19.0.0",
+ "@angular/cdk": "^19.1.4",
"@angular/common": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/core": "^19.0.0",
"@angular/forms": "^19.0.0",
+ "@angular/material": "^19.1.4",
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@primeng/themes": "^19.0.6",
+ "primeicons": "^7.0.0",
"primeng": "^19.0.6",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
@@ -424,7 +427,6 @@
"version": "19.1.4",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.1.4.tgz",
"integrity": "sha512-PyvJ1VbYjW8tVnVHvcasiqI9eNWf8EJnr0in1QWnhpSbpVpVpc4yjbgnu2pTrW9mPo/YjV4pF+qs6E97y9mdYQ==",
- "peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -564,6 +566,23 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
+ "node_modules/@angular/material": {
+ "version": "19.1.4",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.1.4.tgz",
+ "integrity": "sha512-bqliTnUnMiTG6Quvk16epiQPZQB0zV/L2ctPinFcP6NhahcQFfahjabUlgMlfBk5qObolJArJr5HCMiOmpOGIQ==",
+ "dependencies": {
+ "tslib": "^2.3.0"
+ },
+ "peerDependencies": {
+ "@angular/animations": "^19.0.0 || ^20.0.0",
+ "@angular/cdk": "19.1.4",
+ "@angular/common": "^19.0.0 || ^20.0.0",
+ "@angular/core": "^19.0.0 || ^20.0.0",
+ "@angular/forms": "^19.0.0 || ^20.0.0",
+ "@angular/platform-browser": "^19.0.0 || ^20.0.0",
+ "rxjs": "^6.5.3 || ^7.4.0"
+ }
+ },
"node_modules/@angular/platform-browser": {
"version": "19.1.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.1.6.tgz",
@@ -10721,6 +10740,11 @@
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
+ "node_modules/primeicons": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+ "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
+ },
"node_modules/primeng": {
"version": "19.0.6",
"resolved": "https://registry.npmjs.org/primeng/-/primeng-19.0.6.tgz",
diff --git a/package.json b/package.json
index 36cb02e797eef8aacecfad8fc9108e1c2bef0612..19bc81ac924236d214f85509e39d04f61c735a4a 100644
--- a/package.json
+++ b/package.json
@@ -11,14 +11,17 @@
"private": true,
"dependencies": {
"@angular/animations": "^19.0.0",
+ "@angular/cdk": "^19.1.4",
"@angular/common": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/core": "^19.0.0",
"@angular/forms": "^19.0.0",
+ "@angular/material": "^19.1.4",
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@primeng/themes": "^19.0.6",
+ "primeicons": "^7.0.0",
"primeng": "^19.0.6",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
diff --git a/public/favicon.ico b/public/favicon.ico
index 57614f9c967596fad0a3989bec2b1deff33034f6..d38132da18bf60cabe76b7fc33d2bcbc51c78e17 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/app/api/configuration.api.ts b/src/app/api/configuration.api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..691912a047e8efae3d3d49be524a18cbdd1b7f82
--- /dev/null
+++ b/src/app/api/configuration.api.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+export const CONFIGURATION_API_URL = '/api/v1/configuration';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class ConfigurationApi {}
diff --git a/src/app/api/dashboard.api.ts b/src/app/api/dashboard.api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f08285d5be8adae1a1350da0cb15e29901dd36e
--- /dev/null
+++ b/src/app/api/dashboard.api.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+export const DASHBOARD_API_URL = '/api/v1/dashboard';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class DashboardApi {}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 36093e1879779624f181733152bb55d71a711d3b..e6c50cb9b60e38108578e04395c564c9bef5a1ea 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,336 +1,5 @@
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<style>
- :host {
- --bright-blue: oklch(51.01% 0.274 263.83);
- --electric-violet: oklch(53.18% 0.28 296.97);
- --french-violet: oklch(47.66% 0.246 305.88);
- --vivid-pink: oklch(69.02% 0.277 332.77);
- --hot-red: oklch(61.42% 0.238 15.34);
- --orange-red: oklch(63.32% 0.24 31.68);
-
- --gray-900: oklch(19.37% 0.006 300.98);
- --gray-700: oklch(36.98% 0.014 302.71);
- --gray-400: oklch(70.9% 0.015 304.04);
-
- --red-to-pink-to-purple-vertical-gradient: linear-gradient(
- 180deg,
- var(--orange-red) 0%,
- var(--vivid-pink) 50%,
- var(--electric-violet) 100%
- );
-
- --red-to-pink-to-purple-horizontal-gradient: linear-gradient(
- 90deg,
- var(--orange-red) 0%,
- var(--vivid-pink) 50%,
- var(--electric-violet) 100%
- );
-
- --pill-accent: var(--bright-blue);
-
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
- "Segoe UI Symbol";
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- h1 {
- font-size: 3.125rem;
- color: var(--gray-900);
- font-weight: 500;
- line-height: 100%;
- letter-spacing: -0.125rem;
- margin: 0;
- font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
- "Segoe UI Symbol";
- }
-
- p {
- margin: 0;
- color: var(--gray-700);
- }
-
- main {
- width: 100%;
- min-height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 1rem;
- box-sizing: inherit;
- position: relative;
- }
-
- .angular-logo {
- max-width: 9.2rem;
- }
-
- .content {
- display: flex;
- justify-content: space-around;
- width: 100%;
- max-width: 700px;
- margin-bottom: 3rem;
- }
-
- .content h1 {
- margin-top: 1.75rem;
- }
-
- .content p {
- margin-top: 1.5rem;
- }
-
- .divider {
- width: 1px;
- background: var(--red-to-pink-to-purple-vertical-gradient);
- margin-inline: 0.5rem;
- }
-
- .pill-group {
- display: flex;
- flex-direction: column;
- align-items: start;
- flex-wrap: wrap;
- gap: 1.25rem;
- }
-
- .pill {
- display: flex;
- align-items: center;
- --pill-accent: var(--bright-blue);
- background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
- color: var(--pill-accent);
- padding-inline: 0.75rem;
- padding-block: 0.375rem;
- border-radius: 2.75rem;
- border: 0;
- transition: background 0.3s ease;
- font-family: var(--inter-font);
- font-size: 0.875rem;
- font-style: normal;
- font-weight: 500;
- line-height: 1.4rem;
- letter-spacing: -0.00875rem;
- text-decoration: none;
- }
-
- .pill:hover {
- background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
- }
-
- .pill-group .pill:nth-child(6n + 1) {
- --pill-accent: var(--bright-blue);
- }
- .pill-group .pill:nth-child(6n + 2) {
- --pill-accent: var(--french-violet);
- }
- .pill-group .pill:nth-child(6n + 3),
- .pill-group .pill:nth-child(6n + 4),
- .pill-group .pill:nth-child(6n + 5) {
- --pill-accent: var(--hot-red);
- }
-
- .pill-group svg {
- margin-inline-start: 0.25rem;
- }
-
- .social-links {
- display: flex;
- align-items: center;
- gap: 0.73rem;
- margin-top: 1.5rem;
- }
-
- .social-links path {
- transition: fill 0.3s ease;
- fill: var(--gray-400);
- }
-
- .social-links a:hover svg path {
- fill: var(--gray-900);
- }
-
- @media screen and (max-width: 650px) {
- .content {
- flex-direction: column;
- width: max-content;
- }
-
- .divider {
- height: 1px;
- width: 100%;
- background: var(--red-to-pink-to-purple-horizontal-gradient);
- margin-block: 1.5rem;
- }
- }
-</style>
-
-<main class="main">
- <div class="content">
- <div class="left-side">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 982 239"
- fill="none"
- class="angular-logo"
- >
- <g clip-path="url(#a)">
- <path
- fill="url(#b)"
- d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
- />
- <path
- fill="url(#c)"
- d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
- />
- </g>
- <defs>
- <radialGradient
- id="c"
- cx="0"
- cy="0"
- r="1"
- gradientTransform="rotate(118.122 171.182 60.81) scale(205.794)"
- gradientUnits="userSpaceOnUse"
- >
- <stop stop-color="#FF41F8" />
- <stop offset=".707" stop-color="#FF41F8" stop-opacity=".5" />
- <stop offset="1" stop-color="#FF41F8" stop-opacity="0" />
- </radialGradient>
- <linearGradient
- id="b"
- x1="0"
- x2="982"
- y1="192"
- y2="192"
- gradientUnits="userSpaceOnUse"
- >
- <stop stop-color="#F0060B" />
- <stop offset="0" stop-color="#F0070C" />
- <stop offset=".526" stop-color="#CC26D5" />
- <stop offset="1" stop-color="#7702FF" />
- </linearGradient>
- <clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
- </defs>
- </svg>
- <h1>Hello, {{ title }}</h1>
- <p>Congratulations! Your app is running. đ</p>
- </div>
- <div class="divider" role="separator" aria-label="Divider"></div>
- <div class="right-side">
- <div class="pill-group">
- @for (item of [
- { title: 'Explore the Docs', link: 'https://angular.dev' },
- { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
- { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
- { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
- { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
- ]; track item.title) {
- <a
- class="pill"
- [href]="item.link"
- target="_blank"
- rel="noopener"
- >
- <span>{{ item.title }}</span>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- height="14"
- viewBox="0 -960 960 960"
- width="14"
- fill="currentColor"
- >
- <path
- d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
- />
- </svg>
- </a>
- }
- </div>
- <div class="social-links">
- <a
- href="https://github.com/angular/angular"
- aria-label="Github"
- target="_blank"
- rel="noopener"
- >
- <svg
- width="25"
- height="24"
- viewBox="0 0 25 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- alt="Github"
- >
- <path
- d="M12.3047 0C5.50634 0 0 5.50942 0 12.3047C0 17.7423 3.52529 22.3535 8.41332 23.9787C9.02856 24.0946 9.25414 23.7142 9.25414 23.3871C9.25414 23.0949 9.24389 22.3207 9.23876 21.2953C5.81601 22.0377 5.09414 19.6444 5.09414 19.6444C4.53427 18.2243 3.72524 17.8449 3.72524 17.8449C2.61064 17.082 3.81137 17.0973 3.81137 17.0973C5.04697 17.1835 5.69604 18.3647 5.69604 18.3647C6.79321 20.2463 8.57636 19.7029 9.27978 19.3881C9.39052 18.5924 9.70736 18.0499 10.0591 17.7423C7.32641 17.4347 4.45429 16.3765 4.45429 11.6618C4.45429 10.3185 4.9311 9.22133 5.72065 8.36C5.58222 8.04931 5.16694 6.79833 5.82831 5.10337C5.82831 5.10337 6.85883 4.77319 9.2121 6.36459C10.1965 6.09082 11.2424 5.95546 12.2883 5.94931C13.3342 5.95546 14.3801 6.09082 15.3644 6.36459C17.7023 4.77319 18.7328 5.10337 18.7328 5.10337C19.3942 6.79833 18.9789 8.04931 18.8559 8.36C19.6403 9.22133 20.1171 10.3185 20.1171 11.6618C20.1171 16.3888 17.2409 17.4296 14.5031 17.7321C14.9338 18.1012 15.3337 18.8559 15.3337 20.0084C15.3337 21.6552 15.3183 22.978 15.3183 23.3779C15.3183 23.7009 15.5336 24.0854 16.1642 23.9623C21.0871 22.3484 24.6094 17.7341 24.6094 12.3047C24.6094 5.50942 19.0999 0 12.3047 0Z"
- />
- </svg>
- </a>
- <a
- href="https://twitter.com/angular"
- aria-label="Twitter"
- target="_blank"
- rel="noopener"
- >
- <svg
- width="24"
- height="24"
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- alt="Twitter"
- >
- <path
- d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
- />
- </svg>
- </a>
- <a
- href="https://www.youtube.com/channel/UCbn1OgGei-DV7aSRo_HaAiw"
- aria-label="Youtube"
- target="_blank"
- rel="noopener"
- >
- <svg
- width="29"
- height="20"
- viewBox="0 0 29 20"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- alt="Youtube"
- >
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z"
- />
- </svg>
- </a>
- </div>
- </div>
- </div>
-</main>
-
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-
-<router-outlet />
+<app-header></app-header>
+<section class="content">
+ <app-sidenav></app-sidenav>
+ <router-outlet></router-outlet>
+</section>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c0b0c96217007634009491d119e61ef4421eb996 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,9 @@
+@use '../vars';
+@use 'sass:map';
+
+.content {
+ display: flex;
+ height: calc(100vh - vars.$headerHeight);
+ background-color: map.get(vars.$grey, 30);
+ margin-top: vars.$headerHeight;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ddff0b9f1b7807e421aee23d8316d63292b0c81f..2ea582b6c62925a1f95ba8329ef9051610bd5315 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,12 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
+import { SidenavComponent } from './components/sidenav/sidenav.component';
+import { HeaderComponent } from './components/header/header.component';
@Component({
selector: 'app-root',
- imports: [RouterOutlet],
+ imports: [RouterOutlet, SidenavComponent, HeaderComponent],
templateUrl: './app.component.html',
- styleUrl: './app.component.scss'
+ styleUrl: './app.component.scss',
})
-export class AppComponent {
- title = 'miars-frontend';
-}
+export class AppComponent {}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 79532e6e6c6ba632e14a7c932e2ccfde273d1973..35ca21e32aebc0e2cdd09ae2a6a3a0c3f7bea681 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -2,7 +2,6 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
-import Aura from '@primeng/themes/aura';
import { routes } from './app.routes';
@@ -11,10 +10,6 @@ export const appConfig: ApplicationConfig = {
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideAnimationsAsync(),
- providePrimeNG({
- theme: {
- preset: Aura
- }
- })
- ]
+ providePrimeNG(), provideAnimationsAsync(),
+ ],
};
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb5f23a35f788cba146dd7337127ba6c5ab..e39c815c5e6b0b3270327b08945f541f6854ca91 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,30 @@
import { Routes } from '@angular/router';
-export const routes: Routes = [];
+export const routes: Routes = [
+ {
+ path: '',
+ redirectTo: 'configuration',
+ pathMatch: 'full',
+ },
+ {
+ path: 'configuration',
+ loadComponent: () =>
+ import('./components/configuration/configuration.component').then(
+ c => c.ConfigurationComponent
+ ),
+ },
+ {
+ path: 'dashboard',
+ loadComponent: () =>
+ import('./components/dashboard/dashboard.component').then(
+ c => c.DashboardComponent
+ ),
+ },
+ {
+ path: '**',
+ loadComponent: () =>
+ import('./components/not-found/not-found.component').then(
+ c => c.NotFoundComponent
+ ),
+ },
+];
diff --git a/src/app/components/configuration/configuration.component.html b/src/app/components/configuration/configuration.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..8434b8c17cf0b0eb651f46dd6fd926415b7c24b9
--- /dev/null
+++ b/src/app/components/configuration/configuration.component.html
@@ -0,0 +1,6 @@
+<app-page-wrapper>
+ <div header>Analyzer configuration</div>
+
+ Configuration content goes here
+ <p-skeleton height="10rem" width="100%" />
+</app-page-wrapper>
diff --git a/src/app/components/configuration/configuration.component.scss b/src/app/components/configuration/configuration.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2995308e841ca96f9de6435ee45baad2167aa6e6
--- /dev/null
+++ b/src/app/components/configuration/configuration.component.scss
@@ -0,0 +1,4 @@
+:host {
+ height: 100%;
+ width: 100%;
+}
diff --git a/src/app/components/configuration/configuration.component.spec.ts b/src/app/components/configuration/configuration.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a719df815f26937c9c5088f6b488339846c5277a
--- /dev/null
+++ b/src/app/components/configuration/configuration.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigurationComponent } from './configuration.component';
+
+describe('ConfigurationComponent', () => {
+ let component: ConfigurationComponent;
+ let fixture: ComponentFixture<ConfigurationComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ConfigurationComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ConfigurationComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/configuration/configuration.component.ts b/src/app/components/configuration/configuration.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6cde6f1c642627c033bb2948d159e3975cde5268
--- /dev/null
+++ b/src/app/components/configuration/configuration.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component';
+import { Skeleton } from 'primeng/skeleton';
+
+@Component({
+ selector: 'app-configuration',
+ imports: [PageWrapperComponent, Skeleton],
+ templateUrl: './configuration.component.html',
+ styleUrl: './configuration.component.scss',
+})
+export class ConfigurationComponent {}
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..cb0f2015d2c2aaeed5adaaed87a58cd8936d3ac8
--- /dev/null
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -0,0 +1,6 @@
+<app-page-wrapper>
+ <div header>Monitoring and Analysis</div>
+
+ Dashboard content goes here
+ <p-skeleton height="10rem" width="100%" />
+</app-page-wrapper>
diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2995308e841ca96f9de6435ee45baad2167aa6e6
--- /dev/null
+++ b/src/app/components/dashboard/dashboard.component.scss
@@ -0,0 +1,4 @@
+:host {
+ height: 100%;
+ width: 100%;
+}
diff --git a/src/app/components/dashboard/dashboard.component.spec.ts b/src/app/components/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..30e39a2a4ce50c5ba05a66e706c22216e8278472
--- /dev/null
+++ b/src/app/components/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+ let component: DashboardComponent;
+ let fixture: ComponentFixture<DashboardComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [DashboardComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(DashboardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ad068b9d3113826e91430fe8021ee219e7c109ad
--- /dev/null
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component';
+import { Skeleton } from 'primeng/skeleton';
+
+@Component({
+ selector: 'app-dashboard',
+ imports: [PageWrapperComponent, Skeleton],
+ templateUrl: './dashboard.component.html',
+ styleUrl: './dashboard.component.scss',
+})
+export class DashboardComponent {}
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..156bfd96874760cb331ec90fce313f1f133af30a
--- /dev/null
+++ b/src/app/components/header/header.component.html
@@ -0,0 +1,21 @@
+<div class="header-logo">
+ <img src="favicon.ico" alt="logo" height="55px" />
+ <mat-divider [vertical]="true"></mat-divider>
+ <span> MiARS </span>
+</div>
+
+<div class="header-menu">
+ <div class="button-container">
+ <button mat-button>
+ <mat-icon>help</mat-icon>
+ 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/header/header.component.scss b/src/app/components/header/header.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c5a236d8118f89f8ce05b4308c1ef74320704183
--- /dev/null
+++ b/src/app/components/header/header.component.scss
@@ -0,0 +1,52 @@
+@use '../../../vars';
+@use 'sass:map';
+
+:host {
+ height: vars.$headerHeight;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: map.get(vars.$grey, 0);
+ width: 100%;
+ position: fixed;
+ top: 0;
+ z-index: 10;
+ padding: map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'md');
+
+ .header {
+ &-logo {
+ display: flex;
+ gap: map.get(vars.$spacing, 'md');
+
+ & > span {
+ display: flex;
+ align-items: center;
+ font-family: Kodchasan, sans-serif;
+ font-size: map.get(vars.$text, 'xxl');
+ font-weight: bold;
+ color: vars.$textPrimary;
+ }
+ }
+
+ &-menu {
+ display: flex;
+ gap: map.get(vars.$spacing, 'xs');
+ }
+ }
+
+ .button-container {
+ button {
+ font-size: map.get(vars.$text, 'md');
+
+ & mat-icon {
+ font-size: 30px;
+ width: 30px;
+ height: 30px;
+ }
+ }
+
+ & > * {
+ color: vars.$textPrimary;
+ }
+ }
+}
diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..204ed6e4b7fd0c0aa28ef4fd67a8097ac22272cd
--- /dev/null
+++ b/src/app/components/header/header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+ let component: HeaderComponent;
+ let fixture: ComponentFixture<HeaderComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [HeaderComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(HeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..267d2a72b9dfd64e6f8a61655c60b26dba43e9cc
--- /dev/null
+++ b/src/app/components/header/header.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { DividerModule } from 'primeng/divider';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import { MatButton } from '@angular/material/button';
+
+@Component({
+ selector: 'app-header',
+ imports: [DividerModule, MatDivider, MatIcon, MatButton],
+ templateUrl: './header.component.html',
+ styleUrl: './header.component.scss',
+})
+export class HeaderComponent {}
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..80710204f06aaf3ca0a353def20b0bd501ff40a3
--- /dev/null
+++ b/src/app/components/not-found/not-found.component.html
@@ -0,0 +1 @@
+<p>not-found works!</p>
diff --git a/src/app/components/not-found/not-found.component.scss b/src/app/components/not-found/not-found.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/not-found/not-found.component.spec.ts b/src/app/components/not-found/not-found.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b65d9eadd6d55f6868f3a788f6606dad682ab28
--- /dev/null
+++ b/src/app/components/not-found/not-found.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+ let component: NotFoundComponent;
+ let fixture: ComponentFixture<NotFoundComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NotFoundComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(NotFoundComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/not-found/not-found.component.ts b/src/app/components/not-found/not-found.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..03ff4dc556e1345c1ac569ff4882f5d64878dd8a
--- /dev/null
+++ b/src/app/components/not-found/not-found.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-not-found',
+ imports: [],
+ templateUrl: './not-found.component.html',
+ styleUrl: './not-found.component.scss',
+})
+export class NotFoundComponent {}
diff --git a/src/app/components/page-wrapper/page-wrapper.component.html b/src/app/components/page-wrapper/page-wrapper.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..60cb6e288d65ee39b7e4e70d39666827f3ec1ca7
--- /dev/null
+++ b/src/app/components/page-wrapper/page-wrapper.component.html
@@ -0,0 +1,7 @@
+<div class="page-header">
+ <ng-content select="[header]"></ng-content>
+</div>
+<mat-divider />
+<div class="page-body">
+ <ng-content />
+</div>
diff --git a/src/app/components/page-wrapper/page-wrapper.component.scss b/src/app/components/page-wrapper/page-wrapper.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1a8364713177fdbf9d329e860999f5b009ca4a94
--- /dev/null
+++ b/src/app/components/page-wrapper/page-wrapper.component.scss
@@ -0,0 +1,25 @@
+@use '../../../vars';
+@use 'sass:map';
+
+:host {
+ display: block;
+ min-height: calc(100% - 2 * map.get(vars.$spacing, 'lg'));
+
+ margin: map.get(vars.$spacing, 'lg');
+ background-color: map.get(vars.$grey, 0);
+ border-radius: map.get(vars.$radius, 'xs');
+
+ .page {
+ &-header {
+ padding: map.get(vars.$spacing, 'lg') map.get(vars.$spacing, 'lg')
+ map.get(vars.$spacing, 'xs');
+ font-family: Monoton, cursive;
+ font-size: map.get(vars.$text, 'xxl');
+ }
+
+ &-body {
+ padding: map.get(vars.$spacing, 'xl') map.get(vars.$spacing, 'lg')
+ map.get(vars.$spacing, 'lg');
+ }
+ }
+}
diff --git a/src/app/components/page-wrapper/page-wrapper.component.spec.ts b/src/app/components/page-wrapper/page-wrapper.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..73525cc5b2ec289ef51c9f3d96b9ac8995d23f3b
--- /dev/null
+++ b/src/app/components/page-wrapper/page-wrapper.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageWrapperComponent } from './page-wrapper.component';
+
+describe('PageWrapperComponent', () => {
+ let component: PageWrapperComponent;
+ let fixture: ComponentFixture<PageWrapperComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [PageWrapperComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(PageWrapperComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/page-wrapper/page-wrapper.component.ts b/src/app/components/page-wrapper/page-wrapper.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3046fbcd7f1447eb25d537a917fe158b4bcb8223
--- /dev/null
+++ b/src/app/components/page-wrapper/page-wrapper.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { MatDivider } from '@angular/material/divider';
+
+@Component({
+ selector: 'app-page-wrapper',
+ imports: [MatDivider],
+ templateUrl: './page-wrapper.component.html',
+ styleUrl: './page-wrapper.component.scss',
+})
+export class PageWrapperComponent {}
diff --git a/src/app/components/sidenav/sidenav.component.html b/src/app/components/sidenav/sidenav.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..a5b543efb4d853e6602a76badfab61347cf9c045
--- /dev/null
+++ b/src/app/components/sidenav/sidenav.component.html
@@ -0,0 +1,40 @@
+<mat-drawer-container class="sidenav-container" autosize>
+ <mat-drawer #drawer class="sidenav-container__sidenav" mode="side">
+ <div class="sidenav-container__sidenav-content">
+ <div class="pages">
+ <div
+ class="button-container"
+ [ngClass]="{
+ 'button-container__active': router.url === '/configuration',
+ }"
+ routerLink="/configuration">
+ <mat-icon>settings</mat-icon>
+ Configuration
+ </div>
+ <div
+ class="button-container"
+ [ngClass]="{
+ 'button-container__active': router.url === '/dashboard',
+ }"
+ routerLink="/dashboard">
+ <mat-icon>trending_up</mat-icon>
+ Dashboard
+ </div>
+ </div>
+ </div>
+ </mat-drawer>
+
+ <div
+ class="sidenav-container__toggle"
+ [ngClass]="
+ drawer.opened
+ ? 'sidenav-container__toggle-close'
+ : 'sidenav-container__toggle-open'
+ ">
+ @if (drawer.opened) {
+ <p-button icon="pi pi-chevron-left" (click)="drawer.toggle()" />
+ } @else {
+ <p-button icon="pi pi-chevron-right" (click)="drawer.toggle()" />
+ }
+ </div>
+</mat-drawer-container>
diff --git a/src/app/components/sidenav/sidenav.component.scss b/src/app/components/sidenav/sidenav.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b9c493d1d7ef9684eb07ee3cb9d87d1e43e520ce
--- /dev/null
+++ b/src/app/components/sidenav/sidenav.component.scss
@@ -0,0 +1,88 @@
+@use '../../../vars';
+@use 'sass:map';
+
+@mixin sidenavActivePage {
+ background-color: map.get(vars.$grey, 0);
+ border-radius: map.get(vars.$radius, 'lg');
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+:host {
+ .sidenav-container {
+ height: 100%;
+ background: none;
+
+ &__sidenav {
+ width: vars.$sidenavWidth;
+ background-color: map.get(vars.$grey, 10);
+ border-radius: map.get(vars.$radius, 'none');
+ z-index: 1;
+
+ &-content {
+ position: fixed;
+ width: vars.$sidenavWidth;
+ padding: map.get(vars.$spacing, 'md');
+ height: 100%;
+
+ .footer {
+ margin-top: auto;
+ a {
+ font-size: map.get(vars.$text, 'sm');
+ text-decoration: none;
+ }
+ }
+
+ .pages {
+ display: flex;
+ flex-direction: column;
+ gap: map.get(vars.$spacing, 'xs');
+
+ .button-container {
+ display: flex;
+ align-items: center;
+ font-size: map.get(vars.$text, 'md');
+ color: vars.$textPrimary;
+ text-transform: uppercase;
+ font-weight: 500;
+ gap: map.get(vars.$spacing, 'xs');
+ padding: map.get(vars.$spacing, 'xs');
+
+ mat-icon {
+ font-size: 30px;
+ width: 30px;
+ height: 30px;
+ }
+ }
+ }
+ }
+ }
+
+ &__toggle {
+ position: fixed;
+ margin-left: -10px;
+
+ margin-top: map.get(vars.$spacing, 'lg');
+ background-color: map.get(vars.$grey, 0);
+ border-radius: map.get(vars.$radius, 'xs');
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+ padding: map.get(vars.$spacing, 'xxs');
+
+ &-open {
+ border-bottom-left-radius: map.get(vars.$radius, 'none');
+ border-top-left-radius: map.get(vars.$radius, 'none');
+ padding-left: map.get(vars.$spacing, 'xl');
+ }
+
+ &-close {
+ }
+ }
+ }
+
+ .button-container:hover {
+ @include sidenavActivePage;
+ }
+
+ .button-container__active {
+ @include sidenavActivePage;
+ }
+}
diff --git a/src/app/components/sidenav/sidenav.component.spec.ts b/src/app/components/sidenav/sidenav.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25f799c1d0518fa961fcfb038eb94618951ca913
--- /dev/null
+++ b/src/app/components/sidenav/sidenav.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidenavComponent } from './sidenav.component';
+
+describe('SidenavComponent', () => {
+ let component: SidenavComponent;
+ let fixture: ComponentFixture<SidenavComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [SidenavComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(SidenavComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/sidenav/sidenav.component.ts b/src/app/components/sidenav/sidenav.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2fd9c08614d71573be1f94baf716b6d68402d51b
--- /dev/null
+++ b/src/app/components/sidenav/sidenav.component.ts
@@ -0,0 +1,35 @@
+import { afterNextRender, Component, inject, signal } from '@angular/core';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatButtonModule } from '@angular/material/button';
+import { NavigationEnd, Router, RouterLink } from '@angular/router';
+import { Button } from 'primeng/button';
+import { NgClass } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+ selector: 'app-sidenav',
+ imports: [
+ MatSidenavModule,
+ MatButtonModule,
+ RouterLink,
+ Button,
+ NgClass,
+ MatIcon,
+ ],
+ templateUrl: './sidenav.component.html',
+ styleUrl: './sidenav.component.scss',
+})
+export class SidenavComponent {
+ router = inject(Router);
+ currentPage = signal<string>('');
+
+ constructor() {
+ afterNextRender(() => {
+ this.router.events.subscribe(event => {
+ if (event instanceof NavigationEnd) {
+ this.currentPage.set(event.url);
+ }
+ });
+ });
+ }
+}
diff --git a/src/app/models/.gitkeep b/src/app/models/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/service/.gitkeep b/src/app/service/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/index.html b/src/index.html
index e4220e42c903c010a8b6667cc2cccb7468f23ef3..48a08cce61e103940e072b93bec7b0a88dd697bf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,15 @@
<!doctype html>
<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>MiarsTemp</title>
- <base href="/">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/x-icon" href="favicon.ico">
+ <head>
+ <meta charset="utf-8" />
+ <title>MiARS</title>
+ <base href="/" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon" type="image/x-icon" href="favicon.ico" />
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
-<body>
- <app-root></app-root>
-</body>
+ <body class="mat-typography">
+ <app-root></app-root>
+ </body>
</html>
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0072ce3fc41812f8af910219f9eea3c3de..e81a44670599e509ff814d887e2131c95f3351fe 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,14 @@
-/* You can add global styles to this file, and also import other style files */
+@use 'sass:map';
+@use 'vars';
+@import 'primeicons/primeicons.css';
+@import url('https://fonts.googleapis.com/css2?family=Kodchasan:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Kodchasan:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Monoton&display=swap');
+
+body {
+ margin: 0;
+ font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
+
+mat-divider {
+ border-color: map.get(vars.$grey, 30) !important;
+}
diff --git a/src/vars.scss b/src/vars.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4cdf01f51db35fe3ea0c2cba5cdaf3c28c598b9a
--- /dev/null
+++ b/src/vars.scss
@@ -0,0 +1,53 @@
+$textPrimary: #520000;
+$error: #ff2525;
+$sidenavWidth: 256px;
+$headerHeight: 68px;
+
+$grey: (
+ 0: #ffffff,
+ 10: #f5f6f6,
+ 20: #f3eaea,
+ 30: #dddddd,
+ 50: #c5c5c5,
+ 200: #181818,
+ 500: #000000,
+);
+
+$text: (
+ 'none': 0,
+ 'xxxs': 0.1rem,
+ 'xxs': 0.25rem,
+ 'xs': 0.5rem,
+ 'sm': 0.75rem,
+ 'md': 1rem,
+ 'lg': 1.25rem,
+ 'xl': 1.5rem,
+ 'xxl': 2rem,
+ 'xxxl': 4rem,
+);
+
+$spacing: (
+ 'none': 0,
+ 'xxxs': 0.1rem,
+ 'xxs': 0.25rem,
+ 'xs': 0.5rem,
+ 'sm': 0.75rem,
+ 'md': 1rem,
+ 'lg': 1.25rem,
+ 'xl': 1.5rem,
+ 'xxl': 2rem,
+ 'xxxl': 4rem,
+);
+
+$radius: (
+ 'none': 0,
+ 'xxxs': 0.1rem,
+ 'xxs': 0.25rem,
+ 'xs': 0.5rem,
+ 'sm': 0.75rem,
+ 'md': 1rem,
+ 'lg': 1.25rem,
+ 'xl': 1.5rem,
+ 'xxl': 2rem,
+ 'xxxl': 4rem,
+);
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 08abcaa3d886543fcb3f25884934e2fc19c87f59..3775b37e3bbc6659e266676de37fffdd7cfebb5c 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -7,9 +7,9 @@
"types": []
},
"files": [
- "./src/main.ts"
+ "src/main.ts"
],
"include": [
- "../miars-frontend/src/**/*.d.ts"
+ "src/**/*.d.ts"
]
}
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 8766a2046d75b312f9979c9cd817ae04f150bbe9..5fb748d9207a99686549d6ef1415527dc544dd0f 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -9,7 +9,7 @@
]
},
"include": [
- "../miars-frontend/src/**/*.spec.ts",
- "../miars-frontend/src/**/*.d.ts"
+ "src/**/*.spec.ts",
+ "src/**/*.d.ts"
]
}