From 02906c2eada1400dcf45cda413c81aa6a8ae850c Mon Sep 17 00:00:00 2001 From: irismarie Date: Tue, 27 Oct 2020 18:09:50 +0100 Subject: [PATCH] change nesting order of DOM elements --- src/dashboard/dashboard.js | 223 ++++++++++++++++-------------- src/widget/widget-context-menu.js | 1 - src/widget/widget.js | 15 +- 3 files changed, 119 insertions(+), 120 deletions(-) diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index 2fbc259..f3354cc 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -15,7 +15,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -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

, prevState: Readonly, 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

{"Loading Dashboard..."}
} @@ -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)} /> -
e.preventDefault() }> +
e.preventDefault()}> {this.state.editing && - + } - {!draggable?( - - {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => ( - + {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => ( + + - - - ))} - + onWidgetChange={this.widgetChange.bind(this)} + onWidgetStatusChange={this.widgetStatusChange.bind(this)} + editing={this.state.editing} + grid={grid} + paused={this.state.paused} + /> + + ))} + ) : ( - - {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => ( - + + {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => ( + + + onWidgetChange={this.widgetChange.bind(this)} + onWidgetStatusChange={this.widgetStatusChange.bind(this)} + editing={this.state.editing} + paused={this.state.paused} + /> + + ))} + - )} + )} diff --git a/src/widget/widget.js b/src/widget/widget.js index 98b1ce0..fae7af2 100644 --- a/src/widget/widget.js +++ b/src/widget/widget.js @@ -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 - {element} - ; - } - - return - {element} - ; + return this.createWidget(this.props.data); } }