- datetime picker as vue component

- delete bounding box via leaflet button

app/Models/Coverage.php

@@ -37,15 +37,15 @@ class Coverage extends Model
 
     public function setTimeAbsolutAttribute($value)
     {
-        $this->attributes['time_absolut'] = \Illuminate\Support\Carbon::createFromFormat('d.m.Y H:i:s', $value);
+        $this->attributes['time_absolut'] = \Illuminate\Support\Carbon::createFromFormat('d-m-Y H:i:s', $value);
     }
     public function setTimeMinAttribute($value)
     {
-        $this->attributes['time_min'] = \Illuminate\Support\Carbon::createFromFormat('d.m.Y H:i:s', $value);
+        $this->attributes['time_min'] = \Illuminate\Support\Carbon::createFromFormat('d-m-Y H:i:s', $value);
     }
     public function setTimeMaxAttribute($value)
     {
-        $this->attributes['time_max'] = \Illuminate\Support\Carbon::createFromFormat('d.m.Y H:i:s', $value);
+        $this->attributes['time_max'] = \Illuminate\Support\Carbon::createFromFormat('d-m-Y H:i:s', $value);
     }
 
     /**

package-lock.json

@@ -10346,6 +10346,11 @@
       "integrity": "sha512-G9152NzUkz0i0xTfhk0Afc8vzdXxDR1pfN4dTwE72cskkgJtdXfrKBkMfGvDuxUh35U500g5Ve4xL8PEGdWeHg==",
       "dev": true
     },
+    "vue-datetime-picker": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vue-datetime-picker/-/vue-datetime-picker-0.2.1.tgz",
+      "integrity": "sha1-e3JN3jty1TFkWifWWXWJ1tiCrTs="
+    },
     "vue-events": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vue-events/-/vue-events-3.1.0.tgz",

package.json

@@ -43,6 +43,7 @@
     "datatables.net": "^1.10.19",
     "datatables.net-buttons": "^1.5.6",
     "easytimer": "^1.1.1",
-    "single-page-nav": "^1.0.0"
+    "single-page-nav": "^1.0.0",
+    "vue-datetime-picker": "^0.2.1"
   }
 }

resources/js/components/LocationsMap.ts

@@ -162,7 +162,7 @@ export default class LocationsMap extends Vue {
       },
       _buildButton: function(){
         this._link = L.DomUtil.create('a','simplebutton-action',this._container);
-        this._link.href = "#";
+        // this._link.href = "#";
         if(this.options.id) {
           this._link.id = this.options.id;
         }

resources/js/datasetPublish.js

@@ -36,6 +36,7 @@ import LocationsMap from './components/locations-map.vue';
 import VueCountdown from './components/vue-countdown';
 import PersonTable from './components/PersonTable.vue';
 import modal from './components/ShowModal.vue';
+import datetime from 'vuejs-datetimepicker';
 // import datetime from 'vuejs-datetimepicker';
 // import { Validator } from 'vee-validate';
 import VueToast from 'vue-toast-notification';
@@ -63,7 +64,7 @@ Vue.use(VeeValidate, {
 const STATUS_INITIAL = 0, STATUS_SAVING = 1, STATUS_SUCCESS = 2, STATUS_FAILED = 3;
 const app = new Vue({
     el: '#app',
-    components: { MyAutocomplete, LocationsMap, VueCountdown, modal, PersonTable },
+    components: { MyAutocomplete, LocationsMap, VueCountdown, modal, PersonTable, datetime  },
     data() {
         return {
             list: [

resources/views/publish/create-step1.blade.php

@@ -450,22 +450,23 @@
                         
                             <div v-show="time === 'absolut'" class="pure-u-1 pure-u-md-1">
                                 {!! Form::label('time_absolut', 'time absolut: ') !!} 
-                                {!! Form::datetimelocal('time_absolut', null, ['class' => 'pure-u-23-24', 'placeholder' => 'dd.MM.yyyy HH:mm:ss',
+                                {{-- {!! Form::datetime('time_absolut', null, ['class' => 'pure-u-23-24', 'placeholder' => 'dd.MM.yyyy HH:mm',
-                                'v-model' => 'dataset.coverage.time_absolut', 'data-vv-scope' => 'step-2', 'step' => 1,
+                                'v-model' => 'dataset.coverage.time_absolut', 'data-vv-scope' => 'step-2', 'format' => 'yyyy-MM-dd HH:mm',
-                                "v-validate" => "this.isTimeAbsolut ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' " ]) !!}
+                                "v-validate" => "this.isTimeAbsolut ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' " ]) !!} --}}
+                                <datetime name="time_absolut" v-validate="this.isTimeAbsolut ? 'required|date_format:dd-MM-yyyy HH:mm:ss' : '' " data-vv-scope="step-2" format="DD-MM-YYYY h:i:s" v-model='dataset.coverage.time_absolut' ></datetime>
                                 {{-- <datetime name="time_absolut" format="MM-DD-YYYY H:i:s" width="300px" v-model="dataset.coverage.time_absolut"></datetime> --}}
                             </div>
                             <div v-show="time === 'range'" class="pure-u-1 pure-u-md-1">
                                 {!! Form::label('time_min', 'time min: ') !!} 
-                                {!! Form::date('time_min', null, ['class' => 'pure-u-23-24',
+                                {!! Form::datetimelocal('time_min', null, ['class' => 'pure-u-23-24', 'placeholder' => 'dd.MM.yyyy HH:mm:ss', 
-                                'v-model' => 'dataset.coverage.time_min', 'data-vv-scope' => 'step-2',
+                                'v-model' => 'dataset.coverage.time_min', 'data-vv-scope' => 'step-2', 'step' => 1,
-                                "v-validate" => "this.isTimeRange ? 'required' : '' "]) !!}
+                                "v-validate" => "this.isTimeRange ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' "]) !!}
                             </div>
                             <div v-show="time === 'range'" class="pure-u-1 pure-u-md-1">
                                 {!! Form::label('timemax', 'time max: ') !!} 
-                                {!! Form::date('time_max', null, ['class' => 'pure-u-23-24', 
+                                {!! Form::datetimelocal('time_max', null, ['class' => 'pure-u-23-24', 'placeholder' => 'dd.MM.yyyy HH:mm:ss',
-                                'v-model' => 'dataset.coverage.time_max', 'data-vv-scope' => 'step-2',
+                                'v-model' => 'dataset.coverage.time_max', 'data-vv-scope' => 'step-2', 'step' => 1,
-                                "v-validate" => "this.isTimeRange ? 'required' : '' "]) !!}
+                                "v-validate" => "this.isTimeRange ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' "]) !!}
                             </div>                            
                         </div>