mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
change nesting order of DOM elements
This commit is contained in:
irismarie
parent
c5724e4195
commit
02906c2ead
3 changed files with 119 additions and 120 deletions
|
|
@ -15,7 +15,7 @@
|
|||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import Fullscreenable from 'react-fullscreenable';
|
||||
import classNames from 'classnames';
|
||||
|
|
@ -38,13 +38,15 @@ import ConfigStore from '../componentconfig/config-store'
|
|||
import AppDispatcher from '../common/app-dispatcher';
|
||||
|
||||
import 'react-contexify/dist/ReactContexify.min.css';
|
||||
import WidgetContainer from '../widget/widget-container';
|
||||
import EditableWidgetContainer from '../widget/editable-widget-container';
|
||||
|
||||
class Dashboard extends Component {
|
||||
|
||||
static lastWidgetKey = 0;
|
||||
static webSocketsOpened = false;
|
||||
static getStores() {
|
||||
return [ DashboardStore, FileStore, WidgetStore, SignalStore, ConfigStore, ICStore];
|
||||
return [DashboardStore, FileStore, WidgetStore, SignalStore, ConfigStore, ICStore];
|
||||
}
|
||||
|
||||
static calculateState(prevState, props) {
|
||||
|
|
@ -55,7 +57,7 @@ class Dashboard extends Component {
|
|||
const sessionToken = localStorage.getItem("token");
|
||||
|
||||
let dashboard = DashboardStore.getState().find(d => d.id === parseInt(props.match.params.dashboard, 10));
|
||||
if (dashboard == null){
|
||||
if (dashboard == null) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'dashboards/start-load',
|
||||
data: props.match.params.dashboard,
|
||||
|
|
@ -68,11 +70,11 @@ class Dashboard extends Component {
|
|||
|
||||
// compute max y coordinate
|
||||
let maxHeight = null;
|
||||
maxHeight = Object.keys(widgets).reduce( (maxHeightSoFar, widgetKey) => {
|
||||
maxHeight = Object.keys(widgets).reduce((maxHeightSoFar, widgetKey) => {
|
||||
let thisWidget = widgets[widgetKey];
|
||||
let thisWidgetHeight = thisWidget.y + thisWidget.height;
|
||||
|
||||
return thisWidgetHeight > maxHeightSoFar? thisWidgetHeight : maxHeightSoFar;
|
||||
return thisWidgetHeight > maxHeightSoFar ? thisWidgetHeight : maxHeightSoFar;
|
||||
}, 0);
|
||||
|
||||
|
||||
|
|
@ -82,11 +84,10 @@ class Dashboard extends Component {
|
|||
if (dashboard !== undefined) {
|
||||
configs = ConfigStore.getState().filter(config => config.scenarioID === dashboard.scenarioID);
|
||||
files = FileStore.getState().filter(file => file.scenarioID === dashboard.scenarioID);
|
||||
if(dashboard.height === 0){
|
||||
if (dashboard.height === 0) {
|
||||
dashboard.height = 400;
|
||||
}
|
||||
else if(maxHeight + 80 > dashboard.height)
|
||||
{
|
||||
else if (maxHeight + 80 > dashboard.height) {
|
||||
dashboard.height = maxHeight + 80;
|
||||
}
|
||||
}
|
||||
|
|
@ -95,9 +96,9 @@ class Dashboard extends Component {
|
|||
let signals = []
|
||||
let allSignals = SignalStore.getState();
|
||||
let sig, con;
|
||||
for (sig of allSignals){
|
||||
for (con of configs){
|
||||
if (sig.configID === con.id){
|
||||
for (sig of allSignals) {
|
||||
for (con of configs) {
|
||||
if (sig.configID === con.id) {
|
||||
signals.push(sig);
|
||||
}
|
||||
}
|
||||
|
|
@ -105,11 +106,11 @@ class Dashboard extends Component {
|
|||
|
||||
// filter ICs to the ones used by this scenario
|
||||
let ics = []
|
||||
if (configs.length > 0){
|
||||
if (configs.length > 0) {
|
||||
ics = ICStore.getState().filter(ic => {
|
||||
let ICused = false;
|
||||
for (let config of configs){
|
||||
if (ic.id === config.icID){
|
||||
for (let config of configs) {
|
||||
if (ic.id === config.icID) {
|
||||
ICused = true;
|
||||
break;
|
||||
}
|
||||
|
|
@ -130,13 +131,13 @@ class Dashboard extends Component {
|
|||
editing: prevState.editing || false,
|
||||
paused: prevState.paused || false,
|
||||
|
||||
editModal: prevState.editModal || false,
|
||||
editModal: prevState.editModal || false,
|
||||
editOutputSignalsModal: prevState.editOutputSignals || false,
|
||||
editInputSignalsModal: prevState.editInputSignals || false,
|
||||
filesEditModal: prevState.filesEditModal || false,
|
||||
filesEditSaveState: prevState.filesEditSaveState || [],
|
||||
modalData: null,
|
||||
modalIndex: null,
|
||||
modalData: null,
|
||||
modalIndex: null,
|
||||
widgetChangeData: [],
|
||||
widgetOrigIDs: prevState.widgetOrigIDs || [],
|
||||
|
||||
|
|
@ -172,9 +173,9 @@ class Dashboard extends Component {
|
|||
}
|
||||
|
||||
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
|
||||
// open web sockets if ICs are already known and sockets are not opened yet
|
||||
if(this.state.ics !== undefined && !Dashboard.webSocketsOpened){
|
||||
if(this.state.ics.length > 0){
|
||||
// open web sockets if ICs are already known and sockets are not opened yet
|
||||
if (this.state.ics !== undefined && !Dashboard.webSocketsOpened) {
|
||||
if (this.state.ics.length > 0) {
|
||||
console.log("Starting to open IC websockets:", this.state.ics);
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/open-sockets',
|
||||
|
|
@ -186,7 +187,7 @@ class Dashboard extends Component {
|
|||
}
|
||||
|
||||
|
||||
if(prevState.dashboard === undefined && this.state.dashboard !== undefined){
|
||||
if (prevState.dashboard === undefined && this.state.dashboard !== undefined) {
|
||||
// the dashboard was loaded, so that the scenarioID is available
|
||||
|
||||
// load configs of scenario
|
||||
|
|
@ -231,7 +232,7 @@ class Dashboard extends Component {
|
|||
|
||||
|
||||
transformToWidgetsList(widgets) {
|
||||
return Object.keys(widgets).map( (key) => widgets[key]);
|
||||
return Object.keys(widgets).map((key) => widgets[key]);
|
||||
}
|
||||
|
||||
handleDrop(widget) {
|
||||
|
|
@ -252,35 +253,35 @@ class Dashboard extends Component {
|
|||
this.widgetChange(updated_widget, key, this.saveChanges);
|
||||
}
|
||||
|
||||
widgetChange(widget, index, callback = null){
|
||||
widgetChange(widget, index, callback = null) {
|
||||
let temp = this.state.widgetChangeData;
|
||||
temp.push(widget);
|
||||
this.setState({widgetChangeData: temp});
|
||||
this.setState({ widgetChangeData: temp });
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
editWidget(widget, index){
|
||||
editWidget(widget, index) {
|
||||
this.setState({ editModal: true, modalData: widget, modalIndex: index });
|
||||
};
|
||||
|
||||
startEditFiles(){
|
||||
startEditFiles() {
|
||||
let tempFiles = [];
|
||||
this.state.files.forEach( file => {
|
||||
this.state.files.forEach(file => {
|
||||
tempFiles.push({
|
||||
id: file.id,
|
||||
name: file.name
|
||||
});
|
||||
})
|
||||
this.setState({filesEditModal: true, filesEditSaveState: tempFiles});
|
||||
this.setState({ filesEditModal: true, filesEditSaveState: tempFiles });
|
||||
}
|
||||
|
||||
closeEditFiles(){
|
||||
closeEditFiles() {
|
||||
this.setState({ filesEditModal: false });
|
||||
}
|
||||
|
||||
closeEdit(data){
|
||||
closeEdit(data) {
|
||||
|
||||
if (data == null) {
|
||||
|
||||
|
|
@ -315,11 +316,11 @@ class Dashboard extends Component {
|
|||
};
|
||||
|
||||
|
||||
startEditing(){
|
||||
startEditing() {
|
||||
let originalIDs = [];
|
||||
this.state.widgets.forEach( widget => {
|
||||
this.state.widgets.forEach(widget => {
|
||||
originalIDs.push(widget.id);
|
||||
if(widget.type === 'Slider' || widget.type === 'NumberInput' || widget.type === 'Button'){
|
||||
if (widget.type === 'Slider' || widget.type === 'NumberInput' || widget.type === 'Button') {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-edit',
|
||||
token: this.state.sessionToken,
|
||||
|
|
@ -339,21 +340,21 @@ class Dashboard extends Component {
|
|||
token: this.state.sessionToken
|
||||
});
|
||||
|
||||
this.state.widgetChangeData.forEach( widget => {
|
||||
this.state.widgetChangeData.forEach(widget => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-edit',
|
||||
token: this.state.sessionToken,
|
||||
data: widget
|
||||
});
|
||||
});
|
||||
this.setState({ editing: false, widgetChangeData: []});
|
||||
this.setState({ editing: false, widgetChangeData: [] });
|
||||
};
|
||||
|
||||
saveChanges() {
|
||||
// Transform to a list
|
||||
const dashboard = Object.assign({}, this.state.dashboard.toJS(), {
|
||||
widgets: this.transformToWidgetsList(this.state.widgets)
|
||||
});
|
||||
widgets: this.transformToWidgetsList(this.state.widgets)
|
||||
});
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'dashboards/start-edit',
|
||||
|
|
@ -364,16 +365,16 @@ class Dashboard extends Component {
|
|||
|
||||
cancelEditing() {
|
||||
//raw widget has no id -> cannot be deleted in its original form
|
||||
this.state.widgets.forEach(widget => {
|
||||
let tempID = this.state.widgetOrigIDs.find(element => element === widget.id);
|
||||
if(typeof tempID === 'undefined'){
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-remove',
|
||||
data: widget,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
}
|
||||
})
|
||||
this.state.widgets.forEach(widget => {
|
||||
let tempID = this.state.widgetOrigIDs.find(element => element === widget.id);
|
||||
if (typeof tempID === 'undefined') {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-remove',
|
||||
data: widget,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-load',
|
||||
|
|
@ -386,7 +387,7 @@ class Dashboard extends Component {
|
|||
data: this.props.match.params.dashboard,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
this.setState({ editing: false, widgetChangeData: []});
|
||||
this.setState({ editing: false, widgetChangeData: [] });
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -400,30 +401,30 @@ class Dashboard extends Component {
|
|||
|
||||
setDashboardSize(value) {
|
||||
const maxHeight = Object.values(this.state.widgets).reduce((currentHeight, widget) => {
|
||||
const absolutHeight = widget.y + widget.height;
|
||||
const absolutHeight = widget.y + widget.height;
|
||||
|
||||
return absolutHeight > currentHeight ? absolutHeight : currentHeight;
|
||||
return absolutHeight > currentHeight ? absolutHeight : currentHeight;
|
||||
}, 0);
|
||||
let dashboard = this.state.dashboard;
|
||||
|
||||
if(value === -1){
|
||||
if (value === -1) {
|
||||
|
||||
let tempHeight = this.state.dashboard.height - 50;
|
||||
|
||||
if(tempHeight >= 400 && tempHeight >= (maxHeight + 80)){
|
||||
if (tempHeight >= 400 && tempHeight >= (maxHeight + 80)) {
|
||||
dashboard.height = tempHeight;
|
||||
this.setState({dashboard});
|
||||
this.setState({ dashboard });
|
||||
}
|
||||
}
|
||||
else{
|
||||
dashboard.height = this.state.dashboard.height +50;
|
||||
this.setState( {dashboard});
|
||||
else {
|
||||
dashboard.height = this.state.dashboard.height + 50;
|
||||
this.setState({ dashboard });
|
||||
}
|
||||
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
pauseData(){
|
||||
pauseData() {
|
||||
this.setState({ paused: true });
|
||||
};
|
||||
|
||||
|
|
@ -431,25 +432,25 @@ class Dashboard extends Component {
|
|||
this.setState({ paused: false });
|
||||
};
|
||||
|
||||
editInputSignals(){
|
||||
this.setState({editInputSignalsModal: true});
|
||||
editInputSignals() {
|
||||
this.setState({ editInputSignalsModal: true });
|
||||
};
|
||||
|
||||
editOutputSignals(){
|
||||
this.setState({editOutputSignalsModal: true});
|
||||
editOutputSignals() {
|
||||
this.setState({ editOutputSignalsModal: true });
|
||||
};
|
||||
|
||||
closeEditSignalsModal(direction){
|
||||
if( direction === "in") {
|
||||
this.setState({editInputSignalsModal: false});
|
||||
} else if( direction === "out"){
|
||||
this.setState({editOutputSignalsModal: false});
|
||||
closeEditSignalsModal(direction) {
|
||||
if (direction === "in") {
|
||||
this.setState({ editInputSignalsModal: false });
|
||||
} else if (direction === "out") {
|
||||
this.setState({ editOutputSignalsModal: false });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
if (this.state.dashboard === undefined){
|
||||
if (this.state.dashboard === undefined) {
|
||||
return <div className="section-title"> <span>{"Loading Dashboard..."}</span> </div>
|
||||
}
|
||||
|
||||
|
|
@ -473,55 +474,63 @@ class Dashboard extends Component {
|
|||
onFullscreen={this.props.toggleFullscreen}
|
||||
onPause={this.pauseData.bind(this)}
|
||||
onUnpause={this.unpauseData.bind(this)}
|
||||
onEditFiles = {this.startEditFiles.bind(this)}
|
||||
onEditOutputSignals = {this.editOutputSignals.bind(this)}
|
||||
onEditInputSignals = {this.editInputSignals.bind(this)}
|
||||
onEditFiles={this.startEditFiles.bind(this)}
|
||||
onEditOutputSignals={this.editOutputSignals.bind(this)}
|
||||
onEditInputSignals={this.editInputSignals.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>
|
||||
<div className="box box-content" onContextMenu={(e) => e.preventDefault()}>
|
||||
{this.state.editing &&
|
||||
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} dashboard={this.state.dashboard} onDashboardSizeChange={this.setDashboardSize.bind(this)} widgets={this.state.widgets} />
|
||||
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} dashboard={this.state.dashboard} onDashboardSizeChange={this.setDashboardSize.bind(this)} widgets={this.state.widgets} />
|
||||
}
|
||||
{!draggable?(
|
||||
<WidgetArea widgets={this.state.widgets} dropZoneHeight = {dropZoneHeight} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
|
||||
<WidgetContextMenu
|
||||
key={widgetKey}
|
||||
index={parseInt(widgetKey,10)}
|
||||
widget={this.state.widgets[widgetKey]}
|
||||
onEdit={this.editWidget.bind(this)}
|
||||
onDelete={this.deleteWidget.bind(this)}
|
||||
onChange={this.widgetChange.bind(this)}
|
||||
{!draggable ? (
|
||||
<WidgetArea widgets={this.state.widgets} dropZoneHeight={dropZoneHeight} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
|
||||
<WidgetContainer widget={this.state.widgets[widgetKey]}>
|
||||
<WidgetContextMenu
|
||||
key={widgetKey}
|
||||
index={parseInt(widgetKey, 10)}
|
||||
widget={this.state.widgets[widgetKey]}
|
||||
onEdit={this.editWidget.bind(this)}
|
||||
onDelete={this.deleteWidget.bind(this)}
|
||||
onChange={this.widgetChange.bind(this)}
|
||||
|
||||
onWidgetChange={this.widgetChange.bind(this)}
|
||||
onWidgetStatusChange={this.widgetStatusChange.bind(this)}
|
||||
editing={this.state.editing}
|
||||
grid={grid}
|
||||
paused={this.state.paused}
|
||||
/>
|
||||
|
||||
|
||||
))}
|
||||
</WidgetArea>
|
||||
onWidgetChange={this.widgetChange.bind(this)}
|
||||
onWidgetStatusChange={this.widgetStatusChange.bind(this)}
|
||||
editing={this.state.editing}
|
||||
grid={grid}
|
||||
paused={this.state.paused}
|
||||
/>
|
||||
</WidgetContainer>
|
||||
))}
|
||||
</WidgetArea>
|
||||
) : (
|
||||
<WidgetArea widgets={this.state.widgets} editing={this.state.editing} dropZoneHeight= {dropZoneHeight} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
|
||||
<Widget
|
||||
key={widgetKey}
|
||||
data={this.state.widgets[widgetKey]}
|
||||
onWidgetChange={this.widgetChange.bind(this)}
|
||||
onWidgetStatusChange={this.widgetStatusChange.bind(this)}
|
||||
editing={this.state.editing}
|
||||
index={parseInt(widgetKey,10)}
|
||||
grid={grid}
|
||||
paused={this.state.paused}
|
||||
/>
|
||||
<WidgetArea widgets={this.state.widgets} editing={this.state.editing} dropZoneHeight={dropZoneHeight} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
|
||||
<EditableWidgetContainer
|
||||
widget={this.state.widgets[widgetKey]}
|
||||
grid={grid}
|
||||
index={parseInt(widgetKey, 10)}
|
||||
onWidgetChange={this.widgetChange.bind(this)}>
|
||||
<WidgetContextMenu
|
||||
key={widgetKey}
|
||||
index={parseInt(widgetKey, 10)}
|
||||
widget={this.state.widgets[widgetKey]}
|
||||
onEdit={this.editWidget.bind(this)}
|
||||
onDelete={this.deleteWidget.bind(this)}
|
||||
onChange={this.widgetChange.bind(this)}
|
||||
|
||||
))}
|
||||
</WidgetArea>
|
||||
onWidgetChange={this.widgetChange.bind(this)}
|
||||
onWidgetStatusChange={this.widgetStatusChange.bind(this)}
|
||||
editing={this.state.editing}
|
||||
paused={this.state.paused}
|
||||
/>
|
||||
</EditableWidgetContainer>
|
||||
))}
|
||||
</WidgetArea>
|
||||
|
||||
)}
|
||||
)}
|
||||
|
||||
<EditWidget
|
||||
sessionToken={this.state.sessionToken}
|
||||
|
|
|
|||
|
|
@ -116,7 +116,6 @@ class WidgetContextMenu extends React.Component {
|
|||
onWidgetStatusChange={this.props.onWidgetStatusChange}
|
||||
editing={this.props.editing}
|
||||
index={this.props.index}
|
||||
grid={this.props.grid}
|
||||
paused={this.props.paused}
|
||||
/>
|
||||
</MenuProvider>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,8 @@ import WidgetTopology from './widgets/topology';
|
|||
import WidgetLine from './widgets/line';
|
||||
//import WidgetHTML from './widgets/html';
|
||||
|
||||
import WidgetEditMenu from '../widget/widget-edit-menu';
|
||||
|
||||
import '../styles/widgets.css';
|
||||
|
||||
class Widget extends React.Component {
|
||||
|
|
@ -230,20 +232,9 @@ class Widget extends React.Component {
|
|||
|
||||
return null;
|
||||
}
|
||||
rn
|
||||
|
||||
render() {
|
||||
const element = this.createWidget(this.props.data);
|
||||
|
||||
if (this.props.editing) {
|
||||
return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={this.props.index} onWidgetChange={this.props.onWidgetChange}>
|
||||
{element}
|
||||
</EditableWidgetContainer>;
|
||||
}
|
||||
|
||||
return <WidgetContainer widget={this.props.data}>
|
||||
{element}
|
||||
</WidgetContainer>;
|
||||
return this.createWidget(this.props.data);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue