92 lines
3.5 KiB
Vue
92 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div class="flex flex-col h-screen p-4 bg-gray-100">
|
||
|
|
<header class="flex justify-between items-center mb-4">
|
||
|
|
<h1 class="text-xl font-bold">SKOS Browser</h1>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<button @click="updateApp" title="Update the application">
|
||
|
|
<img src="/Resources/Images/refresh.png" alt="Update" class="w-4 h-4" />
|
||
|
|
</button>
|
||
|
|
<button @click="showInfo" title="Info">
|
||
|
|
<img src="/Resources/Images/info.png" alt="Info" class="w-4 h-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="bg-white shadow-md rounded-lg p-4 mb-6">
|
||
|
|
<h2 class="text-lg font-semibold">GBA-Thesaurus</h2>
|
||
|
|
<label class="block text-sm font-medium">Aktueller Endpoint:</label>
|
||
|
|
<!-- <TreeView :items="endpoints" @select="onEndpointSelected" /> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bg-white shadow-md rounded-lg p-4">
|
||
|
|
<h2 class="text-lg font-semibold">Konzept-Suche</h2>
|
||
|
|
<!-- <Autocomplete v-model="selectedConcept" :items="concepts" placeholder="Search for a concept" @change="onConceptSelected" /> -->
|
||
|
|
<div class="mt-4">
|
||
|
|
<h3 class="text-md font-medium">Ausgewähltes Konzept</h3>
|
||
|
|
<p>{{ selectedConcept.title }}</p>
|
||
|
|
<a :href="selectedConcept.uri" target="_blank" class="text-blue-500">URI</a>
|
||
|
|
<textarea
|
||
|
|
v-model="selectedConcept.description"
|
||
|
|
class="mt-2 w-full h-24 border rounded"
|
||
|
|
placeholder="Description"
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="mt-4">
|
||
|
|
<h3 class="text-md font-medium">Untergeordnete Konzepte</h3>
|
||
|
|
<!-- <LinkLabelList :items="narrowerConcepts" /> -->
|
||
|
|
</div>
|
||
|
|
<div class="mt-4">
|
||
|
|
<h3 class="text-md font-medium">Übergeordnete Konzepte</h3>
|
||
|
|
<!-- <LinkLabelList :items="broaderConcepts" /> -->
|
||
|
|
</div>
|
||
|
|
<div class="mt-4">
|
||
|
|
<h3 class="text-md font-medium">Verwandte Konzepte</h3>
|
||
|
|
<!-- <LinkLabelList :items="relatedConcepts" /> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import TreeView from './TreeView.vue'; // Assuming you have a TreeView component
|
||
|
|
// import Autocomplete from './Autocomplete.vue'; // Assuming you have an Autocomplete component
|
||
|
|
// import LinkLabelList from './LinkLabelList.vue'; // Assuming you have a LinkLabelList component
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
// TreeView,
|
||
|
|
// Autocomplete,
|
||
|
|
// LinkLabelList,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
endpoints: [], // This should be populated with your data
|
||
|
|
concepts: [], // This should be populated with your data
|
||
|
|
selectedConcept: {},
|
||
|
|
narrowerConcepts: [], // Populate with data
|
||
|
|
broaderConcepts: [], // Populate with data
|
||
|
|
relatedConcepts: [], // Populate with data
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
updateApp() {
|
||
|
|
// Handle app update logic
|
||
|
|
},
|
||
|
|
showInfo() {
|
||
|
|
// Handle showing information
|
||
|
|
},
|
||
|
|
onEndpointSelected(endpoint) {
|
||
|
|
// Handle endpoint selection
|
||
|
|
},
|
||
|
|
onConceptSelected(concept) {
|
||
|
|
this.selectedConcept = concept;
|
||
|
|
// Handle concept selection logic, e.g., fetching related concepts
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* Add your styles here */
|
||
|
|
</style>
|