Dashboard polish

package-lock.json

@@ -408,17 +408,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/@types/node": {
-      "version": "20.8.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.10.tgz",
-      "integrity": "sha512-TlgT8JntpcbmKUFzjhsyhGfP2fsiz1Mv56im6enJ905xG1DAYesxJaeSbGqQmAw8OWPdhyJGhGSQGKRNJ45u9w==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
     "node_modules/@angular-devkit/build-angular/node_modules/@vitejs/plugin-basic-ssl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.0.1.tgz",
@@ -18314,14 +18303,6 @@
         "node": "*"
       }
     },
-    "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -20315,17 +20296,6 @@
             "@jridgewell/trace-mapping": "^0.3.9"
           }
         },
-        "@types/node": {
-          "version": "20.8.10",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.10.tgz",
-          "integrity": "sha512-TlgT8JntpcbmKUFzjhsyhGfP2fsiz1Mv56im6enJ905xG1DAYesxJaeSbGqQmAw8OWPdhyJGhGSQGKRNJ45u9w==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "undici-types": "~5.26.4"
-          }
-        },
         "@vitejs/plugin-basic-ssl": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.0.1.tgz",
@@ -34034,14 +34004,6 @@
       "integrity": "sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==",
       "dev": true
     },
-    "undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",

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

@@ -1,7 +1,7 @@
 <app-nav-bar (emitNewUnit)="addUnit($event)" [sensorTypes]="sensorTypes"></app-nav-bar>
 
 <div class="container dashboard">
-  <p-tabView>
+  <p-tabView [(activeIndex)]="selectedTabIndex">
     <p-tabPanel header="Dashboard">
       <unit-list [user]="loggedUser" [units]="units"></unit-list>
     </p-tabPanel>

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

@@ -17,6 +17,7 @@ import {AuthService} from '../../auth/services/auth.service';
 import {User} from '../../auth/models/user';
 import {SensorType} from '../../shared/api/endpoints/models/sensor-type';
 import {Subscription} from 'rxjs';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
@@ -33,23 +34,31 @@ export class DashboardComponent implements OnInit, OnDestroy {
   showEditUnitPopup = false;
   showInsertSensorPopup = false;
   showInsertPositionPopup = false;
-  //phenomenons: Phenomenon[];
+  // phenomenons: Phenomenon[];
   sensorTypes: SensorType[];
   subscription: Subscription[] = [];
 
+  // 0 = Dashboard, 1 = Map view
+  selectedTabIndex = 0;   // <-- set the default here
+
   constructor(
     private dataService: DataService,
     private sensorService: SensorsService,
-    //private confirmationService: ConfirmationService,
-    //private messageService: MessageService,
-    //private managementService: ManagementService,
+    // private confirmationService: ConfirmationService,
+    // private messageService: MessageService,
+    // private managementService: ManagementService,
     private toastService: ToastService,
-    private authService: AuthService
+    private authService: AuthService,
+    private route: ActivatedRoute
   ) {
     this.initData();
   }
 
   ngOnInit(): void {
+    const tab = this.route.snapshot.queryParamMap.get('tab');
+    if (tab === 'map') {
+      this.selectedTabIndex = 1;   // show Map view
+    }
   }
 
   /**
@@ -63,9 +72,9 @@ export class DashboardComponent implements OnInit, OnDestroy {
    * Get necessary data from backend
    */
   initData() {
-    //this.sensorService.getPhenomenons().subscribe(
-    //  response => this.phenomenons = response
-    //);
+    // this.sensorService.getPhenomenons().subscribe(
+    //   response => this.phenomenons = response
+    // );
     this.sensorService.getSensorTypes().subscribe(
       response => this.sensorTypes = response
     );
@@ -118,4 +127,5 @@ export class DashboardComponent implements OnInit, OnDestroy {
       sensors
     })
   }
+
 }

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

@@ -29,7 +29,8 @@ import Geometry from 'ol/geom/Geometry';
 })
 export class MapComponent implements OnInit, OnDestroy, OnChanges {
 
-  @Input('units') units: Array<{ drivers?: Drivers; generalInfo?: GeneralInfo; holder?: any; lastpos?: Lastpos; sensors?: Array<Sensor>; unit?: Unit }>;
+  @Input('units') units:
+      Array<{ drivers?: Drivers; generalInfo?: GeneralInfo; holder?: any; lastpos?: Lastpos; sensors?: Array<Sensor>; unit?: Unit }>;
   mapReady = false;
   dataReady = false;
   unitsLayer: VectorLayer<VectorSource<Geometry>>;
@@ -183,7 +184,8 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
       features: []
     };
 
