forked from geolba/tethys.frontend
- add vue router
- add extra view components
This commit is contained in:
Arno Kaimbacher
parent
a4e8ee6f2e
commit
2cbe628d10
32
package-lock.json
generated
32
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
209
src/App.vue
|
|
@ -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
256
src/app.ts
|
|
@ -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 {}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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
23
src/router/index.ts
Normal 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
0
src/views/home-view/home-view-component.scss
Normal file
245
src/views/home-view/home-view-component.ts
Normal file
245
src/views/home-view/home-view-component.ts
Normal 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
213
src/views/home-view/home-view-component.vue
Normal 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
9
src/views/map-view/map-view-component.ts
Normal 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
8
src/views/map-view/map-view-component.vue
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<span>INTRO</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import MapViewComponent from "./map-view-component";
|
||||
export default MapViewComponent;
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user