geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull Requests Packages Projects 3 Releases 1 Wiki Activity

- add vue router

Browse Source 
- add extra view components
This commit is contained in:
Arno Kaimbacher 2021-11-23 17:30:19 +01:00
parent a4e8ee6f2e
commit 2cbe628d10
13 changed files with 567 additions and 446 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@ -19,7 +19,8 @@
"rxjs": "^6.6.0",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-property-decorator": "^9.1.2"
"vue-property-decorator": "^9.1.2",
"vue-router": "^4.0.12"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.18.0",
@ -3232,6 +3233,11 @@
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
"dev": true
},
"node_modules/@vue/devtools-api": {
"version": "6.0.0-beta.20.1",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz",
"integrity": "sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q=="
},
"node_modules/@vue/eslint-config-prettier": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz",
@ -15806,6 +15812,17 @@
"vue-class-component": "*"
}
},
"node_modules/vue-router": {
"version": "4.0.12",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
"integrity": "sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==",
"dependencies": {
"@vue/devtools-api": "^6.0.0-beta.18"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@ -19515,6 +19532,11 @@
}
}
},
"@vue/devtools-api": {
"version": "6.0.0-beta.20.1",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz",
"integrity": "sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q=="
},
"@vue/eslint-config-prettier": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz",
@ -29609,6 +29631,14 @@
"integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
"requires": {}
},
"vue-router": {
"version": "4.0.12",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
"integrity": "sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==",
"requires": {
"@vue/devtools-api": "^6.0.0-beta.18"
}
},
"vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

5
package.json
View File

@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --port 3000",
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"format": "prettier --write 'src/**/*.{ts,tsx}'"
@ -20,7 +20,8 @@
"rxjs": "^6.6.0",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-property-decorator": "^9.1.2"
"vue-property-decorator": "^9.1.2",
"vue-router": "^4.0.12"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.18.0",

209
src/App.vue
View File

