mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
make pintura npm package an optional dependency, WIP #379
This commit is contained in:
parent
25b37a663e
commit
a40d138165
3 changed files with 37 additions and 21 deletions
|
@ -28,7 +28,6 @@
|
|||
"isomorphic-form-data": "^2.0.0",
|
||||
"jsonwebtoken": "^8.5.1",
|
||||
"jszip": "^3.7.1",
|
||||
"libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.1",
|
||||
"moment-duration-format": "^2.3.2",
|
||||
|
@ -58,6 +57,9 @@
|
|||
"typescript": "^4.5.5",
|
||||
"xstate": "^4.29.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-scripts": "^4.0.3"
|
||||
},
|
||||
|
|
|
@ -23,6 +23,13 @@ import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
|
|||
import Icon from "../common/icon";
|
||||
import ToolboxItem from './toolbox-item';
|
||||
|
||||
let hasPintura = true;
|
||||
try{
|
||||
let cimsvg = require('libcimsvg')
|
||||
} catch (err) {
|
||||
hasPintura = false;
|
||||
}
|
||||
|
||||
class WidgetToolbox extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -104,8 +111,8 @@ class WidgetToolbox extends React.Component {
|
|||
height: '40px',
|
||||
}
|
||||
|
||||
const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
|
||||
const topologyItemMsg = thereIsTopologyWidget? 'Currently only one is supported' : '';
|
||||
let disableTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
|
||||
let topologyItemMsg = disableTopologyWidget? 'Currently only one is supported' : '';
|
||||
|
||||
return (
|
||||
|
||||
|
@ -170,7 +177,8 @@ class WidgetToolbox extends React.Component {
|
|||
<ToolboxItem name='Value' type='widget' icon = 'plus' />
|
||||
<ToolboxItem name='Lamp' type='widget' icon = 'plus' />
|
||||
<ToolboxItem name='Gauge' type='widget' icon = 'plus'/>
|
||||
<ToolboxItem name='Topology' type='widget' disabled={thereIsTopologyWidget} title={topologyItemMsg} icon = 'plus'/>
|
||||
{hasPintura ? <ToolboxItem name='Topology' type='widget' disabled={disableTopologyWidget} title={topologyItemMsg} icon = 'plus'/> : <></>}
|
||||
|
||||
<ToolboxItem name='TimeOffset' type='widget' icon = 'plus' />
|
||||
<ToolboxItem name='ICstatus' type='widget' icon = 'plus' />
|
||||
<OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"?"}`}> Drag and drop widgets onto the dashboard </Tooltip>} >
|
||||
|
|
|
@ -18,7 +18,6 @@
|
|||
import React from 'react';
|
||||
import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
|
||||
import '../../styles/simple-spinner.css';
|
||||
import { cimsvg } from 'libcimsvg';
|
||||
import AppDispatcher from "../../common/app-dispatcher";
|
||||
|
||||
// Do not show Pintura's grid
|
||||
|
@ -153,23 +152,30 @@ class WidgetTopology extends React.Component {
|
|||
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
|
||||
|
||||
if(this.state.dashboardState === 'ready'){
|
||||
// Topology file incl data downloaded, init SVG (should happen only once!)
|
||||
if (this.svgElem) {
|
||||
let cimsvgInstance = new cimsvg(this.svgElem.current);
|
||||
cimsvg.setCimsvg(cimsvgInstance);
|
||||
cimsvgInstance.setFileCount(1);
|
||||
// transform data blob into string format
|
||||
this.state.file.data.text().then(function(content) {
|
||||
cimsvgInstance.loadFile(content);
|
||||
cimsvgInstance.fit();
|
||||
attachComponentEvents();
|
||||
});
|
||||
this.setState({dashboardState: 'loaded'});
|
||||
try{
|
||||
// Topology file incl data downloaded, init SVG (should happen only once!)
|
||||
if (this.svgElem) {
|
||||
let cimsvg = require('libcimsvg');
|
||||
let cimsvgInstance = new cimsvg(this.svgElem.current);
|
||||
cimsvg.setCimsvg(cimsvgInstance);
|
||||
cimsvgInstance.setFileCount(1);
|
||||
// transform data blob into string format
|
||||
this.state.file.data.text().then(function (content) {
|
||||
cimsvgInstance.loadFile(content);
|
||||
cimsvgInstance.fit();
|
||||
attachComponentEvents();
|
||||
});
|
||||
this.setState({dashboardState: 'loaded'});
|
||||
} else {
|
||||
console.error("The svgElem variable is not initialized before the attempt to create the cimsvg instance.");
|
||||
}
|
||||
}catch(err) {
|
||||
this.setState(
|
||||
{
|
||||
dashboardState: 'show_message',
|
||||
message: 'The topology widget is not supported in this instance of VILLASweb. Contact an administrator for more details.'
|
||||
});
|
||||
}
|
||||
else {
|
||||
console.error("The svgElem variable is not initialized before the attempt to create the cimsvg instance.");
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue