*/
import React from 'react';
import styled from 'styled-components';
+import LoopCache from '../../../api/LoopCache';
import { withRouter } from "react-router";
-import LoopService from '../../../api/LoopService'
+import LoopService from '../../../api/LoopService';
+import LoopComponentConverter from './LoopComponentConverter';
const LoopViewSvgDivStyled = styled.div`
overflow: hidden;
background-color: ${props => (props.theme.loopViewerBackgroundColor)};
border: 1px solid;
border-color: ${props => (props.theme.loopViewerHeaderColor)};
- height: 50%;
+ margin-left: auto;
+ margin-right:auto;
+ text-align: center;
+
`
class LoopViewSvg extends React.Component {
static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
- static operationalPolicyDataElementId = "OperationalPolicy";
-
state = {
svgContent: LoopViewSvg.emptySvg,
- loopCache: this.props.loopCache,
+ loopCache: new LoopCache({}),
+ componentModalMapping: new Map([]),
}
constructor(props) {
super(props);
- this.state.loopCache = props.loopCache;
this.handleSvgClick = this.handleSvgClick.bind(this);
this.getSvg = this.getSvg.bind(this);
+ this.state.loopCache = props.loopCache;
+ this.state.componentModalMapping = LoopComponentConverter.buildMapOfComponents(props.loopCache);
+ this.getSvg(props.loopCache.getLoopName());
}
shouldComponentUpdate(nextProps, nextState) {
return this.state.svgContent !== nextState.svgContent;
}
- componentWillReceiveProps(newProps) {
- this.setState({ loopCache: newProps.loopCache });
- this.getSvg();
+ componentWillReceiveProps(newProps) {
+ if (this.state.loopCache !== newProps.loopCache) {
+ this.setState({
+ loopCache: newProps.loopCache,
+ componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache),
+ });
+ this.getSvg(newProps.loopCache.getLoopName());
+ }
}
- getSvg() {
- LoopService.getSvg(this.state.loopCache.getLoopName()).then(svgXml => {
- if (svgXml.length !== 0) {
- this.setState({ svgContent: svgXml })
- } else {
- this.setState({ svgContent: LoopViewSvg.emptySvg })
- }
- });
+ getSvg(loopName) {
+ if (typeof loopName !== "undefined") {
+ LoopService.getSvg(loopName).then(svgXml => {
+ if (svgXml.length !== 0) {
+ this.setState({ svgContent: svgXml })
+ } else {
+ this.setState({ svgContent: LoopViewSvg.emptySvg })
+ }
+ });
+ } else {
+ this.setState({ svgContent: LoopViewSvg.emptySvg })
+ }
}
handleSvgClick(event) {
console.debug("svg click event received");
var elementName = event.target.parentNode.parentNode.parentNode.getAttribute('data-element-id');
console.info("SVG element clicked", elementName);
- if (typeof elementName === "undefined" || elementName === "VES") {
- return;
- } else if (elementName === LoopViewSvg.operationalPolicyDataElementId) {
- this.props.history.push('/operationalPolicyModal');
- } else {
- this.props.history.push('/configurationPolicyModal');
- }
+ this.props.history.push(this.state.componentModalMapping.get(elementName));
}
render() {
return (
- <LoopViewSvgDivStyled id="loop_svg" dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
+ <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
</LoopViewSvgDivStyled>
);