forked from HyperIoT-Labs/HyperIoT-UI
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
74052cd
commit 6082ca0
Showing
29 changed files
with
598 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
...map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| <div id="container-dmuc"> | ||
|
|
||
| <div id="current-status-configuration"> | ||
| <div class="status-icon"> | ||
| <mat-icon aria-hidden="false" aria-label="warning icon">warning</mat-icon> | ||
| <!-- Alternative Icon for Ok status --> | ||
| <!--<mat-icon aria-hidden="false" aria-label="thumb up icon">thumb_up_off_alt</mat-icon>--> | ||
| </div> | ||
| <div class="status-text"> | ||
| Set the coordinates of the center of the map | ||
| </div> | ||
| <div class="toggle-arrow"> | ||
| <mat-icon aria-hidden="false" aria-label="arrow icon">arrow_forward_ios</mat-icon> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="coordinates-configuration"> | ||
| <div class="title-configuration"> | ||
| Set Map Location | ||
| </div> | ||
| <div class="container-toogle-btn"> | ||
| <mat-button-toggle-group | ||
| name="coordinatesType" | ||
| aria-label="Coordinates Type" | ||
| [value]="selectedCoordType" | ||
| (change)="changeCoordType($event)" | ||
| > | ||
| <mat-button-toggle value="GEOCODING">Address</mat-button-toggle> | ||
| <mat-button-toggle value="LATLONG">Coordinates</mat-button-toggle> | ||
| </mat-button-toggle-group> | ||
| </div> | ||
| </div> | ||
| <div id="container-coord-forms" [ngSwitch]="selectedCoordType"> | ||
| <div *ngSwitchCase="'GEOCODING'"> | ||
| <p>GEOCODING</p> | ||
| <div class="container-geocoding-form"> | ||
| <form> | ||
| <div class=" form-row container-address"> | ||
| <label for="geocoding-address">Indirizzo</label> | ||
| <input id="geocoding-address" placeholder="Inserisci un indirizzo valido" type="text" /> | ||
| <mat-form-field class="example-full-width" appearance="fill"> | ||
| <mat-label>Indirizzo</mat-label> | ||
| <input matInput placeholder="Inserisci un indirizzo valido" value="Sushi"> | ||
| </mat-form-field> | ||
| </div> | ||
| <div class=" form-row zoom-lvl"> | ||
| <label for="geocoding-zoom">Zoom Level</label> | ||
| <input id="geocoding-zoom" type="number" /> | ||
| </div> | ||
| <button>Salva indirizzo</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <div *ngSwitchCase="'LATLONG'"> | ||
| <p>LATLONG</p> | ||
| <div class="container-latlong-form"> | ||
| <form> | ||
| <div class=" form-row container-lat-long"> | ||
| <label for="latlong-latitude">Latitudine</label> | ||
| <input id="latlong-latitude" placeholder="Inserisci latitudine" type="text" /> | ||
| </div> | ||
| <div class=" form-row container-lat-long"> | ||
| <label for="latlong-longitude">Longitudine</label> | ||
| <input id="latlong-longitude" placeholder="Inserisci Longitudine" type="text" /> | ||
| </div> | ||
| <div class="zoom-lvl"> | ||
| <label for="latlong-zoom">Zoom Level</label> | ||
| <input id="latlong-zoom" type="number"> | ||
| </div> | ||
| <button>Salva Coordinate</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
80 changes: 80 additions & 0 deletions
80
...map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
25 changes: 25 additions & 0 deletions
25
.../components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<DynamicMapUserConfiguratorComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [ DynamicMapUserConfiguratorComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(DynamicMapUserConfiguratorComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
39 changes: 39 additions & 0 deletions
39
...t-map/components/dynamic-map-user-configurator/dynamic-map-user-configurator.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
|
|
||
| } |
9 changes: 9 additions & 0 deletions
9
projects/components/src/lib/hyt-map/components/leaflet-map/leaflet-map.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <div id="container-leaflet-map" | ||
| leaflet | ||
| [leafletOptions]="mapOptions" | ||
| (leafletMapReady)="onMapReady($event)" | ||
| > | ||
| <div *ngIf="editMode" class="container-user-config-map"> | ||
| <hyt-dynamic-map-user-configurator></hyt-dynamic-map-user-configurator> | ||
| </div> | ||
| </div> |
Oops, something went wrong.