@ -22,10 +22,12 @@
<div id="navMenu" class="navbar-menu">
<ul class="navbar-start" style="flex-grow: 1; justify-content: center">
<li class="navbar-item">
<a class="navbar-link is-arrowless active" href="#">STARTSEITE</a>
<!-- <a class="navbar-link is-arrowless active" href="#">STARTSEITE</a> -->
<router-link class="navbar-link is-arrowless active" to="/test/">STARTSEITE</router-link>
</li>
<li class="navbar-item">
<a class="navbar-link is-arrowless" href="#">INTRO</a>
<!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
<router-link class="navbar-link is-arrowless active" to="/test/map">INTRO</router-link>
</li>
<li class="navbar-item">
<a class="navbar-link is-arrowless" href="#">SEARCH</a>
@ -59,207 +61,8 @@
</div>
</nav>
<div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
<!-- <div class="col-6 offset-6 content column is-half is-offset-6" style="text-align: right">
<a class="button" href="/test" target="_self">
<img class="icon-spacing" src="./assets/fa/firefox.svg" style="width: 16px; height: 16px" />
<img class="icon-spacing" src="./assets/fa/chrome.svg" style="width: 16px; height: 16px" />
<img class="icon-spacing" src="./assets/fa/opera.svg" style="width: 16px; height: 16px" />
<img src="./assets/fa/plus.svg" style="width: 16px; height: 16px" />
</a>
<a class="button" href="/test" target="_self">
<img src="./assets/fa/user.svg" style="width: 16px; height: 16px" />
</a>
</div> -->
<!-- <div class="column" style="text-align: center">
<a href="/test" id="logo_home" target="_self">
<img id="logo_img_home" src="./assets/images/tethys-icon-mono.png" width="240px" style="min-width: 140px" />
</a>
</div> -->
<!-- <div class="column">
<div class="col text-center py-3">
<h1>Tethys Research Data Repository</h1>
<p class="lead">Data Publisher for Geoscience Austria</p>
<hr class="center-line" />
</div>
</div> -->
<div class="column">
<div class="col text-center py-3">
<h1>Tethys Research Data Repository</h1>
<p class="lead">Data Publisher for Geoscience Austria</p>
<hr class="center-line" />
</div>
</div>
<!-- <div class="column header-image align-items-center h-100">
<div class="col mt-3 mx-auto">
<div class="search-box mx-auto">
<form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
<input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
<button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
</form>
</div>
</div>
</div> -->
<!-- <figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/256x256.png" />
</figure> -->
<section data-sr id="help" class="help u-full-width featured-bg-image"></section>
<!-- <div class="columns">
<div class="column text-center">
<h1>ÜBER TETHYS</h1>
<p class="lead">Was sind unsere Schwerpunkte</p>
<hr class="center-line" />
</div>
</div> -->
<section class="section">
<div class="column is-full text-center">
<h1>ÜBER TETHYS</h1>
<p class="lead">Was sind unsere Schwerpunkte</p>
<hr class="center-line" />
</div>
<div class="column is-full text-left">
<p>
TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowisse nschaftliche
Forschungsdaten veröffentlicht.
</p>
<p>
Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls zur
Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR hat den
Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das ein
permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
</p>
<p>
Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard Suess
(1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
</p>
</div>
</section>
<vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
<div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
<!-- <div class="tabs is-centered">
<ul id="id-results-tabs">
<li class="search_tab is-active">
<a target="_self">Web</a>
</li>
<li class="search_tab">
<a target="_self">Images</a>
</li>
<li class="search_tab">
<a target="_self">Videos</a>
</li>
<li class="search_tab">
<a target="_self">Homepages</a>
</li>
<li class="search_tab">
<a target="_self">Food</a>
</li>
<li class="search_tab">
<a target="_self">Books</a>
</li>
</ul>
</div> -->
<div v-if="results.length > 0" class="result-list-info">
<div class="resultheader">
Your search yielded
<strong>{{ numFound }}</strong> results:
</div>
</div>
<div v-else-if="results.length == 0">
<div class="resultheader">
Your search yielded
<strong> 0</strong> results:
</div>
</div>
<!-- <div id="id-pro-sign-in" class="notification" style="">
<button
class="delete"
onclick="dismissProNotification();"
></button>
It appears that you're not signed in. You'll need to
<a href="/pro" target="_self">signup for Pro</a> or become a
<a
href="https://coil.com/?ref=InfinitySearch2229"
target="_self"
>Coil member</a
>
to access our results.
</div> -->
</div>
<div class="columns">
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem">
<div id="externals" class="">
<div class="card" v-for="(facetItems, key, index) in facets" :key="index" name="external_card" style="margin-bottom: 0px">
<facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
</div>
<!-- <div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a
id="https://en.wikipedia.org/w/index.php?search="
href="https://en.wikipedia.org/w/index.php?search=test"
name="external_link_0"
style="display: block"
rel="noreferrer noopener"
target="_self"
>
<img src="/static/images/favicons/wikipedia.ico" name="external_icon_0'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_0" style="font-size: 0.95rem; display: inline"> Wikipedia Results </span>
</a>
</p>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a
id="https://duckduckgo.com/?q="
href="https://duckduckgo.com/?q=test"
name="external_link_1"
style="display: block"
rel="noreferrer noopener"
target="_self"
>
<img src="/static/images/favicons/duckduckgo.ico" name="external_icon_1'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_1" style="font-size: 0.95rem; display: inline"> DuckDuckGo Results </span>
</a>
</p>
<span
class="clickableIcon"
onclick="removeExternalClickable(this)"
style="cursor: pointer; display: block; margin: auto; margin-right: 6px; min-width: 0.5em"
>
<img
class="handle fa-ellipsis-v"
src="/static/images/fa/ellipsis-v.svg"
style="cursor: pointer; display: block; margin: auto; margin-right: 12px; min-width: 0.5em; width: 16px; height: 16px"
/>
</span>
</header>
</div> -->
</div>
</div>
<div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
<div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
<span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
<active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
</span>
</div>
<div class="results">
<!-- Results section -->
<vs-result v-bind:datasets="results"></vs-result>
</div>
</div>
</div>
</div>
<!-- <home-view-component></home-view-component> -->
<router-view />
<!-- <vs-input
@search="onSearch"

256
src/app.ts
View File

@ -1,245 +1,27 @@
import { Options, Vue } from "vue-class-component";
import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
import VsInput from "./components/vs-input/vs-input.vue";
import VsResult from "./components/vs-result/vs-result.vue";
import FacetCategory from "./components/face-category/facet-category.vue";
import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue";
import { SolrSettings } from "@/models/solr";
import { DatasetService } from "./services/dataset.service";
import { Suggestion } from "./models/dataset";
import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
import { ActiveFilterCategories } from "@/models/solr";
import HomeViewComponent from "./views/home-view/home-view-component.vue";
import MapViewComponent from "./views/map-view/map-view-component.vue";
// import VsInput from "./components/vs-input/vs-input.vue";
// import VsResult from "./components/vs-result/vs-result.vue";
// import FacetCategory from "./components/face-category/facet-category.vue";
// import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue";
// import { SolrSettings } from "@/models/solr";
// import { DatasetService } from "./services/dataset.service";
// import { Suggestion } from "./models/dataset";
// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
// import { ActiveFilterCategories } from "@/models/solr";
@Options({
components: {
HelloWorld,
VsInput,
VsResult,
FacetCategory,
ActiveFacetCategory,
HomeViewComponent,
// VsInput,
// VsResult,
// FacetCategory,
// ActiveFacetCategory,
MapViewComponent,
},
})
export default class App extends Vue {
results: Array<any> = [];
// facets: FacetFields = new FacetFields();
facets: FacetResults = new FacetResults();
searchTerm!: string | Suggestion;
// activeFilterCategories: Object = {};
activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array<ActiveFilterCategory>();
pagination: any = {
total: 0,
per_page: 2,
current_page: 0,
// last_page: 0,
data: [],
};
loaded = false;
numFound!: number;
private solr: SolrSettings = {
core: "rdr_data", // SOLR.core;
host: "tethys.at",
};
private rdrAPI!: DatasetService;
private error = "";
mounted() {
this.rdrAPI = new DatasetService();
}
// onSearch(term: string): void {
onSearch(suggestion: Suggestion | string): void {
// let queryOperator;
// if (typeof suggestion === "string") {
// suggestion = suggestion + "*";
// queryOperator = "or";
// } else if (suggestion instanceof Suggestion) {
// // term = suggestion.value;
// queryOperator = "and";
// }
// if (term) {
// term = term.trim();
// } else {
// term = "*%3A*";
// }
this.activeFilterCategories = new ActiveFilterCategories();
this.facets = new FacetResults();
// this.facets = {};
this.searchTerm = suggestion;
this.rdrAPI.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
(res: SolrResponse) => this.dataHandler(res),
(error: any) => this.errorHandler(error),
);
}
private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
// this.results = datasets;
this.results = res.response.docs;
this.numFound = res.response.numFound;
// pagination
this.pagination["total"] = res.response.numFound;
this.pagination["per_page"] = res.responseHeader.params.rows;
this.pagination["current_page"] = 1;
this.pagination["data"] = res.response.docs;
// facets
// const facet_fields = res.facet_counts.facet_fields;
// for (const prop in facet_fields) {
// const facetCategory: FacetCategory<any> = facet_fields[prop];
// const facetValues = facetCategory.key.values.map((facet_value: any, i: number) => {
// if (i % 2 === 0 && typeof facet_value == "string") {
// //var rObj = { value: facet, count: facet_fields[prop][i + 1] };
// // FiletrItem with value and count
// const rObj = new FilterItem(facet_value, facetCategory.key.values[i + 1]);
// return rObj;
// }
// });
// .filter(function (el: FilterItem) {
// return el != null && el.count > 0;
// });
// //this.facets.push({ filterName: prop, values: facetValues });
// this.facets[prop] = facetValues;
// }
const facet_fields: FacetFields = res.facets;
let prop: keyof typeof facet_fields;
for (prop in facet_fields) {
const facetCategory = facet_fields[prop];
if (facetCategory.buckets) {
const facetItems: Array<FacetItem> = facetCategory.buckets;
let facetValues = facetItems.map((facetItem, index) => {
let rObj: FacetItem;
if (filterItem?.val == facetItem.val) {
rObj = filterItem;
} else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// console.log(facetValue + " is included")
const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
// console.log(indexOfFacetValue);
rObj = this.facets[prop][indexOfFacetValue];
rObj.count = facetItem.count;
// rObj = new FacetItem(val, count);
} else {
rObj = new FacetItem(facetItem.val, facetItem.count);
}
return rObj;
});
facetValues = facetValues.filter(function (el) {
return el != null && el.count > 0;
});
// this.facets[prop] = facetCategory;
this.facets[prop] = facetValues;
}
}
}
private errorHandler(err: any): void {
this.error = err;
// this.loading = false;
}
onFilter(facetItem: FacetItem): void {
// console.log(facetItem.val);
// if (!this.activeFilterCategories.hasOwnProperty(facetItem.category)) {
if (!Object.prototype.hasOwnProperty.call(this.activeFilterCategories, facetItem.category)) {
this.activeFilterCategories[facetItem.category] = new Array<string>();
}
// if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
this.activeFilterCategories[facetItem.category].push(facetItem.val);
this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
(res: SolrResponse) => this.dataHandler(res, facetItem),
(error: any) => this.errorHandler(error),
);
// alert(this.activeFilterCategories[filter.Category]);
// var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
// this.results = res.response.docs;
// this.numFound = res.response.numFound;
// // pagination
// this.pagination['total'] = res.response.numFound;
// this.pagination['per_page'] = res.responseHeader.params.rows;
// this.pagination['current_page'] = 1;
// this.pagination['data'] = res.response.docs;
// var facet_fields = res.facet_counts.facet_fields;
// for (var prop in facet_fields) {
// var facetValues = facet_fields[prop].map((facetValue, i) => {
// if (i % 2 === 0) {
// // var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
// var rObj;
// if (filter.value == facetValue) {
// rObj = filter;
// } else if (this.facets[prop].some(e => e.value === facetValue)) {
// // console.log(facetValue + " is included")
// var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
// // console.log(indexOfFacetValue);
// rObj = this.facets[prop][indexOfFacetValue];
// rObj.count = facet_fields[prop][i + 1];
// } else {
// rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
// }
// return rObj;
// }
// }).filter(function (el) {
// return el != null && el.count > 0;
// });
// // this.facets.push({ filterName: prop, values: facetValues });
// this.facets[prop] = facetValues;
}
}
onClearFacetCategory(categoryName: string): void {
// alert(categoryName);
delete this.activeFilterCategories[categoryName];
this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
(res: SolrResponse) => {
this.results = res.response.docs;
this.numFound = res.response.numFound;
// pagination
this.pagination["total"] = res.response.numFound;
this.pagination["per_page"] = res.responseHeader.params.rows;
this.pagination["current_page"] = 1;
this.pagination["data"] = res.response.docs;
const facet_fields: FacetFields = res.facets;
let prop: keyof typeof facet_fields;
for (prop in facet_fields) {
const facetCategory: FacetInstance = facet_fields[prop];
if (facetCategory.buckets) {
const facetItems: Array<FacetItem> = facetCategory.buckets;
const facetValues = facetItems.map((facetItem, index) => {
let rObj: FacetItem;
if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// console.log(facetValue + " is included")
const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
// console.log(indexOfFacetValue);
rObj = this.facets[prop][indexOfFacetValue];
rObj.count = facetItem.count;
// rObj = new FacetItem(val, count);
//if facet ccategory is reactivated category, deactivate all filter items
if (prop == categoryName) {
rObj.active = false;
}
} else {
rObj = new FacetItem(facetItem.val, facetItem.count);
}
return rObj;
});
this.facets[prop] = facetValues;
}
}
},
(error: any) => this.errorHandler(error),
);
}
}
export default class App extends Vue {}

