- leaflet DeleteButton in extra typescript class
- validate bounding box only if extent is given - prettier modal dialog
This commit is contained in:
Arno Kaimbacher
parent
bc1313fa61
commit
37a77d019b
|
|
@ -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');
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
80
resources/js/components/DeleteButton.ts
Normal file
80
resources/js/components/DeleteButton.ts
Normal file
|
|
@ -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;
|
||||
|
|
@ -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({
|
||||
options: {
|
||||
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 }));
|
||||
var customControl = new DeleteButton({ geolocation: this.geolocation, drawnItems: drawnItems, bounds: bounds });
|
||||
map.addControl(customControl);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,174 +1,52 @@
|
|||
// https://alligator.io/vuejs/vue-modal-component/
|
||||
<template>
|
||||
<div class="modal-backdrop">
|
||||
<div class="popup">
|
||||
<div class="fm_overlay" >
|
||||
<header class="popupbar">
|
||||
<slot name="header">
|
||||
<b class="popuptitle">Help</b>
|
||||
</slot>
|
||||
<button class="btn-close" @click="close">x</button>
|
||||
<transition name="modal-fade">
|
||||
<div class="modal-backdrop">
|
||||
<div class="modal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
|
||||
<header class="modal-header" id="modalTitle">
|
||||
<slot name="header">
|
||||
This is the default tile!
|
||||
<button type="button" class="btn-close" v-on:click="close" aria-label="Close modal">x</button>
|
||||
</slot>
|
||||
</header>
|
||||
<section class="pageinfo">
|
||||
<slot name="body">I'm the default body!</slot>
|
||||
<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>
|
||||
</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;
|
||||
right: 0;
|
||||
right:0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user