- leaflet DeleteButton in extra typescript class

- validate bounding box only if extent is given
- prettier modal dialog

app/Http/Controllers/Publish/IndexController.php

@@ -221,7 +221,7 @@ class IndexController extends Controller
             'type' => 'required|min:4',
             'belongs_to_bibliography' => 'required|boolean',
         ]);
-        if ($validator->passes()) {
+        if (!$validator->fails()) {
             //TODO Handle your data
             return response()->json(array(
                 'response' => 'success'));
@@ -275,7 +275,7 @@ class IndexController extends Controller
             }
         }
         $validator = Validator::make($request->all(), $rules);
-        if ($validator->passes()) {
+        if (!$validator->fails()) {
             //store dataset todo
             //$data = $request->all();
             $input = $request->except('files', 'licenses', 'abstract_main', 'title_main', 'references', 'titles');
@@ -446,7 +446,7 @@ class IndexController extends Controller
                 // }
 
                 if (isset($data['coverage'])) {
-                    $formCoverage = $request->input('coverage');
+                    $formCoverage = (array) $request->input('coverage');
                     $coverage = new Coverage($formCoverage);
                     $dataset->coverage()->save($coverage);
                     //$coverage->dataset()->associate($dataset)->save();
@@ -531,7 +531,7 @@ class IndexController extends Controller
             }
         }
         $validator = Validator::make($request->all(), $rules);
-        if ($validator->passes()) {
+        if (!$validator->fails()) {
             //store dataset todo
             //$data = $request->all();
             $input = $request->except('files', 'licenses', 'abstract_main', 'title_main', 'references');

resources/js/components/DeleteButton.ts

@@ -0,0 +1,80 @@
+import * as L from "leaflet";
+
+// var CustomControl = L.Control.extend({
+export default class DeleteButton extends L.Control {
+  options = {
+    position: "topleft",
+    faIcon: 'fa-trash',
+    id: "",
+    text: ""
+    // faIcon: 'fa-check-circle'
+  };
+
+  geolocation = null;
+  drawnItems = null;
+  bounds = null;
+  _map = null;
+  _container = null;
+
+  //constructor:
+  // initialize(options) {
+  //   //util.mixin(this.options, options);      
+  //   L.Util.setOptions(this, options);
+  //   // properties
+  //   this.geolocation = options.geolocation;
+  //   this.drawnItems = options.drawnItems;
+  //   this.bounds = options.bounds;
+  // }
+
+  constructor(options) {
+    super();
+    //util.mixin(this.options, options);      
+    L.Util.setOptions(this, options);
+    // properties
+    this.geolocation = options.geolocation;
+    this.drawnItems = options.drawnItems;
+    this.bounds = options.bounds;
+  }
+
+  onAdd(map) {
+    this._map = map;
+    this._container = L.DomUtil.create(
+      "div",
+      "leaflet-bar leaflet-control leaflet-control-custom"
+    )
+
+    this._container.style.backgroundColor = "white";
+    this._container.style.width = "30px";
+    this._container.style.height = "30px";
+    this._buildButton();
+
+    // container.onclick = function() {
+    //   console.log("buttonClicked");
+    // };
+
+    return this._container;
+  }
+
+  _buildButton() {
+    var _link = L.DomUtil.create('a', 'simplebutton-action', this._container);
+    // this._link.href = "#";
+    if (this.options.id) {
+      _link.id = this.options.id;
+    }
+    if (this.options.text) {
+      _link.innerHTML = this.options.text;
+    } else {
+      L.DomUtil.create('i', 'fa ' + this.options.faIcon, _link);
+    }
+    L.DomEvent.on(_link, 'click', function (ev) {
+      this.drawnItems.clearLayers();
+      this.options.geolocation.xmin = "";
+      this.options.geolocation.ymin = "";
+      this.options.geolocation.xmax = "";
+      this.options.geolocation.ymax = "";
+      this._map.fitBounds(this.bounds);
+    },
+      this);
+  }
+}
+// export default CustomControl;

resources/js/components/LocationsMap.ts

@@ -1,5 +1,6 @@
 // import "leaflet";
 import * as L from "leaflet";
+import DeleteButton from "./DeleteButton";
 import "leaflet-draw";
 import { Component, Inject, Vue, Prop, Watch } from "vue-property-decorator";
 import VueToast from "vue-toast-notification";
@@ -26,13 +27,6 @@ export default class LocationsMap extends Vue {
   };
 
   created() {   
-    // this.$validator.extend("boundingBox", {
-    //   getMessage: field => "At least one " + field + " needs to be checked.",
-    //   validate: (value, [testProp]) => {
-    //     const options = this.dataset.checkedLicenses;
-    //     return value || options.some(option => option[testProp]);
-    //   }
-    // });
   }
 
   zoomTo() {
@@ -129,61 +123,8 @@ export default class LocationsMap extends Vue {
     var drawControl = new L.Control.Draw(drawPluginOptions);
     map.addControl(drawControl);
 
-    var customControl = L.Control.extend({
+    var customControl = new DeleteButton({ geolocation: this.geolocation, drawnItems: drawnItems, bounds: bounds  });
-      options: {
+    map.addControl(customControl);   
-        position: "topleft",  
-        faIcon: 'fa-trash'      
-        // faIcon: 'fa-check-circle'
-      },
-      //constructor:
-      initialize: function(options) {     
-        //util.mixin(this.options, options);      
-        L.Util.setOptions(this, options);
-        // properties
-        this.geolocation = options.geolocation;
-      },
-      onAdd: function(map) {
-        this._map = map;
-        this._container = L.DomUtil.create(
-          "div",
-          "leaflet-bar leaflet-control leaflet-control-custom"
-        );
-      
-        this._container.style.backgroundColor = "white";
-        this._container.style.width = "30px";
-        this._container.style.height = "30px";
-        this._buildButton();
-
-        // container.onclick = function() {
-        //   console.log("buttonClicked");
-        // };
-      
-        return  this._container;
-      },
-      _buildButton: function(){
-        this._link = L.DomUtil.create('a','simplebutton-action',this._container);
-        // this._link.href = "#";
-        if(this.options.id) {
-          this._link.id = this.options.id;
-        }
-        if(this.options.text) {
-          this._link.innerHTML = this.options.text;
-        }else{
-          L.DomUtil.create('i','fa ' + this.options.faIcon, this._link);
-        }
-        L.DomEvent.on(this._link, 'click', function(ev) {
-            drawnItems.clearLayers();
-            this.options.geolocation.xmin = "";
-            this.options.geolocation.ymin = "";
-            this.options.geolocation.xmax = "";
-            this.options.geolocation.ymax = "";
-            this._map.fitBounds(bounds);
-          },
-          this);
-      }
-    
-    });  
-    map.addControl(new customControl({ geolocation: this.geolocation }));   
 
     map.on(
       L.Draw.Event.CREATED,
@@ -223,4 +164,12 @@ export default class LocationsMap extends Vue {
       this
     );
   }
+
+  get validBoundingBox(): boolean {
+    if (this.geolocation.xmin != "" && this.geolocation.ymin != "" && this.geolocation.xmax != "" && this.geolocation.ymax != "" ) {
+        return true;
+    }
+    return false;
+  }
+
 }

resources/js/components/ShowModal.vue

@@ -1,166 +1,43 @@
-// https://alligator.io/vuejs/vue-modal-component/
 <template>
+  <transition name="modal-fade">
     <div class="modal-backdrop">
-  <div class="popup">
+      <div class="modal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
-    <div class="fm_overlay" >
+        <header class="modal-header" id="modalTitle">
-        <header class="popupbar">
           <slot name="header">
-                <b class="popuptitle">Help</b>         
+            This is the default tile!
+            <button type="button" class="btn-close" v-on:click="close" aria-label="Close modal">x</button>
           </slot>
-          <button class="btn-close" @click="close">x</button>
         </header>
-        <section class="pageinfo">             
+        <section class="modal-body" id="modalDescription">
           <slot name="body">I'm the default body!</slot>
         </section>
+        <footer class="modal-footer">
+          <slot name="footer">            
+            <button type="button" class="btn-green" v-on:click="close" aria-label="Close modal">Close me!</button>
+          </slot>
+        </footer>
       </div>
     </div>
-</div>
+  </transition>
 </template>
 
-<script>
-export default {
-  name: "modal",
 
-  methods: {
+<script>
+// https://alligator.io/vuejs/vue-modal-component/
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class Modal extends Vue {  
     close() {     
       this.$emit("close");
     } 
 }
-};
+
 </script>
 
 <style>
-.popup_close {
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3AgBFSI5w7714wAAAYlJREFUSMfd1c9KFWEYBvCfJz15NI8RoRnpLohuILyMll1CG0taibhqERkJQWFBixbZpkSwlRs3kdfhBYgaBHU4h8bNGwzTfDNzIgh8YWBmeL7n/TPP8w7/MUb+BbaVeD+NO+g0IG9hEVeaVtPFGjK8wIUa/KPAvsVsHfk0VuNAhh420E7gl/Eth39TlWQsV02GX7kkzzBeGMtDnOawv/GbqdF28A79kkM/8CSSjGAJxyW4DPsxidJoR5uDksM/8TgqP0qQf8bluu/QwetEJ4PcfZF8B1ebKmkSLxNJyp4/YWZYo3VDpt9zRMWrjw+Y+1s3X8dBRYJD3K5zYSpGcRfzNV3ew8SwlbfwoEKKRXU9LfikNpZwkiAvS9LDenRdG8sV5Fsh4V6ik+dVY29jJbdbiuQfcQ1TIeFBopNXIfM/4mLIsox8uyDFbhCV+WQPl1JdLOB9YdY7CRNNxmLr57BfQraVP6sbMesMuzX2H4/dleErbjVV0QLuN3ToREj65rBeGB0CO+bcxhlxQrBXIUNRlQAAAABJRU5ErkJggg==")
-    /*icons/close.png*/ no-repeat;
-}
-/* anything but phone */
-@media all and (min-width: 768px) {
- .popup_close {
-    width: 20px;
-    height: 20px;
-    /*margin: 5px;*/
-    background-size: 20px 20px;
-
-    float: right;
-    cursor: pointer;
-    z-index: 800;
-  }
-
- .fm_overlay {
-    top: 10em;
-    left: 30%;
-    max-width: 480px;
-    min-width: 300px;
-    /*max-height: 90%;*/
-    max-height: 500px;
-    overflow: auto;
-  }
-}
-
-/* only phone - bigger buttons */
-@media all and (max-width: 767px) {
-  .popup_close {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3AcXFyot5RvgagAAAbdJREFUaN7t2DFOAkEUxvE/6AFMUBMoIDExHsMDqJVgZ+KJKIyFBSjGxCN4DbUSC6XRys5GZDXYMAkh7rLz5s0smPmSLXnDj2Hhm4WYmJiYlFSAG2DTw+wS0AZ2fSOqQB8YA09ATXF2GbiczB4CeyEQY2VMGbiYmT0E9kMgtDB/IbxgahkIV0wWQhWTByHF5EGY68sFY4OwxdggpjEHEsit5ULmegDW5/zEnglnfwAbtpA68CxcsJ+yM2WgK5w5Ag6lXy9NjCui6XrD14EXB0x1ERAm28Cr8I3cA+fC134Dx9p/ii47I7kSzZ0oCuMVEQoTBGHS8IQJivCFKQShjUmAVtEnxgYwWHaE6U7XDpCBpD9pR9JibbpZMERX8WYvBKONKATjCzFbNJcaEQQTCuEVUwJOHar4u8MRoLIIO2Fqh8bhzBnRUepOhWE0ERqYRymmLVzwBzjJmLsDvAln3wFrtpDW5JP1UQClrfkKWJHsig3GtsXaYnpShEkzB0ZaxfMeAXqTe9Y5WZgEOPJ4nlFDZGFcEfMw6ohpzEgZkYbxhpjGfCojZjHeESZbnp8BrBITExPzr/MLneElMzKD908AAAAASUVORK5CYII=")
-      /*mobile_icons/close.png*/ no-repeat;
-    width: 25px;
-    height: 25px;
-    background-size: 25px 25px;
-
-    float: right;
-    cursor: pointer;
-    z-index: 800;
-  }
-
-  .fm_overlay {
-    bottom: 4em;
-    left: 20px;
-    right: 20px;
-
-    max-height: 70%;
-    overflow-y: auto;
-  }
-
-  /*.touch .fm_basemap_list{  max-height: 80%; overflow-y: auto;}*/
-}
-
-.popup .fm_overlay {
-  position: fixed;
-  width: 300px;
-
-  left: 50%;
-  margin-left: -150px;
-  top: 50%;
-  margin-top: -150px;
-
-  z-index: 9999;
-  padding: 10px;
-
-  border-radius: 1px;
-  box-shadow: 0 0 0 10px rgba(34, 34, 34, 0.6);
-}
-
-.popupbar {
-  background: dimgray;
-  /* color: white; */
-  padding-left: 4px;
-  height: 25px;
-
-  border-bottom: 1px solid #eeeeee;
-  color: #4aae9b;
-  justify-content: space-between;
-}
-
-.popup_close {
-  color: rgb(220, 220, 220);
-  /*background: gray;*/
-  border: 1px solid darkgray;
-  border-radius: 4px;
-  font-size: 16px;
-  font-weight: bold;
-  width: 16px;
-  height: 16px;
-  text-align: center;
-  float: right;
-  cursor: pointer;
-  background-size: 16px 16px;
-}
-
-.fm_overlay {
-  background-color: white;
-  padding: 2px 5px 2px;
-  max-height: 500px;
-  overflow: auto;
-  font-size: 14px;
-}
-
-.pageinfo {
-  font-size: small;
-}
-
-.pageinfo h1 {
-  background-color: gray;
-  color: white;
-  font-size: small;
-  font-weight: normal;
-  margin-top: 5px;
-  margin-bottom: 3px;
-  padding: 1px;
-  padding-left: 6px;
-}
-
-.license {
-  font-size: xx-small;
-}
-
-.star {
-  padding: 5px;
-  text-align: left;
-}
-
-
 .modal-backdrop {
-  position: absolute;
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
@@ -169,6 +46,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1001;
 }
 
 .modal {
@@ -177,6 +55,7 @@ export default {
   overflow-x: auto;
   display: flex;
   flex-direction: column;
+  width: 80%;
 }
 
 .modal-header,
@@ -199,18 +78,16 @@ export default {
 .modal-body {
   position: relative;
   padding: 20px 10px;
-  max-width: 150px;
-  max-height: 150px;
 }
 
 .btn-close {
   border: none;
   font-size: 20px;
+  padding: 20px;
+  cursor: pointer;
   font-weight: bold;
   color: #4aae9b;
   background: transparent;
-    float: right;
-    cursor: pointer;
 }
 
 .btn-green {
@@ -220,3 +97,4 @@ export default {
   border-radius: 2px;
 }
 </style>
+

resources/js/components/locations-map.vue

@@ -56,7 +56,7 @@
           v-validate="'decimal'"
         />
       </div>
-      <input type="button" v-on:click="zoomTo" value="validate coordinates" />
+      <input type="button" v-if="validBoundingBox" v-on:click="zoomTo" value="validate coordinates" />
     </div>
   </div>
 </template>

resources/js/datasetPublish.js

@@ -35,7 +35,7 @@ import Dataset from './components/Dataset';
 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 Modal from './components/ShowModal.vue';
 import datetime from 'vuejs-datetimepicker';
 // import datetime from 'vuejs-datetimepicker';
 // import { Validator } from 'vee-validate';
@@ -64,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, datetime  },
+    components: { MyAutocomplete, LocationsMap, VueCountdown, Modal, PersonTable, datetime  },
     data() {
         return {
             list: [

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

@@ -264,14 +264,14 @@
                             {{-- <button type="button" class="btn" @click="showModal">
                                 Open Modal!
                             </button>                       --}}
-                          <modal v-if="isModalVisible" @close="closeModal" >
+                          <Modal v-if="isModalVisible" @close="closeModal" >
                             <template slot="header">
                                     {!! trans('validation.attributes.backend.create-dataset.terms_and_conditions').'*' !!}                                    
                             </template>  
                             <template slot="body">
                                 Die im GBA-RDR veröffentlichten Informationen und Metadaten unterliegen grundsätzlich den Open-Access-Bedingungen, wenn nicht anders angegeben. Die publizierten Datensets unterliegen einem definierten Zugriffs- sowie Nutzungsrecht welche in den Metadaten eindeutig beschrieben sind.                                   
                             </template>                           
-                          </modal>
+                          </Modal>
                        
 
                     
@@ -458,15 +458,17 @@
                             </div>
                             <div v-show="time === 'range'" class="pure-u-1 pure-u-md-1">
                                 {!! Form::label('time_min', 'time min: ') !!} 
-                                {!! Form::datetimelocal('time_min', null, ['class' => 'pure-u-23-24', 'placeholder' => 'dd.MM.yyyy HH:mm:ss', 
+                                {{-- {!! 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', 'step' => 1,
-                                "v-validate" => "this.isTimeRange ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' "]) !!}
+                                "v-validate" => "this.isTimeRange ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' "]) !!} --}}
+                                <datetime name="time_min" v-validate="this.isTimeRange ? '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_min' ></datetime>
                             </div>
                             <div v-show="time === 'range'" class="pure-u-1 pure-u-md-1">
                                 {!! Form::label('timemax', 'time max: ') !!} 
-                                {!! Form::datetimelocal('time_max', null, ['class' => 'pure-u-23-24', 'placeholder' => 'dd.MM.yyyy HH:mm:ss',
+                                {{-- {!! 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', 'step' => 1,
-                                "v-validate" => "this.isTimeRange ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' "]) !!}
+                                "v-validate" => "this.isTimeRange ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' "]) !!} --}}
+                                <datetime name="time_max" v-validate="this.isTimeRange ? '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_max' ></datetime>
                             </div>                            
                         </div>