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

Add infrastructure

parent dff8a7ae
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 398 additions and 2 deletions
packages/file-handling/.gitignore 0 → 100644
+ 5
− 0
View file @ 2e11923d
dist
node_modules
.idea
npm-debug.log
package-lock.json
packages/file-handling/.gitlab-ci.yml 0 → 100644
+ 20
− 0
View file @ 2e11923d
image: debian:buster
before_script:
- apt update
- apt install -y git
- "sed -i 's|git@gitlab.tugraz.at:VPU|../..|g' .gitmodules"
- git submodule sync
- git submodule update --init
stages:
- test
test:
stage: test
script:
- apt update
- apt install -y npm chromium
- npm install
- npm run build
- npm test
packages/file-handling/.gitmodules 0 → 100644
+ 3
− 0
View file @ 2e11923d
[submodule "vendor/common"]
path = vendor/common
url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
packages/file-handling/README.md
+ 32
− 2
View file @ 2e11923d
# FileUpload
# VPU FileUpload web component
VPU FileUpload web component
\ No newline at end of file
[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/FileUpload)
## Usage
```html
<vpu-fileupload></vpu-fileupload>
```
## Attributes
- `url`: path to the upload url
- example `<vpu-fileupload url="path/to/my/page"></vpu-fileupload>`
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- example `<vpu-fileupload lang="de"></vpu-fileupload>`
## Local development
```bash
# get the source
git clone git@gitlab.tugraz.at:VPU/WebComponents/FileUpload.git
cd FileUpload
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 8002
npm run watch-local
```
Jump to <http://localhost:8002> and you should get a demo page.
packages/file-handling/assets/favicon.ico 0 → 100644
+ 0
− 0
View file @ 2e11923d
packages/file-handling/assets/favicon.ico

2.49 KiB