2
src/assets/scss/main-styles.scss
View File

@ -378,7 +378,7 @@ svg,
.navbar-light .navbar-link:hover {
color: rgba(0, 0, 0, 0.7);
}
.navbar-link.active,
.navbar-link.router-link-active,
.navbar-link:hover {
border-bottom: 2px solid #33cccc;
background-color: #fff;

3
src/main.ts
View File

@ -2,5 +2,6 @@ import { createApp } from "vue";
import App from "./App.vue";
import "./assets/scss/main-styles.scss";
import FontAwesomeIcon from "@/utilities/fontawesome";
import router from "./router/index";
createApp(App).component("fa", FontAwesomeIcon).mount("#app");
createApp(App).use(router).component("fa", FontAwesomeIcon).mount("#app");

6
src/notes.txt
View File

@ -48,3 +48,9 @@ npm install --save class-transformer
npm install --save @fortawesome/vue-fontawesome@prerelease
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
======================= router ================================
https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
npm install --save vue-router@next

23
src/router/index.ts Normal file
View File

@ -0,0 +1,23 @@
import { createWebHistory, createRouter } from "vue-router";
import HomeViewComponent from "@/views/home-view/home-view-component.vue";
import MapViewComponent from "@/views/map-view/map-view-component.vue";
const routes = [
{
path: "/test/",
name: "Home",
component: HomeViewComponent,
},
{
path: "/test/map",
name: "Map",
component: MapViewComponent,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

0
src/views/home-view/home-view-component.scss Normal file
View File

245
src/views/home-view/home-view-component.ts Normal file
View File

@ -0,0 +1,245 @@
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import VsInput from "@/components/vs-input/vs-input.vue";
import VsResult from "@/components/vs-result/vs-result.vue";
import FacetCategory from "@/components/face-category/facet-category.vue";
import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
import { SolrSettings } from "@/models/solr";
import { DatasetService } from "@/services/dataset.service";
import { Suggestion } from "@/models/dataset";
import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
import { ActiveFilterCategories } from "@/models/solr";
@Options({
name: "HomeViewComponent",
components: {
VsInput,
VsResult,
FacetCategory,
ActiveFacetCategory,
},
})
export default class HomeViewComponent extends Vue {
results: Array<any> = [];
// facets: FacetFields = new FacetFields();
facets: FacetResults = new FacetResults();
searchTerm!: string | Suggestion;
// activeFilterCategories: Object = {};
activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array<ActiveFilterCategory>();
pagination: any = {
total: 0,
per_page: 2,
current_page: 0,
// last_page: 0,
data: [],
};
loaded = false;
numFound!: number;
private solr: SolrSettings = {
core: "rdr_data", // SOLR.core;
host: "tethys.at",
};
private rdrAPI!: DatasetService;
private error = "";
mounted() {
this.rdrAPI = new DatasetService();
}
// onSearch(term: string): void {
onSearch(suggestion: Suggestion | string): void {
// let queryOperator;
// if (typeof suggestion === "string") {
// suggestion = suggestion + "*";
// queryOperator = "or";
// } else if (suggestion instanceof Suggestion) {
// // term = suggestion.value;
// queryOperator = "and";
// }
// if (term) {
// term = term.trim();
// } else {
// term = "*%3A*";
// }
this.activeFilterCategories = new ActiveFilterCategories();
this.facets = new FacetResults();
// this.facets = {};
this.searchTerm = suggestion;
this.rdrAPI.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
(res: SolrResponse) => this.dataHandler(res),
(error: any) => this.errorHandler(error),
);
}
private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
// this.results = datasets;
this.results = res.response.docs;
this.numFound = res.response.numFound;
// pagination
this.pagination["total"] = res.response.numFound;
this.pagination["per_page"] = res.responseHeader.params.rows;
this.pagination["current_page"] = 1;
this.pagination["data"] = res.response.docs;
// facets
// const facet_fields = res.facet_counts.facet_fields;
// for (const prop in facet_fields) {
// const facetCategory: FacetCategory<any> = facet_fields[prop];
// const facetValues = facetCategory.key.values.map((facet_value: any, i: number) => {
// if (i % 2 === 0 && typeof facet_value == "string") {
// //var rObj = { value: facet, count: facet_fields[prop][i + 1] };
// // FiletrItem with value and count
// const rObj = new FilterItem(facet_value, facetCategory.key.values[i + 1]);
// return rObj;
// }
// });
// .filter(function (el: FilterItem) {
// return el != null && el.count > 0;
// });
// //this.facets.push({ filterName: prop, values: facetValues });
// this.facets[prop] = facetValues;
// }
const facet_fields: FacetFields = res.facets;
let prop: keyof typeof facet_fields;
for (prop in facet_fields) {
const facetCategory = facet_fields[prop];
if (facetCategory.buckets) {
const facetItems: Array<FacetItem> = facetCategory.buckets;
let facetValues = facetItems.map((facetItem, index) => {
let rObj: FacetItem;
if (filterItem?.val == facetItem.val) {
rObj = filterItem;
} else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// console.log(facetValue + " is included")
const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
// console.log(indexOfFacetValue);
rObj = this.facets[prop][indexOfFacetValue];
rObj.count = facetItem.count;
// rObj = new FacetItem(val, count);
} else {
rObj = new FacetItem(facetItem.val, facetItem.count);
}
return rObj;
});
facetValues = facetValues.filter(function (el) {
return el != null && el.count > 0;
});
// this.facets[prop] = facetCategory;
this.facets[prop] = facetValues;
}
}
}
private errorHandler(err: any): void {
this.error = err;
// this.loading = false;
}
onFilter(facetItem: FacetItem): void {
// console.log(facetItem.val);
// if (!this.activeFilterCategories.hasOwnProperty(facetItem.category)) {
if (!Object.prototype.hasOwnProperty.call(this.activeFilterCategories, facetItem.category)) {
this.activeFilterCategories[facetItem.category] = new Array<string>();
}
// if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
this.activeFilterCategories[facetItem.category].push(facetItem.val);
this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
(res: SolrResponse) => this.dataHandler(res, facetItem),
(error: any) => this.errorHandler(error),
);
// alert(this.activeFilterCategories[filter.Category]);
// var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
// this.results = res.response.docs;
// this.numFound = res.response.numFound;
// // pagination
// this.pagination['total'] = res.response.numFound;
// this.pagination['per_page'] = res.responseHeader.params.rows;
// this.pagination['current_page'] = 1;
// this.pagination['data'] = res.response.docs;
// var facet_fields = res.facet_counts.facet_fields;
// for (var prop in facet_fields) {
// var facetValues = facet_fields[prop].map((facetValue, i) => {
// if (i % 2 === 0) {
// // var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
// var rObj;
// if (filter.value == facetValue) {
// rObj = filter;
// } else if (this.facets[prop].some(e => e.value === facetValue)) {
// // console.log(facetValue + " is included")
// var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
// // console.log(indexOfFacetValue);
// rObj = this.facets[prop][indexOfFacetValue];
// rObj.count = facet_fields[prop][i + 1];
// } else {
// rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
// }
// return rObj;
// }
// }).filter(function (el) {
// return el != null && el.count > 0;
// });
// // this.facets.push({ filterName: prop, values: facetValues });
// this.facets[prop] = facetValues;
}
}
onClearFacetCategory(categoryName: string): void {
// alert(categoryName);
delete this.activeFilterCategories[categoryName];
this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
(res: SolrResponse) => {
this.results = res.response.docs;
this.numFound = res.response.numFound;
// pagination
this.pagination["total"] = res.response.numFound;
this.pagination["per_page"] = res.responseHeader.params.rows;
this.pagination["current_page"] = 1;
this.pagination["data"] = res.response.docs;
const facet_fields: FacetFields = res.facets;
let prop: keyof typeof facet_fields;
for (prop in facet_fields) {
const facetCategory: FacetInstance = facet_fields[prop];
if (facetCategory.buckets) {
const facetItems: Array<FacetItem> = facetCategory.buckets;
const facetValues = facetItems.map((facetItem, index) => {
let rObj: FacetItem;
if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// console.log(facetValue + " is included")
const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
// console.log(indexOfFacetValue);
rObj = this.facets[prop][indexOfFacetValue];
rObj.count = facetItem.count;
// rObj = new FacetItem(val, count);
//if facet ccategory is reactivated category, deactivate all filter items
if (prop == categoryName) {
rObj.active = false;
}
} else {
rObj = new FacetItem(facetItem.val, facetItem.count);
}
return rObj;
});
this.facets[prop] = facetValues;
}
}
},
(error: any) => this.errorHandler(error),
);
}
}

