Upgrade to hslayers 8 and bootstrap 5

angular.json

@@ -1,8 +1,5 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "cli": {
-    "analytics": false
-  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -23,6 +20,7 @@
             "allowedCommonJsDependencies": [
               "moment-timezone"
             ],
+            "sourceMap": true,
             "outputPath": "dist/SensLog",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -61,7 +59,7 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": false,
+              "sourceMap": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,

custom-webpack.config.js

@@ -0,0 +1,11 @@
+var webpack = require('webpack');
+
+module.exports = {
+  devtool: false,
+  plugins: [
+    new webpack.SourceMapDevToolPlugin({
+      filename: '[file].map',
+      exclude: ['vendor.js'],
+    })
+  ],
+};

e2e/src/dashboard/dashboard.e2e-spec.ts

@@ -24,10 +24,10 @@ describe('Dashboard Module', () => {
   });
 
   it('Show test unit sensors!', async () => {
-    expect(await dashboardPo.xpathIsVisible('//h4[contains(text(), \'test sensor Temp\')]')).toEqual(false);
+    expect(await dashboardPo.xpathIsVisible('//h5[contains(text(), \'test sensor Temp\')]')).toEqual(false);
     await dashboardPo.clickToAccordionTab();
     await browser.sleep(500);
-    expect(await dashboardPo.xpathIsVisible('//h4[contains(text(), \'test sensor Temp\')]')).toEqual(true);
+    expect(await dashboardPo.xpathIsVisible('//h5[contains(text(), \'test sensor Temp\')]')).toEqual(true);
   });
 
   it('Add unit ' + today + ' !', async () => {
@@ -38,7 +38,7 @@ describe('Dashboard Module', () => {
   });
 
   it('Added unit ' + today + ' shown!', async () => {
-    expect(await dashboardPo.xpathIsVisible('//h3[contains(text(), \''+ today +'\')]')).toEqual(true);
+    expect(await dashboardPo.xpathIsVisible('//h4[contains(text(), \''+ today +'\')]')).toEqual(true);
   });
 
   it('Unit ' + today + ' manipulation buttons test!', async () => {
@@ -60,7 +60,7 @@ describe('Dashboard Module', () => {
     await dashboardPo.setUnitDescription('//input', today);
     await dashboardPo.clickByXpath('//span[contains(text(), \'Save\')]');
     expect(await navBarPo.success()).toEqual(true);
-    expect(await dashboardPo.xpathIsVisible('//h3[contains(text(), \''+ today +'\')]')).toEqual(true);
+    expect(await dashboardPo.xpathIsVisible('//h4[contains(text(), \''+ today +'\')]')).toEqual(true);
   });
 
   it('Insert position!', async () => {
@@ -69,7 +69,7 @@ describe('Dashboard Module', () => {
     await dashboardPo.fillPosition();
     await dashboardPo.clickByXpath('//span[contains(text(), \'Save\')]');
     expect(await navBarPo.success()).toEqual(true);
-    expect(await dashboardPo.xpathIsVisible('//h3[contains(text(), \''+ today +'\')]')).toEqual(true);
+    expect(await dashboardPo.xpathIsVisible('//h4[contains(text(), \''+ today +'\')]')).toEqual(true);
   });
 
   it('Add sensor!', async () => {
@@ -88,10 +88,10 @@ describe('Dashboard Module', () => {
     await browser.sleep(1000);
     expect(await navBarPo.success()).toEqual(true);
     await browser.sleep(5000);
-    expect(await dashboardPo.xpathIsVisible('//h3[contains(text(), \''+ sensor +'\')]')).toEqual(true);
+    expect(await dashboardPo.xpathIsVisible('//h4[contains(text(), \''+ sensor +'\')]')).toEqual(true);
     await dashboardPo.clickToAccordionTabByXpath('(.//a[contains(@class, \'p-accordion-header-link\')])[last()]');
     await browser.sleep(500);
-    expect(await dashboardPo.xpathIsVisible('//h4[contains(text(), \''+ sensor +'\')]')).toEqual(true);
+    expect(await dashboardPo.xpathIsVisible('//h5[contains(text(), \''+ sensor +'\')]')).toEqual(true);
   });
 
   it('Edit sensor!', async () => {
@@ -105,7 +105,7 @@ describe('Dashboard Module', () => {
     await dashboardPo.clickByXpath('//span[contains(text(), \'Save\')]');
     await browser.sleep(1000);
     expect(await navBarPo.success()).toEqual(true);
-    expect(await dashboardPo.xpathIsVisible('//h4[contains(text(), \''+ sensor +'_test\')]')).toEqual(true);
+    expect(await dashboardPo.xpathIsVisible('//h5[contains(text(), \''+ sensor +'_test\')]')).toEqual(true);
   });
 
   it('Delete sensor!', async () => {
@@ -118,7 +118,7 @@ describe('Dashboard Module', () => {
     await dashboardPo.clickByXpath('//span[contains(text(), \'Yes\')]');
     await browser.sleep(1000);
     expect(await navBarPo.success()).toEqual(true);
-    expect(await element(by.xpath('//h4[contains(text(), \''+ sensor +'\')]')).isPresent()).toEqual(false);
+    expect(await element(by.xpath('//h5[contains(text(), \''+ sensor +'\')]')).isPresent()).toEqual(false);
   });
 
   it('Delete unit!', async () => {
@@ -128,6 +128,6 @@ describe('Dashboard Module', () => {
     await dashboardPo.clickByXpath('//span[contains(text(), \'Yes\')]');
     await browser.sleep(1000);
     expect(await navBarPo.success()).toEqual(true);
-    expect(await element(by.xpath('//h3[contains(text(), \''+ today +'\')]')).isPresent()).toEqual(false);
+    expect(await element(by.xpath('//h4[contains(text(), \''+ today +'\')]')).isPresent()).toEqual(false);
   });
 });

package.json

@@ -12,23 +12,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^13.1.3",
-    "@angular/common": "^13.1.3",
-    "@angular/compiler": "^13.1.3",
-    "@angular/core": "^13.1.3",
-    "@angular/forms": "^13.1.3",
-    "@angular/localize": "^13.1.3",
-    "@angular/material": "^13.1.3",
-    "@angular/platform-browser": "^13.1.3",
-    "@angular/platform-browser-dynamic": "^13.1.3",
-    "@angular/router": "^13.1.3",
+    "@angular/cdk": "^13.3.0",
+    "@angular/common": "^13.3.0",
+    "@angular/compiler": "^13.3.0",
+    "@angular/core": "^13.3.0",
+    "@angular/forms": "^13.3.0",
+    "@angular/localize": "^13.3.0",
+    "@angular/material": "^13.3.0",
+    "@angular/platform-browser": "^13.3.0",
+    "@angular/platform-browser-dynamic": "^13.3.0",
+    "@angular/router": "^13.3.0",
     "@fortawesome/angular-fontawesome": "^0.10.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@ng-bootstrap/ng-bootstrap": "^11.0.0",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
-    "bootstrap": "^4.6.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
+    "bootstrap": "^5.0.0",
     "d3": "^6.7.0",
     "dayjs": "^1.10.7",
     "deepmerge": "^4.2.2",
@@ -38,7 +38,7 @@
     "geostyler-sld-parser": "^3.0.1",
     "geostyler-style": "^5.0.0",
     "geotiff": "^1.0.8",
-    "hslayers-ng": "c:/Projects/hslayers-ng/dist/hslayers/",
+    "hslayers-ng": "8.1.0",
     "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
@@ -48,7 +48,7 @@
     "ol": "^6.9.0",
     "ol-popup": "^4.0.0",
     "polygon-clipping": "^0.15.3",
-    "polygon-splitter": "^0.0.7",
+    "polygon-splitter": "^0.0.5",
     "primeicons": "^5.0.0",
     "primeng": "^13.1.0",
     "proj4": "^2.7.5",
@@ -63,16 +63,16 @@
     "zone.js": "^0.11.3"
   },
   "devDependencies": {
-    "@angular-architects/module-federation": "^14.0.1",
-    "@angular-builders/custom-webpack": "^13.0.0",
-    "@angular-devkit/build-angular": "^13.1.3",
-    "@angular-eslint/builder": "^13.0.1",
-    "@angular-eslint/eslint-plugin": "^13.0.1",
-    "@angular-eslint/eslint-plugin-template": "^13.0.1",
-    "@angular-eslint/schematics": "^13.0.1",
-    "@angular-eslint/template-parser": "^13.0.1",
-    "@angular/cli": "~13.1.3",
-    "@angular/compiler-cli": "~13.1.3",
+    "@angular-architects/module-federation": "^13.0.1",
+    "@angular-builders/custom-webpack": "13.1.0",
+    "@angular-devkit/build-angular": "^13.3.0",
+    "@angular-eslint/builder": "^13.1.0",
+    "@angular-eslint/eslint-plugin": "^13.1.0",
+    "@angular-eslint/eslint-plugin-template": "^13.1.0",
+    "@angular-eslint/schematics": "^13.1.0",
+    "@angular-eslint/template-parser": "^13.1.0",
+    "@angular/cli": "~13.3.0",
+    "@angular/compiler-cli": "~13.3.0",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
@@ -87,6 +87,6 @@
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "4.5.5"
+    "typescript": "4.4.4"
   }
 }

src/app/auth/interceptors/auth.interceptor.ts

@@ -9,9 +9,8 @@ import {Observable, throwError, of} from 'rxjs';
 
 import {catchError} from 'rxjs/operators';
 import {AuthService} from '../services/auth.service';
-import {GlobalVariable} from '../../globals';
 import {ToastService} from '../../shared/services/toast.service';
-import { environment } from '../../../environments/environment';
+import {environment} from '../../../environments/environment';
 
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {

src/app/auth/services/auth.service.ts

@@ -3,7 +3,7 @@ import {HttpClient, HttpResponse} from '@angular/common/http';
 import {Observable, of} from 'rxjs';
 import {catchError, mapTo, tap} from 'rxjs/operators';
 import {Router} from '@angular/router';
-import {CookieService} from 'ngx-cookie-service';
+import {CookieService} from './cookie.service';
 import {UserState} from '../states/user.state';
 import {LoginService} from '../../shared/api/endpoints/services/login.service';
 import {User} from '../models/user';
@@ -33,7 +33,7 @@ export class AuthService {
         rightsID: JSON.parse(localStorage.getItem(GlobalVariable.RIGHTS)),
         language: this.cookieService.get(GlobalVariable.LANGUAGE),
         audio: JSON.parse(this.cookieService.get(GlobalVariable.AUDIO)),
-        sessionid: this.cookieService.get(GlobalVariable.SESSION_ID)
+        sessionid: localStorage.getItem(GlobalVariable.SESSION_ID)
       },
       isLoggedIn: true
     }
@@ -45,7 +45,7 @@ export class AuthService {
    */
   getUser() {
     console.log('Auth Service');
-    if (!this.userState.getUser() && this.cookieService.get(GlobalVariable.SESSION_ID)) {
+    if (!this.userState.getUser() && localStorage.getItem(GlobalVariable.SESSION_ID)) {
       console.log('Session in cookie!');
       this.setFromCookie();
     }
@@ -108,7 +108,8 @@ export class AuthService {
   setSessionStorage(userCookie: UserCookie, username) {
     localStorage.setItem(GlobalVariable.USER_NAME, username)
     localStorage.setItem(GlobalVariable.RIGHTS, userCookie.rightsID.toString());
-    this.cookieService.set('user', username);
+    localStorage.setItem(GlobalVariable.SESSION_ID, userCookie.sessionid);
+    this.cookieService.set('user', username, null);
   }
 
   redirectToDashboard() {

src/app/auth/services/cookie.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class CookieService {
+  constructor() { }
+
+  set(name: string, value: string, days: number): void {
+    let expires = '';
+    if (days) {
+      const date = new Date();
+      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+      expires = '; expires=' + date.toUTCString();
+    }
+    document.cookie = name + '=' + (value || '') + expires + '; path=/';
+  }
+
+  get(name: string): string | null {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    // tslint:disable-next-line:prefer-for-of
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      // tslint:disable-next-line:triple-equals
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      // tslint:disable-next-line:triple-equals
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+
+  delete(name: string): void {
+    document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+  }
+
+  deleteAll(): void {
+    const ca = document.cookie.split(';');
+
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+
+      let keyVal = c.split('=');
+      if (keyVal.length == 2)
+        this.delete(keyVal[0]);
+    }
+  }
+}

src/app/auth/states/user.state.ts

@@ -4,7 +4,7 @@ import {User} from '../models/user';
 import {LoginService} from '../../shared/api/endpoints/services/login.service';
 import {ToastService} from '../../shared/services/toast.service';
 //import {AuthService} from '../services/auth.service';
-import {CookieService} from 'ngx-cookie-service';
+import {CookieService} from '../services/cookie.service';
 
 @Injectable({
   providedIn: 'root'

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

@@ -2,7 +2,7 @@ import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@
 import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
 import { Extent } from 'ol/extent';
 import { Group, Tile, Vector as VectorLayer } from 'ol/layer';
-import { OSM, TileWMS, Vector as VectorSource } from 'ol/source';
+import { OSM, TileArcGISRest, Vector as VectorSource } from 'ol/source';
 import GeoJSON from 'ol/format/GeoJSON';
 import { transform, transformExtent } from 'ol/proj';
 import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
@@ -46,6 +46,7 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
     this.HsConfig.update({
       assetsPath: environment.hslayersAssetsPath,
       popUpDisplay: 'click',
+      useProxy: false,
       proxyPrefix: window.location.hostname.includes('localhost')
         ? `${window.location.protocol}//${window.location.hostname}:8085/`
         : '/proxy/',
@@ -63,7 +64,21 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
                 base: true,
                 removable: false
               }
-            })
+            }),
+            new Tile({
+              //extent: [-13884991, 2870341, -7455066, 6338219],
+              source: new TileArcGISRest({
+                url: 'https://ags.cuzk.cz/arcgis/rest/services/ortofoto_wm/MapServer',
+              }),
+              visible: false,
+              properties: {
+                title: 'Ortofoto ČÚZK',
+                base: true,
+                removable: false,
+                thumbnail: 'hslayers-ng/assets/img/orto.png'
+              }
+
+            }),
           ]
         })
       ],
@@ -93,7 +108,7 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
       //    center: [1873444.3416929364, 6286508.646897761], // Latitude longitude    to Spherical Mercator
       //    extent: [1871197.0792499082, 6282949.4051418, 1873509.6915773677, 6287134.61866585],
       //    multiWorld: false,
-      //    zoom: 6
+          //zoom: 6
       })
     });
   }
@@ -162,7 +177,7 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
         }
       }
     };
-    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),
@@ -181,7 +196,7 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
               <li>Unit name &nbsp; ${feature.get('title')}</li>
               <li>Unit ID &nbsp; ${feature.get('id')}</li>
             </ul>
-            <button class="p-button-primary" style="display: block; margin: auto;"><a class="white" href="/dashboard/unit/${feature.get('id')}" target="_blank">Open Unit detail...</a></button>
+            <button class="p-button-primary" style="display: block; margin: auto;"><a class="white" href="/dashboard/unit/${feature.get('id')}?unitDescription=${feature.get('title')}" target="_blank">Open Unit detail...</a></button>
             `;
           }
         //  attributes: [

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

@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-sm-7 col-md-8 col-lg-9">
     <div class="dashboard-sensor-heading-wrapper">
-      <h4>{{ sensor.sensorName }}</h4>
+      <h5>{{ sensor.sensorName }}</h5>
     </div>
   </div>
   <div class="col-sm-5 col-md-4 col-lg-3 dashboard-sensor-heading">

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

@@ -7,7 +7,7 @@
   <p-accordionTab *ngFor="let unit of units">
     <p-header [className]="'dashboard-unit-wrapper'">
       <div [className]="'row dashboard-unit'">
-        <div class="col-sm-5 col-md-7 col-xl-9"><h3 class="unitName">{{ unit.unit.description }}</h3></div>
+        <div class="col-sm-5 col-md-7 col-xl-9"><h4 class="unitName">{{ unit.unit.description }}</h4></div>
         <div class="col-sm-7 col-md-5 col-xl-3 dashboard-unit-heading">
           <button pButton type="button" label="Sensors graph" class="p-button-primary" icon="pi pi-chart-line" [id]="unit.unit.description" [routerLink]="['/dashboard/unit', unit.unit.unitId]" [queryParams]="{unitDescription: unit.unit.description}"></button>
           <div class="dashboard-button-separator"></div>

src/app/shared/nav-bar/components/unit-insert-popup/unit-insert-popup.component.html

@@ -77,7 +77,7 @@
         </small>
       </div>
     </div>
-    <h3>Added sensors</h3>
+    <h4>Added sensors</h4>
     <hr>
     <div class="input-group form-group popup-sensors-wrapper">
       <div formArrayName="sensors" *ngFor="let item of insertForm.get('sensors')['controls']; let i = index;">

src/assets/scss/_dashboard.scss

@@ -90,7 +90,7 @@
           margin: 0;
           padding: 5px 0 5px 50px;
 
-          @include hover-focus() {
+          :hover :focus {
             cursor: pointer;
             color: $white;
             background: #619CE2;

src/assets/scss/_graph.scss

@@ -48,7 +48,7 @@
       color: #0B1226;
 
       &:not(.p-highlight):not(.p-disabled) {
-        @include hover-focus() {
+        :hover :focus {
           color: $white;
           background: $primary;
         }

src/assets/scss/_navbar.scss

@@ -187,7 +187,7 @@
     }
   }
 
-  @include hover_focus() {
+  :hover :focus {
     color: $secondary;
   }
 }

src/assets/scss/_themes.scss

@@ -11,12 +11,10 @@ html,body{
   border-color: #1B3059;
   background: $primary;
 
-  &:enabled {
-    @include hover-focus() {
+  &:enabled:hover:focus {
       color: #F2F2F2;
       border-color: #2067BC;
       background: #2067BC;
-    }
 
     @include media-breakpoint-down(xs) {
       padding-right: math.div($grid-gutter-width, 2);
@@ -32,12 +30,10 @@ html,body{
     border-color: #F2F2F2;
     background: $terciary;
 
-    &:enabled {
-      @include hover-focus() {
+    &:enabled :hover :focus {
         color: $terciary;
         border-color: #F2F2F2;
         background: #F2F2F2;
-      }
     }
   }
 }
@@ -55,7 +51,7 @@ footer {
   a {
     color: $primary;
 
-    @include hover-focus() {
+    :hover :focus {
       color: $primary;
     }
   }

src/assets/scss/styles.scss

@@ -1,42 +1,10 @@
 @use 'sass:math';
 
-@import "node_modules/bootstrap/scss/functions";
-@import "variables";
-@import "node_modules/bootstrap/scss/mixins";
-@import "node_modules/bootstrap/scss/root";
-@import "node_modules/bootstrap/scss/reboot";
-@import "node_modules/bootstrap/scss/type";
-@import "node_modules/bootstrap/scss/images";
-@import "node_modules/bootstrap/scss/code";
-@import "node_modules/bootstrap/scss/grid";
-@import "node_modules/bootstrap/scss/tables";
-@import "node_modules/bootstrap/scss/forms";
-@import "node_modules/bootstrap/scss/buttons";
-@import "node_modules/bootstrap/scss/transitions";
-@import "node_modules/bootstrap/scss/dropdown";
-@import "node_modules/bootstrap/scss/button-group";
-@import "node_modules/bootstrap/scss/input-group";
-@import "node_modules/bootstrap/scss/custom-forms";
-@import "node_modules/bootstrap/scss/nav";
-@import "node_modules/bootstrap/scss/navbar";
-@import "node_modules/bootstrap/scss/card";
-@import "node_modules/bootstrap/scss/breadcrumb";
-@import "node_modules/bootstrap/scss/pagination";
-@import "node_modules/bootstrap/scss/badge";
-@import "node_modules/bootstrap/scss/jumbotron";
-@import "node_modules/bootstrap/scss/alert";
-@import "node_modules/bootstrap/scss/progress";
-@import "node_modules/bootstrap/scss/media";
-@import "node_modules/bootstrap/scss/list-group";
-@import "node_modules/bootstrap/scss/close";
-@import "node_modules/bootstrap/scss/toasts";
-@import "node_modules/bootstrap/scss/modal";
-@import "node_modules/bootstrap/scss/tooltip";
-@import "node_modules/bootstrap/scss/popover";
-@import "node_modules/bootstrap/scss/carousel";
-/*@import "node_modules/bootstrap/scss/spinners";*/
-@import "node_modules/bootstrap/scss/utilities";
-@import "node_modules/bootstrap/scss/print";
+@import "/node_modules/bootstrap/scss/bootstrap";
+
+$primary: #174B97 !default;
+$secondary: #727271 !default;
+$terciary: #1B3059 !default;
 
 @import "themes";
 @import "fonts";
@@ -45,3 +13,7 @@
 @import "dashboard";
 @import "graph";
 @import "popup-form";
+
+.p-tabview .p-tabview-panels {
+  color: $terciary;
+}