- npm updates
- draw bounding box geometry - enter coverage information (elevation and depth)
This commit is contained in:
parent
4abcfe7135
commit
e110826e1a
12 changed files with 929 additions and 576 deletions
|
|
@ -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 = [
|
||||
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"
|
||||
:mapId="mapId"
|
||||
: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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue