2023-10-20 13:26:25 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { Head } from '@inertiajs/vue3';
|
2023-10-31 14:38:43 +00:00
|
|
|
import { ref, Ref } from 'vue';
|
|
|
|
|
import { mdiChartTimelineVariant } from '@mdi/js';
|
2023-10-20 13:26:25 +00:00
|
|
|
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
|
|
|
|
|
import SectionMain from '@/Components/SectionMain.vue';
|
|
|
|
|
import BaseButton from '@/Components/BaseButton.vue';
|
|
|
|
|
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
|
|
|
|
import { MapOptions } from '@/Components/Map/MapOptions';
|
|
|
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
2023-10-31 14:38:43 +00:00
|
|
|
import SearchMap from '@/Components/Map/SearchMap.vue';
|
2023-10-23 13:27:39 +00:00
|
|
|
import { OpensearchDocument } from '@/Dataset';
|
2023-10-20 13:26:25 +00:00
|
|
|
|
2023-10-31 14:38:43 +00:00
|
|
|
// const fitBounds: LatLngBoundsExpression = [
|
|
|
|
|
// [46.4318173285, 9.47996951665],
|
|
|
|
|
// [49.0390742051, 16.9796667823],
|
|
|
|
|
// ];
|
|
|
|
|
|
|
|
|
|
// const mapId = 'map';
|
|
|
|
|
|
|
|
|
|
// const coverage = {
|
|
|
|
|
// x_min: undefined,
|
|
|
|
|
// y_min: undefined,
|
|
|
|
|
// x_max: undefined,
|
|
|
|
|
// y_max: undefined,
|
|
|
|
|
// elevation_min: undefined,
|
|
|
|
|
// elevation_max: undefined,
|
|
|
|
|
// elevation_absolut: undefined,
|
|
|
|
|
// depth_min: undefined,
|
|
|
|
|
// depth_max: undefined,
|
|
|
|
|
// depth_absolut: undefined,
|
|
|
|
|
// time_min: undefined,
|
|
|
|
|
// time_max: undefined,
|
|
|
|
|
// time_absolut: undefined,
|
|
|
|
|
// };
|
2023-10-20 13:26:25 +00:00
|
|
|
|
2023-10-23 13:27:39 +00:00
|
|
|
// Replace with your actual data
|
|
|
|
|
const datasets: Ref<OpensearchDocument[]> = ref([]);
|
2023-10-31 14:38:43 +00:00
|
|
|
const openAccessLicences: Array<string> = ['CC-BY-4.0', 'CC-BY-SA-4.0'];
|
2023-10-23 13:27:39 +00:00
|
|
|
|
2023-10-20 13:26:25 +00:00
|
|
|
const mapOptions: MapOptions = {
|
2023-10-31 14:38:43 +00:00
|
|
|
center: [48.208174, 16.373819],
|
|
|
|
|
zoom: 3,
|
|
|
|
|
zoomControl: false,
|
|
|
|
|
attributionControl: false,
|
2023-10-20 13:26:25 +00:00
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
2023-10-31 14:38:43 +00:00
|
|
|
<LayoutGuest>
|
|
|
|
|
<Head title="Map" />
|
2023-10-20 13:26:25 +00:00
|
|
|
|
2023-10-31 14:38:43 +00:00
|
|
|
<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
|
|
|
|
|
<SectionMain>
|
|
|
|
|
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Tethys Map" main>
|
|
|
|
|
<!-- <BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
|
2023-10-20 13:26:25 +00:00
|
|
|
label="Star on Gitea" color="contrast" rounded-full small /> -->
|
2023-10-31 14:38:43 +00:00
|
|
|
<BaseButton :route-name="stardust.route('app.login.show')" label="Login" color="white" rounded-full small />
|
|
|
|
|
</SectionTitleLineWithButton>
|
2023-10-20 13:26:25 +00:00
|
|
|
|
2023-10-31 14:38:43 +00:00
|
|
|
<!-- <SectionBannerStarOnGitea /> -->
|
2023-10-20 13:26:25 +00:00
|
|
|
|
2023-10-31 14:38:43 +00:00
|
|
|
<!-- <CardBox> -->
|
|
|
|
|
<!-- <div id="map" class="map-container mapDesktop mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
|
2023-10-23 13:27:39 +00:00
|
|
|
<DrawControlComponent ref="draw" :preserve="false" :mapId="mapId" :southWest="southWest"
|
|
|
|
|
:northEast="northEast">
|
|
|
|
|
</DrawControlComponent>
|
2023-10-31 14:38:43 +00:00
|
|
|
</div> -->
|
|
|
|
|
<SearchMap :datasets="datasets" :map-options="mapOptions"></SearchMap>
|
|
|
|
|
|
|
|
|
|
<div d="search-result-list-wrapper" class="flex flex-wrap col-span-24 h-full">
|
|
|
|
|
<div v-for="dataset in datasets" :key="dataset.id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4">
|
|
|
|
|
<div class="bg-white rounded shadow p-6">
|
|
|
|
|
<h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
|
|
|
|
|
{{ dataset.title_output }}
|
|
|
|
|
</h3>
|
|
|
|
|
<!-- <h2 class="text-xl font-bold mb-2">{{ dataset.title_output }}</h2> -->
|
|
|
|
|
<p class="text-gray-700 mb-2">{{ dataset.abstract_output }}</p>
|
|
|
|
|
<div class="text-sm text-gray-600">
|
|
|
|
|
<div v-for="author in dataset.author" :key="author" class="mb-1">{{ author }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
|
|
|
|
|
{{ dataset.year }}
|
|
|
|
|
</span>
|
|
|
|
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
|
|
|
|
|
{{ dataset.language }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p>
|
|
|
|
|
<span class="label"><i class="fas fa-file"></i> {{ dataset.doctype }}</span>
|
|
|
|
|
<!-- <span>Licence: {{ document.licence }}</span> -->
|
|
|
|
|
<span v-if="openAccessLicences.includes(dataset.licence)" class="label titlecase"
|
|
|
|
|
><i class="fas fa-lock-open"></i> Open Access</span
|
|
|
|
|
>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</SectionMain>
|
|
|
|
|
<!-- </section> -->
|
|
|
|
|
</LayoutGuest>
|
|
|
|
|
</template>
|
