- add versioning to frontend

- hode staistic badge
This commit is contained in:
Arno Kaimbacher 2023-07-05 18:05:52 +02:00
parent cfc81f2d90
commit 4f1ea85982
9 changed files with 2450 additions and 77 deletions

View File

@ -1,3 +1,3 @@
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};
// module.exports = {
// presets: ["@vue/cli-plugin-babel/preset"],
// };

2401
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -18,13 +18,17 @@
"leaflet": "^1.7.1",
"qs": "^6.10.1",
"rxjs": "^7.5.5",
"vue": "^3.0.0",
"vue": "^3.2.47",
"vue-facing-decorator": "^2.1.13",
"vue-matomo": "^4.1.0",
"vue-router": "^4.0.12",
"xslt3": "^2.4.0"
},
"devDependencies": {
"@babel/core": "^7.22.5",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-decorators": "^7.22.5",
"@babel/preset-env": "^7.22.5",
"@types/leaflet": "^1.7.9",
"@typescript-eslint/eslint-plugin": "^5.48.1",
"@typescript-eslint/parser": "^5.40.1",
@ -34,15 +38,18 @@
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^11.0.0",
"babel-preset-typescript-vue3": "^2.0.17",
"bulma": "^0.9.3",
"eslint": "^8.25.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.9.0",
"node-polyfill-webpack-plugin": "^2.0.0",
"prettier": "^2.7.1",
"pug-plain-loader": "^1.1.0",
"sass": "^1.26.5",
"sass-loader": "^13.0.0",
"typescript": "^5.1.3",
"webpack": "^5.72.1"
"webpack": "^5.72.1",
"vue-loader": "^17.0.1"
}
}

View File

@ -2,7 +2,7 @@
<div v-bind:title="'Metrics for DOI: ' + doi">
<div v-if="doi">
<!-- <div v-if="display == 'small'"> -->
<SmallWidget v-bind:doi="doi" v-bind:display="display" :data-input="dataObject" />
<SmallWidget v-bind:doi="doi" v-bind:display="display" v-bind:data-input="dataObject" />
<!-- </div> -->
</div>
<a v-else>There is no DOI</a>

View File

@ -17,10 +17,16 @@ const route1: Router = createRouter({
routes: [
{
path: "/10.24341/tethys.:datasetId",
name: "dataset2",
name: "dataset3",
component: DatasetDetailComponent,
props: true,
},
// {
// path: "/10.24341/:identifier",
// name: "dataset2",
// component: DatasetDetailComponent,
// props: true,
// },
],
// scrollBehavior(to, from, savedPosition) {
scrollBehavior() {

View File

@ -204,6 +204,18 @@ class DatasetService {
return dataset;
}
public getDatasetByDoi(doi: string): Observable<DbDataset> {
// const host = "https:" + VUE_APP_PORTAL;
const host = VUE_APP_PORTAL;
const path = "/api/dataset/10.24341/tethys." + doi;
const apiUrl = host + path;
const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res)));
// const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
// this.messageService.add('HeroService: fetched heroes');
return dataset;
}
// public getOaiDatasets(): Observable<OaiDataset[]> {
// const apiUrl = "https://data.tethys.at/oai?verb=ListRecords&metadataPrefix=oai_datacite";
// const oaiDatasets = api.get<string>(apiUrl).pipe(

View File

@ -23,6 +23,9 @@ export default class DatasetDetailComponent extends Vue {
@Prop()
datasetId!: number;
// @Prop()
// identifier!: string;
searchTerm: string | Suggestion = "";
private subscriptions: Array<Subscription> = [];
@ -40,7 +43,11 @@ export default class DatasetDetailComponent extends Vue {
created(): void {
dayjs.extend(advancedFormat);
this.getDataset(this.datasetId);
if (typeof this.datasetId === "number") {
this.getDataset(this.datasetId);
} else {
this.getDatasetByIdentifier(this.datasetId);
}
}
beforeUnmount(): void {
@ -87,6 +94,19 @@ export default class DatasetDetailComponent extends Vue {
},
error: (error: string) => this.errorHandler(error),
});
this.subscriptions.push(newSub);
}
private getDatasetByIdentifier(id: string): void {
const newSub = DatasetService.getDatasetByDoi(id).subscribe({
next: (res: DbDataset) => {
this.dataset = res;
this.loaded = true;
},
error: (error: string) => this.errorHandler(error),
});
this.subscriptions.push(newSub);
}

View File

@ -158,7 +158,7 @@
<h2 class="label uppercase">Details</h2>
<!-- <data-metrics-badge doi="10.7272/q6g15xs4" display="regular"></data-metrics-badge> -->
<!-- <data-metrics-badge doi="10.24341/tethys.209" display="small" v-bind:data-input="post"></data-metrics-badge> -->
<data-metrics-badge v-bind:doi="dataset.identifier.value" display="small"></data-metrics-badge>
<!-- <data-metrics-badge v-bind:doi="dataset.identifier.value" display="small"></data-metrics-badge> -->
</div>
</div>
<div class="card">

View File

@ -2,11 +2,15 @@
const webpack = require("webpack");
// const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
publicPath: "/",
// chainWebpack: config => {
// config
chainWebpack: config => {
const vueRule = config.module.rule("vue");
vueRule.uses.clear();
// const tsRule = config.module.rule("ts");
// tsRule.uses.clear();
// .plugin('define')
// .tap(args => {
// args[0] = {
@ -16,7 +20,7 @@ module.exports = {
// }
// return args
// })
// },
},
pages: {
index: {
// entry for the page
@ -28,7 +32,56 @@ module.exports = {
// disableHostCheck: true,
// },
configureWebpack: {
devtool: "source-map",
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// loaders: {
// ts: 'ts-loader',
// },
cacheDirectory: 'C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader',
cacheIdentifier: '39baf1b4',
babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
},
},
// {
// test: /\.(js|jsx|ts|tsx)$/,
// // exclude: /(node_modules|bower_components)/,
// exclude: file => (
// /node_modules/.test(file) &&
// !/\.vue\.js/.test(file)
// ),
// exclude: /node_modules/,
// use: {
// loader: "babel-loader",
// options: {
// presets: [
// ["@babel/preset-env", {}],
// "babel-preset-typescript-vue3", //because of new vue setup method
// // "@babel/preset-typescript"
// ],
// plugins: [
// // "@babel/plugin-transform-runtime",
// ["@babel/plugin-proposal-decorators", { legacy: true }],
// "@babel/proposal-class-properties",
// ],
// },
// },
// },
],
},
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm-bundler.js'
},
extensions : ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'],
},
plugins: [
// new VueLoaderPlugin(),
new webpack.DefinePlugin({
APP_URL: JSON.stringify(process.env.APP_URL),
VUE_APP_PORTAL: JSON.stringify(process.env.VUE_APP_PORTAL),