Merge pull request #33 from boeckMt/boeckMt-patch-1

Update map.utills.ts
boeckMt · Oct 12, 2023 · 69a8494 · 69a8494
2 parents 6f1d1a4 + cd2981d
commit 69a8494
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 7 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -17,13 +17,13 @@
 </main>
 <section class="map-time-control">
   <mat-toolbar>
-    <mat-toolbar-row>
+    <mat-toolbar-row class="bottom-toolbar">
       <app-time-slider [dates]="datesString" [startTime]="startState.time"
         (dateChange)="sliderOnChange($event)"></app-time-slider>
     </mat-toolbar-row>
-    <mat-toolbar-row>
+    <mat-toolbar-row class="bottom-toolbar">
       <span class="title">
-        {{ currentState.time | date: 'dd/M/yyyy - HH:mm:ss'}}
+        {{ currentState.time | date: 'dd/M/yyyy - HH:mm'}}
       </span>
       <button mat-icon-button aria-label="share map" title="share current map view" (click)="shareLink()">
         <mat-icon >share</mat-icon>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -15,9 +15,15 @@ $bottom-toolbar-height-mobile: 112px;
 .mat-toolbar {
   background: rgb(0, 77, 64);
   color: rgba(255, 255, 255, 0.9);
+
+  .bottom-toolbar {
+    padding: 0 0.3rem
+  }
 }
 
 
+
+
 .mat-progress-bar.mat-debug {
   .mat-progress-bar-background {
     fill: #bf00ef80;

diff --git a/src/app/map.utills.ts b/src/app/map.utills.ts
@@ -12,7 +12,7 @@ import VectorSource from 'ol/source/Vector';
 import { Coordinate } from 'ol/coordinate';
 import { Feature } from 'ol';
 import CircleStyle from 'ol/style/Circle';
-import { Fill, Style } from 'ol/style';
+import { Fill, Style, Stroke } from 'ol/style';
 
 
 export function findLayerRecursive(lLayergroup: Layer | LayerEntity, path: string) {
@@ -72,6 +72,10 @@ export function addLocationLayer(map: Map, coordinates: Coordinate) {
       return new Style({
         image: new CircleStyle({
           radius: 6,
+          stroke: new Stroke({
+            color: 'black',
+            width: 1,
+          }),
           fill: new Fill({
             color: 'rgba(235, 156, 70, 0.8)',
           })

diff --git a/src/app/time-slider/time-slider.component.html b/src/app/time-slider/time-slider.component.html
@@ -12,7 +12,7 @@
   </button>
 
   <mat-slider showTickMarks discrete (change)="sliderOnChange($event)" [min]="sMin" [max]="sMax" [step]="sStep"
-    [disabled]="isdisabled">
+    [disabled]="isdisabled" [displayWith]="formatLabel">
     <input [value]="sMin" [(ngModel)]="sValue" matSliderThumb>
   </mat-slider>
 

diff --git a/src/app/time-slider/time-slider.component.scss b/src/app/time-slider/time-slider.component.scss
@@ -14,6 +14,7 @@
 
   mat-slider {
     width: calc(100% - (92px + 30px));
+    margin: 0 1.5rem;
 
     --mdc-slider-handle-color: rgb(235, 156, 70);
     --mdc-slider-focus-handle-color: rgb(235, 156, 70);

diff --git a/src/app/time-slider/time-slider.component.ts b/src/app/time-slider/time-slider.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, OnChanges } from '@angular/core';
 import { Input, Output, EventEmitter } from '@angular/core';
+import { DatePipe } from '@angular/common';
 import { findClosestDate } from '../utills';
 
 export interface IdateChange {
@@ -9,7 +10,8 @@ export interface IdateChange {
 @Component({
   selector: 'app-time-slider',
   templateUrl: './time-slider.component.html',
-  styleUrls: ['./time-slider.component.scss']
+  styleUrls: ['./time-slider.component.scss'],
+  providers: [DatePipe]
 })
 export class TimeSliderComponent implements OnChanges {
 
@@ -27,10 +29,15 @@ export class TimeSliderComponent implements OnChanges {
   playing = false;
   intervalID: any;
   isdisabled = true;
-  constructor() {
+  constructor(private datePipe: DatePipe) {
 
   }
 
+  formatLabel = (value: number) => {
+    const now = (this.dates && this.sValue) ? this.dates[this.sValue] : this.dates[this.sMin];
+    return this.datePipe.transform(now,'HH:mm');
+  }
+
   setSlider(value: '+' | '-') {
     if (value === '+') {
       this.sValue += this.sStep;