geolba/tethys.backend
2
0
Fork 1
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

- npm updates

Browse Source 
- draw bounding box geometry
- enter coverage information (elevation and depth)
This commit is contained in:
Kaimbacher 2023-05-02 18:10:32 +02:00
parent 4abcfe7135
commit e110826e1a
12 changed files with 929 additions and 576 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/Controllers/Http/Submitter/DatasetController.ts
View File

@ -108,7 +108,7 @@ export default class DatasetController {
language: schema.string({ trim: true }, [
rules.minLength(2),
rules.maxLength(255),
rules.translatedLanguage('/language', 'type')
rules.translatedLanguage('/language', 'type'),
]),
}),
),
@ -119,7 +119,7 @@ export default class DatasetController {
language: schema.string({ trim: true }, [
rules.minLength(2),
rules.maxLength(255),
rules.translatedLanguage('/language', 'type')
rules.translatedLanguage('/language', 'type'),
]),
}),
),
@ -158,7 +158,7 @@ export default class DatasetController {
language: schema.string({ trim: true }, [
rules.minLength(2),
rules.maxLength(255),
rules.translatedLanguage('/language', 'type')
rules.translatedLanguage('/language', 'type'),
]),
}),
),
@ -169,7 +169,7 @@ export default class DatasetController {
language: schema.string({ trim: true }, [
rules.minLength(2),
rules.maxLength(255),
rules.translatedLanguage('/language', 'type')
rules.translatedLanguage('/language', 'type'),
]),
}),
),
@ -177,6 +177,28 @@ export default class DatasetController {
// third step
project_id: schema.number.optional(),
embargo_date: schema.date.optional({ format: 'yyyy-MM-dd' }, [rules.after(10, 'days')]),
coverage: schema.object().members({
x_min: schema.number(),
x_max: schema.number(),
y_min: schema.number(),
y_max: schema.number(),
elevation_absolut: schema.number.optional(),
elevation_min: schema.number.optional([
rules.requiredIfExists('elevation_max')
]),
elevation_max: schema.number.optional([
rules.requiredIfExists('elevation_min')
]),
depth_absolut: schema.number.optional(),
depth_min: schema.number.optional([
rules.requiredIfExists('depth_max')
]),
depth_max: schema.number.optional([
rules.requiredIfExists('depth_min')
]),
}),
});
try {
@ -234,7 +256,8 @@ export default class DatasetController {
'descriptions.*.value.required': 'Additional description is required, if defined',
'descriptions.*.type.required': 'Additional description type is required',
'descriptions.*.language.required': 'Additional description language is required',
'descriptions.*.language.translatedLanguage': 'The language of the translated description must be different from the language of the dataset',
'descriptions.*.language.translatedLanguage':
'The language of the translated description must be different from the language of the dataset',
'authors.minLength': 'at least {{ options.minLength }} author must be defined',

3
database/migrations/files_4_link_documents_licences.ts
View File

@ -1,5 +1,4 @@
import BaseSchema from '@ioc:Adonis/Lucid/Schema';
import { PersonRoles } from 'Contracts/enums';
export default class LinkDocumentsLicences extends BaseSchema {
protected tableName = 'link_documents_licences';
@ -19,7 +18,7 @@ export default class LinkDocumentsLicences extends BaseSchema {
.foreign('document_id', 'link_documents_licences_document_id_foreign')
.references('id')
.inTable('documents')
.onDelete('CASCADE') // delete this when permission is deleted
.onDelete('CASCADE') // delete this when document is deleted
.onUpdate(' CASCADE');
// table.index('licence_id', 'link_documents_licences_document_id_index')
table.primary(['licence_id', 'document_id']);

825
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -48,7 +48,7 @@
"@types/node": "^18.14.4",
"@types/proxy-addr": "^2.0.0",
"@types/source-map-support": "^0.5.6",
"@vue/tsconfig": "^0.1.3",
"@vue/tsconfig": "^0.3.2",
"adonis-preset-ts": "^2.1.0",
"autoprefixer": "^10.4.13",
"babel-preset-typescript-vue3": "^2.0.17",

254
resources/js/Components/Map/draw.component.vue
View File

@ -8,7 +8,7 @@
ref="inputDraw"
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
type="button"
:class="[isToggled ? 'cursor-not-allowed bg-gray-200' : 'bg-teal-50 is-active']"
:class="[_enabled ? 'cursor-not-allowed bg-gray-200' : 'bg-teal-50 is-active']"
@click.prevent="draw"
>
<BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
@ -22,10 +22,12 @@ import { Component, Vue, Prop } from 'vue-facing-decorator';
import BaseIcon from '@/Components/BaseIcon.vue';
import { mdiDrawPen } from '@mdi/js';
import { MapService } from '@/Stores/map.service';
// import { Map } from 'leaflet';
// import { LatLngBoundsExpression, toLatLngBounds } from 'leaflet/src/geo/LatLngBounds';
import { Map } from 'leaflet/src/map/index';
// import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
import { Marker } from 'leaflet';
// import { LatLngBounds, Rectangle } from 'leaflet';
import * as DomEvent from 'leaflet/src/dom/DomEvent';
import { Rectangle } from 'leaflet/src/layer/vector/Rectangle';
import { LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
@Component({
name: 'draw-control',
@ -34,16 +36,34 @@ import { Marker } from 'leaflet';
},
})
export default class DrawControlComponent extends Vue {
TYPE = 'rectangle';
/**
* class properties.
*/
mdiDrawPen = mdiDrawPen;
featuresLayer;
// options = {
// zIndex: 1000,
// // markerClass: Marker, // CylinderGeometry,
// drawingCSSClass: 'gba-editable-drawing',
// drawingCursor: 'crosshair',
// };
options = {
zIndex: 1000,
markerClass: Marker, // CylinderGeometry,
drawingCSSClass: 'gba-editable-drawing',
drawingCursor: 'crosshair',
shapeOptions: {
stroke: true,
color: '#22C55E',
weight: 4,
opacity: 0.5,
fill: true,
fillColor: '#22C55E', //same as color by default
fillOpacity: 0.2,
clickable: true,
},
repeatMode: true,
showArea: true, //Whether to show the area in the tooltip
metric: true, // Whether to use the metric measurement system or imperial
};
/**
@ -54,43 +74,189 @@ export default class DrawControlComponent extends Vue {
@Prop public southWest;
@Prop public northEast;
public isToggled = false;
mapService = MapService();
// try:
public _enabled;
private _map: Map;
private _isDrawing: boolean = false;
private _startLatLng;
private _mapDraggable;
private _shape: Rectangle | undefined;
// @method enable(): this
// Enables the handler
enable() {
if (this._enabled) {
return this;
}
this._enabled = true;
this.addHooks();
return this;
}
// @method disable(): this
// Disables the handler
disable() {
if (!this._enabled) {
return this;
}
this._enabled = false;
this.removeHooks();
return this;
}
// @method enabled(): Boolean
// Returns `true` if the handler is enabled
enabled() {
return !!this._enabled;
}
// @Ref('inputDraw') private _inputDraw: HTMLElement;
// SimpleShape
// @method addHooks(): void
// Add listener hooks to this handler.
private addHooks() {
// L.Draw.Feature.prototype.addHooks.call(this);
this._map = this.mapService.getMap(this.mapId);
if (this._map) {
this._mapDraggable = this._map.dragging.enabled();
if (this._mapDraggable) {
this._map.dragging.disable();
}
//TODO refactor: move cursor to styles
// this._container.style.cursor = 'crosshair';
// this._tooltip.updateContent({text: this._initialLabelText});
this._map
.on('mousedown', this._onMouseDown, this)
.on('mousemove', this._onMouseMove, this)
.on('touchstart', this._onMouseDown, this)
.on('touchmove', this._onMouseMove, this);
// we should prevent default, otherwise default behavior (scrolling) will fire,
// and that will cause document.touchend to fire and will stop the drawing
// (circle, rectangle) in touch mode.
// (update): we have to send passive now to prevent scroll, because by default it is {passive: true} now, which means,
// handler can't event.preventDefault
// check the news https://developers.google.com/web/updates/2016/06/passive-event-listeners
document.addEventListener('touchstart', DomEvent.preventDefault, { passive: false });
}
}
// SimpleShape
// @method removeHooks(): void
// Remove listener hooks from this handler.
removeHooks() {
// L.Draw.Feature.prototype.removeHooks.call(this);
if (this._map) {
if (this._mapDraggable) {
this._map.dragging.enable();
}
//TODO refactor: move cursor to styles
// this._container.style.cursor = '';
this._map
.off('mousedown', this._onMouseDown, this)
.off('mousemove', this._onMouseMove, this)
.off('touchstart', this._onMouseDown, this)
.off('touchmove', this._onMouseMove, this);
DomEvent.off(document, 'mouseup', this._onMouseUp, this);
DomEvent.off(document, 'touchend', this._onMouseUp, this);
document.removeEventListener('touchstart', DomEvent.preventDefault);
// If the box element doesn't exist they must not have moved the mouse, so don't need to destroy/return
// if (this._shape) {
// this._map.removeLayer(this._shape);
// // delete this._shape;
// this._shape = undefined;
// }
}
this._isDrawing = false;
}
private _onMouseDown(e) {
this._isDrawing = true;
this._startLatLng = e.latlng;
DomEvent.on(document, 'mouseup', this._onMouseUp, this)
.on(document, 'touchend', this._onMouseUp, this)
.preventDefault(e.originalEvent);
}
private _onMouseMove(e) {
var latlng = e.latlng;
// this._tooltip.updatePosition(latlng);
if (this._isDrawing) {
// this._tooltip.updateContent(this._getTooltipText());
this._drawShape(latlng);
}
}
private _onMouseUp() {
if (this._shape) {
this._fireCreatedEvent(this._shape);
}
// this.removeHooks();
this.disable();
if (this.options.repeatMode) {
this.enable();
}
}
private _fireCreatedEvent(shape) {
var rectangle = new Rectangle(shape.getBounds(), this.options.shapeOptions);
// L.Draw.SimpleShape.prototype._fireCreatedEvent.call(this, rectangle);
this._map.fire('Daw.Event.CREATED', { layer: rectangle, type: this.TYPE });
}
// from Draw Rectangle
_drawShape(latlng) {
if (!this._shape) {
const bounds = new LatLngBounds(this._startLatLng, latlng);
this._shape = new Rectangle(bounds, this.options.shapeOptions);
// this._map.addLayer(this._shape);
this._shape.addTo(this._map);
} else {
this._shape.setBounds(new LatLngBounds(this._startLatLng, latlng));
}
}
public draw() {
// let map: Map = this.mapService.getMap(this.mapId);
// const bounds: LatLngBoundsExpression = toLatLngBounds(this.southWest, this.northEast);
// map.fitBounds(bounds);
if (this.isToggled == true) {
if (this._enabled == true) {
this.disable();
} else {
this.enable();
}
this.isToggled = !this.isToggled;
// this.isToggled = !this.isToggled;
}
private enable() {
//if (this.map.mapTool) this.map.mapTool.on('editable:drawing:start', this.disable.bind(this));
// dom.addClass(this.map.container, 'measure-enabled');
//this.fireAndForward('showmeasure');
this._startMarker(this.southWest, this.options);
}
// private enable() {
// //if (this.map.mapTool) this.map.mapTool.on('editable:drawing:start', this.disable.bind(this));
// // dom.addClass(this.map.container, 'measure-enabled');
// //this.fireAndForward('showmeasure');
// this._startMarker(this.southWest, this.options);
// }
private disable() {
//if (this.map.mapTool) this.map.mapTool.off('editable:drawing:start', this.disable.bind(this));
// dom.removeClass(this.map.container, 'measure-enabled');
// this.featuresLayer.clearLayers();
// //this.fireAndForward('hidemeasure');
// if (this._drawingEditor) {
// this._drawingEditor.cancelDrawing();
// }
}
// private disable() {
// //if (this.map.mapTool) this.map.mapTool.off('editable:drawing:start', this.disable.bind(this));
// // dom.removeClass(this.map.container, 'measure-enabled');
// // this.featuresLayer.clearLayers();
// // //this.fireAndForward('hidemeasure');
// // if (this._drawingEditor) {
// // this._drawingEditor.cancelDrawing();
// // }
// }
// created(): void {
// this.featuresLayer = this._createFeaturesLayer();
@ -103,22 +269,22 @@ export default class DrawControlComponent extends Vue {
// return layerGroup;
// }
private _startMarker(latlng, options) {
let map = this.mapService.getMap(this.mapId);
latlng = map.getCenter().clone();
let markerLayer: Marker = this._createMarker(latlng, options); //.addTo(this.map);
// map.addLayer(markerLayer);
//this.map.addLayer(marker);
//marker.enableEdit(this.map).startDrawing(); //editor.startDrawing() -> registerForDrawing
// let baseEditor = markerLayer.en.enableEdit(this.map);
// baseEditor.startDrawing();
return markerLayer;
}
// private _startMarker(latlng, options) {
// let map = this.mapService.getMap(this.mapId);
// latlng = map.getCenter().clone();
// let markerLayer: Marker = this._createMarker(latlng, options); //.addTo(this.map);
// // map.addLayer(markerLayer);
// //this.map.addLayer(marker);
// //marker.enableEdit(this.map).startDrawing(); //editor.startDrawing() -> registerForDrawing
// // let baseEditor = markerLayer.en.enableEdit(this.map);
// // baseEditor.startDrawing();
// return markerLayer;
// }
private _createMarker(latlng, options): Marker {
// return this._createLayer((options && options.markerClass) || this.options.markerClass, latlng, options);
return new Marker(latlng, options);
}
// private _createMarker(latlng, options): Marker {
// // return this._createLayer((options && options.markerClass) || this.options.markerClass, latlng, options);
// return new Marker(latlng, options);
// }
// private _createLayer(klass, latlngs, options) {
// options = util.extend({ editOptions: { mapTool: this } }, options);
@ -140,7 +306,7 @@ export default class DrawControlComponent extends Vue {
position: absolute;
left: 10px;
top: 100px;
z-index: 500;
z-index: 40;
}
.btn-group-vertical button {

90
resources/js/Components/Map/map.component.vue
View File

@ -2,7 +2,7 @@
<div style="position: relative">
<!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
<div :id="mapId" class="map-container mapDesktop rounded">
<ZoomControlComponent :mapId="mapId"></ZoomControlComponent>
<ZoomControlComponent ref="zoom" :mapId="mapId"></ZoomControlComponent>
<DrawControlComponent :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
</div>
</div>
@ -10,7 +10,7 @@
<script lang="ts">
import { EventEmitter } from './EventEmitter';
import { Component, Vue, Prop } from 'vue-facing-decorator';
import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
// import type { Coverage } from '@/Dataset';
// import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, latLng, latLngBounds, FeatureGroup } from 'leaflet';
import { Map } from 'leaflet/src/map/index';
@ -27,6 +27,54 @@ import { LayerOptions, LayerMap } from './LayerOptions';
import { MapService } from '@/Stores/map.service';
import ZoomControlComponent from './zoom.component.vue';
import DrawControlComponent from './draw.component.vue';
import { Coverage } from '@/Dataset';
import {canvas} from 'leaflet/src/layer/vector/Canvas';
import {svg} from 'leaflet/src/layer/vector/SVG';
Map.include({
// @namespace Map; @method getRenderer(layer: Path): Renderer
// Returns the instance of `Renderer` that should be used to render the given
// `Path`. It will ensure that the `renderer` options of the map and paths
// are respected, and that the renderers do exist on the map.
getRenderer: function (layer) {
// @namespace Path; @option renderer: Renderer
// Use this specific instance of `Renderer` for this path. Takes
// precedence over the map's [default renderer](#map-renderer).
var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
if (!renderer) {
renderer = this._renderer = this._createRenderer();
}
if (!this.hasLayer(renderer)) {
this.addLayer(renderer);
}
return renderer;
},
_getPaneRenderer: function (name) {
if (name === 'overlayPane' || name === undefined) {
return false;
}
var renderer = this._paneRenderers[name];
if (renderer === undefined) {
renderer = this._createRenderer({pane: name});
this._paneRenderers[name] = renderer;
}
return renderer;
},
_createRenderer: function (options) {
// @namespace Map; @option preferCanvas: Boolean = false
// Whether `Path`s should be rendered on a `Canvas` renderer.
// By default, all `Path`s are rendered in a `SVG` renderer.
return (this.options.preferCanvas && canvas(options)) || svg(options);
}
});
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
// const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
@ -36,7 +84,7 @@ const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://o
name: 'MapComponent',
components: {
ZoomControlComponent,
DrawControlComponent
DrawControlComponent,
},
})
export default class MapComponent extends Vue {
@ -53,6 +101,9 @@ export default class MapComponent extends Vue {
@Prop()
public mapOptions: MapOptions;
@Prop()
public coverage: Coverage;
// markerService: MarkerService
/**
* Bounds for the map
@ -69,12 +120,13 @@ export default class MapComponent extends Vue {
@Prop()
public baseMaps: LayerMap;
@Ref('zoom') private zoom: ZoomControlComponent;
mapService = MapService();
southWest;
northEast;
/**
* Informs when initialization is done with map id.
*/
@ -88,6 +140,11 @@ export default class MapComponent extends Vue {
mounted(): void {
this.initMap();
this.map.on('zoomend zoomlevelschange', this.zoom.updateDisabled, this.zoom);
}
unmounted() {
this.map.off('zoomend zoomlevelschange');
}
public deleteTest(): void {
@ -116,6 +173,28 @@ export default class MapComponent extends Vue {
const attributionControl = new Attribution().addTo(this.map);
attributionControl.setPrefix(false);
map.on(
'Daw.Event.CREATED',
function (event) {
// drawnItems.clearLayers();
// var type = event.type;
var layer = event.layer;
// if (type === "rectancle") {
// layer.bindPopup("A popup!" + layer.getBounds().toBBoxString());
var bounds = layer.getBounds();
this.coverage.x_min = bounds.getSouthWest().lng;
this.coverage.y_min = bounds.getSouthWest().lat;
// console.log(this.geolocation.xmin);
this.coverage.x_max = bounds.getNorthEast().lng;
this.coverage.y_max = bounds.getNorthEast().lat;
// }
// drawnItems.addLayer(layer);
},
this,
);
// Initialise the FeatureGroup to store editable layers
// let drawnItems = (this.drawnItems = new FeatureGroup());
// map.addLayer(drawnItems);
@ -150,4 +229,7 @@ export default class MapComponent extends Vue {
height: 600px; /* <-- map height */
width: 100%;
}
.leaflet-pane {
z-index: 30;
}
</style>

26
resources/js/Components/Map/zoom.component.vue
View File

@ -2,7 +2,7 @@
<div class="gba-control-zoom btn-group-vertical">
<button
ref="inputPlus"
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
class="disabled:bg-gray-200 inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 text-sm p-1"
type="button"
@click.prevent="zoomIn"
>
@ -11,7 +11,7 @@
<button
ref="inputMinus"
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
class="disabled:bg-gray-200 inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 text-sm p-1"
type="button"
@click.prevent="zoomOut"
>
@ -42,8 +42,8 @@ export default class ZoomControlComponent extends Vue {
*/
@Prop() public mapId: string;
@Ref('inputPlus') private _inputPlus: HTMLElement;
@Ref('inputMinus') private _inpuMinus: HTMLElement;
@Ref('inputPlus') inputPlus: HTMLButtonElement;
@Ref('inputMinus') inputMinus: HTMLButtonElement;
mapService = MapService();
map;
@ -71,19 +71,19 @@ export default class ZoomControlComponent extends Vue {
let map = this.mapService.getMap(this.mapId);
// let className = 'leaflet-disabled';
// this._inputPlus.nativeElement.disabled = false;
this._inputPlus.setAttribute('aria-disabled', 'false');
this.inputPlus.disabled = false;
this.inputPlus.setAttribute('aria-disabled', 'false');
// this._inpuMinus.nativeElement.disabled = false;
this._inpuMinus.setAttribute('aria-disabled', 'false');
this.inputMinus.disabled = false;
this.inputMinus.setAttribute('aria-disabled', 'false');
if (map.getZoom() === map.getMinZoom()) {
// this._inpuMinus.nativeElement.disabled = true;
this._inpuMinus.setAttribute('aria-disabled', 'true');
this.inputMinus.disabled = true;
this.inputMinus.setAttribute('aria-disabled', 'true');
}
if (map.getZoom() === map.getMaxZoom()) {
// this._inputPlus.nativeElement.disabled = true;
this._inputPlus.setAttribute('aria-disabled', 'true');
this.inputPlus.disabled = true;
this.inputPlus.setAttribute('aria-disabled', 'true');
}
}
}
@ -100,7 +100,7 @@ export default class ZoomControlComponent extends Vue {
position: absolute;
left: 10px;
top: 10px;
z-index: 500;
z-index: 40;
}
.btn-group-vertical button {

2
resources/js/Components/NavBar.vue
View File

@ -83,7 +83,7 @@ const logout = async() => {
<template>
<nav
class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-30 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-50 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
>
<div class="flex lg:items-stretch" :class="containerMaxW">
<div class="flex-1 items-stretch flex h-14">

8
resources/js/Dataset.ts
View File

@ -45,10 +45,10 @@ interface IErrorMessage {
}
export interface Coverage {
x_min: number;
y_min: number;
x_max: number;
y_max: number;
x_min?: number;
y_min?: number;
x_max?: number;
y_max?: number;
elevation_min?: number;
elevation_max?: number;
elevation_absolut?: number;

252
resources/js/Pages/Submitter/Dataset/Create.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { Dataset, Description, Title } from '@/Dataset';
import {
mdiDatabasePlus,
@ -36,7 +36,7 @@ import SearchAutocomplete from '@/Components/SearchAutocomplete.vue';
import TablePersons from '@/Components/TablePersons.vue';
import { MainService } from '@/Stores/main';
import { notify } from '@/notiwind';
import LocationMap from '@/Components/Map/map.component.vue';
import MapComponent from '@/Components/Map/map.component.vue';
import { MapOptions } from '@/Components/Map/MapOptions';
import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
import { LayerOptions } from '@/Components/Map/LayerOptions';
@ -94,10 +94,10 @@ if (Object.keys(mainService.dataset).length == 0) {
project_id: undefined,
embargo_date: '',
coverage: {
x_min: 0,
y_min: 0,
x_max: 0,
y_max: 0,
x_min: undefined,
y_min: undefined,
x_max: undefined,
y_max: undefined,
elevation_min: undefined,
elevation_max: undefined,
elevation_absolut: undefined,
@ -163,6 +163,34 @@ const form = useForm<Dataset>(dataset);
// },
// });
let elevation = ref('no_elevation');
watch(elevation, (currentValue) => {
if (currentValue == 'absolut') {
form.coverage.elevation_min = undefined;
form.coverage.elevation_max = undefined;
} else if (currentValue == 'range') {
form.coverage.elevation_absolut = undefined;
} else {
form.coverage.elevation_absolut = undefined;
form.coverage.elevation_min = undefined;
form.coverage.elevation_max = undefined;
}
});
let depth = ref('no_depth');
watch(depth, (currentValue) => {
if (currentValue == 'absolut') {
form.coverage.depth_min = undefined;
form.coverage.depth_max = undefined;
} else if (currentValue == 'range') {
form.coverage.depth_absolut = undefined;
} else {
form.coverage.depth_absolut = undefined;
form.coverage.depth_min = undefined;
form.coverage.depth_max = undefined;
}
});
// let time= "no_time";
const isModalActive = ref(false);
const formStep = ref(1);
@ -170,14 +198,14 @@ const mapOptions: MapOptions = {
center: [48.208174, 16.373819],
zoom: 3,
zoomControl: false,
attributionControl: false
attributionControl: false,
};
const baseMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
const fitBounds: LatLngBoundsExpression = [
[46.4318173285, 9.47996951665],
[49.0390742051, 16.9796667823],
];
const mapId = "test";
const mapId = 'test';
// const submit = async () => {
// await router.post(stardust.route('user.store'), form, {
@ -256,7 +284,7 @@ const onAddContributor = (person) => {
notify({ type: 'info', text: 'person has been successfully added as contributor' }, 4000);
}
};
// const onMapInitializedEvent = "onMapInitializedEvent";
const onMapInitialized = (newItem) => {
// notify({ type: 'info', text: message });
console.log(newItem);
@ -738,14 +766,216 @@ const onMapInitialized = (newItem) => {
<CardBox class="mb-6 shadow" has-table title="Geo Location" :icon="mdiEarthPlus">
<!-- @onMapInitialized="onMapInitialized" -->
<!-- v-bind-event="{ mapId, name: mapId }" -->
<LocationMap
<MapComponent
:mapOptions="mapOptions"
:baseMaps="baseMaps"
:fitBounds="fitBounds"
:coverage="form.coverage"
:mapId="mapId"
v-bind-event:onMapInitializedEvent="onMapInitialized"
></LocationMap>
></MapComponent>
<!-- <label v-bind-event="{ for: mapId }" /> -->
<div class="flex flex-col md:flex-row">
<!-- x min and max -->
<FormField
label="Coverage X Min"
:class="{ 'text-red-400': form.errors['coverage.x_min'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.x_min" type="text" placeholder="[enter x_min]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.x_min'] && Array.isArray(form.errors['coverage.x_min'])"
>
{{ form.errors['coverage.x_min'].join(', ') }}
</div>
</FormControl>
</FormField>
<FormField
label="Coverage X Max"
:class="{ 'text-red-400': form.errors['coverage.x_max'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.x_max" type="text" placeholder="[enter x_max]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.x_max'] && Array.isArray(form.errors['coverage.x_max'])"
>
{{ form.errors['coverage.x_max'].join(', ') }}
</div>
</FormControl>
</FormField>
<!-- y min and max -->
<FormField
label="Coverage Y Min"
:class="{ 'text-red-400': form.errors['coverage.y_min'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.y_min" type="text" placeholder="[enter y_min]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.y_min'] && Array.isArray(form.errors['coverage.y_min'])"
>
{{ form.errors['coverage.y_min'].join(', ') }}
</div>
</FormControl>
</FormField>
<FormField
label="Coverage Y Max"
:class="{ 'text-red-400': form.errors['coverage.y_max'] }"
class="w-full mx-2 flex-1"
>
<FormControl required v-model="form.coverage.y_max" type="text" placeholder="[enter y_max]">
<div
class="text-red-400 text-sm"
v-if="form.errors['coverage.y_max'] && Array.isArray(form.errors['coverage.y_max'])"
>
{{ form.errors['coverage.y_max'].join(', ') }}
</div>
</FormControl>
</FormField>
</div>
</CardBox>
<CardBox class="mb-6 shadow" has-table title="Coverage Information" :icon="mdiEarthPlus">
<!-- elevation menu -->
<div class="lex flex-col md:flex-row mb-3">
<label for="elevation-option-one" class="pure-radio">
<input id="elevation-option-one" type="radio" v-model="elevation" value="absolut" />
absolut elevation (m)
</label>
<label for="elevation-option-two" class="pure-radio">
<input id="elevation-option-two" type="radio" v-model="elevation" value="range" />
elevation range (m)
</label>
<label for="elevation-option-three" class="pure-radio">
<input id="elevation-option-three" type="radio" v-model="elevation" value="no_elevation" />
no elevation
</label>
</div>
<div class="flex flex-col md:flex-row">
<FormField
v-if="elevation === 'absolut'"
label="elevation absolut"
:class="{ 'text-red-400': form.errors['coverage.elevation_absolut'] }"
class="w-full mx-2 flex-1"
>
<FormControl
required
v-model="form.coverage.elevation_absolut"
type="text"
placeholder="[enter elevation_absolut]"
>
<div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.elevation_absolut'])">
{{ form.errors['coverage.elevation_absolut'].join(', ') }}
</div>
</FormControl>
</FormField>
<FormField
v-if="elevation === 'range'"
label="elevation min"
:class="{ 'text-red-400': form.errors['coverage.elevation_min'] }"
class="w-full mx-2 flex-1"
>
<FormControl
required
v-model="form.coverage.elevation_min"
type="text"
placeholder="[enter elevation_min]"
>
<div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.elevation_min'])">
{{ form.errors['coverage.elevation_min'].join(', ') }}
</div>
</FormControl>
</FormField>
<FormField
v-if="elevation === 'range'"
label="elevation max"
:class="{ 'text-red-400': form.errors['coverage.elevation_max'] }"
class="w-full mx-2 flex-1"
>
<FormControl
required
v-model="form.coverage.elevation_max"
type="text"
placeholder="[enter elevation_max]"
>
<div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.elevation_max'])">
{{ form.errors['coverage.elevation_max'].join(', ') }}
</div>
</FormControl>
</FormField>
</div>
<!-- depth menu -->
<div class="lex flex-col md:flex-row mb-3">
<label for="depth-option-one" class="pure-radio">
<input id="depth-option-one" type="radio" v-model="depth" value="absolut" />
absolut depth (m)
</label>
<label for="depth-option-two" class="pure-radio">
<input id="depth-option-two" type="radio" v-model="depth" value="range" />
depth range (m)
</label>
<label for="depth-option-three" class="pure-radio">
<input id="depth-option-three" type="radio" v-model="depth" value="no_depth" />
no depth
</label>
</div>
<div class="flex flex-col md:flex-row">
<FormField
v-if="depth === 'absolut'"
label="depth absolut"
:class="{ 'text-red-400': form.errors['coverage.depth_absolut'] }"
class="w-full mx-2 flex-1"
>
<FormControl
required
v-model="form.coverage.depth_absolut"
type="text"
placeholder="[enter depth_absolut]"
>
<div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.depth_absolut'])">
{{ form.errors['coverage.depth_absolut'].join(', ') }}
</div>
</FormControl></FormField
>
<FormField
v-if="depth === 'range'"
label="depth min"
:class="{ 'text-red-400': form.errors['coverage.depth_min'] }"
class="w-full mx-2 flex-1"
>
<FormControl
required
v-model="form.coverage.depth_min"
type="text"
placeholder="[enter depth_min]"
>
<div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.depth_min'])">
{{ form.errors['coverage.depth_min'].join(', ') }}
</div>
</FormControl>
</FormField>
<FormField
v-if="depth === 'range'"
label="depth max"
:class="{ 'text-red-400': form.errors['coverage.depth_max'] }"
class="w-full mx-2 flex-1"
>
<FormControl
required
v-model="form.coverage.depth_max"
type="text"
placeholder="[enter depth_max]"
>
<div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.depth_max'])">
{{ form.errors['coverage.depth_max'].join(', ') }}
</div>
</FormControl>
</FormField>
</div>
</CardBox>
</div>

2
tsconfig.json
View File

@ -22,7 +22,7 @@
"moduleResolution": "node", //neu
"experimentalDecorators": true, //neu
"strictPropertyInitialization": false, //neu
// Target latest version 'esnext' of ECMAScript or minimal 'es6'.
// Target latest language version 'esnext' of ECMAScript or minimal 'es6'.
"target": "esnext", //neu
//what module code is generated
"module": "NodeNext", //neu

4
tsconfig.vue.json
View File

@ -1,13 +1,13 @@
{
// tsconfig.vue.json
"extends": "@vue/tsconfig/tsconfig.web.json",
"extends": "@vue/tsconfig/tsconfig.json",
"include": ["./resources/js/**/*"],
"compilerOptions": {
// "module": "commonjs", //for tehys.api...alos nodenext
// Process & infer types from .js files.
"allowJs": true,
// Target latest version 'esnext' of ECMAScript or minimal 'es6'.
//javascript language version: Target latest version 'esnext' of ECMAScript or minimal 'es6'.
"target": "ESNext", //neu
// //what module code is generated
"module": "ESNext", //neu