diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index aa43076..8fbbdee 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -23,9 +23,7 @@ import React, {Component} from 'react'; import { Container } from 'flux/utils'; import Fullscreenable from 'react-fullscreenable'; import classNames from 'classnames'; -import { Map } from 'immutable' -//import Icon from '../common/icon'; import Widget from '../widget/widget'; import EditWidget from '../widget/edit-widget'; @@ -57,86 +55,27 @@ class Dashboard extends Component { prevState = {}; } const sessionToken = LoginStore.getState().token; + + let dashboard = DashboardStore.getState().find(d => d.id === parseInt(props.match.params.dashboard, 10)); + if (dashboard == null){ + AppDispatcher.dispatch({ + type: 'dashboards/start-load', + data: props.match.params.dashboard, + token: sessionToken + }); + } + + // obtain all widgets of a dashboard + let widgets = WidgetStore.getState().filter(w => w.dashboardID === parseInt(props.match.params.dashboard, 10)); + + // compute max y coordinate let maxHeight = null; - let dashboard = Map(); - let dashboards = DashboardStore.getState() - let rawDashboard = dashboards[props.match.params.dashboard - 1]; - - - - if (rawDashboard) { - dashboard = Map(rawDashboard); - - // convert widgets list to a dictionary to be able to reference widgets - //let widgets = {}; - - let rawWidgets = WidgetStore.getState(); - - if(rawWidgets.length === 0){ - AppDispatcher.dispatch({ - type: 'widgets/start-load', - token: sessionToken, - param: '?dashboardID=1' - }); - } - - dashboard = dashboard.set('widgets', rawWidgets); - - /* for(let widget of dashboard.get('widgets')){ - console.log("load files got called") - console.log(widget); - AppDispatcher.dispatch({ - type: 'files/start-load', - token: sessionToken, - param: '?objectID=' + widget.id + '&objectType=widget' - }); - } - */ - - - - - /* if (this.state.dashboard.has('id') === false) { - AppDispatcher.dispatch({ - type: 'dashboards/start-load', - data: this.props.match.params.dashboard, - token: this.state.sessionToken - }); - } - */ - - - - /*if(Object.keys(widgets).length !== 0 ){ - this.computeHeightWithWidgets(widgets); - } - - let selectedDashboards = dashboard; - - /* this.setState({ dashboard: selectedDashboards, project: null }); - - AppDispatcher.dispatch({ - type: 'projects/start-load', - data: selectedDashboards.get('project'), - token: this.state.sessionToken - }); -*/ - - - let widgets = {}; - - for (let widget of dashboard.get('widgets')) { - widgets[Dashboard.lastWidgetKey] = widget; - Dashboard.lastWidgetKey++; - } - 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; - }, 0); - - } + }, 0); let simulationModels = []; //if (prevState.simulation != null) { @@ -144,18 +83,12 @@ class Dashboard extends Component { //} return { - rawDashboard, dashboard, - - + widgets, + simulationModels, sessionToken: sessionToken, - projects: null, //ProjectStore.getState(), - simulations: null, //SimulationStore.getState(), files: null, - project: null, - simulation: null, - simulationModels, editing: prevState.editing || false, paused: prevState.paused || false, @@ -171,6 +104,7 @@ class Dashboard extends Component { } + static getNewWidgetKey() { const widgetKey = this.lastWidgetKey; this.lastWidgetKey++; @@ -180,55 +114,17 @@ class Dashboard extends Component { //!!!won't work anymore componentDidMount() { - //document.addEventListener('keydown', this.handleKeydown.bind(this)); - if (this.state.dashboard.has('id') === false) { - AppDispatcher.dispatch({ - type: 'dashboards/start-load', - token: this.state.sessionToken, - param: '?scenarioID=1', - }); - } + // load widgets of dashboard + AppDispatcher.dispatch({ + type: 'widgets/start-load', + token: this.state.sessionToken, + param: '?dashboardID=' + this.state.dashboard.id + }); + } -/* - componentWillUnmount() { - //document.removeEventListener('keydown', this.handleKeydown.bind(this)); - } - - componentDidUpdate() { - if (this.state.dashboard._id !== this.props.match.params.dashboard) { - this.reloadDashboard(); - } - - // load depending project - if (this.state.project == null && this.state.projects) { - this.state.projects.forEach((project) => { - if (project._id === this.state.dashboard.project) { - this.setState({ project: project, simulation: null }); - - const token = localStorage.getItem('token'); - - AppDispatcher.dispatch({ - type: 'simulations/start-load', - data: project.simulation, - token - }); - } - }); - } - - // load depending simulation - if (this.state.simulation == null && this.state.simulations && this.state.project) { - this.state.simulations.forEach((simulation) => { - if (simulation._id === this.state.project.simulation) { - this.setState({ simulation: simulation }); - } - }); - } - } */ - handleKeydown(e) { switch (e.key) { case ' ': @@ -245,7 +141,6 @@ class Dashboard extends Component { } } - /* * Adapt the area's height with the position of the new widget. * Return true if the height increased, otherwise false. @@ -270,34 +165,8 @@ class Dashboard extends Component { return Object.keys(widgets).map( (key) => widgets[key]); } - reloadDashboard() { - // select dashboard by param id - this.state.dashboards.forEach((tempDashboard) => { - if (tempDashboard._id === this.props.match.params.dashboard) { - - // convert widgets list to a dictionary - var dashboard = Object.assign({}, tempDashboard, { - widgets: tempDashboard.widgets ? this.transformToWidgetsDict(tempDashboard.widgets) : {} - }); - - this.computeHeightWithWidgets(dashboard.widgets); - - this.setState({ dashboard: dashboard, project: null }); - - const token = localStorage.getItem('token'); - - AppDispatcher.dispatch({ - type: 'projects/start-load', - data: dashboard.project, - token - }); - } - }); - } - handleDrop(widget) { - widget.dashboardID = this.state.dashboard.get('id'); - console.log(widget); + widget.dashboardID = this.state.dashboard.id; AppDispatcher.dispatch({ type: 'widgets/start-add', @@ -417,7 +286,7 @@ class Dashboard extends Component { saveChanges() { // Transform to a list const dashboard = Object.assign({}, this.state.dashboard.toJS(), { - widgets: this.transformToWidgetsList(this.state.dashboard.get('widgets')) + widgets: this.transformToWidgetsList(this.state.widgets) }); AppDispatcher.dispatch({ @@ -462,14 +331,13 @@ class Dashboard extends Component { render() { - const widgets = this.state.dashboard.get('widgets'); - const grid = this.state.dashboard.get('grid'); + const grid = this.state.dashboard.grid; const boxClasses = classNames('section', 'box', { 'fullscreen-padding': this.props.isFullscreen }); let draggable = this.state.editing; return
- {this.state.dashboard.get('name')} + {this.state.dashboard.name}
e.preventDefault() }> {this.state.editing && - + } {!draggable?( - - {widgets != null && Object.keys(widgets).map(widgetKey => ( + + {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => ( ) : ( - - {widgets != null && Object.keys(widgets).map(widgetKey => ( + + {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => ( ; } } -/* -onWidgetChange={(w, k) => this.widgetChange(w, k)} -onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} -const widgets = this.state.dashboard.get('widgets'); - widgets[index] = widget; - - const dashboard = this.state.dashboard.set('widgets'); - - // Check if the height needs to be increased, the section may have shrunk if not - if (!this.increaseHeightWithWidget(widget)) { - this.computeHeightWithWidgets(dashboard.widgets); - } - - this.setState({ dashboard }, callback); -*/ let fluxContainerConverter = require('../common/FluxContainerConverter'); export default Fullscreenable()(Container.create(fluxContainerConverter.convert(Dashboard), { withProps: true }));