- rename of the folder for the dataset-detail.component
This commit is contained in:
parent
eb8803d7a8
commit
3b44926ce1
6 changed files with 7 additions and 7 deletions
317
src/views/dataset-detail.component/dataset-detail.component.vue
Normal file
317
src/views/dataset-detail.component/dataset-detail.component.vue
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
<template v-if="datasetId">
|
||||
<!-- <div class="container">
|
||||
<section class="section" v-if="dataset != undefined">
|
||||
<h2 v-if="dataset.hasOwnProperty('titles')">{{ dataset.titles[0].value }} details!</h2>
|
||||
<div v-if="dataset" class="dataset__blog-meta">published: {{ getHumanDate(dataset.server_date_published) }}</div>
|
||||
<p v-if="dataset.hasOwnProperty('abstracts')" class="dataset__abstract">{{ dataset.abstracts[0].value }}</p>
|
||||
<div><label>id: </label>{{ dataset.id }}</div>
|
||||
<button v-on:click="goBack">Back</button>
|
||||
</section>
|
||||
</div> -->
|
||||
<div class="container-fluid banner mz-5">
|
||||
<!-- <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
|
||||
<div class="search-box mx-auto">
|
||||
<div class="field has-addons main-search-from-bg">
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
v-on:input="searchChanged"
|
||||
id="search_query"
|
||||
class="input is-medium"
|
||||
type="text"
|
||||
name="q"
|
||||
autocomplete="off"
|
||||
v-model="display"
|
||||
v-bind:placeholder="placeholder"
|
||||
v-on:keydown.down="onArrowDown"
|
||||
v-on:keydown.up="onArrowUp"
|
||||
v-on:keydown.enter="onEnter"
|
||||
@keydown.tab="close"
|
||||
v-on:focus="focus"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button input is-medium search-button-icon" @click="search()">
|
||||
<i class="fas fa-search text-white"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <simple-search-component></simple-search-component> -->
|
||||
<vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
|
||||
</div>
|
||||
<section class="section" v-if="loaded">
|
||||
<div class="container">
|
||||
<!-- <span class="is-size-5"> Basic Table </span>
|
||||
<br /> -->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
|
||||
<div class="card">
|
||||
<div class="column dataset__blog-meta">
|
||||
<h2 class="label uppercase">published: {{ getPublishedDate(dataset.server_date_published) }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<label class="label">
|
||||
{{ getCitation() }}
|
||||
<a v-if="dataset.identifier" target="_blank" class="link-label" v-bind:href="'https://doi.org/' + dataset.identifier.value"
|
||||
>({{ "https://doi.org/" + dataset.identifier.value }})</a
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card record-elem">
|
||||
<div class="columns" v-if="dataset.hasOwnProperty('titles')">
|
||||
<div class="column is-3-desktop is-4-tablet label">Title/<br />title:</div>
|
||||
<div class="column is-9-desktop is-8-tablet">{{ dataset.titles[0].value }}</div>
|
||||
</div>
|
||||
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
|
||||
<div class="column is-3-desktop is-4-tablet label">
|
||||
Zusammenfassung/<br />
|
||||
abstract:
|
||||
</div>
|
||||
<div class="column is-9-desktop is-8-tablet">
|
||||
<p>{{ dataset.MainAbstract.value }}</p>
|
||||
<br />
|
||||
<p v-if="dataset.hasTranslatedAbstract()">
|
||||
{{ dataset.TranslatedAbstract.value }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
|
||||
<div class="column is-3-desktop is-4-tablet label">Serieninformation/<br />series information:</div>
|
||||
<div class="column is-9-desktop is-8-tablet" v-if="dataset.hasSeriesInformationAbstract()">
|
||||
{{ dataset.SeriesInformationAbstract?.value }}
|
||||
</div>
|
||||
<div class="column is-9-desktop is-8-tablet" v-else>-</div>
|
||||
</div>
|
||||
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
|
||||
<div class="column is-3-desktop is-4-tablet label">Methodik/<br />method:</div>
|
||||
<div class="column is-9-desktop is-8-tablet" v-if="dataset.hasMethodsAbstract()">
|
||||
{{ dataset.MethodsAbstract.value }}
|
||||
</div>
|
||||
<div class="column is-9-desktop is-8-tablet" v-else>-</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3-desktop is-4-tablet label">Downloads/<br />downloads:</div>
|
||||
<div class="column is-9-desktop is-8-tablet" v-if="dataset.files.length > 0">
|
||||
<table id="items" v-if="dataset.hasEmbargoPassed()" class="table is-bordered is-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-header">Path Name</th>
|
||||
<th class="table-header">File Extension</th>
|
||||
<th class="table-header">File Size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="file in dataset.files" :key="file.id">
|
||||
<td>
|
||||
<a class="link-label" target="_blank" v-bind:href="portal + file.id"> {{ file.label }} </a>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ getExtension(file.path_name) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ formatSize(file.file_size, 2) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<span v-else>Datensatz hat noch ein gültiges Embargo-Datum.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3-desktop is-4-tablet label">Technische Metadaten/<br />technical metadata:</div>
|
||||
<div class="column is-9-desktop is-8-tablet">
|
||||
<p>Persistenter Identifikator: {{ dataset.url }}</p>
|
||||
<p>Status: {{ dataset.server_state }}</p>
|
||||
<p v-if="dataset.hasOwnProperty('user')">Eingestellt von: {{ dataset.user.login }}</p>
|
||||
<p>Herausgeber: {{ dataset.creating_corporation }}</p>
|
||||
<p>Publisher: {{ dataset.publisher_name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h2 class="label uppercase">Details</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Beitragende/Contributor</h3>
|
||||
<p v-if="dataset.hasContributors()">
|
||||
{{ dataset.contributors.map((u) => u.full_name).join(", ") }}
|
||||
</p>
|
||||
<p v-else>-</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Schlüsselwörter/Keywords</h3>
|
||||
<p v-if="dataset.hasOwnProperty('subjects')">
|
||||
{{ dataset.subjects.map((u) => u.value).join(", ") }}
|
||||
</p>
|
||||
<p v-else>-</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Erstellungsjahr/Year</h3>
|
||||
<p>
|
||||
{{ getYear(dataset.server_date_published) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Abdeckung/Coverage</h3>
|
||||
<p>
|
||||
{{ dataset.Coverage }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Sprache/Language</h3>
|
||||
<p>
|
||||
{{ dataset.language }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Objekttyp/Object Type</h3>
|
||||
<p>
|
||||
<span><i class="fas fa-file"></i> {{ dataset.type }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Lizenz/License</h3>
|
||||
<p v-if="dataset.hasLicenses()">
|
||||
<label v-for="license in dataset.licenses" :key="license.id">
|
||||
<span class="normal label">
|
||||
{{ license.name }}
|
||||
</span>
|
||||
<span v-if="openAccessLicences.includes(license.name)" class="normal label uppercase"><i class="fas fa-lock-open"></i> Open Access</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Projekt/Project</h3>
|
||||
<p v-if="dataset.project != null">
|
||||
<span>{{ dataset.project.name }}</span>
|
||||
</p>
|
||||
<p v-else>-</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3 class="label uppercase">Embargo</h3>
|
||||
<p v-if="dataset.embargo_date">
|
||||
<span>{{ getHumanDate(dataset.embargo_date) }}</span>
|
||||
</p>
|
||||
<p v-else>-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid" style="padding-top: 3.8em">
|
||||
<div class="columns is-mobile partner-logos">
|
||||
<div class="column col-sm text-center">
|
||||
<a target="_blank" href="https://www.re3data.org/repository/r3d100013400"><img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" /></a>
|
||||
</div>
|
||||
<div class="column col-sm text-center">
|
||||
<a target="_blank" href="http://www.geologie.ac.at/">
|
||||
<!-- <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" /> -->
|
||||
<img src="@/assets/site/img/gbaLogoRGB_web.png" alt="Geologische Bundesanstalt logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-sm text-center">
|
||||
<a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
|
||||
<img src="@/assets/site/img/base-logo.gif" alt="logo base" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import DatasetDetailComponent from "./dataset-detail.component";
|
||||
export default DatasetDetailComponent;
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.section {
|
||||
font-size: 0.8rem;
|
||||
padding: 0;
|
||||
}
|
||||
.card {
|
||||
border-radius: 0;
|
||||
/* rempve box-shadow */
|
||||
box-shadow: none;
|
||||
}
|
||||
.link-label {
|
||||
color: #33cccc;
|
||||
}
|
||||
.label {
|
||||
/* color: #363636; */
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.label.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.normal.label {
|
||||
font-weight: 400;
|
||||
}
|
||||
.column p span i {
|
||||
color: #336699;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
/* color: #363636; */
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
background-color: #ccddf1;
|
||||
}
|
||||
// input {
|
||||
// height: 2em;
|
||||
// font-size: 1em;
|
||||
// padding-left: 0.4em;
|
||||
// }
|
||||
// button {
|
||||
// margin-top: 20px;
|
||||
// font-family: Arial;
|
||||
// background-color: #eee;
|
||||
// border: none;
|
||||
// padding: 5px 10px;
|
||||
// border-radius: 4px;
|
||||
// cursor: pointer;
|
||||
// cursor: hand;
|
||||
// }
|
||||
// button:hover {
|
||||
// background-color: #cfd8dc;
|
||||
// }
|
||||
// button:disabled {
|
||||
// background-color: #eee;
|
||||
// color: #ccc;
|
||||
// cursor: auto;
|
||||
// }
|
||||
</style>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue