mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
Jason Rasmussen
GitHub
parent
7c2f7d6c51
commit
f55b3add80
242 changed files with 12794 additions and 13426 deletions
|
|
@ -1,35 +1,35 @@
|
|||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { Control, type ControlPosition } from 'leaflet';
|
||||
import { getMapContext } from './map.svelte';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { Control, type ControlPosition } from 'leaflet';
|
||||
import { getMapContext } from './map.svelte';
|
||||
|
||||
export let position: ControlPosition | undefined = undefined;
|
||||
let className: string | undefined = undefined;
|
||||
export { className as class };
|
||||
export let position: ControlPosition | undefined = undefined;
|
||||
let className: string | undefined = undefined;
|
||||
export { className as class };
|
||||
|
||||
let control: Control;
|
||||
let target: HTMLDivElement;
|
||||
let control: Control;
|
||||
let target: HTMLDivElement;
|
||||
|
||||
const map = getMapContext();
|
||||
const map = getMapContext();
|
||||
|
||||
onMount(() => {
|
||||
const ControlClass = Control.extend({
|
||||
position,
|
||||
onAdd: () => target
|
||||
});
|
||||
onMount(() => {
|
||||
const ControlClass = Control.extend({
|
||||
position,
|
||||
onAdd: () => target,
|
||||
});
|
||||
|
||||
control = new ControlClass().addTo(map);
|
||||
});
|
||||
control = new ControlClass().addTo(map);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
control.remove();
|
||||
});
|
||||
onDestroy(() => {
|
||||
control.remove();
|
||||
});
|
||||
|
||||
$: if (control && position) {
|
||||
control.setPosition(position);
|
||||
}
|
||||
$: if (control && position) {
|
||||
control.setPosition(position);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={target} class={className}>
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export { default as AssetMarkerCluster } from './marker-cluster/asset-marker-cluster.svelte';
|
||||
export { default as Control } from './control.svelte';
|
||||
export { default as Map } from './map.svelte';
|
||||
export { default as AssetMarkerCluster } from './marker-cluster/asset-marker-cluster.svelte';
|
||||
export { default as Marker } from './marker.svelte';
|
||||
export { default as TileLayer } from './tile-layer.svelte';
|
||||
|
|
|
|||
|
|
@ -1,50 +1,50 @@
|
|||
<script lang="ts" context="module">
|
||||
import { createContext } from '$lib/utils/context';
|
||||
import { createContext } from '$lib/utils/context';
|
||||
|
||||
const { get: getContext, set: setMapContext } = createContext<() => Map>();
|
||||
const { get: getContext, set: setMapContext } = createContext<() => Map>();
|
||||
|
||||
export const getMapContext = () => {
|
||||
const getMap = getContext();
|
||||
return getMap();
|
||||
};
|
||||
export const getMapContext = () => {
|
||||
const getMap = getContext();
|
||||
return getMap();
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import { Map, type LatLngExpression, type MapOptions } from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import { Map, type LatLngExpression, type MapOptions } from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
export let center: LatLngExpression;
|
||||
export let zoom: number;
|
||||
export let options: MapOptions | undefined = undefined;
|
||||
export let allowDarkMode = false;
|
||||
let container: HTMLDivElement;
|
||||
let map: Map;
|
||||
export let center: LatLngExpression;
|
||||
export let zoom: number;
|
||||
export let options: MapOptions | undefined = undefined;
|
||||
export let allowDarkMode = false;
|
||||
let container: HTMLDivElement;
|
||||
let map: Map;
|
||||
|
||||
setMapContext(() => map);
|
||||
setMapContext(() => map);
|
||||
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
map = new Map(container, options);
|
||||
}
|
||||
});
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
map = new Map(container, options);
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (map) map.remove();
|
||||
});
|
||||
onDestroy(() => {
|
||||
if (map) map.remove();
|
||||
});
|
||||
|
||||
$: if (map) map.setView(center, zoom);
|
||||
$: if (map) map.setView(center, zoom);
|
||||
</script>
|
||||
|
||||
<div bind:this={container} class="w-full h-full" class:map-dark={allowDarkMode}>
|
||||
{#if map}
|
||||
<slot />
|
||||
{/if}
|
||||
{#if map}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.dark) .map-dark :global(.leaflet-layer) {
|
||||
filter: invert(100%) brightness(130%) saturate(0%);
|
||||
}
|
||||
:global(.dark) .map-dark :global(.leaflet-layer) {
|
||||
filter: invert(100%) brightness(130%) saturate(0%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
.asset-marker-icon {
|
||||
@apply rounded-full;
|
||||
@apply object-cover;
|
||||
@apply border;
|
||||
@apply border-immich-primary;
|
||||
@apply transition-all;
|
||||
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
|
||||
rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
|
||||
rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
|
||||
@apply rounded-full;
|
||||
@apply object-cover;
|
||||
@apply border;
|
||||
@apply border-immich-primary;
|
||||
@apply transition-all;
|
||||
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px,
|
||||
rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
|
||||
}
|
||||
|
||||
.marker-cluster-icon {
|
||||
@apply h-full;
|
||||
@apply w-full;
|
||||
@apply flex;
|
||||
@apply justify-center;
|
||||
@apply items-center;
|
||||
@apply rounded-full;
|
||||
@apply font-bold;
|
||||
@apply bg-violet-50;
|
||||
@apply border;
|
||||
@apply border-immich-primary;
|
||||
@apply text-immich-primary;
|
||||
box-shadow: rgba(5, 5, 122, 0.12) 0px 2px 4px 0px, rgba(4, 4, 230, 0.32) 0px 2px 16px 0px;
|
||||
@apply h-full;
|
||||
@apply w-full;
|
||||
@apply flex;
|
||||
@apply justify-center;
|
||||
@apply items-center;
|
||||
@apply rounded-full;
|
||||
@apply font-bold;
|
||||
@apply bg-violet-50;
|
||||
@apply border;
|
||||
@apply border-immich-primary;
|
||||
@apply text-immich-primary;
|
||||
box-shadow: rgba(5, 5, 122, 0.12) 0px 2px 4px 0px, rgba(4, 4, 230, 0.32) 0px 2px 16px 0px;
|
||||
}
|
||||
|
||||
.dark .map-dark .marker-cluster-icon {
|
||||
@apply bg-blue-200;
|
||||
@apply text-black;
|
||||
@apply border-blue-200;
|
||||
box-shadow: none;
|
||||
@apply bg-blue-200;
|
||||
@apply text-black;
|
||||
@apply border-blue-200;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,104 +1,102 @@
|
|||
<script lang="ts" context="module">
|
||||
import { createContext } from '$lib/utils/context';
|
||||
import { MarkerClusterGroup } from 'leaflet';
|
||||
import { createContext } from '$lib/utils/context';
|
||||
import { MarkerClusterGroup } from 'leaflet';
|
||||
|
||||
const { get: getContext, set: setClusterContext } = createContext<() => MarkerClusterGroup>();
|
||||
const { get: getContext, set: setClusterContext } = createContext<() => MarkerClusterGroup>();
|
||||
|
||||
export const getClusterContext = () => {
|
||||
return getContext()();
|
||||
};
|
||||
export const getClusterContext = () => {
|
||||
return getContext()();
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { MapMarkerResponseDto } from '@api';
|
||||
import { DivIcon, LeafletEvent, LeafletMouseEvent, MarkerCluster, Point } from 'leaflet';
|
||||
import 'leaflet.markercluster';
|
||||
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
|
||||
import { getMapContext } from '../map.svelte';
|
||||
import AssetMarker from './asset-marker';
|
||||
import './asset-marker-cluster.css';
|
||||
import type { MapMarkerResponseDto } from '@api';
|
||||
import { DivIcon, LeafletEvent, LeafletMouseEvent, MarkerCluster, Point } from 'leaflet';
|
||||
import 'leaflet.markercluster';
|
||||
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
|
||||
import { getMapContext } from '../map.svelte';
|
||||
import AssetMarker from './asset-marker';
|
||||
import './asset-marker-cluster.css';
|
||||
|
||||
export let markers: MapMarkerResponseDto[];
|
||||
export let spiderfyLimit = 10;
|
||||
let cluster: MarkerClusterGroup;
|
||||
export let markers: MapMarkerResponseDto[];
|
||||
export let spiderfyLimit = 10;
|
||||
let cluster: MarkerClusterGroup;
|
||||
|
||||
const map = getMapContext();
|
||||
const dispatch = createEventDispatcher<{
|
||||
view: { assetIds: string[]; activeAssetIndex: number };
|
||||
}>();
|
||||
const map = getMapContext();
|
||||
const dispatch = createEventDispatcher<{
|
||||
view: { assetIds: string[]; activeAssetIndex: number };
|
||||
}>();
|
||||
|
||||
setClusterContext(() => cluster);
|
||||
setClusterContext(() => cluster);
|
||||
|
||||
onMount(() => {
|
||||
cluster = new MarkerClusterGroup({
|
||||
showCoverageOnHover: false,
|
||||
zoomToBoundsOnClick: false,
|
||||
spiderfyOnMaxZoom: false,
|
||||
maxClusterRadius: (zoom) => 80 - zoom * 2,
|
||||
spiderLegPolylineOptions: { opacity: 0 },
|
||||
spiderfyDistanceMultiplier: 3,
|
||||
iconCreateFunction: (options) => {
|
||||
const childCount = options.getChildCount();
|
||||
const iconSize = childCount > spiderfyLimit ? 45 : 40;
|
||||
onMount(() => {
|
||||
cluster = new MarkerClusterGroup({
|
||||
showCoverageOnHover: false,
|
||||
zoomToBoundsOnClick: false,
|
||||
spiderfyOnMaxZoom: false,
|
||||
maxClusterRadius: (zoom) => 80 - zoom * 2,
|
||||
spiderLegPolylineOptions: { opacity: 0 },
|
||||
spiderfyDistanceMultiplier: 3,
|
||||
iconCreateFunction: (options) => {
|
||||
const childCount = options.getChildCount();
|
||||
const iconSize = childCount > spiderfyLimit ? 45 : 40;
|
||||
|
||||
return new DivIcon({
|
||||
html: `<div class="marker-cluster-icon">${childCount}</div>`,
|
||||
className: '',
|
||||
iconSize: new Point(iconSize, iconSize)
|
||||
});
|
||||
}
|
||||
});
|
||||
return new DivIcon({
|
||||
html: `<div class="marker-cluster-icon">${childCount}</div>`,
|
||||
className: '',
|
||||
iconSize: new Point(iconSize, iconSize),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
cluster.on('clusterclick', (event: LeafletEvent) => {
|
||||
const markerCluster: MarkerCluster = event.sourceTarget;
|
||||
const childCount = markerCluster.getChildCount();
|
||||
cluster.on('clusterclick', (event: LeafletEvent) => {
|
||||
const markerCluster: MarkerCluster = event.sourceTarget;
|
||||
const childCount = markerCluster.getChildCount();
|
||||
|
||||
if (childCount > spiderfyLimit) {
|
||||
const markers = markerCluster.getAllChildMarkers() as AssetMarker[];
|
||||
onView(markers, markers[0].id);
|
||||
} else {
|
||||
markerCluster.spiderfy();
|
||||
}
|
||||
});
|
||||
if (childCount > spiderfyLimit) {
|
||||
const markers = markerCluster.getAllChildMarkers() as AssetMarker[];
|
||||
onView(markers, markers[0].id);
|
||||
} else {
|
||||
markerCluster.spiderfy();
|
||||
}
|
||||
});
|
||||
|
||||
cluster.on('click', (event: LeafletMouseEvent) => {
|
||||
const marker: AssetMarker = event.sourceTarget;
|
||||
const markerCluster = getClusterByMarker(marker);
|
||||
const markers = markerCluster
|
||||
? (markerCluster.getAllChildMarkers() as AssetMarker[])
|
||||
: [marker];
|
||||
cluster.on('click', (event: LeafletMouseEvent) => {
|
||||
const marker: AssetMarker = event.sourceTarget;
|
||||
const markerCluster = getClusterByMarker(marker);
|
||||
const markers = markerCluster ? (markerCluster.getAllChildMarkers() as AssetMarker[]) : [marker];
|
||||
|
||||
onView(markers, marker.id);
|
||||
});
|
||||
onView(markers, marker.id);
|
||||
});
|
||||
|
||||
map.addLayer(cluster);
|
||||
});
|
||||
map.addLayer(cluster);
|
||||
});
|
||||
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
const getClusterByMarker = (marker: any): MarkerCluster | undefined => {
|
||||
const mapZoom = map.getZoom();
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
const getClusterByMarker = (marker: any): MarkerCluster | undefined => {
|
||||
const mapZoom = map.getZoom();
|
||||
|
||||
while (marker && marker._zoom !== mapZoom) {
|
||||
marker = marker.__parent;
|
||||
}
|
||||
while (marker && marker._zoom !== mapZoom) {
|
||||
marker = marker.__parent;
|
||||
}
|
||||
|
||||
return marker;
|
||||
};
|
||||
return marker;
|
||||
};
|
||||
|
||||
const onView = (markers: AssetMarker[], activeAssetId: string) => {
|
||||
const assetIds = markers.map((marker) => marker.id);
|
||||
const activeAssetIndex = assetIds.indexOf(activeAssetId) || 0;
|
||||
dispatch('view', { assetIds, activeAssetIndex });
|
||||
};
|
||||
const onView = (markers: AssetMarker[], activeAssetId: string) => {
|
||||
const assetIds = markers.map((marker) => marker.id);
|
||||
const activeAssetIndex = assetIds.indexOf(activeAssetId) || 0;
|
||||
dispatch('view', { assetIds, activeAssetIndex });
|
||||
};
|
||||
|
||||
$: if (cluster) {
|
||||
const leafletMarkers = markers.map((marker) => new AssetMarker(marker));
|
||||
$: if (cluster) {
|
||||
const leafletMarkers = markers.map((marker) => new AssetMarker(marker));
|
||||
|
||||
cluster.clearLayers();
|
||||
cluster.addLayers(leafletMarkers);
|
||||
}
|
||||
cluster.clearLayers();
|
||||
cluster.addLayers(leafletMarkers);
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
if (cluster) cluster.remove();
|
||||
});
|
||||
onDestroy(() => {
|
||||
if (cluster) cluster.remove();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,37 @@
|
|||
import { MapMarkerResponseDto, api } from '@api';
|
||||
import { Marker, Map, Icon } from 'leaflet';
|
||||
import { api, MapMarkerResponseDto } from '@api';
|
||||
import { Icon, Map, Marker } from 'leaflet';
|
||||
|
||||
export default class AssetMarker extends Marker {
|
||||
id: string;
|
||||
private iconCreated = false;
|
||||
id: string;
|
||||
private iconCreated = false;
|
||||
|
||||
constructor(marker: MapMarkerResponseDto) {
|
||||
super([marker.lat, marker.lon]);
|
||||
this.id = marker.id;
|
||||
}
|
||||
constructor(marker: MapMarkerResponseDto) {
|
||||
super([marker.lat, marker.lon]);
|
||||
this.id = marker.id;
|
||||
}
|
||||
|
||||
onAdd(map: Map) {
|
||||
// Set icon when the marker gets actually added to the map. This only
|
||||
// gets called for individual assets and when selecting a cluster, so
|
||||
// creating an icon for every marker in advance is pretty wasteful.
|
||||
if (!this.iconCreated) {
|
||||
this.iconCreated = true;
|
||||
this.setIcon(this.getIcon());
|
||||
}
|
||||
onAdd(map: Map) {
|
||||
// Set icon when the marker gets actually added to the map. This only
|
||||
// gets called for individual assets and when selecting a cluster, so
|
||||
// creating an icon for every marker in advance is pretty wasteful.
|
||||
if (!this.iconCreated) {
|
||||
this.iconCreated = true;
|
||||
this.setIcon(this.getIcon());
|
||||
}
|
||||
|
||||
return super.onAdd(map);
|
||||
}
|
||||
return super.onAdd(map);
|
||||
}
|
||||
|
||||
getIcon() {
|
||||
return new Icon({
|
||||
iconUrl: api.getAssetThumbnailUrl(this.id),
|
||||
iconRetinaUrl: api.getAssetThumbnailUrl(this.id),
|
||||
iconSize: [60, 60],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
tooltipAnchor: [16, -28],
|
||||
shadowSize: [41, 41],
|
||||
className: 'asset-marker-icon'
|
||||
});
|
||||
}
|
||||
getIcon() {
|
||||
return new Icon({
|
||||
iconUrl: api.getAssetThumbnailUrl(this.id),
|
||||
iconRetinaUrl: api.getAssetThumbnailUrl(this.id),
|
||||
iconSize: [60, 60],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
tooltipAnchor: [16, -28],
|
||||
shadowSize: [41, 41],
|
||||
className: 'asset-marker-icon',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { Marker, Icon, type LatLngExpression, type Content } from 'leaflet';
|
||||
import { getMapContext } from './map.svelte';
|
||||
import iconUrl from 'leaflet/dist/images/marker-icon.png';
|
||||
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { Marker, Icon, type LatLngExpression, type Content } from 'leaflet';
|
||||
import { getMapContext } from './map.svelte';
|
||||
import iconUrl from 'leaflet/dist/images/marker-icon.png';
|
||||
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||
|
||||
export let latlng: LatLngExpression;
|
||||
export let popupContent: Content | undefined = undefined;
|
||||
let marker: Marker;
|
||||
export let latlng: LatLngExpression;
|
||||
export let popupContent: Content | undefined = undefined;
|
||||
let marker: Marker;
|
||||
|
||||
const defaultIcon = new Icon({
|
||||
iconUrl,
|
||||
iconRetinaUrl,
|
||||
shadowUrl,
|
||||
const defaultIcon = new Icon({
|
||||
iconUrl,
|
||||
iconRetinaUrl,
|
||||
shadowUrl,
|
||||
|
||||
// Default values from Leaflet
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
tooltipAnchor: [16, -28],
|
||||
shadowSize: [41, 41]
|
||||
});
|
||||
const map = getMapContext();
|
||||
// Default values from Leaflet
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
tooltipAnchor: [16, -28],
|
||||
shadowSize: [41, 41],
|
||||
});
|
||||
const map = getMapContext();
|
||||
|
||||
onMount(() => {
|
||||
marker = new Marker(latlng, {
|
||||
icon: defaultIcon
|
||||
}).addTo(map);
|
||||
});
|
||||
onMount(() => {
|
||||
marker = new Marker(latlng, {
|
||||
icon: defaultIcon,
|
||||
}).addTo(map);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (marker) marker.remove();
|
||||
});
|
||||
onDestroy(() => {
|
||||
if (marker) marker.remove();
|
||||
});
|
||||
|
||||
$: if (marker) {
|
||||
marker.setLatLng(latlng);
|
||||
$: if (marker) {
|
||||
marker.setLatLng(latlng);
|
||||
|
||||
if (popupContent) {
|
||||
marker.bindPopup(popupContent);
|
||||
} else {
|
||||
marker.unbindPopup();
|
||||
}
|
||||
}
|
||||
if (popupContent) {
|
||||
marker.bindPopup(popupContent);
|
||||
} else {
|
||||
marker.unbindPopup();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { TileLayer, type TileLayerOptions } from 'leaflet';
|
||||
import { getMapContext } from './map.svelte';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { TileLayer, type TileLayerOptions } from 'leaflet';
|
||||
import { getMapContext } from './map.svelte';
|
||||
|
||||
export let urlTemplate: string;
|
||||
export let options: TileLayerOptions | undefined = undefined;
|
||||
export let urlTemplate: string;
|
||||
export let options: TileLayerOptions | undefined = undefined;
|
||||
|
||||
let tileLayer: TileLayer;
|
||||
let tileLayer: TileLayer;
|
||||
|
||||
const map = getMapContext();
|
||||
const map = getMapContext();
|
||||
|
||||
onMount(() => {
|
||||
tileLayer = new TileLayer(urlTemplate, options).addTo(map);
|
||||
});
|
||||
onMount(() => {
|
||||
tileLayer = new TileLayer(urlTemplate, options).addTo(map);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (tileLayer) tileLayer.remove();
|
||||
});
|
||||
onDestroy(() => {
|
||||
if (tileLayer) tileLayer.remove();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue