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 ( +
+
+ + NRW-Wappen   lobid | + LOD-Dienste des{" "} + + hbz — Hochschulbibliothekszentrum des Landes NRW + + + + + {this.props.companyDetails} + + {" | "} + + {this.props.privacy} + + {" | "} + + Twitter + + + GitHub + + + Blog + + +
+
+ ) + } +} \ 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}

-
-
- - NRW-Wappen   lobid | - LOD-Dienste des{" "} - - hbz — Hochschulbibliothekszentrum des Landes NRW - - - - - {this.props.companyDetails} - - {" | "} - - {this.props.privacy} - - {" | "} - - Twitter - - - GitHub - - - Blog - - -
-
+
); } 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 ( +
+

+

+
+
+

+ hbz logo + 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');