- add home-vie-component with all the logos

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

71
package-lock.json generated
View File

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

View File

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

View File

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

View File

@ -2,6 +2,7 @@ import { Options, Vue } from "vue-class-component";
import HelloWorld from "./components/HelloWorld/HelloWorld.vue"; import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
import HomeViewComponent from "./views/home-view/home-view-component.vue"; import HomeViewComponent from "./views/home-view/home-view-component.vue";
import MapViewComponent from "./views/map-view/map-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 VsInput from "./components/vs-input/vs-input.vue";
// import VsResult from "./components/vs-result/vs-result.vue"; // import VsResult from "./components/vs-result/vs-result.vue";
// import FacetCategory from "./components/face-category/facet-category.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, // FacetCategory,
// ActiveFacetCategory, // ActiveFacetCategory,
MapViewComponent, MapViewComponent,
SearchViewComponent,
}, },
}) })
export default class App extends Vue {} export default class App extends Vue {}

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

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

View File

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

View File

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

View File

@ -1,7 +1,9 @@
import { createApp } from "vue"; import { createApp } from "vue";
import App from "./App.vue"; import App from "./App.vue";
import "./assets/scss/main-styles.scss"; import "./assets/scss/main-styles.scss";
import FontAwesomeIcon from "@/utilities/fontawesome"; // import FontAwesomeIcon from "@/utilities/fontawesome";
import router from "./router/index"; 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)

View File

@ -44,11 +44,17 @@ npm install --save qs
npm install --save class-transformer npm install --save class-transformer
===== font-awsome =============================================
npm install --save @fortawesome/vue-fontawesome@prerelease npm install --save @fortawesome/vue-fontawesome@prerelease
npm install --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons 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 ================================ ======================= router ================================

View File

@ -1,6 +1,7 @@
import { createWebHistory, createRouter } from "vue-router"; import { createWebHistory, createRouter } from "vue-router";
import HomeViewComponent from "@/views/home-view/home-view-component.vue"; import HomeViewComponent from "@/views/home-view/home-view-component.vue";
import MapViewComponent from "@/views/map-view/map-view-component.vue"; import MapViewComponent from "@/views/map-view/map-view-component.vue";
import SearchViewComponent from "@/views/search-view/search-view-component";
const routes = [ const routes = [
{ {
@ -13,6 +14,11 @@ const routes = [
name: "Map", name: "Map",
component: MapViewComponent, component: MapViewComponent,
}, },
{
path: "/test/search",
name: "Search",
component: SearchViewComponent,
},
]; ];
const router = createRouter({ const router = createRouter({

View File

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

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;
}

View File

@ -1,14 +1,8 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import VsInput from "@/components/vs-input/vs-input.vue"; import VsInput from "@/components/vs-input/vs-input.vue";
import VsResult from "@/components/vs-result/vs-result.vue"; import VsResult from "@/components/vs-result/vs-result.vue";
import FacetCategory from "@/components/face-category/facet-category.vue"; import FacetCategory from "@/components/face-category/facet-category.vue";
import ActiveFacetCategory from "@/components/active-facet-category/active-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({ @Options({
name: "HomeViewComponent", name: "HomeViewComponent",
@ -19,227 +13,4 @@ import { ActiveFilterCategories } from "@/models/solr";
ActiveFacetCategory, ActiveFacetCategory,
}, },
}) })
export default class HomeViewComponent extends Vue { 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),
);
}
}

View File

@ -1,5 +1,5 @@
<template> <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"> <!-- <div class="col-6 offset-6 content column is-half is-offset-6" style="text-align: right">
<a class="button" href="/test" target="_self"> <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/firefox.svg" style="width: 16px; height: 16px" />
@ -55,6 +55,8 @@
<hr class="center-line" /> <hr class="center-line" />
</div> </div>
</div> --> </div> -->
<div class="container">
<section class="section"> <section class="section">
<div class="column is-full text-center"> <div class="column is-full text-center">
<h1>ÜBER TETHYS</h1> <h1>ÜBER TETHYS</h1>
@ -67,137 +69,170 @@
Forschungsdaten veröffentlicht. Forschungsdaten veröffentlicht.
</p> </p>
<p> <p>
Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls zur Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls
Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR hat den zur Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR
Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das ein hat den Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das
permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht. ein permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
</p> </p>
<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 Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard
(18311914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys. Suess (18311914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
</p> </p>
</div> </div>
</section> </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="column col-sm overlay-boxes">
<!-- <div class="tabs is-centered"> <div class="card overlay work-back">
<ul id="id-results-tabs"> <img src="@/assets/site/img/box-2-hover.jpg" alt="DATENPUBLIKATION" />
<li class="search_tab is-active"> <div class="card-body box-1-hover">
<a target="_self">Web</a> <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>
<li class="search_tab"> <li class="list-group-item">
<a target="_self">Images</a> <a href="#"><i class="fas fa-phone-alt pr-2"></i> +43-1-7125674</a>
</li> </li>
<li class="search_tab"> <li class="list-group-item">
<a target="_self">Videos</a> <a href="mailto:repository@geologie.ac.at"><i class="fas fa-envelope pr-2"></i> repository(at)geologie.ac.at </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> </li>
</ul> </ul>
</div> --> <img class="img-fluid pt-4" src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
<div v-if="results.length > 0" class="result-list-info">
<div class="resultheader">
Your search yielded
<strong>{{ numFound }}</strong> results:
</div> </div>
</div> </div>
<div v-else-if="results.length == 0">
<div class="resultheader">
Your search yielded
<strong> 0</strong> results:
</div> </div>
</div> </div>
</footer>
<!-- <div id="id-pro-sign-in" class="notification" style=""> <div class="container-fluid">
<button <div class="copyright-notice">Copyright 2021 TETHYS RDR</div>
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>
</div> </div>
</template> </template>
@ -209,5 +244,5 @@ export default HomeViewComponent;
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
@import "./home-view-component.scss"; // $text-primary would be defined in that file @import "./home-view-component.scss";
</style> </style>

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),
);
}
}

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>