Slowly slowly starting the implementation.

4年前 · 09de898398
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ __pycache__
 node_modules
 package-lock.json
 /frontend/dist/
 /backend/server.pem

--- a/backend/srv.py
+++ b/backend/srv.py
@@ -0,0 +1,7 @@
 import BaseHTTPServer, SimpleHTTPServer
 import ssl

 httpd = BaseHTTPServer.HTTPServer(('0.0.0.0', 4443), SimpleHTTPServer.SimpleHTTPRequestHandler)
 httpd.socket = ssl.wrap_socket (httpd.socket, certfile='/pstore/home/adaszews/workspace/arvados-workbench-advanced/backend/server.pem', server_side=True)
 httpd.serve_forever()

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,8 +1,12 @@
 {
  "dependencies": {
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "linkstate": "^1.1.1",
    "popper.js": "^1.16.1",
    "preact": "^8.2.9",
    "preact-router": "^2.6.1",
    "random-bytes": "^1.0.0",
    "rollup": "^0.62.0",
    "rollup-plugin-buble": "^0.19.2",
    "rollup-plugin-copy": "^0.2.3",
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -10,17 +10,19 @@ export default {
  input: 'src/js/index.js',
  output: {
    file: 'dist/js/app.min.js',
    name: 'CHEMTOP',
    name: 'WBADV',
    format: 'umd',
    sourceMap: true
  },
  plugins: [
    includePaths({
      paths: ['src/js', 'src/js/widget', 'src/js/misc']
      paths: ['src/js', 'src/js/widget', 'src/js/misc', 'src/js/component']
    }),
    copy({
      'src/html/index.html': 'dist/index.html',
      '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',
      verbose: true
    }),
    buble({jsx: 'h'}),
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -0,0 +1,10 @@
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
    <script language="javascript" src="/js/bootstrap.min.js"></script>
  </head>
  <body>
    <script language="javascript" src="/js/app.min.js"></script>
  </body>
 </html>
--- a/frontend/src/js/component/wb-app.js
+++ b/frontend/src/js/component/wb-app.js
@@ -0,0 +1,45 @@
 import { h, Component } from 'preact';
 import WBTabs from 'wb-tabs';

 class WBApp extends Component {
  render() {
    return (
      <div>
        <h1>WBApp</h1>
        <table class="table table-striped table-hover">
          <thead class="thead-light">
            <tr>
              <th>Name</th>
              <th>Description</th>
              <th>Size</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Name</td>
              <td>Description</td>
              <td>0 bytes</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>Description</td>
              <td>0 bytes</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>Description</td>
              <td>0 bytes</td>
            </tr>
          </tbody>
        </table>
        <WBTabs tabs={ [
          { 'name': 'Ala', 'isActive': true },
          "Ma",
          { 'name': 'Kota', 'isDisabled': true }
        ] } onTabChanged={ idx => alert(idx) } />
      </div>
    );
  }
 }

 export default WBApp;
--- a/frontend/src/js/index.js
+++ b/frontend/src/js/index.js
@@ -0,0 +1,6 @@
 import { h, render } from 'preact';
 import WBApp from 'wb-app';

 render((
  <WBApp />
 ), document.body);
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -0,0 +1,33 @@
 import { h, Component } from 'preact';

 class WBTabs extends Component {
  render({ tabs, onTabChanged }) {
    return (
      <ul class="nav nav-tabs">
        { tabs.map((t, idx) => {
          let name, isActive, isDisabled;
          if (typeof(t) === 'object') {
            name = t.name;
            isActive = t.isActive;
            isDisabled = t.isDisabled;
          } else if (typeof(t) === 'string') {
            name = t;
          }
          let cls = ['nav-link'];
          if (isActive)
            cls.push('active');
          if (isDisabled)
            cls.push('disabled');
          cls = cls.join(' ');
          return (
            <li class="nav-item">
              <a class={ cls } href="#" onclick={ () => onTabChanged(idx) }>{ name }</a>
            </li>
          );
        }) }
      </ul>
    );
  }
 }

 export default WBTabs;