barmar/tethys.frontend
1
0
Fork 0
forked from geolba/tethys.frontend
Code Pull Requests Activity

- add home-vie-component with all the logos

Browse Source
This commit is contained in:
Arno Kaimbacher 2021-11-24 16:01:53 +01:00
parent 2cbe628d10
commit 8590fa755b
27 changed files with 787 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
package-lock.json generated
View File

@ -8,9 +8,7 @@
"name": "tethys.viewer",
"version": "0.1.0",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
"@fortawesome/fontawesome-free": "^5.15.4",
"@openfonts/open-sans_all": "^1.44.2",
"axios": "^0.24.0",
"class-transformer": "^0.4.0",
@ -1692,48 +1690,15 @@
"node": ">=6.9.0"
}
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"node_modules/@fortawesome/fontawesome-free": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
"integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
"integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/vue-fontawesome": {
"version": "3.0.0-5",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-5.tgz",
"integrity": "sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==",
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
"vue": ">= 3.0.0 < 4"
}
},
"node_modules/@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -18310,32 +18275,10 @@
"to-fast-properties": "^2.0.0"
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
}
},
"@fortawesome/free-solid-svg-icons": {
"@fortawesome/fontawesome-free": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
"integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
}
},
"@fortawesome/vue-fontawesome": {
"version": "3.0.0-5",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.0-5.tgz",
"integrity": "sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==",
"requires": {}
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
"integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
},
"@hapi/address": {
"version": "2.1.4",

4
package.json
View File

@ -9,9 +9,7 @@
"format": "prettier --write 'src/**/*.{ts,tsx}'"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
"@fortawesome/fontawesome-free": "^5.15.4",
"@openfonts/open-sans_all": "^1.44.2",
"axios": "^0.24.0",
"class-transformer": "^0.4.0",

14
src/App.vue
View File

@ -23,14 +23,15 @@
<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> -->
<router-link class="navbar-link is-arrowless active" to="/test/">STARTSEITE</router-link>
<router-link class="navbar-link is-arrowless" to="/test/">STARTSEITE</router-link>
</li>
<li class="navbar-item">
<!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
<router-link class="navbar-link is-arrowless active" to="/test/map">INTRO</router-link>
<router-link class="navbar-link is-arrowless" to="/test/map">INTRO</router-link>
</li>
<li class="navbar-item">
<a class="navbar-link is-arrowless" href="#">SEARCH</a>
<!-- <a class="navbar-link is-arrowless" href="#">SEARCH</a> -->
<router-link class="navbar-link is-arrowless" to="/test/search">SEARCH</router-link>
</li>
<li class="navbar-item">
<a class="navbar-link is-arrowless" href="#">SERVICES</a>
@ -48,9 +49,8 @@
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary custom-button">
<!-- <span class="icon is-small"> -->
<!-- <i class="fas fa-sign-in-alt"></i> -->
<fa :icon="['fas', 'phone']" class="fas fa-sign-in-alt" />
<i class="fas fa-sign-in-alt"></i>
<!-- <fa :icon="['fas', 'phone']" class="fas fa-sign-in-alt" /> -->
<!-- </span> -->
<strong>Sign in</strong>
</a>
@ -82,7 +82,7 @@ import App from "./app";
export default App;
</script>
<style lang="scss">
<style lang="scss" scoped>
// #app {
// font-family: Avenir, Helvetica, Arial, sans-serif;
// -webkit-font-smoothing: antialiased;

2
src/app.ts
View File

@ -2,6 +2,7 @@ import { Options, Vue } from "vue-class-component";
import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
import HomeViewComponent from "./views/home-view/home-view-component.vue";
import MapViewComponent from "./views/map-view/map-view-component.vue";
import SearchViewComponent from "./views/search-view/search-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";
@ -22,6 +23,7 @@ import MapViewComponent from "./views/map-view/map-view-component.vue";
// FacetCategory,
// ActiveFacetCategory,
MapViewComponent,
SearchViewComponent,
},
})
export default class App extends Vue {}

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

