forked from community/device-mgt-core
Jayasanka
5 years ago
parent
36f44d2999
commit
e9cb3eae91
@ -1,39 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
|
||||||
*
|
|
||||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
|
||||||
* Version 2.0 (the "License"); you may not use this file except
|
|
||||||
* in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* --- Shape for the nodes --- */
|
|
||||||
|
|
||||||
.node {
|
|
||||||
width: 75px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 20% 20% 20% 20%;
|
|
||||||
overflow: hidden;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.node .name {
|
|
||||||
padding: 5%;
|
|
||||||
font-size: 0.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
|
||||||
*
|
|
||||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
|
||||||
* Version 2.0 (the "License"); you may not use this file except
|
|
||||||
* in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
import "./CustomNode.css";
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component that renders a person's name and gender, along with icons
|
|
||||||
* representing if they have a driver license for bike and / or car.
|
|
||||||
* @param {Object} props component props to render.
|
|
||||||
*/
|
|
||||||
function CustomNode({ node }) {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="node" style={{backgroundColor: node.color}}>
|
|
||||||
<div className="name">{node.id}</div>
|
|
||||||
|
|
||||||
{/*<div className="flex-container fill-space flex-container-row">*/}
|
|
||||||
{/*<div className="fill-space">*/}
|
|
||||||
{/*<div*/}
|
|
||||||
{/*className="icon"*/}
|
|
||||||
{/*style={{ backgroundImage: `url('${isMale ? ICON_TYPES.MAN : ICON_TYPES.WOMAN}')` }}*/}
|
|
||||||
{/*/>*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
|
|
||||||
{/*<div className="icon-bar">*/}
|
|
||||||
{/*{person.hasBike && (*/}
|
|
||||||
{/*<div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.BIKE}')` }} />*/}
|
|
||||||
{/*)}*/}
|
|
||||||
{/*{person.hasCar && <div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.CAR}')` }} />}*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CustomNode;
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
|
||||||
*
|
|
||||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
|
||||||
* Version 2.0 (the "License"); you may not use this file except
|
|
||||||
* in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import * as SRD from "storm-react-diagrams";
|
|
||||||
import "storm-react-diagrams/dist/style.min.css";
|
|
||||||
import "./LifeCycle.css";
|
|
||||||
import {distributeElements} from "../../../js/utils/dagre-utils.ts";
|
|
||||||
|
|
||||||
const inPortName = "IN";
|
|
||||||
const outPortName = "OUT";
|
|
||||||
|
|
||||||
class LifeCycleGraph extends React.Component {
|
|
||||||
render() {
|
|
||||||
|
|
||||||
const lifecycle = this.props.lifecycle;
|
|
||||||
const nodes = [];
|
|
||||||
const links = [];
|
|
||||||
|
|
||||||
const engine = new SRD.DiagramEngine();
|
|
||||||
engine.installDefaultFactories();
|
|
||||||
|
|
||||||
const model = new SRD.DiagramModel();
|
|
||||||
const nextStates = lifecycle[this.props.currentStatus].proceedingStates;
|
|
||||||
|
|
||||||
|
|
||||||
Object.keys(lifecycle).forEach((stateName) => {
|
|
||||||
let color = "rgb(83, 92, 104)";
|
|
||||||
if (stateName === this.props.currentStatus) {
|
|
||||||
color = "rgb(192,255,0)";
|
|
||||||
} else if (nextStates.includes(stateName)) {
|
|
||||||
color = "rgb(0,192,255)";
|
|
||||||
}
|
|
||||||
const node = createNode(stateName, color);
|
|
||||||
nodes.push(node);
|
|
||||||
lifecycle[stateName].node = node;
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.keys(lifecycle).forEach((stateName) => {
|
|
||||||
const state = lifecycle[stateName];
|
|
||||||
//todo: remove checking property
|
|
||||||
if (state.hasOwnProperty("proceedingStates")) {
|
|
||||||
|
|
||||||
state.proceedingStates.forEach((proceedingState) => {
|
|
||||||
links.push(connectNodes(state.node, lifecycle[proceedingState].node));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
nodes.forEach((node) => {
|
|
||||||
model.addNode(node);
|
|
||||||
// node.addListener({
|
|
||||||
// selectionChanged: (node, isSelected) => {
|
|
||||||
// console.log(isSelected);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
links.forEach((link) => {
|
|
||||||
model.addLink(link);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
let distributedModel = getDistributedModel(engine, model);
|
|
||||||
engine.setDiagramModel(distributedModel);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{height: 500}}>
|
|
||||||
<SRD.DiagramWidget diagramEngine={engine} maxNumberPointsPerLink={10} smartRouting={true}/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDistributedModel(engine, model) {
|
|
||||||
const serialized = model.serializeDiagram();
|
|
||||||
const distributedSerializedDiagram = distributeElements(serialized);
|
|
||||||
|
|
||||||
//deserialize the model
|
|
||||||
let deSerializedModel = new SRD.DiagramModel();
|
|
||||||
deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine);
|
|
||||||
return deSerializedModel;
|
|
||||||
}
|
|
||||||
|
|
||||||
function createNode(name, color) {
|
|
||||||
const node = new SRD.DefaultNodeModel(name, color);
|
|
||||||
node.addPort(new SRD.DefaultPortModel(true, inPortName, " "));
|
|
||||||
node.addPort(new SRD.DefaultPortModel(false, outPortName, " "));
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
let count = 0;
|
|
||||||
|
|
||||||
function connectNodes(nodeFrom, nodeTo) {
|
|
||||||
return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName));
|
|
||||||
}
|
|
||||||
|
|
||||||
function f() {
|
|
||||||
// console.log(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LifeCycleGraph;
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
|
||||||
*
|
|
||||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
|
||||||
* Version 2.0 (the "License"); you may not use this file except
|
|
||||||
* in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import { Upload, Icon, message } from 'antd';
|
|
||||||
|
|
||||||
function getBase64(img, callback) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.addEventListener('load', () => callback(reader.result));
|
|
||||||
reader.readAsDataURL(img);
|
|
||||||
}
|
|
||||||
|
|
||||||
function beforeUpload(file) {
|
|
||||||
const isJPG = file.type === 'image/jpeg';
|
|
||||||
if (!isJPG) {
|
|
||||||
message.error('You can only upload JPG file!');
|
|
||||||
}
|
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
||||||
if (!isLt2M) {
|
|
||||||
message.error('Image must smaller than 2MB!');
|
|
||||||
}
|
|
||||||
return isJPG && isLt2M;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
class IconImage extends React.Component {
|
|
||||||
state = {
|
|
||||||
loading: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChange = (info) => {
|
|
||||||
if (info.file.status === 'uploading') {
|
|
||||||
this.setState({ loading: true });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (info.file.status === 'done') {
|
|
||||||
// Get this url from response in real world.
|
|
||||||
getBase64(info.file.originFileObj, imageUrl => this.setState({
|
|
||||||
imageUrl,
|
|
||||||
loading: false,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const uploadButton = (
|
|
||||||
<div>
|
|
||||||
<Icon type={this.state.loading ? 'loading' : 'plus'} />
|
|
||||||
<div className="ant-upload-text">Upload</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
const imageUrl = this.state.imageUrl;
|
|
||||||
return (
|
|
||||||
<Upload
|
|
||||||
name="avatar"
|
|
||||||
listType="picture-card"
|
|
||||||
className="avatar-uploader"
|
|
||||||
showUploadList={false}
|
|
||||||
action="//jsonplaceholder.typicode.com/posts/"
|
|
||||||
beforeUpload={beforeUpload}
|
|
||||||
onChange={this.handleChange}
|
|
||||||
>
|
|
||||||
{imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
|
|
||||||
</Upload>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default IconImage;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
|
||||||
*
|
|
||||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
|
||||||
* Version 2.0 (the "License"); you may not use this file except
|
|
||||||
* in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import { Upload, Icon, Modal} from 'antd';
|
|
||||||
|
|
||||||
|
|
||||||
class UploadScreenshots extends React.Component {
|
|
||||||
state = {
|
|
||||||
previewVisible: false,
|
|
||||||
previewImage: '',
|
|
||||||
fileList: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
handleCancel = () => this.setState({ previewVisible: false });
|
|
||||||
|
|
||||||
handlePreview = (file) => {
|
|
||||||
this.setState({
|
|
||||||
previewImage: file.url || file.thumbUrl,
|
|
||||||
previewVisible: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChange = ({ fileList }) => this.setState({ fileList });
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { previewVisible, previewImage, fileList } = this.state;
|
|
||||||
const uploadButton = (
|
|
||||||
<div>
|
|
||||||
<Icon type="plus" />
|
|
||||||
<div className="ant-upload-text">Upload</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<div className="clearfix">
|
|
||||||
<Upload
|
|
||||||
action="//jsonplaceholder.typicode.com/posts/"
|
|
||||||
listType="picture-card"
|
|
||||||
fileList={fileList}
|
|
||||||
onPreview={this.handlePreview}
|
|
||||||
onChange={this.handleChange}
|
|
||||||
>
|
|
||||||
{fileList.length >= 3 ? null : uploadButton}
|
|
||||||
</Upload>
|
|
||||||
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
|
||||||
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default UploadScreenshots;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
|
||||||
*
|
|
||||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
|
||||||
* Version 2.0 (the "License"); you may not use this file except
|
|
||||||
* in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import { Upload, Icon, Modal} from 'antd';
|
|
||||||
|
|
||||||
|
|
||||||
class AddTagModal extends React.Component {
|
|
||||||
state = {
|
|
||||||
previewVisible: false,
|
|
||||||
previewImage: '',
|
|
||||||
fileList: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
handleCancel = () => this.setState({ previewVisible: false });
|
|
||||||
|
|
||||||
handlePreview = (file) => {
|
|
||||||
this.setState({
|
|
||||||
previewImage: file.url || file.thumbUrl,
|
|
||||||
previewVisible: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleChange = ({ fileList }) => this.setState({ fileList });
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { previewVisible, previewImage, fileList } = this.state;
|
|
||||||
const uploadButton = (
|
|
||||||
<div>
|
|
||||||
<Icon type="plus" />
|
|
||||||
<div className="ant-upload-text">Upload</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<div className="clearfix">
|
|
||||||
<Upload
|
|
||||||
action="//jsonplaceholder.typicode.com/posts/"
|
|
||||||
listType="picture-card"
|
|
||||||
fileList={fileList}
|
|
||||||
onPreview={this.handlePreview}
|
|
||||||
onChange={this.handleChange}
|
|
||||||
>
|
|
||||||
{fileList.length >= 3 ? null : uploadButton}
|
|
||||||
</Upload>
|
|
||||||
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
|
||||||
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default AddTagModal;
|
|
||||||
Loading…
Reference in new issue