diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index db67adf..9fafe04 100755
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -23,6 +23,7 @@ export default {
'src/css/index.css': 'dist/css/index.css',
'node_modules/bootstrap/dist/css/bootstrap.min.css': 'dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/js/bootstrap.min.js': 'dist/js/bootstrap.min.js',
+ 'node_modules/jquery/dist/jquery.min.js': 'dist/js/jquery.min.js',
verbose: true
}),
buble({jsx: 'h'}),
diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index c48306f..711a065 100755
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -2,6 +2,7 @@
+
diff --git a/frontend/src/js/component/wb-app.js b/frontend/src/js/component/wb-app.js
index 8794e72..711b4e8 100644
--- a/frontend/src/js/component/wb-app.js
+++ b/frontend/src/js/component/wb-app.js
@@ -1,37 +1,24 @@
import { h, Component } from 'preact';
import WBTabs from 'wb-tabs';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
class WBApp extends Component {
render() {
return (
WBApp
-
-
-
- Name |
- Description |
- Size |
-
-
-
-
- Name |
- Description |
- 0 bytes |
-
-
- Name |
- Description |
- 0 bytes |
-
-
- Name |
- Description |
- 0 bytes |
-
-
-
+
alert(idx) } />
+
Project Listing
+ );
+ }
+}
diff --git a/frontend/src/js/misc/make-arvados-request.js b/frontend/src/js/misc/make-arvados-request.js
new file mode 100644
index 0000000..59cc31e
--- /dev/null
+++ b/frontend/src/js/misc/make-arvados-request.js
@@ -0,0 +1,27 @@
+
+makeArvadosRequest(arvHost, arvToken, endpoint, method='GET', data=null,
+ contentType='application/json;charset=utf-8', responseType='json') {
+
+ let xhr = new XMLHttpRequest();
+ xhr.open(method, 'https://' + arvHost + endpoint);
+ xhr.setRequestHeader('Authorization', 'OAuth2 ' + arvToken);
+ if (data !== null)
+ xhr.setRequestHeader('Content-Type', contentType);
+ xhr.responseType = responseType;
+
+ let res = new Promise((accept, reject) => {
+ xhr.onreadystatechange = () => {
+ if (xhr.readyState !== 4)
+ return;
+ if (xhr.status !== 200)
+ reject(xhr);
+ else
+ accept(xhr);
+ };
+ xhr.send(data);
+ });
+
+ return res;
+}
+
+export default makeArvadosRequest;
diff --git a/frontend/src/js/widget/wb-pagination.js b/frontend/src/js/widget/wb-pagination.js
new file mode 100644
index 0000000..3a7c1e3
--- /dev/null
+++ b/frontend/src/js/widget/wb-pagination.js
@@ -0,0 +1,73 @@
+import { h, Component } from 'preact';
+
+class WBPagination extends Component {
+ renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) {
+ let visible = {};
+
+ let begActChnk = activePage - Math.floor(chunkSize / 2);
+ let endActChnk = activePage + Math.floor(chunkSize / 2) + 1;
+ for (let i = begActChnk; i < endActChnk; i++)
+ visible[i] = true;
+
+ for (let i = 0; i < chunkSize; i++)
+ visible[i] = true;
+
+ for (let i = Math.max(numPages - chunkSize, 0); i < numPages; i++)
+ visible[i] = true;
+
+ visible = Object.keys(visible).map(n => Number(n));
+
+ let res = [];
+ let prev = 0;
+
+ res.push((
+
+ onPageChanged(activePage - 1) }>Previous
+
+ ));
+
+ for (let i in visible) {
+ if (i > prev + 1)
+ res.push((
+
+ onPageChanged(i - 1) }>...
+
+ ));
+ prev = i;
+
+ res.push((
+
+ onPageChanged(i) }>{ i + 1 }
+
+ ));
+ }
+
+ res.push((
+ = numPages - 1 ? "page-item disabled" : "page-item" }>
+ onPageChanged(activePage + 1) }>Next
+
+ ));
+
+ return res;
+ }
+
+ render({ numPages, activePage, chunkSize, onPageChanged }) {
+ return (
+
+ );
+ }
+}
+
+WBPagination.defaultProps = {
+ 'chunkSize': 5
+};
+
+export default WBPagination;
diff --git a/frontend/src/js/widget/wb-table.js b/frontend/src/js/widget/wb-table.js
new file mode 100644
index 0000000..c698135
--- /dev/null
+++ b/frontend/src/js/widget/wb-table.js
@@ -0,0 +1,26 @@
+import { h, Component } from 'preact';
+
+class WBTable extends Component {
+ render({ columns, rows }) {
+ return (
+
+
+
+ { columns.map(c => { c } | ) }
+
+
+
+ { rows.map(r => (
+
+ { columns.map((_, idx) => (
+ { r[idx] } |
+ )) }
+
+ )) }
+
+
+ );
+ }
+}
+
+export default WBTable;