213
src/views/home-view/home-view-component.vue Normal file
View File

@ -0,0 +1,213 @@
<template>
<div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
<!-- <div class="col-6 offset-6 content column is-half is-offset-6" style="text-align: right">
<a class="button" href="/test" target="_self">
<img class="icon-spacing" src="./assets/fa/firefox.svg" style="width: 16px; height: 16px" />
<img class="icon-spacing" src="./assets/fa/chrome.svg" style="width: 16px; height: 16px" />
<img class="icon-spacing" src="./assets/fa/opera.svg" style="width: 16px; height: 16px" />
<img src="./assets/fa/plus.svg" style="width: 16px; height: 16px" />
</a>
<a class="button" href="/test" target="_self">
<img src="./assets/fa/user.svg" style="width: 16px; height: 16px" />
</a>
</div> -->
<!-- <div class="column" style="text-align: center">
<a href="/test" id="logo_home" target="_self">
<img id="logo_img_home" src="./assets/images/tethys-icon-mono.png" width="240px" style="min-width: 140px" />
</a>
</div> -->
<!-- <div class="column">
<div class="col text-center py-3">
<h1>Tethys Research Data Repository</h1>
<p class="lead">Data Publisher for Geoscience Austria</p>
<hr class="center-line" />
</div>
</div> -->
<div class="column">
<div class="col text-center py-3">
<h1>Tethys Research Data Repository</h1>
<p class="lead">Data Publisher for Geoscience Austria</p>
<hr class="center-line" />
</div>
</div>
<!-- <div class="column header-image align-items-center h-100">
<div class="col mt-3 mx-auto">
<div class="search-box mx-auto">
<form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
<input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
<button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
</form>
</div>
</div>
</div> -->
<!-- <figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/256x256.png" />
</figure> -->
<section data-sr id="help" class="help u-full-width featured-bg-image"></section>
<!-- <div class="columns">
<div class="column text-center">
<h1>ÜBER TETHYS</h1>
<p class="lead">Was sind unsere Schwerpunkte</p>
<hr class="center-line" />
</div>
</div> -->
<section class="section">
<div class="column is-full text-center">
<h1>ÜBER TETHYS</h1>
<p class="lead">Was sind unsere Schwerpunkte</p>
<hr class="center-line" />
</div>
<div class="column is-full text-left">
<p>
TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowisse nschaftliche
Forschungsdaten veröffentlicht.
</p>
<p>
Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls zur
Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR hat den
Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das ein
permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
</p>
<p>
Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard Suess
(1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
</p>
</div>
</section>
<vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
<div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
<!-- <div class="tabs is-centered">
<ul id="id-results-tabs">
<li class="search_tab is-active">
<a target="_self">Web</a>
</li>
<li class="search_tab">
<a target="_self">Images</a>
</li>
<li class="search_tab">
<a target="_self">Videos</a>
</li>
<li class="search_tab">
<a target="_self">Homepages</a>
</li>
<li class="search_tab">
<a target="_self">Food</a>
</li>
<li class="search_tab">
<a target="_self">Books</a>
</li>
</ul>
</div> -->
<div v-if="results.length > 0" class="result-list-info">
<div class="resultheader">
Your search yielded
<strong>{{ numFound }}</strong> results:
</div>
</div>
<div v-else-if="results.length == 0">
<div class="resultheader">
Your search yielded
<strong> 0</strong> results:
</div>
</div>
<!-- <div id="id-pro-sign-in" class="notification" style="">
<button
class="delete"
onclick="dismissProNotification();"
></button>
It appears that you're not signed in. You'll need to
<a href="/pro" target="_self">signup for Pro</a> or become a
<a
href="https://coil.com/?ref=InfinitySearch2229"
target="_self"
>Coil member</a
>
to access our results.
</div> -->
</div>
<div class="columns">
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem">
<div id="externals" class="">
<div class="card" v-for="(facetItems, key, index) in facets" :key="index" name="external_card" style="margin-bottom: 0px">
<facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
</div>
<!-- <div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a
id="https://en.wikipedia.org/w/index.php?search="
href="https://en.wikipedia.org/w/index.php?search=test"
name="external_link_0"
style="display: block"
rel="noreferrer noopener"
target="_self"
>
<img src="/static/images/favicons/wikipedia.ico" name="external_icon_0'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_0" style="font-size: 0.95rem; display: inline"> Wikipedia Results </span>
</a>
</p>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a
id="https://duckduckgo.com/?q="
href="https://duckduckgo.com/?q=test"
name="external_link_1"
style="display: block"
rel="noreferrer noopener"
target="_self"
>
<img src="/static/images/favicons/duckduckgo.ico" name="external_icon_1'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_1" style="font-size: 0.95rem; display: inline"> DuckDuckGo Results </span>
</a>
</p>
<span
class="clickableIcon"
onclick="removeExternalClickable(this)"
style="cursor: pointer; display: block; margin: auto; margin-right: 6px; min-width: 0.5em"
>
<img
class="handle fa-ellipsis-v"
src="/static/images/fa/ellipsis-v.svg"
style="cursor: pointer; display: block; margin: auto; margin-right: 12px; min-width: 0.5em; width: 16px; height: 16px"
/>
</span>
</header>
</div> -->
</div>
</div>
<div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
<div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
<span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
<active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
</span>
</div>
<div class="results">
<!-- Results section -->
<vs-result v-bind:datasets="results"></vs-result>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import HomeViewComponent from "./home-view-component";
export default HomeViewComponent;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "./home-view-component.scss"; // $text-primary would be defined in that file
</style>

9
src/views/map-view/map-view-component.ts Normal file
View File

@ -0,0 +1,9 @@
import { Options, Vue } from "vue-class-component";
// import { Prop } from "vue-property-decorator";
@Options({
name: "MapViewComponent",
})
export default class MapViewComponent extends Vue {
results: Array<any> = [];
}

8
src/views/map-view/map-view-component.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<span>INTRO</span>
</template>
<script lang="ts">
import MapViewComponent from "./map-view-component";
export default MapViewComponent;
</script>