KevinMidboe/nova-map-fields
1
0
Fork 0
mirror of https://github.com/KevinMidboe/nova-map-fields.git synced 2025-10-29 17:50:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Linting

Browse Source
This commit is contained in:
Kevin
2021-09-06 15:50:36 +02:00
parent c205e8bf23
commit 7545c4ffc9
7 changed files with 183 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
resources/js/components/fields/Marker.vue
View File

@@ -1,11 +1,11 @@
<template>
<field-map :center="position" :field="field">
<l-marker :lat-lng="position" :draggable="edit" @dragend="onDragEnd"/>
<l-marker :lat-lng="position" :draggable="edit" @dragend="onDragEnd" />
</field-map>
</template>
<script>
import {LMarker} from 'vue2-leaflet'
import { LMarker } from "vue2-leaflet";
export default {
props: {
@@ -20,13 +20,16 @@ export default {
edit: {
type: Boolean,
default: false,
}
},
},
computed: {
position() {
return L.latLng(this.value.lat || this.field.map.center.latitude, this.value.lng || this.field.map.center.longitude);
}
return L.latLng(
this.value.lat || this.field.map.center.latitude,
this.value.lng || this.field.map.center.longitude
);
},
},
mounted() {
@@ -37,36 +40,46 @@ export default {
onDragEnd(evt) {
let latLng = evt.target.getLatLng();
this.$emit('input', {
this.$emit("input", {
lat: latLng.lat,
lng: latLng.lng,
});
},
registerWatchers() {
this.getGlobalFieldComponents().forEach(component => {
if ([this.field.latitudeField, this.field.longitudeField].includes(component.field.attribute)) {
component.$watch('value', (value) => {
this.value[component.field.attribute] = value;
}, {immediate: true})
this.getGlobalFieldComponents().forEach((component) => {
if (
[
this.field.latitudeField,
this.field.longitudeField,
].includes(component.field.attribute)
) {
component.$watch(
"value",
(value) => {
this.value[component.field.attribute] = value;
},
{ immediate: true }
);
}
});
},
getGlobalFieldComponents(components = null) {
if (! components) {
if (!components) {
components = this.$root.$children;
}
let returnArray = [];
components.forEach(component => {
components.forEach((component) => {
if (component.field) {
return returnArray.push(component);
}
returnArray = returnArray.concat(this.getGlobalFieldComponents(component.$children));
returnArray = returnArray.concat(
this.getGlobalFieldComponents(component.$children)
);
});
return returnArray;
@@ -75,6 +88,6 @@ export default {
components: {
LMarker,
}
}
},
};
</script>

61
resources/js/components/fields/Polygon.vue
View File

@@ -1,29 +1,50 @@
<template>
<div @keydown.backspace="removeLastMarker">
<field-map :bounds="bounds" :center="center" :field="field" @click="createMarker">
<l-marker v-for="(marker, index) in markers" :lat-lng="marker" :draggable="edit" @dragstart="saveDraggingMarker" @dragend="updateMarkerPosition">
<field-map
:bounds="bounds"
:center="center"
:field="field"
@click="createMarker"
>
<l-marker
v-for="(marker, index) in markers"
:lat-lng="marker"
:draggable="edit"
@dragstart="saveDraggingMarker"
@dragend="updateMarkerPosition"
>
<l-icon
:icon-size="[24, 24]"
:icon-anchor="[12, 12]"
:icon-url="index === markers.length - 1 ? '/images/highlighted-point_marker.svg' : '/images/point_marker.svg'"
:icon-url="
index === markers.length - 1
? '/images/highlighted-point_marker.svg'
: '/images/point_marker.svg'
"
/>
</l-marker>
<l-polygon :lat-lngs="value" :visible="true" />
</field-map>
<l-control position="bottomleft" v-if="edit" class="block my-2">
<button @click="removeLastMarker" class="btn btn-default btn-primary">
Slett forrige
<button
@click="removeLastMarker"
class="btn btn-default btn-primary"
>
Slett forrige
</button>
<button @click="removeAllMarkers" class="btn btn-default btn-primary">
Slett alle
<button
@click="removeAllMarkers"
class="btn btn-default btn-primary"
>
Slett alle
</button>
</l-control>
</div>
</template>
<script>
import {LMarker, LIcon, LPolygon} from 'vue2-leaflet'
import { LMarker, LIcon, LPolygon } from "vue2-leaflet";
export default {
props: {
@@ -38,15 +59,15 @@ export default {
edit: {
type: Boolean,
default: false,
}
},
},
data() {
return {
startBounds: undefined,
markerBeingDragged: undefined,
lastMarkerAddedTime: 0
}
lastMarkerAddedTime: 0,
};
},
computed: {
@@ -78,19 +99,19 @@ export default {
return null;
}
return this.startBounds = new L.LatLngBounds(this.markers);
return (this.startBounds = new L.LatLngBounds(this.markers));
},
},
methods: {
triggerChange(evt) {
this.$emit('input', this.markers);
this.$emit("input", this.markers);
},
saveDraggingMarker(evt) {
this.markerBeingDragged = evt.target._latlng;
},
removeLastMarker(event) {
this.markers.splice(-1,1);
this.markers.splice(-1, 1);
this.triggerChange();
event.preventDefault();
},
@@ -102,7 +123,7 @@ export default {
createMarker(evt) {
if (new Date().getTime() - this.lastMarkerAddedTime < 20) {
// Don't want to double register clicks from dragend, if within 20 ms return
return
return;
}
this.markers.push(evt.latlng);
this.triggerChange();
@@ -111,9 +132,11 @@ export default {
const newMarker = evt.target._latlng;
const { lat, lng } = this.markerBeingDragged;
const markerIndex = this.value.findIndex(marker => marker.lat === lat && marker.lng === lng);
const markerIndex = this.value.findIndex(
(marker) => marker.lat === lat && marker.lng === lng
);
this.value.splice(markerIndex, 1, newMarker);
this.lastMarkerAddedTime = new Date().getTime()
this.lastMarkerAddedTime = new Date().getTime();
},
},
@@ -121,6 +144,6 @@ export default {
LMarker,
LIcon,
LPolygon,
}
}
},
};
</script>

90
resources/js/components/fields/Polyline.vue
View File

@@ -1,14 +1,50 @@
<template>
<div @keydown.backspace="removeLastMarker">
<field-map :bounds="bounds" :center="center" :field="field" @click="createMarker">
<l-marker v-for="marker in markers" :lat-lng="marker" :draggable="edit" @dragend="triggerChange" />
<l-polyline :lat-lngs="value" :visible="true" />
<field-map
:bounds="bounds"
:center="center"
:field="field"
@click="createMarker"
>
<l-marker
v-for="(marker, index) in markers"
:lat-lng="marker"
:draggable="edit"
@dragstart="saveDraggingMarker"
@dragend="updateMarkerPosition"
>
<l-icon
:icon-size="[24, 24]"
:icon-anchor="[12, 12]"
:icon-url="
index === markers.length - 1
? '/images/highlighted-point_marker.svg'
: '/images/point_marker.svg'
"
/>
</l-marker>
<l-polyline :lat-lngs="value" :visible="true" :fill="false" />
</field-map>
<l-control position="bottomleft" v-if="edit" class="block my-2">
<button
@click="removeLastMarker"
class="btn btn-default btn-primary"
>
Slett forrige
</button>
<button
@click="removeAllMarkers"
class="btn btn-default btn-primary"
>
Slett alle
</button>
</l-control>
</div>
</template>
<script>
import {LMarker, LPolyline} from 'vue2-leaflet'
import { LMarker, LIcon, LPolyline } from "vue2-leaflet";
export default {
props: {
@@ -23,13 +59,15 @@ export default {
edit: {
type: Boolean,
default: false,
}
},
},
data() {
return {
startBounds: undefined,
}
markerBeingDragged: undefined,
lastMarkerAddedTime: 0,
};
},
computed: {
@@ -61,27 +99,51 @@ export default {
return null;
}
return this.startBounds = new L.LatLngBounds(this.markers);
return (this.startBounds = new L.LatLngBounds(this.markers));
},
},
methods: {
triggerChange() {
this.$emit('input', this.markers);
triggerChange(evt) {
this.$emit("input", this.markers);
},
removeLastMarker() {
this.markers.splice(-1,1);
saveDraggingMarker(evt) {
this.markerBeingDragged = evt.target._latlng;
},
removeLastMarker(event) {
this.markers.splice(-1, 1);
this.triggerChange();
event.preventDefault();
},
removeAllMarkers(event) {
this.value = [];
this.triggerChange();
event.preventDefault();
},
createMarker(evt) {
if (new Date().getTime() - this.lastMarkerAddedTime < 20) {
// Don't want to double register clicks from dragend, if within 20 ms return
return;
}
this.markers.push(evt.latlng);
this.triggerChange();
}
},
updateMarkerPosition(evt) {
const newMarker = evt.target._latlng;
const { lat, lng } = this.markerBeingDragged;
const markerIndex = this.value.findIndex(
(marker) => marker.lat === lat && marker.lng === lng
);
this.value.splice(markerIndex, 1, newMarker);
this.lastMarkerAddedTime = new Date().getTime();
},
},
components: {
LMarker,
LIcon,
LPolyline,
}
}
},
};
</script>