diff --git a/.gitignore b/.gitignore
index 5ea82470..9ff50a36 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,6 +64,9 @@ typings/
# gatsby files
.cache/
public
+bin
+target
+tmp
# Mac files
.DS_Store
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 00000000..d6b9d230
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+ - "lts/*"
+before_script:
+ - npm install -g gatsby
+script:
+ - cd gatsby/lobid/
+ - npm install
+ - gatsby build
diff --git a/gatsby/lobid/gatsby-node.js b/gatsby/lobid/gatsby-node.js
index 4140ed50..84850f98 100644
--- a/gatsby/lobid/gatsby-node.js
+++ b/gatsby/lobid/gatsby-node.js
@@ -7,4 +7,9 @@ exports.createPages = ({ actions }) => {
path: "/team",
component: path.resolve(`./src/pages/team-de.js`)
});
+
+ createPage({
+ path: "/visual",
+ component: path.resolve(`./src/pages/visual.js`)
+ });
};
\ No newline at end of file
diff --git a/gatsby/lobid/package-lock.json b/gatsby/lobid/package-lock.json
index 6346eae1..c74a80a2 100644
--- a/gatsby/lobid/package-lock.json
+++ b/gatsby/lobid/package-lock.json
@@ -15902,6 +15902,16 @@
"extsprintf": "^1.2.0"
}
},
+ "vis-data": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.1.tgz",
+ "integrity": "sha512-Z5+caySDqoKL9yxbI3c/CKmUcSvROSZstuvwxbOsUpdxHpxFYEUgxC1EH4lSB1ykEaM54MVMM1UcwB9oNaWFlw=="
+ },
+ "vis-network": {
+ "version": "8.5.4",
+ "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-8.5.4.tgz",
+ "integrity": "sha512-KeYHlTZpbPHS6868MHnMtRXDTmKA0YwQQl/mC5cBiICGH67ilzOqkyWObAMyeo8b8Z/6pTfFJEu9g70EvWqOYA=="
+ },
"vm-browserify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
diff --git a/gatsby/lobid/package.json b/gatsby/lobid/package.json
index a501f01c..ffac9784 100644
--- a/gatsby/lobid/package.json
+++ b/gatsby/lobid/package.json
@@ -25,7 +25,9 @@
"react-dom": "^16.12.0",
"reactstrap": "^8.4.1",
"typescript": "^3.6.0-beta",
- "utf-8-validate": "^5.0.2"
+ "utf-8-validate": "^5.0.2",
+ "vis-data": "^7.1.1",
+ "vis-network": "^8.5.4"
},
"devDependencies": {
"prettier": "^1.19.1"
diff --git a/gatsby/lobid/src/components/footer.html.js b/gatsby/lobid/src/components/footer.html.js
new file mode 100644
index 00000000..869d9d18
--- /dev/null
+++ b/gatsby/lobid/src/components/footer.html.js
@@ -0,0 +1,46 @@
+import React from "react"
+
+import wappenPng from "./images/wappen.png";
+
+export default class Footer extends React.Component {
+ render() {
+ return (
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/gatsby/lobid/src/components/header.html.js b/gatsby/lobid/src/components/header.html.js
new file mode 100644
index 00000000..84e80499
--- /dev/null
+++ b/gatsby/lobid/src/components/header.html.js
@@ -0,0 +1,164 @@
+import React from "react"
+
+import {
+ UncontrolledDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem
+} from "reactstrap";
+
+import lobidLogoPng from "./images/lobid.png";
+
+export default class Header extends React.Component {
+ render() {
+ return (
+
+
+
)
+ }
+}
+
diff --git a/gatsby/lobid/src/components/team.html.js b/gatsby/lobid/src/components/team.html.js
index 63b92dcc..76cbbce4 100644
--- a/gatsby/lobid/src/components/team.html.js
+++ b/gatsby/lobid/src/components/team.html.js
@@ -1,17 +1,12 @@
import React from "react";
-import {
- UncontrolledDropdown,
- DropdownToggle,
- DropdownMenu,
- DropdownItem
-} from "reactstrap";
+import Header from "./header.html";
+import Footer from "./footer.html";
import "./css/lobid.css";
import "./css/bootstrap.min.css";
import "./css/font-awesome.min.css";
import hbzLogoPng from "./images/hbz.png";
-import lobidLogoPng from "./images/lobid.png";
import twitterLogoBluePng from "./images/Twitter_logo_blue.png";
import mailPng from "./images/mail.png";
import jsonLdPng from "./images/json-ld.png";
@@ -19,7 +14,6 @@ import feedPng from "./images/feed.png";
import gitHubMark32pxPng from "./images/GitHub-Mark-32px.png";
import mailmanJpg from "./images/mailman.jpg";
import freenodePng from "./images/freenode.png";
-import wappenPng from "./images/wappen.png";
export class Team extends React.Component {
constructor(props) {
@@ -58,156 +52,18 @@ export class Team extends React.Component {
);
};
render() {
+ console.log('Header', Header);
return (
-
-
-
+
@@ -444,42 +300,7 @@ export class Team extends React.Component {
{this.props.makesOfferAlternateName3}
-
+
);
}
diff --git a/gatsby/lobid/src/components/visual.html.js b/gatsby/lobid/src/components/visual.html.js
new file mode 100644
index 00000000..730a860c
--- /dev/null
+++ b/gatsby/lobid/src/components/visual.html.js
@@ -0,0 +1,81 @@
+import React, { Component, createRef } from "react";
+import { DataSet, Network} from 'vis-network/standalone/esm/vis-network';
+import Header from "./header.html";
+import Footer from "./footer.html";
+
+import "./css/lobid.css";
+
+import hbzLogoPng from "./images/hbz.png";
+
+export class Visual extends Component {
+
+ constructor(props) {
+ super(props);
+ this.props = props;
+ this.state = {
+ infoToggled: false
+ };
+ this.network = {};
+ this.appRef = createRef();
+ }
+
+ componentDidMount() {
+ console.log("Props", this.props)
+
+ var ns = [
+ { id: 'm', label: "Members","shape":"dot","size":"5"},
+ { id: 'o', label: "Offers","shape":"dot","size":"5"}
+ ];
+ this.props.members.forEach((item,index) => { ns.push({ id: "m"+index, label: item.member.name, "shape":"box" }); });
+ this.props.products.forEach((item,index) => { ns.push({ id: "o"+index, label: item.name, "shape":"box" }); });
+ const nodes = new DataSet(ns);
+
+ var es = [];
+ this.props.members.forEach((item,index) => { es.push({ from: 'm', to: 'm'+index }); });
+ this.props.products.forEach((item,index) => { es.push({ from: 'o', to: 'o'+index }); });
+ const edges = new DataSet(es);
+
+ const data = {
+ nodes: nodes,
+ edges: edges
+ };
+ const options = {};
+ this.network = new Network(this.appRef.current, data, options);
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ lobid — {this.props.subtitle}
+
+
+
+
+ Dies ist eine experimentelle Visualisierung der Daten aus /team.json,
+ die auch zur Darstellung von /team verwendet werden.
+
+
+
+
+
+ );
+ }
+}
diff --git a/gatsby/lobid/src/pages/visual.js b/gatsby/lobid/src/pages/visual.js
new file mode 100644
index 00000000..803a39f9
--- /dev/null
+++ b/gatsby/lobid/src/pages/visual.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { graphql } from "gatsby";
+import { Visual } from "../components/visual.html";
+
+export default ({ data }) => (
+
+);
+
+export const query = graphql`
+ query {
+ dataJson {
+ makesOffer {
+ alternateName {
+ de
+ }
+ id
+ name
+ }
+ member {
+ member {
+ id
+ image
+ name
+ }
+ roleName {
+ de
+ }
+ }
+ contactPoint {
+ contactType {
+ de
+ }
+ id
+ }
+ }
+ }
+`;
diff --git a/gatsby/lobid/static/stylesheets/lobid.css b/gatsby/lobid/static/stylesheets/lobid.css
index 9e9c1d72..c75fddc8 100644
--- a/gatsby/lobid/static/stylesheets/lobid.css
+++ b/gatsby/lobid/static/stylesheets/lobid.css
@@ -1,3 +1,9 @@
+#lobid-network {
+ width: 900px;
+ height: 500px;
+ margin: 20px;
+}
+
#header {
width: 100%;
background-image: url('https://lobid.org/images/clouds.jpg');