hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Introduce group basic federation, event new page and notifications

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-02-18 08:57:00 +01:00
parent 300ef8f245
commit 4144e9ffd0
416 changed files with 32220 additions and 16750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
js/src/components/Map.vue
View File

@@ -1,77 +1,92 @@
<template>
<div class="map-container" v-if="config">
<l-map
:zoom="mergedOptions.zoom"
:style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
class="leaflet-map"
:center="[lat, lon]"
@click="clickMap"
@update:zoom="updateZoom"
>
<l-tile-layer
:url="config.maps.tiles.endpoint"
:attribution="attribution"
>
</l-tile-layer>
<v-locatecontrol :options="{icon: 'mdi mdi-map-marker'}"/>
<l-marker :lat-lng="[lat, lon]" @add="openPopup" @update:latLng="updateDraggableMarkerPosition" :draggable="!readOnly">
<l-popup v-if="popupMultiLine">
<span v-for="line in popupMultiLine" :key="line">{{ line }}<br /></span>
</l-popup>
</l-marker>
</l-map>
</div>
<div class="map-container" v-if="config">
<l-map
:zoom="mergedOptions.zoom"
:style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
class="leaflet-map"
:center="[lat, lon]"
@click="clickMap"
@update:zoom="updateZoom"
>
<l-tile-layer :url="config.maps.tiles.endpoint" :attribution="attribution"> </l-tile-layer>
<v-locatecontrol :options="{ icon: 'mdi mdi-map-marker' }" />
<l-marker
:lat-lng="[lat, lon]"
@add="openPopup"
@update:latLng="updateDraggableMarkerPosition"
:draggable="!readOnly"
>
<l-popup v-if="popupMultiLine">
<span v-for="line in popupMultiLine" :key="line">{{ line }}<br /></span>
</l-popup>
</l-marker>
</l-map>
</div>
</template>
<script lang="ts">
import { Icon, LatLng, LeafletMouseEvent } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { LMap, LTileLayer, LMarker, LPopup, LIcon } from 'vue2-leaflet';
import Vue2LeafletLocateControl from '@/components/Map/Vue2LeafletLocateControl.vue';
import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model';
import { Icon, LatLng, LeafletMouseEvent, LeafletEvent } from "leaflet";
import "leaflet/dist/leaflet.css";
import { Component, Prop, Vue } from "vue-property-decorator";
import { LMap, LTileLayer, LMarker, LPopup, LIcon } from "vue2-leaflet";
import Vue2LeafletLocateControl from "@/components/Map/Vue2LeafletLocateControl.vue";
import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model";
@Component({
components: { LTileLayer, LMap, LMarker, LPopup, LIcon, 'v-locatecontrol': Vue2LeafletLocateControl },
components: {
LTileLayer,
LMap,
LMarker,
LPopup,
LIcon,
"v-locatecontrol": Vue2LeafletLocateControl,
},
apollo: {
config: CONFIG,
},
})
export default class Map extends Vue {
@Prop({ type: Boolean, required: false, default: true }) readOnly!: boolean;
@Prop({ type: String, required: true }) coords!: string;
@Prop({ type: Object, required: false }) marker!: { text: String|String[], icon: String };
@Prop({ type: Object, required: false }) marker!: { text: string | string[]; icon: string };
@Prop({ type: Object, required: false }) options!: object;
@Prop({ type: Function, required: false, default: () => {} }) updateDraggableMarkerCallback!: Function;
@Prop({ type: Function, required: false })
updateDraggableMarkerCallback!: Function;
defaultOptions: {
zoom: Number;
height: String;
width: String;
zoom: number;
height: string;
width: string;
} = {
zoom: 15,
height: '100%',
width: '100%',
height: "100%",
width: "100%",
};
zoom = this.defaultOptions.zoom;
config!: IConfig;
/* eslint-disable */
mounted() {
// this part resolve an issue where the markers would not appear
// @ts-ignore
delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
iconUrl: require("leaflet/dist/images/marker-icon.png"),
shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});
}
/* eslint-enable */
openPopup(event) {
openPopup(event: LeafletEvent) {
this.$nextTick(() => {
event.target.openPopup();
});
@@ -81,8 +96,13 @@ export default class Map extends Vue {
return { ...this.defaultOptions, ...this.options };
}
get lat() { return this.$props.coords.split(';')[1]; }
get lon() { return this.$props.coords.split(';')[0]; }
get lat() {
return this.$props.coords.split(";")[1];
}
get lon() {
return this.$props.coords.split(";")[0];
}
get popupMultiLine() {
if (Array.isArray(this.marker.text)) {
@@ -99,22 +119,22 @@ export default class Map extends Vue {
this.updateDraggableMarkerCallback(e, this.zoom);
}
updateZoom(zoom: Number) {
updateZoom(zoom: number) {
this.zoom = zoom;
}
get attribution() {
return this.config.maps.tiles.attribution || this.$t('© The OpenStreetMap Contributors');
return this.config.maps.tiles.attribution || this.$t("© The OpenStreetMap Contributors");
}
}
</script>
<style lang="scss" scoped>
div.map-container {
height: 100%;
width: 100%;
div.map-container {
height: 100%;
width: 100%;
.leaflet-map {
z-index: 20;
}
}
.leaflet-map {
z-index: 20;
}
}
</style>