diff --git a/angular.json b/angular.json index 24df5ec6..5c964cfb 100644 --- a/angular.json +++ b/angular.json @@ -32,7 +32,10 @@ "src/assets", "src/manifest.webmanifest" ], - "styles": ["src/styles.scss"], + "styles": [ + "src/styles.scss", + "./node_modules/leaflet/dist/leaflet.css" + ], "scripts": [], "vendorChunk": true, "extractLicenses": false, @@ -118,7 +121,10 @@ "src/assets", "src/manifest.webmanifest" ], - "styles": ["src/styles.scss"], + "styles": [ + "src/styles.scss", + "./node_modules/leaflet/dist/leaflet.css" + ], "scripts": [] } }, diff --git a/package.json b/package.json index ecff89f4..2ac255ed 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,9 @@ "start": "ng serve --proxy-config proxy-local.config.json", "build": "ng build", "build-libs": "ng build core && ng build components && ng build widgets", + "components:watch": "ng build components --watch", + "widgets:watch": "ng build widgets --watch", + "libs:watch": "npm run components:watch && npm run widgets:watch", "test": "ng test", "compodoc": "npx compodoc -p src/tsconfig.app.json", "postinstall": "patch-package" @@ -26,6 +29,7 @@ "@angular/platform-browser-dynamic": "12.2.16", "@angular/router": "12.2.16", "@angular/service-worker": "12.2.16", + "@asymmetrik/ngx-leaflet": "^8.1.0", "@types/ws": "8.5.4", "angular-gridster2": "~12.1.1", "angular-plotly.js": "~4.0.4", @@ -37,6 +41,7 @@ "d3": "^5.14.2", "form-data": "^4.0.0", "isomorphic-ws": "^5.0.0", + "leaflet": "^1.9.4", "moment": "^2.29.1", "moment-precise-range-plugin": "^1.3.0", "ng-inline-svg": "^13.0.0", @@ -59,6 +64,7 @@ "@compodoc/compodoc": "~1.1.11", "@types/d3": "^5.7.2", "@types/jasmine": "~3.8.0", + "@types/leaflet": "^1.9.12", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "^6.13.2", "@typescript-eslint/parser": "^6.13.2", diff --git a/projects/components/src/lib/components.module.ts b/projects/components/src/lib/components.module.ts index 0f38cac6..d851aa4c 100644 --- a/projects/components/src/lib/components.module.ts +++ b/projects/components/src/lib/components.module.ts @@ -60,6 +60,10 @@ import { RuleErrorModalComponent } from './rule-definition/rule-error/rule-error import { HytChatbotChartMessageComponent } from './hyt-chatbot-chart-message/hyt-chatbot-chart-message.component'; import { PlotlyModule } from 'angular-plotly.js'; import { HytChartModalComponent } from './hyt-modal/hyt-chart-modal/hyt-chart-modal.component'; +import { MapComponent } from './hyt-map/map.component'; +import { LeafletMapComponent } from './hyt-map/components/leaflet-map/leaflet-map.component'; +import {LeafletModule} from "@asymmetrik/ngx-leaflet"; +import { DynamicMapUserConfiguratorComponent } from './hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component'; export const options: Partial | (() => Partial) = {}; @@ -122,6 +126,9 @@ export const options: Partial | (() => Partial) = {}; RuleErrorModalComponent, HytChatbotChartMessageComponent, HytChartModalComponent, + MapComponent, + LeafletMapComponent, + DynamicMapUserConfiguratorComponent, ], imports: [ CommonModule, @@ -131,6 +138,7 @@ export const options: Partial | (() => Partial) = {}; NgxMaskModule.forRoot(options), RouterModule, PlotlyModule, + LeafletModule, ], exports: [ CronEditorComponent, @@ -183,6 +191,8 @@ export const options: Partial | (() => Partial) = {}; RuleDefinitionComponent, HytChatbotChartMessageComponent, HytChartModalComponent, + MapComponent, + LeafletMapComponent, ], providers: [ NotificationService, diff --git a/projects/components/src/lib/hyt-chatbot/hyt-chatbot.component.scss b/projects/components/src/lib/hyt-chatbot/hyt-chatbot.component.scss index f1a36522..f9db9a68 100644 --- a/projects/components/src/lib/hyt-chatbot/hyt-chatbot.component.scss +++ b/projects/components/src/lib/hyt-chatbot/hyt-chatbot.component.scss @@ -5,9 +5,9 @@ $chatBotAliceIconBGImage: #{var(--chatBotAliceIconBGImage)}; position: fixed; bottom: 15px; right: 15px; - width: 350px; + width: 350px; height: 550px; - z-index: 99; + z-index: 1001; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); display: flex; flex-direction: column; @@ -607,7 +607,7 @@ $chatBotAliceIconBGImage: #{var(--chatBotAliceIconBGImage)}; height: 35px; align-items: center; justify-content: center; - + button { background-color: #ffffff; width: 35px; @@ -617,16 +617,16 @@ $chatBotAliceIconBGImage: #{var(--chatBotAliceIconBGImage)}; border: 3px solid #1e58a5; box-shadow: 0px 0px 3px 0px darkblue; opacity: 1; - + &:disabled { opacity: .4; cursor: not-allowed; } - + &:hover { box-shadow: 0px 0px 0px 0px darkblue; } - + img { width: 17px; margin: 0 auto; @@ -675,7 +675,7 @@ $chatBotAliceIconBGImage: #{var(--chatBotAliceIconBGImage)}; } } - .hyt-chatbot-collapsed-disconnected { + .hyt-chatbot-collapsed-disconnected { position: absolute; top: -5px; width: 20px; @@ -789,4 +789,4 @@ $chatBotAliceIconBGImage: #{var(--chatBotAliceIconBGImage)}; box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.6); transform: translatey(0px); } -} \ No newline at end of file +} diff --git a/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.html b/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.html new file mode 100644 index 00000000..08f87f15 --- /dev/null +++ b/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.html @@ -0,0 +1,75 @@ +
+ +
+
+ warning + + +
+
+ Set the coordinates of the center of the map +
+
+ arrow_forward_ios +
+
+ +
+
+ Set Map Location +
+
+ + Address + Coordinates + +
+
+
+
+