packages/file-handling/assets/index.html 0 → 100644
+ 20
− 0
View file @ 2e11923d
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" id="vpu-fileupload-src" src="bundle.js"></script>
</head>
<style>
vpu-fileupload-demo {
--FUBorderRadius: 10px;
--FUBorder: 2px dashed red;
--FUMargin: 20px;
--FUPadding: 5px;
}
</style>
<body>
<vpu-fileupload-demo lang="de" url="http://127.0.0.1:8080"></vpu-fileupload-demo>
</body>
</html>
packages/file-handling/i18next-scanner.config.js 0 → 100644
+ 15
− 0
View file @ 2e11923d
module.exports = {
input: [
'src/*.js',
],
output: './',
options: {
debug: false,
removeUnusedKeys: true,
lngs: ['en','de'],
resource: {
loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
savePath: 'src/i18n/{{lng}}/{{ns}}.json'
},
},
}
packages/file-handling/karma.conf.js 0 → 100644
+ 23
− 0
View file @ 2e11923d
// Trick to use the auto-downloaded puppeteer chrome binary
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function(config) {
config.set({
basePath: 'dist',
frameworks: ['mocha', 'chai'],
files: [
{pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
{pattern: './**/*', included: false, watched: true, served: true},
],
autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: false,
logLevel: config.LOG_ERROR
});
}
packages/file-handling/package.json 0 → 100644
+ 49
− 0
View file @ 2e11923d
{
"name": "vpu-fileupload",
"version": "1.0.0",
"main": "src/index.js",
"devDependencies": {
"chai": "^4.2.0",
"i18next-scanner": "^2.10.2",
"karma": "^4.2.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^1.3.0",
"mocha": "^6.2.0",
"node-sass": "^4.12.0",
"puppeteer": "^1.15.0",
"rollup": "^1.20.0",
"rollup-plugin-commonjs": "^10.0.2",
"rollup-plugin-consts": "^1.0.1",
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^1.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-multi-entry": "^2.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^5.1.1",
"vpu-common": "file:./vendor/common"
},
"dependencies": {
"i18next": "^17.0.3",
"lit-element": "^2.1.0",
"lit-html": "^1.1.1",
"material-design-icons-svg": "^3.0.0"
},
"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"
}
}
packages/file-handling/rollup.config.js 0 → 100644
+ 49
− 0
View file @ 2e11923d
import path from 'path';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser";
import json from 'rollup-plugin-json';
import serve from 'rollup-plugin-serve';
import multiEntry from 'rollup-plugin-multi-entry';
import consts from 'rollup-plugin-consts';
import del from 'rollup-plugin-delete';
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: [
del({
targets: 'dist/*'
}),
multiEntry(),
consts({
environment: build,
}),
resolve({
customResolveOptions: {
// ignore node_modules from vendored packages
moduleDirectory: path.join(process.cwd(), 'node_modules')
}
}),
commonjs({
include: 'node_modules/**'
}),
json(),
(build !== 'local' && build !== 'test') ? terser() : false,
copy({
targets: [
{src: 'assets/index.html', dest: 'dist'},
{src: 'assets/favicon.ico', dest: 'dist'},
{src: 'node_modules/material-design-icons-svg/paths/*.json', dest: 'dist/local/vpu-common/icons'},
],
}),
(process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
]
};
packages/file-handling/src/demo.js 0 → 100644
+ 63
− 0
View file @ 2e11923d
import {i18n} from './i18n';
import {html, LitElement} from 'lit-element';
import './vpu-fileupload';
import * as commonUtils from 'vpu-common/utils';
class FileUploadDemo extends LitElement {
constructor() {
super();
this.lang = 'de';
this.url = '';
}
static get properties() {
return {
lang: { type: String },
url: { type: String },
};
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
}
render() {
return html`
<style>
vpu-fileupload.clean {
--FUBorder: initial;
--FUBorderRadius: initial;
--FUMargin: initial;
--FUPadding: initial;
}
vpu-fileupload.opt {
--FUBorder: 2px solid blue;
}
</style>
<section class="section">
<div class="content">
<h1 class="title">File-Upload-Demo</h1>
<p>You need an upload server listening at <tt>${this.url}</tt> to receive the files...</p>
</div>
<div class="content">
<h2 class="subtitle">Send to Server</h2>
<p>Drop some files here:</p>
<vpu-fileupload lang="de" url="${this.url}"></vpu-fileupload>
</div>
<div class="content">
<h2>Log of uploads</h2>
<ul id="log"></ul>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('vpu-fileupload-demo', FileUploadDemo);
packages/file-handling/src/i18n.js 0 → 100644
+ 6
− 0
View file @ 2e11923d
import {createInstance} from 'vpu-common/i18next.js';
import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
packages/file-handling/src/i18n/de/translation.json 0 → 100644
+ 7
− 0
View file @ 2e11923d
{
"error-head": "FEHLER: Information",
"is-forbidden": "ist verboten",
"troubled-server": "macht Probleme am Server",
"unknown-problems": "mit unbekanntem Problem",
"was-not-found": "wurde nicht gefunden"
}
packages/file-handling/src/i18n/en/translation.json 0 → 100644
+ 7
− 0
View file @ 2e11923d
{
"error-head": "ERROR: information",
"is-forbidden": "is forbidden",
"troubled-server": "troubled server",
"unknown-problems": "with unknown problems",
"was-not-found": "was not found"
}
packages/file-handling/src/index.js 0 → 100644
+ 1
− 0
View file @ 2e11923d
import './vpu-fileupload';
packages/file-handling/src/vpu-fileupload.js 0 → 100644
+ 97
− 0
View file @ 2e11923d
import {i18n} from './i18n';
import {html} from 'lit-element';
// import JSONLD from 'vpu-common/jsonld';
import VPULitElement from 'vpu-common/vpu-lit-element'
import "vpu-common/vpu-mini-spinner.js";
import * as commonUtils from "vpu-common/utils";
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
import 'vpu-common/vpu-icon.js';
/**
* KnowledgeBaseWebPageElementView web component
*/
class VPUFileUpload extends VPULitElement {
constructor() {
super();
this.lang = 'de';
this.url = '';
}
/**
* See: https://lit-element.polymer-project.org/guide/properties#initialize
*/
static get properties() {
return {
lang: { type: String },
url: { type: String },
};
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
}
render() {
return html`
<style>
#drop-area {
border: 2px dashed #ccc;
border-radius: 20px;
width: 480px;
font-family: sans-serif;
margin: 100px auto;
padding: 20px;
}
#drop-area.highlight {
border-color: purple;
}
p {
margin-top: 0;
}
.my-form {
margin-bottom: 10px;
}
#gallery {
margin-top: 10px;
}
#gallery img {
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
}
.button {
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ccc;
}
.button:hover {
background: #ddd;
}
#fileElem {
display: none;
}
</style>
<div id="drop-area">
<form class="my-form">
<p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
<input type="file" id="fileElem" multiple accept="image/*" name='my_file' onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select some files</label>
</form>
</div>
`;
}
}
commonUtils.defineCustomElement('vpu-fileupload', VPUFileUpload);
common @ 5aa64ec4
Subproject commit 5aa64ec47e7b65d69327f4dec1102917fe33bd22
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment