- replace moment with dayjs

- add leaflet.css inside main-styles.css
- add map.componetn for leaflet map
- bind properties to map via map-view.component

package-lock.json

@@ -13,8 +13,8 @@
         "axios": "^0.24.0",
         "class-transformer": "^0.5.1",
         "core-js": "^3.6.5",
+        "dayjs": "^1.10.7",
         "leaflet": "^1.7.1",
-        "moment": "^2.29.1",
         "qs": "^6.10.1",
         "rxjs": "^6.6.0",
         "vue": "^3.0.0",
@@ -6073,6 +6073,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -10731,14 +10736,6 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -21961,6 +21958,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -25582,11 +25584,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -14,8 +14,8 @@
     "axios": "^0.24.0",
     "class-transformer": "^0.5.1",
     "core-js": "^3.6.5",
+    "dayjs": "^1.10.7",
     "leaflet": "^1.7.1",
-    "moment": "^2.29.1",
     "qs": "^6.10.1",
     "rxjs": "^6.6.0",
     "vue": "^3.0.0",

src/App.vue

@@ -37,7 +37,7 @@
                     <!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
                     <router-link class="navbar-link is-arrowless" to="/help">HELP</router-link>
                 </li>
-                <!-- <li class="navbar-item">                    
+                <!-- <li class="navbar-item">
                     <router-link class="navbar-link is-arrowless" to="/map">Map</router-link>
                 </li> -->
                 <!-- <li class="navbar-item">

src/app.ts

@@ -4,7 +4,7 @@ import { Watch } from "vue-property-decorator";
 import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
 import HelpViewComponent from "./views/help-view/help-view-component.vue";
-import MapViewComponent from "./views/map-view/map-view.component";
+import MapViewComponent from "./views/map-view/map-view.component.vue";
 import SearchViewComponent from "./views/search-view/search-view-component.vue";
 import DatasetDetailComponent from "./views/dataset-detail.component/dataset-detail.component.vue";
 import ServiceViewComponent from "./views/services-view/service-view-component.vue";

src/assets/scss/main-styles.scss

@@ -2,6 +2,7 @@
 // @import "~bulma";
 // @import "@fontsource/open-sans"; // Defaults to weight 400.
 @import "~@openfonts/open-sans_all/index.css";
+@import '~leaflet/dist/leaflet.css';
 
 // 1. Import the initial variables
 @import "~bulma/sass/utilities/_all.sass";

src/components/map/map-options.ts

@@ -0,0 +1,14 @@
+import { Layer } from "leaflet";
+
+// https://github.com/52North/helgoland-toolbox/blob/develop/libs/map/src/lib/base/map-options.ts
+
+export interface LayerOptions {
+    label: string;
+    visible: boolean;
+    layer: Layer;
+}
+
+// export type LayerMap = Map<string, LayerOptions>;
+
+export class LayerMap extends Map<string, LayerOptions> {
+ }

src/components/map/map.component.html

@@ -0,0 +1 @@
+<div v-bind:id="mapId" class="map-container mapDesktop"></div>

src/components/map/map.component.ts

