barmar/tethys.frontend
1
0
Fork 0
forked from geolba/tethys.frontend
Code Pull Requests Activity

- replace moment with dayjs

Browse Source 
- add leaflet.css inside main-styles.css
- add map.componetn for leaflet map
- bind properties to map via map-view.component
This commit is contained in:
Arno Kaimbacher 2022-01-26 16:32:19 +01:00
parent 1f930dbb1f
commit 5fe134a650
14 changed files with 218 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

2
src/App.vue
View File

@ -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">

2
src/app.ts
View File

@ -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";

1
src/assets/scss/main-styles.scss
View File

@ -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";

14
src/components/map/map-options.ts Normal file
View File

@ -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> {
}

1
src/components/map/map.component.html Normal file
View File

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

89
src/components/map/map.component.ts Normal file
View File

@ -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();
}
}

19
src/components/map/map.component.vue Normal file
View File

@ -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>

7
src/models/dataset.ts
View File

@ -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 todayDate = moment.now();
const embargoDate = dayjs(this.embargo_date); // moment(this.embargo_date);
const todayDate = dayjs(); //moment.now();
// Embargo has passed on the day after the specified date
if (embargoDate.isBefore(todayDate)) {

9
src/notes.txt
View File

@ -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/

17
src/views/dataset-detail.component/dataset-detail.component.ts
View File

@ -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("MMM Do YYYY");
// return moment(date).format("ddd, MMMM Do, YYYY h:mm a");
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("MMM Do YYYY");
// return moment(date).format("DD.MM.YYYY HH:mm");
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;

60
src/views/map-view/map-view.component.ts
View File

@ -1,53 +1,25 @@
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, TileLayer } from "leaflet";
import MapComponent from "@/components/map/map.component.vue";
import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
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';
// 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({
name: "MapViewComponent",
components: {},
components: {
MapComponent,
},
})
export default class MapViewComponent 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;
public mapOptions: MapOptions = {
center: [48.208174, 16.373819],
zoom: 3,
zoomControl: false,
};
protected oldBaseLayer: Control.LayersObject = {};
protected map!: Map;
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();
}
// public onMapInitialized(newItem: string) {
// console.log(newItem);
// }
}

50
src/views/map-view/map-view.component.vue
View File

@ -1,12 +1,11 @@
<template>
<div class="container">
<section class="section">
<div class="column is-full text-center">
<h1>TETHYS SERVICES</h1>
<p class="lead">Map</p>
<hr class="center-line" />
<div class="container main">
<div class="canvas-area is-8 column">
<h1>TETHYS SERVICES</h1>
<div id="div-map">
<MapComponent v-bind:mapId="'map'" v-bind:mapOptions="mapOptions"> </MapComponent>
</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>