MainView refactor

Frontend/.eslintrc.json

@@ -19,7 +19,7 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "app",
+            "prefix": "diunabi",
             "style": "camelCase"
           }
         ],
@@ -27,7 +27,7 @@
           "error",
           {
             "type": "element",
-            "prefix": "app",
+            "prefix": "diunabi",
             "style": "kebab-case"
           }
         ]

Frontend/angular.json

@@ -12,7 +12,7 @@
       },
       "root": "",
       "sourceRoot": "src",
-      "prefix": "app",
+      "prefix": "ipms",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",

Frontend/ngsw-config.json

@@ -3,7 +3,7 @@
   "index": "/index.html",
   "assetGroups": [
     {
-      "name": "app",
+      "name": "diunabi",
       "installMode": "prefetch",
       "resources": {
         "files": [

Frontend/src/app/app.component.ts

@@ -6,7 +6,7 @@ import { NotificationsService } from './services/notifications.service';
 import { filter } from 'rxjs';
 
 @Component({
-  selector: 'app-root',
+  selector: 'diunabi-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,

Frontend/src/app/app.routes.ts

@@ -1,12 +1,12 @@
 import { Route } from '@angular/router';
 import { AuthGuard } from './auth/auth.guard';
-import { LoginPageComponent } from './components/login-page/login-page.component';
-import { MainViewComponent } from './main-view/main-view.component';
+import { LoginViewComponent } from './views/login/login-view.component';
+import { MainViewComponent } from './views/main/main-view.component';
 
 export const APP_ROUTES: Route[] = [
   {
     path: '',
-    component: LoginPageComponent,
+    component: LoginViewComponent,
   },
   {
     path: 'app',

Frontend/src/app/components/main-menu/main-menu.component.html

@@ -0,0 +1,10 @@
+<mat-nav-list>
+    <a mat-list-item routerLink="/app/" routerLinkActive="active" [routerLinkActiveOptions]="{exact : true}">
+        <mat-icon>dashboard</mat-icon>
+        Dashboard
+    </a>
+    <a mat-list-item routerLink="/app/layers" routerLinkActive="active" [routerLinkActiveOptions]="{exact : true}">
+        <mat-icon>table</mat-icon>
+        Layers
+    </a>
+</mat-nav-list>

Frontend/src/app/components/main-menu/main-menu.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'diunabi-main-menu',
+  standalone: true,
+  imports: [CommonModule, MatSidenavModule, MatIconModule, MatListModule, RouterLink, RouterLinkActive],
+  templateUrl: './main-menu.component.html',
+  styleUrls: ['./main-menu.component.scss']
+})
+export class MainMenuComponent {
+
+}

Frontend/src/app/components/notifications/notifications.component.ts

@@ -4,7 +4,7 @@ import { MatCardModule } from '@angular/material/card';
 import { NgFor, NgIf } from '@angular/common';
 
 @Component({
-    selector: 'app-notifications',
+    selector: 'diunabi-notifications',
     templateUrl: './notifications.component.html',
     styleUrls: ['./notifications.component.scss'],
     standalone: true,

Frontend/src/app/main-view/main-view.component.html

@@ -1,49 +0,0 @@
-<div class="loading-container" *ngIf="loading">
-    <img class="loading-img" src="../../assets/loader.gif" />
-</div>
-<div class="flip-container" *ngIf="device$.flipPhone">
-    <div class="flip-msg">
-        Flip the device.<br>
-        <mat-icon>screen_rotation</mat-icon>
-    </div>
-</div>
-<div class="main-container">
-    <mat-toolbar color="primary">
-        <button mat-icon-button (click)="snav.toggle()">
-            <mat-icon>menu</mat-icon>
-        </button>
-        <h1 class="topbar-app-name">{{environment.appName}}</h1>
-        <span class="fill-to-right"></span>
-        <span class="topbar-user-name" *ngIf="auth$.user">
-            <img *ngIf="auth$.user.avatar" src="{{auth$.user.avatar}}" class="avatar">
-            {{auth$.user.userName}}
-        </span>
-        <button mat-icon-button (click)="logout()">
-            <mat-icon>exit_to_app</mat-icon>
-        </button>
-    </mat-toolbar>
-    <mat-sidenav-container class="sidenav-container">
-        <mat-sidenav #snav fixedTopGap="56" mode="side" opened="true">
-            <mat-nav-list>
-                <a mat-list-item routerLink=".">
-                    <mat-icon class="menu-icon">dashboard</mat-icon>
-                    Dashboard
-                </a>
-                <a mat-list-item routerLink="./layers">
-                    <mat-icon class="menu-icon">table</mat-icon>
-                    Layers
-                </a>
-                <mat-divider></mat-divider>
-                <a mat-list-item>
-                    {{appVersion}}
-                </a>
-            </mat-nav-list>
-            <small>
-                &nbsp;&copy;&nbsp;DiunaBI {{currentDate | date: 'yyyy'}}
-            </small>
-        </mat-sidenav>
-        <mat-sidenav-content>
-            <router-outlet></router-outlet>
-        </mat-sidenav-content>
-    </mat-sidenav-container>
-</div>

Frontend/src/app/main-view/main-view.component.scss

@@ -1,84 +0,0 @@
-.main-container {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.sidenav-container {
-  flex: 1;
-}
-mat-icon.menu-icon {
-  margin-right: 3px;
-  color: gray;
-}
-mat-nav-list.menu-sublist {
-  padding-left: 10px;
-}
-mat-nav-list.menu-sublist > a {
-  font-size: small;
-}
-
-.fill-to-right {
-  flex: 1 1 auto;
-}
-span.topbar-user-name {
-  font-size: small;
-}
-h1.topbar-app-name {
-  margin-bottom: 0px;
-}
-mat-sidenav {
-  width: 200px;
-}
-input[disabled] {
-  color: black;
-  -webkit-text-fill-color: black;
-  opacity: 1; /* required on iOS */
-}
-textarea[disabled] {
-  color: black;
-  -webkit-text-fill-color: black;
-  opacity: 1; /* required on iOS */
-}
-.loading-container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: rgba(100, 100, 100, 0.3);
-  z-index: 1400;
-}
-.loading-img {
-  position: absolute;
-  margin: auto;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.flip-container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: rgba(100, 100, 100, 0.95);
-  z-index: 1500;
-}
-.flip-msg {
-  margin: auto;
-  text-align: center;
-  padding-top: 45vh;
-  color: rgb(205, 206, 177);
-  font-size: larger;
-}
-
-/* links */
-a:link,
-a:visited {
-  color: black;
-}

Frontend/src/app/modules/dashboard/board/board.component.ts

@@ -2,11 +2,11 @@ import { Component } from '@angular/core';
 import { DeviceService } from 'src/app/services/device.service';
 
 
-@Component({
-    selector: 'app-board',
-    templateUrl: './board.component.html',
-    styleUrls: ['./board.component.scss'],
-    standalone: true
+@Component({
+    selector: 'diunabi-board',
+    templateUrl: './board.component.html',
+    styleUrls: ['./board.component.scss'],
+    standalone: true
 })
 export class BoardComponent {
   constructor(

Frontend/src/app/modules/layers/layer-detail/layer-detail.component.scss

@@ -1 +0,0 @@
-@import "../../../main-view/main-view.component.scss";

Frontend/src/app/modules/layers/layer-detail/layer-detail.component.ts

@@ -17,7 +17,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatCardModule } from '@angular/material/card';
 
 @Component({
-    selector: 'app-layer-detail',
+    selector: 'diunabi-layer-detail',
     templateUrl: './layer-detail.component.html',
     styleUrls: ['./layer-detail.component.scss'],
     standalone: true,

Frontend/src/app/modules/layers/layer-edit/layer-edit.component.scss

@@ -1,5 +1,3 @@
-@import "../../../main-view/main-view.component.scss";
-
 .file-input {
     display: none;
 }

Frontend/src/app/modules/layers/layer-edit/layer-edit.component.ts

@@ -22,7 +22,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatCardModule } from '@angular/material/card';
 
 @Component({
-    selector: 'app-layer-edit',
+    selector: 'diunabi-layer-edit',
     templateUrl: './layer-edit.component.html',
     styleUrls: ['./layer-edit.component.scss'],
     standalone: true,

Frontend/src/app/modules/layers/layers-list/layers-list.component.scss

@@ -1 +0,0 @@
-@import "../../../main-view/main-view.component.scss";

Frontend/src/app/modules/layers/layers-list/layers-list.component.ts

@@ -15,7 +15,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { NgFor } from '@angular/common';
 
 @Component({
-    selector: 'app-layers-list',
+    selector: 'diunabi-layers-list',
     templateUrl: './layers-list.component.html',
     styleUrls: ['./layers-list.component.scss'],
     standalone: true,

Frontend/src/app/views/login/login-view.component.scss

@@ -4,17 +4,20 @@
     background-size: cover;
     padding-top: 30vh;
 }
+
 .container {
     width: fit-content;
     display: block;
     margin: auto;
 }
+
 .form {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
+
 .logo {
     background-image: url('../../../assets/logo.png');
     background-size: cover;
@@ -24,16 +27,20 @@
     width: 250px;
     height: 250px;
     opacity: 0.6;
-  }
+}
+
 mat-form-field {
     width: 100%;
 }
+
 .user {
     text-align: right;
 }
+
 .load {
     text-align: center;
 }
+
 .loading-container {
     position: absolute;
     left: 0;
@@ -42,22 +49,25 @@ mat-form-field {
     bottom: 0;
     background-color: rgba(100, 100, 100, 0.3);
     z-index: 1400;
-  }
-  .loading-img {
+}
+
+.loading-img {
     position: absolute;
     margin: auto;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-  }
+}
+
 /* for mobile */
 @media screen and (max-width: 700px) {
     .container {
         width: 90%;
     }
+
     .logo {
         width: 150px;
         height: 150px;
     }
-}
+}

Frontend/src/app/views/login/login-view.component.ts

@@ -10,14 +10,14 @@ import { NgIf } from '@angular/common';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 
 @Component({
-    selector: 'app-login-page',
-    templateUrl: './login-page.component.html',
-    styleUrls: ['./login-page.component.scss'],
+    selector: 'diunabi-view-page',
+    templateUrl: './login-view.component.html',
+    styleUrls: ['./login-view.component.scss'],
     standalone: true,
     imports: [NgIf, MatCardModule, MatBottomSheetModule]
 })
 
-export class LoginPageComponent implements OnInit {
+export class LoginViewComponent implements OnInit {
   constructor(
     private router$: Router,
     private auth$: AuthService,

Frontend/src/app/views/main/main-view.component.html

@@ -0,0 +1,45 @@
+<div class="loading-container" *ngIf="loading">
+    <img class="loading-img" src="../../assets/loader.gif" />
+</div>
+<div class="flip-container" *ngIf="device$.flipPhone">
+    <div class="flip-msg">
+        Flip the device.<br>
+        <mat-icon>screen_rotation</mat-icon>
+    </div>
+</div>
+
+<mat-drawer-container fullscreen>
+    <mat-drawer #drawer mode="side" opened>
+        <diunabi-main-menu></diunabi-main-menu>
+        <mat-divider></mat-divider>
+        <small>
+            &nbsp;&copy;&nbsp;DiunaBI {{currentDate | date: 'yyyy'}}
+        </small>
+    </mat-drawer>
+    <mat-toolbar class="toolbar" color="primary">
+        <button mat-icon-button aria-label="Menu" (click)="drawer.toggle()">
+            <mat-icon>menu</mat-icon>
+        </button>
+        {{environment.appName}}
+        <span style="font-size: x-small;">&nbsp;{{appVersion}}</span>
+        <div class="fill-space"></div>
+        <a mat-icon-button [matMenuTriggerFor]="userMenu">
+            <mat-icon *ngIf="!auth$.user.avatar">account_circle</mat-icon>
+            <img *ngIf="auth$.user.avatar" [src]="auth$.user.avatar" class="profile-photo-small"
+               alt="Profile photo">
+        </a>
+        <mat-menu #userMenu="matMenu">
+            <div class="profile-info">
+                <img [src]="auth$.user.avatar" class="profile-photo-big" alt="Profile photo">
+                <p>{{auth$.user.userName}}</p>
+            </div>
+            <button mat-menu-item (click)="logout()">
+                <mat-icon>exit_to_app</mat-icon>
+                <span>Logout</span>
+            </button>
+        </mat-menu>
+    </mat-toolbar>
+    <div class="app-content">
+        <router-outlet></router-outlet>
+    </div>
+</mat-drawer-container>

Frontend/src/app/views/main/main-view.component.scss

@@ -0,0 +1,77 @@
+.loading-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(100, 100, 100, 0.3);
+  z-index: 1400;
+}
+
+.loading-img {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.flip-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(100, 100, 100, 0.95);
+  z-index: 1500;
+}
+
+.flip-msg {
+  margin: auto;
+  text-align: center;
+  padding-top: 45vh;
+  color: rgb(205, 206, 177);
+  font-size: larger;
+}
+
+.fill-space {
+  flex: 1;
+}
+
+.fill-to-right {
+  flex: 1 1 auto;
+}
+
+.logo {
+  height: 4vh;
+  margin: 5px;
+}
+
+.sidenav-content {
+  flex-direction: column;
+}
+
+.mat-toolbar.mat-primary {
+  color: white;
+}
+
+.app-content {
+  flex: 1;
+  margin: 0 auto;
+  padding: 2em;
+}
+
+.profile-photo-small {
+  border-radius: 50%;
+}
+
+.profile-photo-big {
+  width: 100px;
+  border-radius: 50%;
+}
+
+.profile-info {
+  margin: 10px;
+  text-align: center;
+}

Frontend/src/app/views/main/main-view.component.ts

@@ -1,27 +1,29 @@
 import { Component, NgZone, ViewChild } from '@angular/core';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import { NavigationStart, Router, RouterLink, RouterOutlet } from '@angular/router';
+import { MatMenuModule } from '@angular/material/menu';
 import * as moment from 'moment';
 import packageInfo from 'package.json';
 import { delay } from 'rxjs';
 import { environment } from 'src/environments/environment';
-import { AuthService } from '../auth/auth.service';
-import { DataService } from '../services/data.service';
-import { DeviceService } from '../services/device.service';
+import { AuthService } from '../../auth/auth.service';
+import { DataService } from '../../services/data.service';
+import { DeviceService } from '../../services/device.service';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatListModule } from '@angular/material/list';
 import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { NgIf, DatePipe } from '@angular/common';
+import { MainMenuComponent } from 'src/app/components/main-menu/main-menu.component';
 
 @Component({
-    selector: 'app-main-view',
+    selector: 'diunabi-main-view',
     templateUrl: './main-view.component.html',
     styleUrls: ['./main-view.component.scss'],
     standalone: true,
     imports: [NgIf, MatIconModule, MatToolbarModule, MatButtonModule, MatSidenavModule, 
-      MatListModule, RouterLink, MatDividerModule, RouterOutlet, DatePipe]
+      MatListModule, RouterLink, MatDividerModule, RouterOutlet, DatePipe, MatMenuModule, MainMenuComponent]
 })
 export class MainViewComponent {
   @ViewChild('snav') snav?: MatSidenav;

Frontend/src/index.html

@@ -15,7 +15,7 @@
   <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/icon-192x192.png">
 </head>
 <body class="mat-typography">
-  <app-root></app-root>
+  <diunabi-root></diunabi-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>