@@ -0,0 +1,89 @@
+import { Options, Vue } from "vue-class-component";
+import { Prop } from "vue-property-decorator";
+import { Map, MapOptions, tileLayer } from "leaflet";
+import { LayerOptions } from "./map-options";
+
+const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
+// const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
+
+@Options({
+    // selector: "app-map",
+    // templateUrl: "map.component.html",
+    name: "MapComponent",
+})
+// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
+export default class MapComponent extends Vue {
+    /**
+     * A map with the given ID is created inside this component. This ID can be used the get the map instance over the map cache service.
+     */
+    @Prop()
+    public mapId!: string;
+
+    /**
+     * @input The serviceUrl, where the selection should be loaded.
+     */
+    @Prop()
+    public serviceUrl!: string;
+
+    /**
+     * The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option)
+     */
+    @Prop()
+    public mapOptions!: MapOptions;
+
+    // protected oldBaseLayer: Control.LayersObject = {};
+    protected map!: Map;
+    // protected zoomControl!: Control.Zoom;
+
+    public beforeMount(): void {
+        if (this.mapId === undefined || this.mapId === null) {
+            this.mapId = this.generateUUID();
+        }
+    }
+
+    protected initMap(): void {
+        this.map = new Map(this.mapId, this.mapOptions);
+        // this.mapService.setMap(this.mapId, this.map);
+        // this.onMapInitializedEvent.emit(this.mapId);
+        this.addBaseMap();
+    }
+
+    private addBaseMap(layerOptions?: LayerOptions): void {
+        if (this.map) {
+            // let tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            // 	maxZoom: 18,
+            // 	minZoom: 3,
+            // 	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            // });
+            // tiles.addTo(this.map);
+            const layerOptions = {
+                label: DEFAULT_BASE_LAYER_NAME,
+                visible: true,
+                layer: tileLayer.wms("https://ows.terrestris.de/osm-gray/service", {
+                    format: "image/png",
+                    attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
+                    layers: "OSM-WMS",
+                }),
+                // layer: new TileLayer(DEFAULT_BASE_LAYER_URL, {
+                // 	attribution: DEFAULT_BASE_LAYER_ATTRIBUTION
+                // })
+            };
+            layerOptions.layer.addTo(this.map);
+        }
+    }
+
+    private generateUUID(): string {
+        function s4() {
+            return Math.floor((1 + Math.random()) * 0x10000)
+                .toString(16)
+                .substring(1);
+        }
+        return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
+    }
+
+    mounted(): void {
+        // alert("Hello World!");
+        this.initMap();
+    }
+}

src/components/map/map.component.vue

@@ -0,0 +1,19 @@
+<template>
+    <div v-bind:id="mapId" class="map-container mapDesktop"></div>
+</template>
+
+<script lang="ts">
+import MapComponent from "./map.component";
+export default MapComponent;
+</script>
+
+<style lang="scss" scoped>
+.mapDesktop {
+    overflow: hidden;
+    position: absolute;
+    bottom: 30px;
+    top: 30px;
+    left: 30px;
+    right: 30px;
+}
+</style>

src/models/dataset.ts

