Skip to content
Snippets Groups Projects
Commit 361a6590 authored by Neuber, Eugen Ramon's avatar Neuber, Eugen Ramon :speech_balloon: Committed by Reiter, Christoph
Browse files

Add files

parent 477d0a92
No related branches found
No related tags found
Loading
dist
node_modules
.idea
npm-debug.log
package-lock.json
[submodule "vendor/common"]
path = vendor/common
url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
[submodule "vendor/auth"]
path = vendor/auth
url = git@gitlab.tugraz.at:VPU/WebComponents/Auth.git
# Default ignored files
/workspace.xml
\ No newline at end of file
# DataTableView
# VPU DataTableView Web Component
[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/KnowledgeBaseWebPageElementView)
# Usage
```html
<vpu-data-table-view></vpu-data-table-view>
```
# Attributes
- `value`: api request
- example `<vpu-data-table-view value="api/request"></vpu-data-table-view>`
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- example `<vpu-data-table-view lang="de"></vpu-data-table-view>`
- `entry-point-url` (optional, default is the TU Graz entry point url): entry point url to access the api
- example `<vpu-data-table-view entry-point-url="http://127.0.0.1:8000"></vpu-data-table-view>`
# Local development
```bash
# get the source
git clone git@gitlab.tugraz.at:VPU/WebComponents/DataTableView.git
cd DataTableView
git submodule update --init
# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
npm install
# constantly build dist/bundle.js and run a local web-server on port 8003
npm run watch-local
```
Jump to <http://localhost:8003> and you should get a demo page.
packages/data-table-view/assets/favicon.ico

2.49 KiB

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" id="vpu-data-table-view-wc-src" src="bundle.js"></script>
</head>
<body>
<vpu-data-table-view-demo lang="de"></vpu-data-table-view-demo>
</body>
</html>
{
"name": "vpu-data-table-view",
"version": "1.0.0",
"main": "src/index.js",
"devDependencies": {
"karma": "^4.2.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^1.3.0",
"node-sass": "^4.12.0",
"puppeteer": "^1.15.0",
"mocha": "^6.2.0",
"chai": "^4.2.0",
"rollup": "^1.11.3",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-copy": "^2.0.1",
"rollup-plugin-node-resolve": "^4.2.3",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^4.0.4",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-multi-entry": "^2.1.0",
"i18next-scanner": "^2.10.2",
"vpu-auth": "file:./vendor/auth",
"vpu-common": "file:./vendor/common"
},
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.2.10",
"i18next": "^17.0.3",
"lit-element": "^2.1.0",
"lit-html": "^1.1.1",
"jquery": "^3.4.1"
},
"scripts": {
"clean": "rm dist/*",
"build": "npm run build-local",
"build-local": "rollup -c",
"build-dev": "rollup -c --environment BUILD:development",
"build-prod": "rollup -c --environment BUILD:production",
"build-demo": "rollup -c --environment BUILD:demo",
"build-test": "rollup -c --environment BUILD:test",
"i18next": "i18next-scanner",
"watch": "npm run watch-local",
"watch-local": "rollup -c --watch",
"watch-dev": "rollup -c --watch --environment BUILD:development",
"test": "npm run build-test && karma start --singleRun"
}
}
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser";
import json from 'rollup-plugin-json';
import replace from "rollup-plugin-replace";
import serve from 'rollup-plugin-serve';
import multiEntry from 'rollup-plugin-multi-entry';
const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
console.log("build: " + build);
export default {
input: (build != 'test') ? 'src/demo.js' : 'test/**/*.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
},
plugins: [
multiEntry(),
resolve(),
commonjs({
include: 'node_modules/**'
}),
json(),
replace({
"process.env.BUILD": '"' + build + '"',
}),
postcss({
inject: false,
minimize: false,
plugins: []
}),
(build !== 'local' && build !== 'test') ? terser() : false,
copy({
targets: [
'assets/index.html',
'assets/favicon.ico'
],
outputFolder: 'dist'
}),
(process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8003}) : false
]
};
import $ from 'jquery';
import dt from 'datatables.net';
import {setting, getAPiUrl} from './utils.js';
import {i18n} from './i18n';
import {html, LitElement} from 'lit-element';
import commonUtils from 'vpu-common/utils';
dt(window, $);
class DataTableView extends LitElement {
constructor() {
super();
this.lang = 'de';
}
static get properties() {
return {
lang: { type: String },
value: { type: String },
entryPointUrl: { type: String, attribute: 'entry-point-url' },
};
}
loadWebPageElement() {
if (window.VPUAuthToken === undefined || window.VPUAuthToken === "") {
return;
}
const apiUrl = this.entryPointUrl + this.value; // TODO
var that = this;
fetch(apiUrl, {
headers: {
'Content-Type': 'application/ld+json',
'Authorization': 'Bearer ' + window.VPUAuthToken,
},
})
.then(res => res.json())
.then() // TODO
.catch();
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
}
render() {
return html`
<style>
</style>
<table>
<tr><th>TODO..</th></tr>
</table>
`;
}
}
commonUtils.defineCustomElement('vpu-data-table-view', DataTableView);
import 'vpu-auth';
import './vpu-data-table-view.js';
import {setting, getAPiUrl} from './utils.js';
import {i18n} from './i18n';
import {html, LitElement} from 'lit-element';
import commonUtils from 'vpu-common/utils';
class DataTableViewDemo extends LitElement {
constructor() {
super();
this.lang = 'de';
}
static get properties() {
return {
lang: { type: String },
};
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
}
render() {
return html`
<style>
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<section class="section">
<div class="content">
<h1 class="title">DataTableView-Demo</h1>
</div>
<div class="content">
<vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
</div>
<div class="content">
<data-table-view lang="${this.lang}" value=""></data-table-view>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('vpu-data-table-view-demo', DataTableViewDemo);
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment