From eb8803d7a81e8a03539820d969d2a273a33207b5 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Fri, 14 Jan 2022 12:57:06 +0100 Subject: [PATCH] - correct citation in datset-detail.component.ts - enable subdomain routing --- src/App2.vue | 137 ++++++++++++++++++ src/app2.ts | 81 +++++++++++ src/main.ts | 20 ++- src/router/index.ts | 4 +- src/router/route1.ts | 41 ++++++ .../dataset-detail.component.ts | 30 +++- vue.config.js | 3 + 7 files changed, 304 insertions(+), 12 deletions(-) create mode 100644 src/App2.vue create mode 100644 src/app2.ts create mode 100644 src/router/route1.ts diff --git a/src/App2.vue b/src/App2.vue new file mode 100644 index 0000000..db087f0 --- /dev/null +++ b/src/App2.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/src/app2.ts b/src/app2.ts new file mode 100644 index 0000000..f174b4d --- /dev/null +++ b/src/app2.ts @@ -0,0 +1,81 @@ +import { Options, Vue } from "vue-class-component"; +import { Watch } from "vue-property-decorator"; +// import { RouteLocation } from "vue-router"; +import HelloWorld from "./components/HelloWorld/HelloWorld.vue"; +import HomeViewComponent from "./views/home-view/home-view-component.vue"; +import HelpViewComponent from "./views/map-view/help-view-component.vue"; +import SearchViewComponent from "./views/search-view/search-view-component.vue"; +import DatasetDetailComponent from "./views/dataset-detail.component.ts/dataset-detail.component.vue"; +import ServiceViewComponent from "./views/services-view/service-view-component.vue"; +import OaiViewComponent from "./views/oai-view/oai-view-component.vue"; +import ContactViewComponent from "./views/contact-view/contact-view-component.vue"; +import SitelinkViewComponent from "./views/sitelink-view/sitelink-view-component.vue"; +import ImprintViewComponent from "./views/imprint-view/imprint-view-component.vue"; +import TermsViewComponent from "./views/terms-view/terms-view-component"; +import { VUE_APP_PORTAL } from "./constants"; +// import VsInput from "./components/vs-input/vs-input.vue"; +// import VsResult from "./components/vs-result/vs-result.vue"; +// import FacetCategory from "./components/face-category/facet-category.vue"; +// import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue"; + +// import { SolrSettings } from "@/models/solr"; +// import { DatasetService } from "./services/dataset.service"; +// import { Suggestion } from "./models/dataset"; +// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers"; +// import { ActiveFilterCategories } from "@/models/solr"; + +// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/ +@Options({ + components: { + HelloWorld, + HomeViewComponent, + // VsInput, + // VsResult, + // FacetCategory, + // ActiveFacetCategory, + HelpViewComponent, + SearchViewComponent, + DatasetDetailComponent, + ServiceViewComponent, + OaiViewComponent, + ContactViewComponent, + SitelinkViewComponent, + ImprintViewComponent, + TermsViewComponent, + }, +}) +export default class App2 extends Vue { + public active = false; + public portal = VUE_APP_PORTAL + "/login"; + + mounted(): void { + // const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0); + // // Check if there are any navbar burgers + // if ($navbarBurgers.length > 0) { + // // Add a click event on each of them + // $navbarBurgers.forEach((elNavBurger) => { + // elNavBurger.addEventListener("click", () => { + // // Get the target from the "data-target" attribute + // const targetNavbar = elNavBurger.dataset.target; + // const $target = document.getElementById(targetNavbar); + // // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + // elNavBurger.classList.toggle("is-active"); + // $target?.classList.toggle("is-active"); + // }); + // }); + // } + } + + public showMobilemenu(event: PointerEvent): void { + // Don't follow the link + event.preventDefault(); + this.active = !this.active; + } + + @Watch("$route") + protected oRouteChangedChanged(): void { + //(to: RouteLocation, from: RouteLocation): void { + // console.log("setting " + from.path + " to " + to.path); + this.active = false; + } +} diff --git a/src/main.ts b/src/main.ts index 02a19b4..7e5ffce 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,12 +1,28 @@ import { createApp } from "vue"; import App from "./App.vue"; +import App2 from "./App2.vue"; import "./assets/scss/main-styles.scss"; // import FontAwesomeIcon from "@/utilities/fontawesome"; -import router from "./router/index"; +import index from "./router/index"; +import route1 from "./router/route1"; import "@fortawesome/fontawesome-free/css/all.css"; import VueMatomo from "vue-matomo"; -createApp(App) +const host = window.location.host; +const parts = host.split("."); +// const domainLength = 2; // route1.example.com => domain length = 3 +let router, app; +// let routes; +if (parts[0] === "doi") { + router = route1; + app = App2; +} else { + // If you want to do something else just comment the line below + router = index; + app = App; +} + +createApp(app) .use(VueMatomo, { host: "https://webstat.geologie.ac.at/", siteId: 8, diff --git a/src/router/index.ts b/src/router/index.ts index 24320b9..b0778d8 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -71,7 +71,7 @@ const routes = [ }, ]; -const router = createRouter({ +const index = createRouter({ history: createWebHistory(), routes, // scrollBehavior(to, from, savedPosition) { @@ -81,4 +81,4 @@ const router = createRouter({ }, }); -export default router; +export default index; diff --git a/src/router/route1.ts b/src/router/route1.ts new file mode 100644 index 0000000..00993eb --- /dev/null +++ b/src/router/route1.ts @@ -0,0 +1,41 @@ +// import Vue from 'vue'; +// import Router from 'vue-router'; +import { createWebHistory, createRouter } from "vue-router"; +import DatasetDetailComponent from "@/views/dataset-detail.component.ts/dataset-detail.component"; + +// Vue.use(Router); + +// export default new Router({ +// mode: 'history', +// routes: [ +// { +// path: '/', +// name: 'Route1', +// component: Route1, +// }, +// ], +// }); + +const route1 = createRouter({ + history: createWebHistory(), + routes: [ + // { + // path: '/', + // name: 'Route1', + // component: Route1, + // }, + { + path: "/10.24341/tethys.:datasetId", + name: "dataset2", + component: DatasetDetailComponent, + props: true, + }, + ], + // scrollBehavior(to, from, savedPosition) { + scrollBehavior() { + // return desired position + document.getElementById("app")?.scrollIntoView(); + }, +}); + +export default route1; diff --git a/src/views/dataset-detail.component.ts/dataset-detail.component.ts b/src/views/dataset-detail.component.ts/dataset-detail.component.ts index 44062e2..ccae28a 100644 --- a/src/views/dataset-detail.component.ts/dataset-detail.component.ts +++ b/src/views/dataset-detail.component.ts/dataset-detail.component.ts @@ -41,13 +41,27 @@ export default class DatasetDetailComponent extends Vue { } onSearch(suggestion: Suggestion | string): void { - let term; - if (typeof suggestion === "string") { - term = suggestion; - this.$router.push({ name: "Search", params: { display: term } }); - } else if (suggestion instanceof Suggestion) { - term = suggestion.value; - this.$router.push({ name: "Search", params: { display: term, type: suggestion.type } }); + const host = window.location.host; + const parts = host.split("."); + if (parts[0] === "doi") { + let term; + if (typeof suggestion === "string") { + term = suggestion; + window.open("https://tethys.at/search/" + term); + } else if (suggestion instanceof Suggestion) { + term = suggestion.value; + const type = suggestion.type; + window.open("https://tethys.at/search/" + term + "/" + type); + } + } else { + let term; + if (typeof suggestion === "string") { + term = suggestion; + this.$router.push({ name: "Search", params: { display: term } }); + } else if (suggestion instanceof Suggestion) { + term = suggestion.value; + this.$router.push({ name: "Search", params: { display: term, type: suggestion.type } }); + } } // this.searchTerm = suggestion; @@ -116,7 +130,7 @@ export default class DatasetDetailComponent extends Vue { // u.last_name + ", " + u.first_name?.substring(0, 1).toUpperCase() + "." }) .join(", "); - citation += " " + moment(this.dataset.server_date_published).format("YYYY") + ": "; + citation += " (" + moment(this.dataset.server_date_published).format("YYYY") + "): "; citation += this.dataset.MainTitle?.value; citation += "." + this.dataset.creating_corporation + ", "; citation += this.dataset.publisher_name; diff --git a/vue.config.js b/vue.config.js index e1f717e..d68b007 100644 --- a/vue.config.js +++ b/vue.config.js @@ -21,6 +21,9 @@ module.exports = { title: "TETHYS - Research Data Repository", }, }, + devServer: { + disableHostCheck: true, + }, configureWebpack: { plugins: [ new webpack.DefinePlugin({