@@ -1,4 +1,5 @@
-import moment from "moment";
+// import moment from "moment";
+import dayjs from "dayjs";
 
 export interface Dataset {
     abstract_additional: Array<string>;
@@ -160,8 +161,8 @@ export class DbDataset {
         if (this.embargo_date === null) {
             return true;
         }
-        const embargoDate = moment(this.embargo_date);
+        const embargoDate = dayjs(this.embargo_date); // moment(this.embargo_date);
-        const todayDate = moment.now();
+        const todayDate = dayjs(); //moment.now();
 
         // Embargo has passed on the day after the specified date
         if (embargoDate.isBefore(todayDate)) {

src/notes.txt

@@ -74,4 +74,11 @@ declare module 'vue-matomo'; inside shims-vue.d.ts
 npm install --save leaflet@latest 
 npm install --save-dev @types/leaflet
 
-http://geolba.net/tethys/
+http://geolba.net/tethys/
+
+
+
+npm install --save dayjs
+https://day.js.org/docs/en/installation/typescript
+
+https://www.programmerall.com/article/19972027526/

src/views/dataset-detail.component/dataset-detail.component.ts

@@ -3,7 +3,8 @@ import { DbDataset } from "@/models/dataset";
 import { Prop } from "vue-property-decorator";
 import DatasetService from "../../services/dataset.service";
 import { Subscription } from "rxjs";
-import moment from "moment";
+import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
 // import SimpleSearchComponent from "@/components/simple-search/simple-search-component.vue";
 import VsInput from "@/components/vs-input/vs-input.vue";
 import { Suggestion } from "@/models/dataset";
@@ -29,6 +30,7 @@ export default class DatasetDetailComponent extends Vue {
     public portal = VUE_APP_PORTAL + "/file/download/";
 
     created(): void {
+        dayjs.extend(advancedFormat);
         this.getDataset(this.datasetId);
     }
 
@@ -106,17 +108,18 @@ export default class DatasetDetailComponent extends Vue {
     }
 
     public getPublishedDate(date: string): string {
-        return moment(date).format("ddd, MMMM Do, YYYY h:mm a");
+        // return moment(date).format("ddd, MMMM Do, YYYY h:mm a");
-        // return moment(date).format("MMM Do YYYY");
+        return dayjs(date).format("ddd, MMMM Do, YYYY h:mm a");
     }
 
     public getHumanDate(date: string): string {
-        return moment(date).format("DD.MM.YYYY HH:mm");
+        // return moment(date).format("DD.MM.YYYY HH:mm");
-        // return moment(date).format("MMM Do YYYY");
+        return dayjs(date).format("DD.MM.YYYY HH:mm");
     }
 
     public getYear(date: string): string {
-        return moment(date).format("YYYY");
+        return dayjs(date).format("YYYY");
+        // return moment(date).format("YYYY");
     }
 
     public getCitation(): string {
@@ -130,7 +133,7 @@ export default class DatasetDetailComponent extends Vue {
                 // u.last_name + ", " + u.first_name?.substring(0, 1).toUpperCase() + "."
             })
             .join(", ");
-        citation += " (" + moment(this.dataset.server_date_published).format("YYYY") + "): ";
+        citation += " (" + dayjs(this.dataset.server_date_published).format("YYYY") + "): ";
         citation += this.dataset.MainTitle?.value;
         citation += "." + this.dataset.creating_corporation + ", ";
         citation += this.dataset.publisher_name;

src/views/map-view/map-view.component.ts

@@ -1,53 +1,25 @@
 import { Options, Vue } from "vue-class-component";
-import { Prop } from "vue-property-decorator";
+import MapComponent from "@/components/map/map.component.vue";
-import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, TileLayer } from "leaflet";
+import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
 
-const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
+// const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
-const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+// const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
+// const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
 
 @Options({
     name: "MapViewComponent",
-    components: {},
+    components: {
+        MapComponent,
+    },
 })
 export default class MapViewComponent extends Vue {
-    /**
+    public mapOptions: MapOptions = {
-     * A map with the given ID is created inside this component. This ID can be used the get the map instance over the map cache service.
+        center: [48.208174, 16.373819],
-     */
+        zoom: 3,
-    @Prop()
+        zoomControl: false,
-    public mapId!: string;
+    };
 
-    protected oldBaseLayer: Control.LayersObject = {};
+    // public onMapInitialized(newItem: string) {
-    protected map!: Map;
+    //     console.log(newItem);
-    protected zoomControl!: Control.Zoom;
+    // }
-
-    beforeMount() {
-        if (this.mapId === undefined || this.mapId === null) {
-            this.mapId = this.generateUUID();
-        }
-    }
-
-    protected initMap(): void {
-        this.map = new Map(this.mapId);
-        // this.mapService.setMap(this.mapId, this.map);
-        // this.onMapInitializedEvent.emit(this.mapId);
-
-        // if (this.baseMaps && this.baseMaps.size > 0) {
-        // 	this.baseMaps.forEach((layerOptions, key) => this.addBaseMap(layerOptions));
-        // } else {
-        // 	this.addBaseMap();
-        // }
-        // if (this.fitBounds) {
-        // 	this.map.fitBounds(this.fitBounds);
-        // }
-    }
-
-    private generateUUID(): string {
-        function s4() {
-            return Math.floor((1 + Math.random()) * 0x10000)
-                .toString(16)
-                .substring(1);
-        }
-        return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
-    }
 }

src/views/map-view/map-view.component.vue

@@ -1,12 +1,11 @@
 <template>
-    <div class="container">
+    <div class="container main">
-        <section class="section">
+        <div class="canvas-area is-8 column">
-            <div class="column is-full text-center">
+            <h1>TETHYS SERVICES</h1>
-                <h1>TETHYS SERVICES</h1>
+            <div id="div-map">
-                <p class="lead">Map</p>
+                <MapComponent v-bind:mapId="'map'" v-bind:mapOptions="mapOptions"> </MapComponent>
-                <hr class="center-line" />
             </div>
-        </section>
+        </div>
     </div>
 </template>
 
@@ -15,9 +14,44 @@ import MapViewComponent from "./map-view.component";
 export default MapViewComponent;
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .section {
     font-size: 0.8rem;
     padding: 0;
 }
+.main {
+    // padding-top: 65px;
+    // flex-wrap: wrap;
+    // justify-content: space-around;
+
+    position: absolute;
+    overflow: hidden;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: scroll;
+}
+.canvas-area {
+    /* flex: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center; */
+    height: 100%;
+}
+
+#div-map {
+    position: relative;
+    height: 500px;
+    width: 500px;
+}
+
+.mapDesktop {
+    overflow: hidden;
+    position: absolute;
+    bottom: 30px;
+    top: 30px;
+    left: 30px;
+    right: 30px;
+}
 </style>