Add map

Author: HerrLevin

resources/vue/components/TripCreation/StationInput.vue

@@ -198,12 +198,12 @@ export default {
            :aria-label="placeholder" aria-describedby="basic-addon1"
            v-model="stationInput" @focusin="showModal"
     >
-    <span class="input-group-text font-monospace">
-      {{ this.timeFieldB }}
-    </span>
     <span class="input-group-text font-monospace" v-if="departure && arrival">
       {{ this.timeFieldA }}
     </span>
+    <span class="input-group-text font-monospace">
+      {{ this.timeFieldB }}
+    </span>
     <button class="btn btn-sm btn-outline-danger input-group-button py-1" type="button" @click="$emit('delete')">
       <i class="fas fa-trash-alt"></i>
     </button>

resources/vue/components/TripCreation/TripCreationMap.vue

@@ -0,0 +1,132 @@
+<script>
+import {defineComponent} from 'vue'
+import 'leaflet';
+import {trans} from "laravel-vue-i18n";
+
+const trainIcon = L.divIcon({
+  className: 'custom-div-icon',
+  html: '<div style="background-color:#c30b82;" class="marker-pin">&nbsp;</div>',
+  iconSize: [20, 20],
+  iconAnchor: [9, 18]
+});
+
+export default defineComponent({
+  name: "TripCreationMap",
+  props: {
+    mapProvider: {
+      type: String,
+      default: 'default'
+    },
+  },
+  data() {
+    return {
+      map: null,
+      points: [],
+      origin: null,
+      destination: null,
+    }
+  },
+  computed: {
+    mapStyle() {
+      return '';
+    }
+  },
+  mounted() {
+    this.renderMap();
+    this.initializeMap();
+    let temp = this;
+  },
+  methods: {
+    trans,
+    renderMap() {
+      this.map = L.map(this.$refs.map, {
+        center: [50.3, 10.47],
+        zoom: 5
+      });
+      setTilingLayer(this.$props.mapProvider, this.map);
+    },
+    clearAllElements() {
+      this.points.forEach(point => {
+        if (point.marker) {
+          point.marker.remove()
+        }
+      });
+      this.points = [];
+    },
+    addMarker(data, index) {
+      console.log(index);
+      let marker = L.marker(
+          [data.latitude, data.longitude],
+          {icon: trainIcon}
+      ).addTo(this.map);
+
+      if (index === "origin") {
+        this.origin = this.createPointObject(data, marker);
+      } else if (index === "destination") {
+        this.destination = this.createPointObject(data, marker);
+      } else {
+        if (index === 0 || index === this.points.length) {
+          this.points.push(this.createPointObject(data, marker));
+        } else {
+          this.points.splice(index, 0, this.createPointObject(data, marker));
+        }
+      }
+
+      this.zoomToMarkers();
+    },
+    zoomToMarkers() {
+      let points = this.points;
+
+      if (this.origin) {
+        points = [this.origin, ...points];
+      }
+
+      if (this.destination) {
+        points = [...points, this.destination];
+      }
+
+      let bounds = new L.featureGroup(
+          points.map(point => point.marker)
+      );
+      this.map.fitBounds(bounds.getBounds());
+    },
+    removeMarker(index) {
+      this.points[index].marker.remove();
+      this.points.splice(index, 1);
+    },
+    initializeMap() {
+      this.clearAllElements();
+
+    },
+    createPointObject(point, marker = null) {
+      return {
+        marker: marker ?? null,
+      }
+    },
+  }
+})
+</script>
+
+<template>
+
+  <div
+      class="map h-100"
+      ref="map"
+  ></div>
+</template>
+
+<style>
+.marker-pin {
+  width: 20px;
+  height: 20px;
+  border-radius: 50% 50% 50% 0;
+  border-color: #830b62;
+  border-width: 1px;
+  background: #c30b82;
+  position: absolute;
+  transform: rotate(-45deg);
+  left: 50%;
+  top: 50%;
+  margin: -15px 0 0 -15px;
+}
+</style>

resources/vue/components/TripCreation/TripCreationPage.vue

@@ -3,10 +3,11 @@ import StationRow from "./StationRow.vue";
 import {DateTime} from "luxon";
 import {trans} from "laravel-vue-i18n";
 import StationInput from "./StationInput.vue";
+import TripCreationMap from "./TripCreationMap.vue";
 
 export default {
   name: "TripCreationForm",
-  components: {StationInput, StationRow},
+  components: {TripCreationMap, StationInput, StationRow},
   mounted() {
     this.initForm();
     this.loadOperators();
@@ -68,10 +69,12 @@ export default {
       this.stopovers.push(dummyStopover);
     },
     removeStopover(index) {
+      this.$refs.map.removeMarker(index);
       this.stopovers.splice(index, 1);
       this.validateTimes(); // Optional: Zeiten erneut validieren
     },
     setOrigin(item) {
+      this.$refs.map.addMarker(item, "origin");
       this.origin = item;
       this.form.originId = item.id;
     },
@@ -80,6 +83,7 @@ export default {
       this.validateTimes();
     },
     setDestination(item) {
+      this.$refs.map.addMarker(item, "destination");
       this.destination = item;
       this.form.destinationId = item.id;
     },
@@ -155,6 +159,7 @@ export default {
       });
     },
     setStopoverStation(item, key) {
+      this.$refs.map.addMarker(item, key);
       this.stopovers[key].station = item;
     },
     setStopoverDeparture(time, key) {
@@ -361,8 +366,8 @@ export default {
       </form>
 
     </div>
-    <div class="col d-none d-md-block bg-warning">
-      col 2
+    <div class="col d-none d-md-block bg-warning px-0">
+      <TripCreationMap ref="map"></TripCreationMap>
     </div>
   </div>
 </template>