WKFS Editor
This commit is contained in:
parent
dbcba34c3b
commit
cb5fb7c808
295
pages/wkfs/editor.tsx
Normal file
295
pages/wkfs/editor.tsx
Normal file
@ -0,0 +1,295 @@
|
||||
/**
|
||||
* @author Martin Karkowski
|
||||
* @email m.karkowski@zema.de
|
||||
* @create date 2021-02-09 10:36:35
|
||||
* @modify date 2021-02-09 10:36:35
|
||||
* @desc [description]
|
||||
*/
|
||||
|
||||
import { faHashtag, faHatWizard } from "@fortawesome/free-solid-svg-icons";
|
||||
import React from "react";
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Col,
|
||||
Container,
|
||||
Jumbotron,
|
||||
Row,
|
||||
Table
|
||||
} from "react-bootstrap";
|
||||
import { dynamicSort } from "../../lib/helpers/arrayMethods";
|
||||
import { INopeDispatcher } from "../../lib/types/nope/nopeDispatcher.interface";
|
||||
import { INopeModuleDescription } from "../../lib/types/nope/nopeModule.interface";
|
||||
import { INopeObserver } from "../../lib/types/nope/nopeObservable.interface";
|
||||
import AvailableDispatchers from "../../resources/admin-shell/dispatchers";
|
||||
import { IDynamicLayoutProps } from "../../resources/ui/layout/dynamicLayout";
|
||||
import Toolbar from "../../resources/ui/layout/toolbar";
|
||||
|
||||
class WKFSEditor extends React.Component<
|
||||
{ dispatcher: INopeDispatcher },
|
||||
{ instances: INopeModuleDescription[]; connected: boolean }
|
||||
> {
|
||||
private _observer: INopeObserver[] = [];
|
||||
|
||||
private __refresh() {
|
||||
const connected = this.props.dispatcher.communicator.connected.getContent();
|
||||
|
||||
this.setState({
|
||||
instances: connected
|
||||
? this.props.dispatcher.availableInstances
|
||||
.getContent()
|
||||
.sort(dynamicSort("identifier"))
|
||||
: [],
|
||||
connected
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Function will be called if the Item has been rendered sucessfully.
|
||||
*/
|
||||
componentDidMount() {
|
||||
if (this.props.dispatcher) {
|
||||
// Subscribe to the Instances.
|
||||
|
||||
this.__refresh();
|
||||
|
||||
const _this = this;
|
||||
|
||||
this._observer.push(
|
||||
this.props.dispatcher.availableInstances.subscribe(() => {
|
||||
_this.__refresh();
|
||||
})
|
||||
);
|
||||
|
||||
this._observer.push(
|
||||
this.props.dispatcher.communicator.connected.subscribe(() => {
|
||||
_this.__refresh();
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Function, that will be called before the network fails.
|
||||
*/
|
||||
componentWillUnmount() {
|
||||
// Call the unmount
|
||||
for (const _observer of this._observer) {
|
||||
_observer.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
instances: [],
|
||||
connected: false
|
||||
};
|
||||
}
|
||||
|
||||
public render() {
|
||||
const settings: IDynamicLayoutProps = {
|
||||
components: [
|
||||
{
|
||||
visible: true,
|
||||
component() {
|
||||
return <># Test Widget 1 </>;
|
||||
},
|
||||
gridSettings: {
|
||||
h: 5,
|
||||
w: 5,
|
||||
x: 0,
|
||||
y: 0,
|
||||
minW: 3,
|
||||
maxH: 5,
|
||||
minH: 5,
|
||||
maxW: 5
|
||||
},
|
||||
id: "test",
|
||||
label: "Test Widget 1",
|
||||
props: {},
|
||||
hideable: true
|
||||
},
|
||||
{
|
||||
visible: true,
|
||||
component() {
|
||||
return (
|
||||
<TabEntry
|
||||
tabs={{
|
||||
active: "-1",
|
||||
allowNewTabs: true,
|
||||
items: []
|
||||
}}
|
||||
></TabEntry>
|
||||
);
|
||||
},
|
||||
gridSettings: {
|
||||
h: 5,
|
||||
w: 10,
|
||||
x: 5,
|
||||
y: 0,
|
||||
minW: 5,
|
||||
maxH: 5,
|
||||
minH: 5
|
||||
},
|
||||
id: "test2",
|
||||
label: "# Test Widget 2",
|
||||
props: {},
|
||||
hideable: false,
|
||||
bg: "light"
|
||||
}
|
||||
],
|
||||
layoutSettings: {
|
||||
width: process.browser ? window.innerWidth : 1920,
|
||||
autoSize: false,
|
||||
preventCollision: false,
|
||||
cols: 15,
|
||||
compactType: "horizontal"
|
||||
},
|
||||
toolbar: {
|
||||
items: [
|
||||
{
|
||||
type: "link",
|
||||
label: "docs",
|
||||
ref: "/docs",
|
||||
icon: faHatWizard
|
||||
}
|
||||
]
|
||||
},
|
||||
generateData() {
|
||||
return {
|
||||
content: "hello"
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
let idx = 0;
|
||||
return (
|
||||
<>
|
||||
<Container>
|
||||
<Toolbar<undefined>
|
||||
toolbar={{
|
||||
items: [
|
||||
{
|
||||
type: "link",
|
||||
ref: "/docs",
|
||||
label: "docs",
|
||||
icon: faHashtag
|
||||
}
|
||||
]
|
||||
}}
|
||||
generateData={() => undefined}
|
||||
brand={{
|
||||
ref: "/",
|
||||
type: "link",
|
||||
icon: "/nope/logo_light.png",
|
||||
label: " Overview"
|
||||
}}
|
||||
></Toolbar>
|
||||
<Jumbotron>
|
||||
{this.state.connected ? (
|
||||
<Alert variant={"success"}>Backend online</Alert>
|
||||
) : (
|
||||
<>
|
||||
<Alert variant={"danger"}>
|
||||
Not able to connect to the Backend <b>:'(</b>
|
||||
</Alert>
|
||||
<p>
|
||||
Please start a Nope-Backend with the following command:{" "}
|
||||
<code>
|
||||
node .\dist\lib\cli\runNopeBackend.js -c io-server
|
||||
</code>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
variant="light"
|
||||
style={{ width: "100%" }}
|
||||
onClick={() => this.__refresh()}
|
||||
>
|
||||
Manual Refresh
|
||||
</Button>
|
||||
</Jumbotron>
|
||||
<Row>
|
||||
<Col>
|
||||
<AvailableDispatchers
|
||||
dispatcher={this.props.dispatcher}
|
||||
></AvailableDispatchers>
|
||||
</Col>
|
||||
</Row>
|
||||
{this.state.instances.length > 0 ? (
|
||||
<Row>
|
||||
<Col>
|
||||
<Jumbotron>
|
||||
<h1>Instances</h1>
|
||||
<p>The Following instances has been found:</p>
|
||||
<Table striped bordered hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Identifier</th>
|
||||
<th>Type</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.state.instances.map((instance) => {
|
||||
return (
|
||||
<tr key={idx++}>
|
||||
<td>{instance.identifier}</td>
|
||||
<td>
|
||||
<code>{instance.type}</code>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
</Jumbotron>
|
||||
</Col>
|
||||
</Row>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{this.state.instances.length > 0 ? (
|
||||
<Row>
|
||||
<Col>
|
||||
<Jumbotron>
|
||||
<h1>Instances</h1>
|
||||
<p>The Following instances has been found:</p>
|
||||
<Table striped bordered hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Identifier</th>
|
||||
<th>Type</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.state.instances.map((instance) => {
|
||||
return (
|
||||
<tr key={idx++}>
|
||||
<td>{instance.identifier}</td>
|
||||
<td>
|
||||
<code>{instance.type}</code>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
</Jumbotron>
|
||||
</Col>
|
||||
</Row>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default WKFSEditor;
|
Loading…
Reference in New Issue
Block a user