GEOCODING

+
+
+
+ + + + Indirizzo + + +
+
+ + +
+ +
+
+
+
+

LATLONG

+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
diff --git a/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.scss b/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.scss new file mode 100644 index 00000000..22ed8160 --- /dev/null +++ b/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.scss @@ -0,0 +1,80 @@ +#container-dmuc { + font-family: "Exo"; + background-color: white; + width: fit-content; + max-width: 400px; + //height: 40px; + height: auto; + padding: 5px 15px; + border: 1px solid #8f8f8f; + + -moz-border-radius: 15px; + -webkit-border-radius: 15px; + border-radius: 15px; + + -moz-box-shadow: 0px 0px 11px -2px #000; + -webkit-box-shadow: 0px 0px 11px -2px #000; + box-shadow: 0px 0px 11px -2px #000; + + display: flex; + flex-direction: column; + align-items: flex-start; + + #current-status-configuration { + display: flex; + align-items: center; + + .status-icon { + margin-right: 5px; + + mat-icon { + color: red; + } + } + + .status-text { + min-width: 250px; + width: 100%; + } + + .toggle-arrow { + margin-left: 15px; + mat-icon { + font-size: 1.5em; + display: flex; + align-items: center; + } + } + } + + #coordinates-configuration { + margin-top: 10px; + border-top: 1px solid #d4d4d4; + width: 100%; + padding-top: 10px; + + .title-configuration { + margin-bottom: 20px; + font-size: 1.4em; + color: #2B7EE2; + } + } + + #container-coord-forms { + margin-top: 20px; + + .container-geocoding-form, + .container-latlong-form { + display: flex; + flex-direction: column; + .form-row { + display: flex; + flex-direction: column; + margin-bottom: 15px; + label { + margin-bottom: 2px; + } + } + } + } +} diff --git a/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.spec.ts b/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.spec.ts new file mode 100644 index 00000000..541ce345 --- /dev/null +++ b/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DynamicMapUserConfiguratorComponent } from './dynamic-map-user-configurator.component'; + +describe('DynamicMapUserConfiguratorComponent', () => { + let component: DynamicMapUserConfiguratorComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DynamicMapUserConfiguratorComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DynamicMapUserConfiguratorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.ts b/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.ts new file mode 100644 index 00000000..2d29ad71 --- /dev/null +++ b/projects/components/src/lib/hyt-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.ts @@ -0,0 +1,39 @@ +import {Component, OnInit} from '@angular/core'; +import {CoordinatesType} from "../../models/coordinates-type"; +import {MatButtonToggleChange} from "@angular/material/button-toggle"; +import {Logger, LoggerService} from "core"; + +@Component({ + selector: 'hyt-dynamic-map-user-configurator', + templateUrl: './dynamic-map-user-configurator.component.html', + styleUrls: ['./dynamic-map-user-configurator.component.scss'] +}) +export class DynamicMapUserConfiguratorComponent implements OnInit { + /** + * Value used to indicate the type of coordinates the user wants to enter and set via toggle buttons + */ + selectedCoordType: CoordinatesType = CoordinatesType.GEOCODING; + /* + * logger service + */ + private logger: Logger; + + constructor(private loggerService: LoggerService) { + // Init Logger + this.logger = new Logger(this.loggerService); + this.logger.registerClass('DynamicMapUserConfiguratorComponent'); + } + + ngOnInit(): void { + } + + /** + * Handles the change of value when the toggle button is clicked + * @param change + */ + changeCoordType(change: MatButtonToggleChange) { + this.logger.debug('changeCoordType - Coordinates type has changed', change); + this.selectedCoordType = change.value; + } + +} diff --git a/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.html b/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.html new file mode 100644 index 00000000..336d8c20 --- /dev/null +++ b/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.html @@ -0,0 +1,9 @@ +
+
+ +
+
diff --git a/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.scss b/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.scss new file mode 100644 index 00000000..3256cee4 --- /dev/null +++ b/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.scss @@ -0,0 +1,17 @@ +#container-leaflet-map { + min-height: 650px; + border: 1px solid #e9e9e9; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + + .container-user-config-map { + position: relative; + top: 10px; + left: 70px; + display: flex; + width: fit-content; + height: auto; + z-index: 1001; + } +} diff --git a/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.spec.ts b/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.spec.ts new file mode 100644 index 00000000..b56fa49c --- /dev/null +++ b/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LeafletMapComponent } from './leaflet-map.component'; + +describe('LeafletMapComponent', () => { + let component: LeafletMapComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LeafletMapComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LeafletMapComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.ts b/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.ts new file mode 100644 index 00000000..1a5e05ac --- /dev/null +++ b/projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.ts @@ -0,0 +1,132 @@ +import {Component, Input, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core'; +import {latLng, tileLayer} from "leaflet"; +import * as L from 'leaflet'; +import {Logger, LoggerService} from "core"; +import {LeafletMap} from "../../models/leaflet-map"; + +@Component({ + selector: 'hyt-leaflet-map', + templateUrl: './leaflet-map.component.html', + styleUrls: ['./leaflet-map.component.scss'] +}) +export class LeafletMapComponent implements OnInit, OnDestroy, OnChanges { + /** + * Variable used to understand when we are in the "EDIT" mode of the map + */ + @Input() editMode: boolean = false; + /** + * Variable used to set the center of the map + */ + @Input() option: LeafletMap; + /** + * Default options to set the map in case of no user selected data + */ + defaultOption: LeafletMap = { + latitude: 44.495893197089124, + longitude: 11.39296883458248, + zoom: 15, + minZoom: 6, + maxZoom: 18 + } + defaultLayer: L.TileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors', + }); + /* + * logger service + */ + private logger: Logger + /** + * Reference to map object + * @private + */ + private mapRef: L.Map; + /** + * Observer used to report changes in map container size + * @private + */ + private resizeMapObserver: ResizeObserver; + /** + * Object that contain the init params for the mao + */ + mapOptions: L.MapOptions = { + layers: [ + this.defaultLayer + ], + zoom: this.defaultOption.zoom, + minZoom: this.defaultOption.minZoom, + maxZoom: this.defaultOption.maxZoom, + center: L.latLng({ + lat: this.defaultOption.latitude, + lng: this.defaultOption.longitude + }) + }; + + constructor( + private ngZone: NgZone, + private loggerService: LoggerService + ) { + // Init Logger + this.logger = new Logger(this.loggerService); + this.logger.registerClass('LeafletMapComponent'); + // Set First map option + this.initDataMap(this.option); + } + + ngOnInit(): void { } + + ngOnChanges(changes: SimpleChanges) { + console.log('NGONCHANGES', changes); + if (changes['option'].currentValue !== changes['options']?.previousValue) { + console.log('NGONCHANGES DIFFERENTE quindi initMap', changes['option'].currentValue); + this.initDataMap(changes['option'].currentValue); + } + } + + ngOnDestroy() { + if (this.resizeMapObserver && this.mapRef) { + this.resizeMapObserver.unobserve(this.mapRef.getContainer()); + } + } + + /** + * Initialize Map data + */ + initDataMap(option: LeafletMap) { + if (option) { + this.mapOptions = { + layers: [ + this.defaultLayer + ], + zoom: this.option.zoom, + minZoom: (this.option.minZoom) ? this.option.minZoom : this.defaultOption.minZoom, + maxZoom: (this.option.maxZoom) ? this.option.maxZoom : this.defaultOption.maxZoom, + center: L.latLng({ + lat: this.option.latitude, + lng: this.option.longitude + }) + } + } + } + + /** + * Management of the map as soon as its data are available + * @param map + */ + onMapReady(map: L.Map): void { + this.mapRef = map; + + // Region resize map management + this.resizeMapObserver = new ResizeObserver(() => { + this.ngZone.runOutsideAngular(() => { + console.log('INVALIDATE SIZE'); + map.invalidateSize(); + }); + }); + + this.resizeMapObserver.observe(map.getContainer()); + //#endregion + + L.control.scale().addTo(map); + } + +} diff --git a/projects/components/src/lib/hyt-map/map.component.html b/projects/components/src/lib/hyt-map/map.component.html new file mode 100644 index 00000000..0fa9597d --- /dev/null +++ b/projects/components/src/lib/hyt-map/map.component.html @@ -0,0 +1,6 @@ +
+ + + +
+ diff --git a/projects/components/src/lib/hyt-map/map.component.scss b/projects/components/src/lib/hyt-map/map.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/projects/components/src/lib/hyt-map/map.component.spec.ts b/projects/components/src/lib/hyt-map/map.component.spec.ts new file mode 100644 index 00000000..f1631479 --- /dev/null +++ b/projects/components/src/lib/hyt-map/map.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MapComponent } from './map.component'; + +describe('MapComponent', () => { + let component: MapComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MapComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MapComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/components/src/lib/hyt-map/map.component.ts b/projects/components/src/lib/hyt-map/map.component.ts new file mode 100644 index 00000000..fc70ef0c --- /dev/null +++ b/projects/components/src/lib/hyt-map/map.component.ts @@ -0,0 +1,39 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {MapTypeKey} from "./models/map-type-key"; +import {Logger, LoggerService} from "core"; +import {LeafletMap} from "./models/leaflet-map"; + +@Component({ + selector: 'hyt-map', + templateUrl: './map.component.html', + styleUrls: ['./map.component.scss'] +}) +export class MapComponent implements OnInit { + /** + * Indication of the type of third-party library used for map display + */ + @Input() mapType: MapTypeKey = MapTypeKey.LEAFLET; + /** + * Variable used to understand when we are in the "EDIT" mode of the map + */ + @Input() editMode: boolean = false; + /** + * Variable used to understand when we are in the "EDIT" mode of the map + */ + @Input() option: LeafletMap; + /* + * logger service + */ + private logger: Logger; + + constructor(private loggerService: LoggerService) { + // Init Logger + this.logger = new Logger(this.loggerService); + this.logger.registerClass('MapComponent'); + } + + ngOnInit(): void { + this.logger.info('Created map! Map Type: ' + this.mapType + ' - Edit mode: ' + this.editMode); + } + +} diff --git a/projects/components/src/lib/hyt-map/models/coordinates-type.ts b/projects/components/src/lib/hyt-map/models/coordinates-type.ts new file mode 100644 index 00000000..0272895d --- /dev/null +++ b/projects/components/src/lib/hyt-map/models/coordinates-type.ts @@ -0,0 +1,4 @@ +export enum CoordinatesType { + LATLONG = 'LATLONG', + GEOCODING = 'GEOCODING' +} diff --git a/projects/components/src/lib/hyt-map/models/generic-map.ts b/projects/components/src/lib/hyt-map/models/generic-map.ts new file mode 100644 index 00000000..a75ed2b5 --- /dev/null +++ b/projects/components/src/lib/hyt-map/models/generic-map.ts @@ -0,0 +1,5 @@ +export interface GenericMap { + latitude: number; + longitude: number; + zoom: number; +} diff --git a/projects/components/src/lib/hyt-map/models/leaflet-map.ts b/projects/components/src/lib/hyt-map/models/leaflet-map.ts new file mode 100644 index 00000000..9928b121 --- /dev/null +++ b/projects/components/src/lib/hyt-map/models/leaflet-map.ts @@ -0,0 +1,6 @@ +import {GenericMap} from "./generic-map"; + +export interface LeafletMap extends GenericMap { + minZoom?: number; + maxZoom?: number; +} diff --git a/projects/components/src/lib/hyt-map/models/map-type-key.ts b/projects/components/src/lib/hyt-map/models/map-type-key.ts new file mode 100644 index 00000000..d6a233c7 --- /dev/null +++ b/projects/components/src/lib/hyt-map/models/map-type-key.ts @@ -0,0 +1,4 @@ +export enum MapTypeKey { + LEAFLET = 'LEAFLET', + GOOGLE = 'GOOGLE' +} diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts index e27180e9..29bcbab7 100644 --- a/projects/components/src/public-api.ts +++ b/projects/components/src/public-api.ts @@ -28,6 +28,8 @@ export * from './lib/hyt-tri-checkbox/hyt-tri-checkbox.component'; export * from './lib/hyt-infinite-scrolling-table/hyt-infinite-scrolling-table.component'; export * from './lib/hyt-notification-box/notification-box.component' export * from './lib/hyt-bim/bim.component'; +export * from './lib/hyt-map/map.component'; +export * from './lib/hyt-map/components/leaflet-map/leaflet-map.component'; export { SelectOption, SelectOptionGroup } from './lib/hyt-select/hyt-select.component'; export { TreeNode } from './lib/hyt-tree-view/hyt-tree-view.component'; @@ -107,4 +109,4 @@ export { InfoDialogConfig, InfoDialogResult } from './lib/hyt-dialog/info-dialog export { CronEditorComponent } from './lib/cron-editor/cron-editor.component'; export { CronOptions } from './lib/cron-editor/CronOptions'; -export { RuleDefinitionComponent } from './lib/rule-definition/rule-definition.component'; \ No newline at end of file +export { RuleDefinitionComponent } from './lib/rule-definition/rule-definition.component'; diff --git a/src/app/app.component.scss b/src/app/app.component.scss index a59b5264..d6a6ebf6 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -53,7 +53,7 @@ html { #hyt-container-topbar { position: fixed; - z-index: 999; + z-index: 1002; top: 0; right: 0; left: 0; diff --git a/src/app/components/sidebar/sidebar.component.scss b/src/app/components/sidebar/sidebar.component.scss index 927aa867..54487617 100644 --- a/src/app/components/sidebar/sidebar.component.scss +++ b/src/app/components/sidebar/sidebar.component.scss @@ -23,15 +23,15 @@ bottom:0; height:100%; left:0; - z-index: 998; + z-index: 1001; background-color: #1e58a5; -webkit-transition: left .15s ease-in-out; -moz-transition: left .15s ease-in-out; -o-transition: left .15s ease-in-out; transition: left .15s ease-in-out; - - + + ul { display: flex; flex-direction: column; @@ -44,7 +44,7 @@ transition: width .1s ease-in-out; border: #e5e5e5; width: 59px; - + &:hover, &.expanded { @@ -69,14 +69,14 @@ } } } - + &.logout { position:absolute; left: 0; bottom: 0; } } - + li { position: relative; display: block; @@ -115,12 +115,12 @@ -moz-transition: width .1s linear; -webkit-transition: width .1s linear; transition: width .1s linear; - + &:hover, &:focus { text-decoration:none; } - + .fa { position: relative; display: table-cell; @@ -140,7 +140,7 @@ font-size: 2em; padding: 12px 15px; } - + } } @@ -149,7 +149,7 @@ margin-top: auto; cursor: pointer; } - + .nav-icon { position:relative; display:table-cell; @@ -159,7 +159,7 @@ vertical-align:middle; font-size:18px; } - + .nav-text { position: relative; display: table-cell; @@ -178,7 +178,7 @@ } } - + } @@ -203,7 +203,7 @@ left: 0px; ul { - + &.ul-mob-show { width: 250px; @@ -227,7 +227,7 @@ } } - + } } @@ -240,7 +240,7 @@ } - } + } } diff --git a/src/app/pages/areas/container-area-map/container-area-map.component.html b/src/app/pages/areas/container-area-map/container-area-map.component.html index a089d884..332fb557 100644 --- a/src/app/pages/areas/container-area-map/container-area-map.component.html +++ b/src/app/pages/areas/container-area-map/container-area-map.component.html @@ -101,6 +101,10 @@

+
+ +
+ diff --git a/src/app/pages/areas/container-area-map/container-area-map.component.scss b/src/app/pages/areas/container-area-map/container-area-map.component.scss index 8d305db8..0b795098 100644 --- a/src/app/pages/areas/container-area-map/container-area-map.component.scss +++ b/src/app/pages/areas/container-area-map/container-area-map.component.scss @@ -13,7 +13,7 @@ width: 90%; background-color: #ffffff; height: max-content; - z-index: 2; + z-index: 1001; max-width: max-content; border-radius: 5px; diff --git a/src/app/pages/areas/container-area-map/container-area-map.component.ts b/src/app/pages/areas/container-area-map/container-area-map.component.ts index efa7c4bf..47c714a1 100644 --- a/src/app/pages/areas/container-area-map/container-area-map.component.ts +++ b/src/app/pages/areas/container-area-map/container-area-map.component.ts @@ -8,7 +8,7 @@ import {Router} from '@angular/router'; import {HytTreeViewProjectComponent} from 'components'; import {takeUntil} from 'rxjs/operators'; import {Subject} from 'rxjs'; -import {installTempPackage} from '@angular/cli/utilities/install-package'; +import {MapTypeKey} from "../../../../../projects/components/src/lib/hyt-map/models/map-type-key"; @Component({ selector: 'hyt-container-area-map', @@ -103,6 +103,7 @@ export class ContainerAreaMapComponent implements OnInit, OnDestroy { isBimLoading: boolean = true; isEmptyBim: boolean = false; areaConfiguration: string; + currentMapTypeKey: MapTypeKey = MapTypeKey.LEAFLET; /* * logger service */ diff --git a/src/app/pages/projects/project-detail/project-detail.component.ts b/src/app/pages/projects/project-detail/project-detail.component.ts index 8473d9c0..3d626efc 100644 --- a/src/app/pages/projects/project-detail/project-detail.component.ts +++ b/src/app/pages/projects/project-detail/project-detail.component.ts @@ -646,6 +646,7 @@ export class ProjectDetailComponent implements OnInit, OnDestroy { (childComponent.formTemplateId.includes('areas-form') && this.areaSection === 'Tab-Map-IMAGE') || (childComponent.formTemplateId.includes('areas-form') && this.areaSection === 'Tab-Map-BIM_XKT') || (childComponent.formTemplateId.includes('areas-form') && this.areaSection === 'Tab-Map-BIM_IFC') || + (childComponent.formTemplateId.includes('areas-form') && this.areaSection === 'Dynamic-MAP') || (childComponent.formTemplateId.includes('areas-form') && this.areaSection === 'Tab-Info') && childComponent.editMode === false || diff --git a/src/app/pages/projects/project-forms/areas-form/areas-form.component.html b/src/app/pages/projects/project-forms/areas-form/areas-form.component.html index 8a3ed1be..b510a928 100644 --- a/src/app/pages/projects/project-forms/areas-form/areas-form.component.html +++ b/src/app/pages/projects/project-forms/areas-form/areas-form.component.html @@ -166,6 +166,19 @@ + +
+ Add device + Add sub-area +
+ + + diff --git a/src/app/pages/projects/project-forms/areas-form/areas-form.component.ts b/src/app/pages/projects/project-forms/areas-form/areas-form.component.ts index b70f765d..7cb088b0 100644 --- a/src/app/pages/projects/project-forms/areas-form/areas-form.component.ts +++ b/src/app/pages/projects/project-forms/areas-form/areas-form.component.ts @@ -113,16 +113,22 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft allowedBimTypes = ['.xkt']; acceptFiles = this.allowedImageTypes.join(',').replace(/\./,'image/'); maxFileSize = 1000000; + /** + * Overlay Media string + */ overlayLoadingString = $localize`:@@HYT_loading_area_media:Loading Area Media`; ovelayErrorString = $localize`:@@HYT_loading_media_error:Loading Media Error`; overlayEmptyString = $localize`:@@HYT_no_area_media:No Media`; /** - * Types of areas used to identify the value of the current tab + * BIM status data */ - currentTabAreaType?: AreaType; pathBim: string = ''; isBimLoading: boolean = true; isEmptyBim: boolean = false; + /** + * Dynamic Map loading status status data + */ + isDynamicMapLoading: boolean = true; /** * Will contain the old value in case a change is made on the area type */ @@ -149,7 +155,7 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft case 'IMAGE': return {label: $localize`:@@HYT_project_areas_static_image:STATIC IMAGE`, value: Area.AreaViewTypeEnum[k]} case 'MAP': - return {label: $localize`:@@HYT_project_areas_dynamic_map:DYNAMIC MAP`, value: Area.AreaViewTypeEnum[k], disabled: true} + return {label: $localize`:@@HYT_project_areas_dynamic_map:DYNAMIC MAP`, value: Area.AreaViewTypeEnum[k]} case 'BIMXKT': return {label: $localize`:@@HYT_project_areas_bim_xkt_format:BIM IN XKT FORMAT`, value: Area.AreaViewTypeEnum[k]} case 'BIMIFC': @@ -183,9 +189,9 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft .subscribe((conf) => { if (conf && conf.maxFileSize > 0) { this.maxFileSize = +conf.maxFileSize; - this.logger.debug('Configuration Max File Size', this.maxFileSize); + this.logger.debug('GETCONFIG - Configuration Max File Size', this.maxFileSize); } else { - this.logger.warn('The configuration does not contain the maximum size parameter of the file to upload', conf); + this.logger.warn('GETCONFIG - The configuration does not contain the maximum size parameter of the file to upload', conf); } }); } @@ -223,8 +229,8 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft } ngAfterViewInit() { + // Automatically the first tab is the Info tab but we have to change this logic this.clickedTab.emit('Tab-Info'); - /** * We subscribe to the change of the specific variable to keep the old value in memory */ @@ -559,7 +565,7 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft if(event.value && this.entity.areaViewType !== undefined && event.value !== this.entity.areaViewType){ this.openModalChangeType(event.value); } else { - this.logger.info('onInfoTypeChange function, no type changed: '+event.value + ' - ' +this.entity.areaViewType); + this.logger.info('onInfoTypeChange function, no type changed: ' + event.value + ' - ' + this.entity.areaViewType); } } @@ -945,6 +951,10 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft this.clickedTab.emit('Tab-Map-'+ariaLabelValue.toUpperCase()); this.logger.debug('onTabChange Tab-Map', e); break; + case 'MAP': + this.loadAreaData(); + this.clickedTab.emit('Dynamic-'+ e.tab.ariaLabel.toUpperCase()); + this.logger.debug('onTabChange Dynamic-Map', e); } } @@ -1085,6 +1095,10 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft } } + /** + * Loading a BIM model of an area + * @private + */ private loadAreaBim() { this.logger.debug('loadAreaBim function start'); this.isBimLoading = true; @@ -1115,6 +1129,16 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft } } + /** + * Loading a BIM model of an area + * @private + */ + private loadDynamicMap() { + this.logger.debug('loadDynamicMap function start'); + this.isDynamicMapLoading = true; + const dynamicMapConfig = JSON.parse(this.entity.areaConfiguration); + } + /** * Get ID of parent Area * @private @@ -1170,7 +1194,7 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft } loadMediaDataBySelectedTab(ariaLabelValue: string){ - if (ariaLabelValue === 'IMAGE' || ariaLabelValue === 'BIM_XKT'){ + if (ariaLabelValue === 'IMAGE' || ariaLabelValue === 'BIM_XKT' || ariaLabelValue === 'MAP'){ this.loadMediaElements(this.entity.areaViewType); } else if(ariaLabelValue === '') { // @@TODO: remember to display a modal with error message @@ -1320,6 +1344,9 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft case AreaViewTypeEnum.BIMXKT: this.loadAreaBim(); break; + case AreaViewTypeEnum.MAP: + console.log('loadMediaElements', areaViewType); + break; } }