-    geoJsonUnits.features = this.units ? this.units.filter(u => (u.lastpos.position.x !== 0)).map(u => this.getUnitPos(u.lastpos, u.unit)) : [];
+    geoJsonUnits.features = this.units ? this.units.filter(u => (u.lastpos.position.x !== 0))
+                                          .map(u => this.getUnitPos(u.lastpos, u.unit)) : [];
 
     const vectorSource = new VectorSource({
       features: new GeoJSON().readFeatures(geoJsonUnits),

src/app/dashboard/components/unit-list/unit-list.component.ts

@@ -26,12 +26,13 @@ import { Subscription } from 'rxjs';
 export class UnitListComponent implements OnInit, OnDestroy {
 
   @Input('user') loggedUser: User;
-  @Input('units') units: Array<{ drivers?: Drivers; generalInfo?: GeneralInfo; holder?: any; lastpos?: Lastpos; sensors?: Array<Sensor>; unit?: Unit }>;
+  @Input('units') units:
+      Array<{ drivers?: Drivers; generalInfo?: GeneralInfo; holder?: any; lastpos?: Lastpos; sensors?: Array<Sensor>; unit?: Unit }>;
 
   phenomenons: Phenomenon[];
   sensorTypes: SensorType[];
 
-  inProgress: Boolean = true;
+  inProgress = true;
   items: MenuItem[] = [];
   position: 'bottom';
   groups: Group[];
@@ -91,12 +92,12 @@ export class UnitListComponent implements OnInit, OnDestroy {
   /**
    * Get all units and theirs sensors from backend
    */
-  //getUnits() {
-  //  this.dataService.getData().subscribe(data => {
-  //    this.units = data;
-  //    this.units.forEach(unit => unit.sensors.sort((a, b) => a.sensorId - b.sensorId));
-  //  }, err => this.toastService.showError(err.error.message));
-  //}
+  // getUnits() {
+  //   this.dataService.getData().subscribe(data => {
+  //     this.units = data;
+  //     this.units.forEach(unit => unit.sensors.sort((a, b) => a.sensorId - b.sensorId));
+  //   }, err => this.toastService.showError(err.error.message));
+  // }
 
   /**
    * Show edit unit

src/app/unit/components/unit.component.html

@@ -2,7 +2,10 @@
 
 <div class="container graph">
 
-  <button pButton type="button" label="Back to Dashboard" class="p-button-primary" icon="pi pi-backward" [routerLink]="['/dashboard']" style="margin-bottom: 15px;"></button>
+    <div class="button-row">
+        <button pButton type="button" label="Back to Dashboard" class="p-button-primary" icon="pi pi-backward" [routerLink]="['/dashboard']" style="margin-bottom: 15px;"></button>
+        <button pButton type="button" label="Back to Map" class="p-button-primary" icon="pi pi-backward" [routerLink]="['/dashboard']" [queryParams]="{ tab: 'map' }" style="margin-bottom: 15px;"></button>
+    </div>
 
   <div class="graph-information">
     <div class="graph-desc">
@@ -13,20 +16,34 @@
     </div>
     <div class="graph-range-dates">
       <div class="input-group form-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
-        </div>
-        <p-calendar id="from" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="onDateChanged()" [maxDate]="today" showButtonBar="true"></p-calendar>
+          <p-calendar
+                  id="from"
+                  [style]="{'width':'100%'}"
+                  [inputStyle]="{'width':'100%'}"
+                  [(ngModel)]="from"
+                  [showIcon]=true
+                  [showTime]=true
+                  (onSelect)="onDateChanged()"
+                  [maxDate]="today"
+                  showButtonBar=true>
+          </p-calendar>
       </div>
       <div class="graph-range-dates-separator">
         <div></div>
       </div>
       <div class="input-group form-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
-        </div>
-        <p-calendar id="to" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="onDateChanged()" [maxDate]="today" showButtonBar="true"></p-calendar>
-      </div>      
+          <p-calendar
+                  id="to"
+                  [style]="{'width':'100%'}"
+                  [inputStyle]="{'width':'100%'}"
+                  [(ngModel)]="to"
+                  [showIcon]=true
+                  [showTime]=true
+                  (onSelect)="onDateChanged()"
+                  [maxDate]="today"
+                  showButtonBar=true>
+          </p-calendar>
+      </div>
       <div>
         <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
       </div>

src/app/unit/components/unit.component.scss

@@ -6,4 +6,27 @@
 ::ng-deep .p-accordion-content{
     background-color: white !important;
     color: black !important;    
+}
+
+/* my-calendar.component.scss */
+::ng-deep .p-button {
+    background: #174B97 !important;
+    border-color: #174B97 !important;
+}
+
+/* my-calendar.component.scss */
+::ng-deep .p-icon {
+    color: white !important;
+}
+
+/* Round only the right side of the calendar button */
+::ng-deep .p-calendar .p-datepicker-trigger {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+    border-left: none;
+}
+
+/* Add space to the right of every button except the last one */
+::ng-deep .button-row .p-button:not(:last-child) {
+    margin-right: 1rem;   /* adjust the value to your liking */
 }

src/app/unit/components/unit.component.ts

@@ -35,7 +35,7 @@ export class UnitComponent implements OnInit, OnDestroy {
   sensorTypes: SensorType[];
   unitDescription: string;
   subscription: Subscription[] = [];
-  showIntervalError: boolean = false;
+  showIntervalError = false;
 
   constructor(
     private activatedRoute: ActivatedRoute,