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