@ -26,15 +26,21 @@
font-size: 0.9em;
text-decoration: none;
border: 1px solid transparent;
// .fas {
// margin-right: 0.6em;
// // border-right: 1px solid #fff;
// width: 2em;
// };
.fas {
margin-right: 0.6em;
// border-right: 1px solid #fff;
width: 2em;
border-right: 1px solid #fff;
padding: 0.6em;
};
strong {
border-left: 1px solid #fff;
padding-left: 0.6em;
}
// strong {
// border-left: 1px solid #fff;
// padding-left: 0.6em;
// }
}
}

BIN
src/assets/site/img/box-1-hover.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/site/img/box-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/site/img/box-2-hover.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/assets/site/img/box-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/site/img/box-3-hover.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
src/assets/site/img/box-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/site/img/geologische-bundesanstalt-logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/assets/site/img/geosphere-austria-logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
src/assets/site/img/placeholder-logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/site/img/re3-data-logo-mono.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

2
src/components/active-facet-category/active-facet-category.vue
View File

@ -13,7 +13,7 @@ import ActiveFacetCategory from "./ActiveFacetCategory";
export default ActiveFacetCategory;
</script>
<style scoped>
<style lang="scss" scoped>
th,
td {
border-bottom: 0px solid #e1e1e1;

2
src/components/vs-input/vs-input.vue
View File

@ -55,7 +55,7 @@ import VsInput from "./vs-input";
export default VsInput;
</script>
<style>
<style lang="scss" scoped>
.autocomplete-column {
display: block;
flex-basis: 0;

2
src/components/vs-result/vs-result.vue
View File

@ -59,7 +59,7 @@ import VsResults from "./vs-result";
export default VsResults;
</script>
<style scoped>
<style lang="scss" scoped>
/* overflow for abstracts */
.clamped {
line-height: 1.5;

6
src/main.ts
View File

@ -1,7 +1,9 @@
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/scss/main-styles.scss";
import FontAwesomeIcon from "@/utilities/fontawesome";
// import FontAwesomeIcon from "@/utilities/fontawesome";
import router from "./router/index";
import "@fortawesome/fontawesome-free/css/all.css";
createApp(App).use(router).component("fa", FontAwesomeIcon).mount("#app");
createApp(App).use(router).mount("#app");
// .component("fa", FontAwesomeIcon)

6
src/notes.txt
View File

@ -44,11 +44,17 @@ npm install --save qs
npm install --save class-transformer
===== font-awsome =============================================
npm install --save @fortawesome/vue-fontawesome@prerelease
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
besser:
npm install --save @fortawesome/fontawesome-free
inside main.ts:
import "@fortawesome/fontawesome-free/css/all.css";
======================= router ================================

6
src/router/index.ts
View File

@ -1,6 +1,7 @@
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";
import SearchViewComponent from "@/views/search-view/search-view-component";
const routes = [
{
@ -13,6 +14,11 @@ const routes = [
name: "Map",
component: MapViewComponent,
},
{
path: "/test/search",
name: "Search",
component: SearchViewComponent,
},
];
const router = createRouter({

23
src/utilities/fontawesome.ts
View File

@ -1,14 +1,13 @@
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons";
// import { faUser } from "@fortawesome/free-solid-svg-icons";
import { faFlag, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
// import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// import { library } from "@fortawesome/fontawesome-svg-core";
// import { faPhone } from "@fortawesome/free-solid-svg-icons";
// import { faFlag, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
// https://stackoverflow.com/questions/66389974/using-font-awesome-in-vue-3
library.add(faSignInAlt);
library.add(faFlag);
library.add(faPhone);
// import { dom } from "@fortawesome/fontawesome-svg-core";
// dom.watch();
// // https://stackoverflow.com/questions/66389974/using-font-awesome-in-vue-3
// library.add(faSignInAlt);
// library.add(faFlag);
// library.add(faPhone);
// // import { dom } from "@fortawesome/fontawesome-svg-core";
// // dom.watch();
export default FontAwesomeIcon;
// export default FontAwesomeIcon;

183
src/views/home-view/home-view-component.scss
View File

@ -0,0 +1,183 @@
p,
ol,
ul,
li,
dl,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.5rem;
}
.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem 1rem;
}
.text-white {
color: #fff !important;
}
// .work-front {
// position: absolute;
// top: 5%;
// left: 5%;
// }
.work-front {
display: flex;
}
.work-front .box-1,
.work-front .box-2,
.work-front .box-3 {
position: absolute;
top: 85%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
// .work-back {
// position: absolute;
// top: 5%;
// left: 5%;
// }
.work-back {
display: none;
}
.work-back .box-1-hover {
position: absolute;
top: 5%;
left: 5%;
opacity: 0.9;
padding: 2%;
}
.custom-heading {
font-family: Verdana;
font-weight: bold;
font-size: 1.2em;
line-height: 1.9em;
color: #fff;
}
.work-items div:hover .work-back {
display: flex;
/* box-shadow: inset 0 0 0 10px #222; */
}
.work-items div:hover .work-front {
display: none;
}
//contact apge
.page-breaker {
background-image: url(./../../assets/site/img/page-breaker.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding: 6.2em;
}
.my-5 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
// partner logos:
.partner-logos {
padding: 3em 0;
}
// footer:
footer {
background-image: url(./../../assets/site/img/footer-bg.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding-top: 26em;
padding-bottom: 3.8em;
}
footer .card {
background: transparent;
border: none;
position: relative;
margin-top: 2em;
box-shadow: none;
}
footer .card-title {
font-family: Verdana;
color: #fff;
text-transform: uppercase;
font-weight: bold;
}
.list-group-flush {
border-radius: 0;
}
.list-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
border-radius: 0.25rem;
}
.list-group {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
}
.list-group-flush > .list-group-item {
border-width: 0 0 1px;
}
.list-group-item:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.list-group-flush .list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0;
}
footer .list-group-item a {
color: #fff;
text-decoration: none;
}
.copyright-notice {
text-align: center;
color: #fff;
background-color: #384d6e;
padding: 0.3em 0;
}

231
src/views/home-view/home-view-component.ts
View File

@ -1,14 +1,8 @@
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",
@ -19,227 +13,4 @@ import { ActiveFilterCategories } from "@/models/solr";
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),
);
}
}
export default class HomeViewComponent extends Vue {}

269
src/views/home-view/home-view-component.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
<div id="page_style" class="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" />
@ -55,6 +55,8 @@
<hr class="center-line" />
</div>
</div> -->
<div class="container">
<section class="section">
<div class="column is-full text-center">
<h1>ÜBER TETHYS</h1>
@ -67,137 +69,170 @@
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.
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.
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>
<section class="section">
<div class="column is-full text-center">
<h1>TETHYS SERVICES</h1>
<p class="lead">Eine Übersicht unserer Dienstleistungen</p>
<hr class="center-line" />
</div>
<div class="columns is-desktop work-items">
<div class="column col-sm overlay-boxes">
<div class="card overlay work-back">
<img src="@/assets/site/img/box-1-hover.jpg" alt="Datenarchivierung" />
<div class="card-body box-1-hover">
<p class="text-white">
Tethys RDR publiziert und archiviert nach den FAIR Prinzipien* nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei
lesbaren Formaten. * FAIR data
</p>
</div>
</div>
<div class="card green work-front">
<img src="@/assets/site/img/box-1.jpg" alt="Datenarchivierung" />
<div class="card-body box-1">
<div class="custom-heading">DATENARCHIVIERUNG</div>
</div>
</div>
</div>
<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>
<div class="column col-sm overlay-boxes">
<div class="card overlay work-back">
<img src="@/assets/site/img/box-2-hover.jpg" alt="DATENPUBLIKATION" />
<div class="card-body box-1-hover">
<p class="text-white">
Die Datensätze werden mit standardisierten Metadatenschemen publiziert und sind somit nicht nur auffindbar, wiederverwendbar und auch
maschinenlesbar, sondern können dadurch auch einfach zitiert werden.
</p>
</div>
</div>
<div class="card green work-front">
<img src="@/assets/site/img/box-2.jpg" alt="Datenpublikation" />
<div class="card-body box-2">
<div class="custom-heading">DATENPUBLIKATION</div>
</div>
</div>
</div>
<div class="column col-sm overlay-boxes">
<div class="card overlay work-back">
<img src="@/assets/site/img/box-3-hover.jpg" alt="BEGUTACHTUNG" />
<div class="card-body box-1-hover">
<p class="text-white">
Alle im Tethys RDR publizierten Datensätze werden auf technische sowie inhaltliche Vollständigkeit geprüft und werden bei Bedarf auch einer
fachlichen Begutachtung unterworfen. Ein klassischer Peer Review-Prozess ist in Vorbereitung.
</p>
</div>
</div>
<div class="card green work-front">
<img src="@/assets/site/img/box-3.jpg" alt="BEGUTACHTUNG" />
<div class="card-body box-3">
<div class="custom-heading">BEGUTACHTUNG</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="clearfix mt-3"></div>
<div class="container-fluid page-breaker my-5">
<div class="container">
<div class="column col-sm text-center my-5">
<h1 class="text-white">HABEN SIE FRAGEN?</h1>
<p class="text-white text center p-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices
gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>
<div class="mx-auto my-5" style="width: 170px">
<a class="button is-primary custom-button">
<i class="fas fa-sign-in-alt"></i>
<strong>KONTAKT</strong>
</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="columns is-mobile partner-logos">
<div class="column col-sm text-center">
<img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" />
</div>
<div class="column col-sm text-center mobile-space">
<img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
</div>
<div class="column col-sm text-center">
<img src="@/assets/site/img/placeholder-logo.jpg" alt="logo placeholder" />
</div>
</div>
</div>
<footer class="container-fluid">
<div class="columns">
<div class="column col-sm">
<div class="card mx-auto" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">About TETHYS</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item"><a href="#">OAI</a></li>
<li class="list-group-item"><a href="#">About GBA</a></li>
<li class="list-group-item"><a href="#">News</a></li>
</ul>
</div>
</div>
</div>
<div class="column col-sm">
<div class="card mx-auto" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">Tools and Support</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item"><a href="#">Contact</a></li>
<li class="list-group-item"><a href="#">Impressum</a></li>
<li class="list-group-item"><a href="#">Sitelinks</a></li>
<li class="list-group-item"><a href="#">Terms &amp; Conditions</a></li>
<li class="list-group-item"><a href="#">rdr bei GitHub</a></li>
</ul>
</div>
</div>
</div>
<div class="column col-sm">
<div class="card mx-auto" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">Connect with us</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href="#"><i class="fas fa-home pr-2"></i>GBA</a>
</li>
<li class="search_tab">
<a target="_self">Images</a>
<li class="list-group-item">
<a href="#"><i class="fas fa-phone-alt pr-2"></i> +43-1-7125674</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 class="list-group-item">
<a href="mailto:repository@geologie.ac.at"><i class="fas fa-envelope pr-2"></i> repository(at)geologie.ac.at </a>
</li>
</ul>
</div> -->
<div v-if="results.length > 0" class="result-list-info">
<div class="resultheader">
Your search yielded
<strong>{{ numFound }}</strong> results:
<img class="img-fluid pt-4" src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
</div>
</div>
<div v-else-if="results.length == 0">
<div class="resultheader">
Your search yielded
<strong> 0</strong> results:
</div>
</div>
</footer>
<!-- <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 class="container-fluid">
<div class="copyright-notice">Copyright 2021 TETHYS RDR</div>
</div>
</div>
</template>
@ -209,5 +244,5 @@ export default HomeViewComponent;
<!-- 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
@import "./home-view-component.scss";
</style>

244
src/views/search-view/search-view-component.ts Normal file
View File

@ -0,0 +1,244 @@
import { Options, Vue } from "vue-class-component";
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, Dataset } from "@/models/dataset";
import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
import { ActiveFilterCategories } from "@/models/solr";
@Options({
name: "SearchViewComponent",
components: {
VsInput,
VsResult,
FacetCategory,
ActiveFacetCategory,
},
})
export default class SearchViewComponent extends Vue {
results: Array<Dataset> = [];
// 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(): void {
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),
);
}
}

129
src/views/search-view/search-view-component.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
<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 SearchViewComponent from "./search-view-component";
export default SearchViewComponent;
</script>