forked from geolba/tethys.frontend
- add home-vie-component with all the logos
This commit is contained in:
parent
2cbe628d10
commit
8590fa755b
71
package-lock.json
generated
71
package-lock.json
generated
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
14
src/App.vue
14
src/App.vue
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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 {}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
BIN
src/assets/site/img/box-1-hover.jpg
Normal file
BIN
src/assets/site/img/box-1-hover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/site/img/box-1.jpg
Normal file
BIN
src/assets/site/img/box-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/site/img/box-2-hover.jpg
Normal file
BIN
src/assets/site/img/box-2-hover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
src/assets/site/img/box-2.jpg
Normal file
BIN
src/assets/site/img/box-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/site/img/box-3-hover.jpg
Normal file
BIN
src/assets/site/img/box-3-hover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
src/assets/site/img/box-3.jpg
Normal file
BIN
src/assets/site/img/box-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/site/img/geologische-bundesanstalt-logo.jpg
Normal file
BIN
src/assets/site/img/geologische-bundesanstalt-logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
src/assets/site/img/geosphere-austria-logo.jpg
Normal file
BIN
src/assets/site/img/geosphere-austria-logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
src/assets/site/img/placeholder-logo.jpg
Normal file
BIN
src/assets/site/img/placeholder-logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/site/img/re3-data-logo-mono.jpg
Normal file
BIN
src/assets/site/img/re3-data-logo-mono.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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 ================================
|
||||||
|
|
|
||||||
|
|
@ -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({
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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,150 +55,185 @@
|
||||||
<hr class="center-line" />
|
<hr class="center-line" />
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<section class="section">
|
|
||||||
<div class="column is-full text-center">
|
|
||||||
<h1>ÜBER TETHYS</h1>
|
|
||||||
<p class="lead">Was sind unsere Schwerpunkte</p>
|
|
||||||
<hr class="center-line" />
|
|
||||||
</div>
|
|
||||||
<div class="column is-full text-left">
|
|
||||||
<p>
|
|
||||||
TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowisse nschaftliche
|
|
||||||
Forschungsdaten veröffentlicht.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls zur
|
|
||||||
Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR hat den
|
|
||||||
Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das ein
|
|
||||||
permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard Suess
|
|
||||||
(1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
|
<div class="container">
|
||||||
|
<section class="section">
|
||||||
<div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
|
<div class="column is-full text-center">
|
||||||
<!-- <div class="tabs is-centered">
|
<h1>ÜBER TETHYS</h1>
|
||||||
<ul id="id-results-tabs">
|
<p class="lead">Was sind unsere Schwerpunkte</p>
|
||||||
<li class="search_tab is-active">
|
<hr class="center-line" />
|
||||||
<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>
|
<div class="column is-full text-left">
|
||||||
<div v-else-if="results.length == 0">
|
<p>
|
||||||
<div class="resultheader">
|
TETHYS RDR ist ein publizierendes Forschungsdatenrepositorium der Geologischen Bundesanstalt (GBA), das an der GBA generierte geowissenschaftliche
|
||||||
Your search yielded
|
Forschungsdaten veröffentlicht.
|
||||||
<strong> 0</strong> results:
|
</p>
|
||||||
|
<p>
|
||||||
|
Zum derzeitigen Stand wird TETHYS RDR in deutscher Sprache bereitgestellt. Die englische Version befindet sich in Vorbereitung und wird sukzessive ebenfalls
|
||||||
|
zur Verfügung gestellt. Die Forschungsdatenpublikationen und die dazugehörigen Metadaten können in Deutsch und in Englisch veröffentlicht werden. Tethys RDR
|
||||||
|
hat den Anspruch, publizierte Datensätze unverändert, langfristig und nachhaltig bereitzustellen. Dadurch ist Tethys ein Forschungsdatenrepositorium, das
|
||||||
|
ein permanentes Referenzieren ermöglicht und somit die darin publizierten Datensätze zitierfähig macht.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Der Name Tethys kommt ursprünglich aus der griechischen Mythologie und benennt eine Titanin und Meeresgöttin. Ende des 19. Jahrhunderts entdeckte Eduard
|
||||||
|
Suess (1831–1914), ein bedeutender österreichischer Geologe, den mesozoischen Ozean und benannte ihn nach dieser Tethys.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<!-- <div id="id-pro-sign-in" class="notification" style="">
|
<section class="section">
|
||||||
<button
|
<div class="column is-full text-center">
|
||||||
class="delete"
|
<h1>TETHYS SERVICES</h1>
|
||||||
onclick="dismissProNotification();"
|
<p class="lead">Eine Übersicht unserer Dienstleistungen</p>
|
||||||
></button>
|
<hr class="center-line" />
|
||||||
It appears that you're not signed in. You'll need to
|
</div>
|
||||||
<a href="/pro" target="_self">signup for Pro</a> or become a
|
<div class="columns is-desktop work-items">
|
||||||
<a
|
<div class="column col-sm overlay-boxes">
|
||||||
href="https://coil.com/?ref=InfinitySearch2229"
|
<div class="card overlay work-back">
|
||||||
target="_self"
|
<img src="@/assets/site/img/box-1-hover.jpg" alt="Datenarchivierung" />
|
||||||
>Coil member</a
|
<div class="card-body box-1-hover">
|
||||||
>
|
<p class="text-white">
|
||||||
to access our results.
|
Tethys RDR publiziert und archiviert nach den FAIR Prinzipien* nachhaltig so wie sicher geowissenschaftliche Datensätze in offenen, frei
|
||||||
</div> -->
|
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 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>
|
||||||
|
|
||||||
<div class="columns">
|
<div class="clearfix mt-3"></div>
|
||||||
<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="container-fluid page-breaker my-5">
|
||||||
<div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
|
<div class="container">
|
||||||
<span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
|
<div class="column col-sm text-center my-5">
|
||||||
<active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
|
<h1 class="text-white">HABEN SIE FRAGEN?</h1>
|
||||||
</span>
|
|
||||||
</div>
|
<p class="text-white text center p-5">
|
||||||
<div class="results">
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices
|
||||||
<!-- Results section -->
|
gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
|
||||||
<vs-result v-bind:datasets="results"></vs-result>
|
</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>
|
||||||
</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 & 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="list-group-item">
|
||||||
|
<a href="#"><i class="fas fa-phone-alt pr-2"></i> +43-1-7125674</a>
|
||||||
|
</li>
|
||||||
|
<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>
|
||||||
|
<img class="img-fluid pt-4" src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="copyright-notice">Copyright 2021 TETHYS RDR</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>
|
||||||
|
|
|
||||||
244
src/views/search-view/search-view-component.ts
Normal file
244
src/views/search-view/search-view-component.ts
Normal 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
129
src/views/search-view/search-view-component.vue
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user