Merge pull request #434 from allerta-vvf/master

Remove service place image and replace datepicker with new custom component

frontend/src/app/_components/datetime-picker/datetime-picker.component.html

@@ -0,0 +1,5 @@
+<div class="input-group">
+    <input type="text" [disabled]="disabled" placeholder="Premi per selezionare data" class="form-control date-picker"
+    bsDatepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD/MM/YYYY' }" [(ngModel)]="date" (ngModelChange)=updateValue()>
+    <input type="time" [disabled]="disabled" class="form-control" [(ngModel)]="time" (change)=updateValue()>
+</div>

frontend/src/app/_components/datetime-picker/datetime-picker.component.scss

@@ -0,0 +1,3 @@
+.date-picker {
+    width: 85%
+}

frontend/src/app/_components/datetime-picker/datetime-picker.component.ts

@@ -0,0 +1,86 @@
+import { Component, OnInit, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+import { defineLocale } from 'ngx-bootstrap/chronos';
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';
+import { itLocale } from 'ngx-bootstrap/locale';
+defineLocale('it', itLocale);
+
+@Component({
+  selector: 'datetime-picker',
+  templateUrl: './datetime-picker.component.html',
+  styleUrls: ['./datetime-picker.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => DatetimePickerComponent)
+    }
+  ]
+})
+export class DatetimePickerComponent implements OnInit, ControlValueAccessor {
+  disabled = false;
+
+  date: Date = new Date();
+  time: string = "";
+
+  constructor(private localeService: BsLocaleService) {
+  }
+
+  ngOnInit(): void {
+    this.localeService.use('it');
+  }
+
+  get value(): Date {
+    let date = this.date;
+    if(this.time) {
+      date.setHours(parseInt(this.time.split(":")[0]));
+      date.setMinutes(parseInt(this.time.split(":")[1]));
+    }
+    date.setSeconds(0, 0);
+    return date;
+  }
+
+  set value(value: Date | number) {
+    console.log("new value", value, "old value", this.value);
+    if(!value || typeof value === "object") return;
+
+    if(typeof value === "number") {
+      this.date = new Date(value);
+    } else {
+      this.date = value;
+    }
+    this.time = this.date.getHours().toString().padStart(2, '0') + ":" + this.date.getMinutes().toString().padStart(2, '0');
+    
+    this.onChange(this.value);
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  updateValue() {
+    this.markAsTouched();
+    this.onChange(this.value);
+  }
+
+  writeValue(new_value: Date | number): void {
+    this.value = new_value;
+  }
+
+  onChange = (value: Date) => {};
+
+  onTouched = () => {};
+
+  registerOnChange(fn: (value: Date) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+    fn();
+  }
+
+  markAsTouched() {
+    this.onTouched();
+  }
+}

frontend/src/app/_components/datetime-picker/datetime-picker.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FormsModule } from '@angular/forms';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+
+import { DatetimePickerComponent } from './datetime-picker.component';
+
+@NgModule({
+  declarations: [
+    DatetimePickerComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    BsDatepickerModule.forRoot()
+  ],
+  exports: [
+    DatetimePickerComponent
+  ]
+})
+export class DatetimePickerModule { }

frontend/src/app/_components/edit-service/edit-service.component.html

@@ -4,18 +4,14 @@
   <div class="container">
     <div class="form-group has-validation">
       <label for="date-picker">Inizio</label>
-      <input formControlName="start" [class.is-invalid]="!isFieldValid('start')" type="text"
-        placeholder="Premi per selezionare data e ora" class="form-control" bsDatepicker
-        [bsConfig]="{ adaptivePosition: true, withTimepicker: true, dateInputFormat: 'DD/MM/YYYY, hh:mm' }">
+      <datetime-picker formControlName="start" [class.is-invalid]="!isFieldValid('start')"></datetime-picker>
       <div class="invalid-feedback" *ngIf="start.errors?.['required']">
         Seleziona data e ora di inizio dell'intervento
       </div>
     </div>
     <div class="form-group has-validation">
       <label for="date-picker">Fine</label>
-      <input formControlName="end" [class.is-invalid]="!isFieldValid('end')" type="text"
-        placeholder="Premi per selezionare data e ora" class="form-control" bsDatepicker
-        [bsConfig]="{ adaptivePosition: true, withTimepicker: true, dateInputFormat: 'DD/MM/YYYY, hh:mm' }">
+      <datetime-picker formControlName="end" [class.is-invalid]="!isFieldValid('end')"></datetime-picker>
       <div class="invalid-feedback" *ngIf="end.errors?.['required']">
         Seleziona data e ora di fine dell'intervento
       </div>

frontend/src/app/_components/edit-service/edit-service.component.ts

@@ -153,6 +153,7 @@ export class EditServiceComponent implements OnInit {
   }
 
   formSubmit() {
+    console.log("form values", this.serviceForm.value);
     this.formSubmitAttempt = true;
     if(this.serviceForm.valid) {
       this.submittingForm = true;

frontend/src/app/_components/edit-service/edit-service.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { MapPickerModule } from '../map-picker/map-picker.module';
+import { DatetimePickerModule } from '../datetime-picker/datetime-picker.module';
 import { BackBtnModule } from '../back-btn/back-btn.module';
 
 import { EditServiceRoutingModule } from './edit-service-routing.module';
@@ -20,6 +21,7 @@ import { EditServiceComponent } from './edit-service.component';
     ReactiveFormsModule,
     BsDatepickerModule.forRoot(),
     MapPickerModule,
+    DatetimePickerModule,
     BackBtnModule
   ]
 })

frontend/src/app/_components/table/table.component.html

@@ -77,11 +77,7 @@
                 <td>{{ row.chief }}</td>
                 <td>{{ row.drivers }}</td>
                 <td>{{ row.crew }}</td>
-                <td>
-                    <img class="cursor-pointer" src="./api/place_image?lat={{ row.lat }}&lng={{ row.lng }}" (click)="openPlaceDetails(row.lat, row.lng)">
-                    <br>
-                    {{ row.place_name }}
-                </td>
+                <td>{{ row.place_name }}</td>
                 <td>{{ row.notes }}</td>
                 <td>{{ row.type }}</td>
                 <td hidden><i class="fa fa-edit"></i></td>