mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
renamed visualization to dashboard
This commit is contained in:
Laura Fuentes Grau
parent
c9ad98bca0
commit
5ecb254e13
17 changed files with 135 additions and 134 deletions
|
|
@ -43,7 +43,7 @@ import HeaderMenu from './common/header-menu';
|
|||
//import Projects from './project/projects';
|
||||
//import Project from './project/project';
|
||||
import Simulators from './simulator/simulators';
|
||||
import Visualization from './visualization/visualization';
|
||||
import Dashboard from './dashboard/dashboard';
|
||||
//import Simulations from './simulation/simulations';
|
||||
//import Simulation from './simulation/simulation';
|
||||
import Scenarios from './scenario/scenarios';
|
||||
|
|
@ -145,7 +145,7 @@ class App extends React.Component {
|
|||
<div className={`app-content app-content-margin-left`}>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/home" component={Home} />
|
||||
<Route path="/visualizations/:visualization" component={Visualization} />
|
||||
<Route path="/dashboards/:dashboard" component={Dashboard} />
|
||||
<Route exact path="/scenarios" component={Scenarios} />
|
||||
<Route path="/scenarios/:scenario" component={Scenario} />
|
||||
<Route path="/simulationModel/:simulationModel" component={SimulationModel} />
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ class ArrayStore extends ReduceStore {
|
|||
reduce(state, action) {
|
||||
switch (action.type) {
|
||||
case this.type + '/start-load':
|
||||
|
||||
if (Array.isArray(action.data)) {
|
||||
action.data.forEach((id) => {
|
||||
this.dataManager.load(id, action.token);
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ class Home extends React.Component {
|
|||
</p>
|
||||
{/*
|
||||
<p>
|
||||
This instance is hosting <Link to="/projects" title="Projects">{this.getCounts('projects')} projects</Link> consisting of <Link to="/simulators" title="Simulators">{this.getCounts('simulators')} simulators</Link>, {this.getCounts('visualizations')} visualizations and <Link to="/simulations" title="Simulations">{this.getCounts('simulations')} simulations</Link>.
|
||||
This instance is hosting <Link to="/projects" title="Projects">{this.getCounts('projects')} projects</Link> consisting of <Link to="/simulators" title="Simulators">{this.getCounts('simulators')} simulators</Link>, {this.getCounts('dashboards')} dashboards and <Link to="/simulations" title="Simulations">{this.getCounts('simulations')} simulations</Link>.
|
||||
A total of <Link to="/users" title="Users">{this.getCounts('users')} users</Link> are registered.<br />
|
||||
</p>
|
||||
*/}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* File: visualization-store.js
|
||||
* File: dashboard-store.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 02.03.2017
|
||||
*
|
||||
|
|
@ -20,6 +20,6 @@
|
|||
******************************************************************************/
|
||||
|
||||
import ArrayStore from '../common/array-store';
|
||||
import VisualizationsDataManager from './visualizations-data-manager';
|
||||
import DashboardsDataManager from './dashboards-data-manager';
|
||||
|
||||
export default new ArrayStore('visualizations', VisualizationsDataManager);
|
||||
export default new ArrayStore('dashboards', DashboardsDataManager);
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* File: visualization.js
|
||||
* File: dashboard.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 02.03.2017
|
||||
*
|
||||
|
|
@ -36,7 +36,7 @@ import EditWidget from '../widget/edit-widget';
|
|||
import Grid from './grid';
|
||||
|
||||
import UserStore from '../user/user-store';
|
||||
import VisualizationStore from './visualization-store';
|
||||
import DashboardStore from './dashboard-store';
|
||||
import ProjectStore from '../project/project-store';
|
||||
import SimulationStore from '../simulation/simulation-store';
|
||||
import SimulationModelStore from '../simulationmodel/simulation-model-store';
|
||||
|
|
@ -47,9 +47,9 @@ import NotificationsFactory from '../common/data-managers/notifications-factory'
|
|||
|
||||
import 'react-contexify/dist/ReactContexify.min.css';
|
||||
|
||||
class Visualization extends React.Component {
|
||||
class Dashboard extends React.Component {
|
||||
static getStores() {
|
||||
return [ VisualizationStore, ProjectStore, SimulationStore, SimulationModelStore, FileStore, UserStore ];
|
||||
return [ DashboardStore, ProjectStore, SimulationStore, SimulationModelStore, FileStore, UserStore ];
|
||||
}
|
||||
|
||||
static calculateState(prevState, props) {
|
||||
|
|
@ -64,12 +64,12 @@ class Visualization extends React.Component {
|
|||
|
||||
return {
|
||||
sessionToken: UserStore.getState().token,
|
||||
visualizations: VisualizationStore.getState(),
|
||||
dashboards: DashboardStore.getState(),
|
||||
projects: ProjectStore.getState(),
|
||||
simulations: SimulationStore.getState(),
|
||||
files: FileStore.getState(),
|
||||
|
||||
visualization: prevState.visualization || {},
|
||||
dashboard: prevState.dashboard || {},
|
||||
project: prevState.project || null,
|
||||
simulation: prevState.simulation || null,
|
||||
simulationModels,
|
||||
|
|
@ -92,7 +92,7 @@ class Visualization extends React.Component {
|
|||
//document.addEventListener('keydown', this.handleKeydown.bind(this));
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-load',
|
||||
type: 'dashboards/start-load',
|
||||
token
|
||||
});
|
||||
}
|
||||
|
|
@ -102,14 +102,14 @@ class Visualization extends React.Component {
|
|||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.state.visualization._id !== this.props.match.params.visualization) {
|
||||
this.reloadVisualization();
|
||||
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.visualization.project) {
|
||||
if (project._id === this.state.dashboard.project) {
|
||||
this.setState({ project: project, simulation: null });
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
|
|
@ -161,25 +161,25 @@ class Visualization extends React.Component {
|
|||
return Object.keys(widgets).map( (key) => widgets[key]);
|
||||
}
|
||||
|
||||
reloadVisualization() {
|
||||
// select visualization by param id
|
||||
this.state.visualizations.forEach((tempVisualization) => {
|
||||
if (tempVisualization._id === this.props.match.params.visualization) {
|
||||
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 visualization = Object.assign({}, tempVisualization, {
|
||||
widgets: tempVisualization.widgets ? this.transformToWidgetsDict(tempVisualization.widgets) : {}
|
||||
var dashboard = Object.assign({}, tempDashboard, {
|
||||
widgets: tempDashboard.widgets ? this.transformToWidgetsDict(tempDashboard.widgets) : {}
|
||||
});
|
||||
|
||||
this.computeHeightWithWidgets(visualization.widgets);
|
||||
this.computeHeightWithWidgets(dashboard.widgets);
|
||||
|
||||
this.setState({ visualization: visualization, project: null });
|
||||
this.setState({ dashboard: dashboard, project: null });
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'projects/start-load',
|
||||
data: visualization.project,
|
||||
data: dashboard.project,
|
||||
token
|
||||
});
|
||||
}
|
||||
|
|
@ -187,9 +187,9 @@ class Visualization extends React.Component {
|
|||
}
|
||||
|
||||
snapToGrid(value) {
|
||||
if (this.state.visualization.grid === 1) return value;
|
||||
if (this.state.dashboard.grid === 1) return value;
|
||||
|
||||
return Math.round(value / this.state.visualization.grid) * this.state.visualization.grid;
|
||||
return Math.round(value / this.state.dashboard.grid) * this.state.dashboard.grid;
|
||||
}
|
||||
|
||||
handleDrop(item, position) {
|
||||
|
|
@ -210,17 +210,17 @@ class Visualization extends React.Component {
|
|||
// create new widget
|
||||
widget = WidgetFactory.createWidgetOfType(item.name, position, defaultSimulationModel);
|
||||
|
||||
var new_widgets = this.state.visualization.widgets;
|
||||
var new_widgets = this.state.dashboard.widgets;
|
||||
var new_key = Object.keys(new_widgets).length;
|
||||
|
||||
new_widgets[new_key] = widget;
|
||||
|
||||
var visualization = Object.assign({}, this.state.visualization, {
|
||||
var dashboard = Object.assign({}, this.state.dashboard, {
|
||||
widgets: new_widgets
|
||||
});
|
||||
|
||||
this.increaseHeightWithWidget(widget);
|
||||
this.setState({ visualization: visualization });
|
||||
this.setState({ dashboard: dashboard });
|
||||
}
|
||||
|
||||
widgetStatusChange(updated_widget, key) {
|
||||
|
|
@ -231,17 +231,17 @@ class Visualization extends React.Component {
|
|||
widgetChange(updated_widget, key, callback = null) {
|
||||
var widgets_update = {};
|
||||
widgets_update[key] = updated_widget;
|
||||
var new_widgets = Object.assign({}, this.state.visualization.widgets, widgets_update);
|
||||
var new_widgets = Object.assign({}, this.state.dashboard.widgets, widgets_update);
|
||||
|
||||
var visualization = Object.assign({}, this.state.visualization, {
|
||||
var dashboard = Object.assign({}, this.state.dashboard, {
|
||||
widgets: new_widgets
|
||||
});
|
||||
|
||||
// Check if the height needs to be increased, the section may have shrunk if not
|
||||
if (!this.increaseHeightWithWidget(updated_widget)) {
|
||||
this.computeHeightWithWidgets(visualization.widgets);
|
||||
this.computeHeightWithWidgets(dashboard.widgets);
|
||||
}
|
||||
this.setState({ visualization: visualization }, callback);
|
||||
this.setState({ dashboard: dashboard }, callback);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -279,7 +279,7 @@ class Visualization extends React.Component {
|
|||
}
|
||||
|
||||
editWidget(e, data) {
|
||||
this.setState({ editModal: true, modalData: this.state.visualization.widgets[data.key], modalIndex: data.key });
|
||||
this.setState({ editModal: true, modalData: this.state.dashboard.widgets[data.key], modalIndex: data.key });
|
||||
}
|
||||
|
||||
closeEdit(data) {
|
||||
|
|
@ -288,24 +288,24 @@ class Visualization extends React.Component {
|
|||
var widgets_update = {};
|
||||
widgets_update[this.state.modalIndex] = data;
|
||||
|
||||
var new_widgets = Object.assign({}, this.state.visualization.widgets, widgets_update);
|
||||
var new_widgets = Object.assign({}, this.state.dashboard.widgets, widgets_update);
|
||||
|
||||
var visualization = Object.assign({}, this.state.visualization, {
|
||||
var dashboard = Object.assign({}, this.state.dashboard, {
|
||||
widgets: new_widgets
|
||||
});
|
||||
|
||||
this.setState({ editModal: false, visualization: visualization });
|
||||
this.setState({ editModal: false, dashboard: dashboard });
|
||||
} else {
|
||||
this.setState({ editModal: false });
|
||||
}
|
||||
}
|
||||
|
||||
deleteWidget(e, data) {
|
||||
delete this.state.visualization.widgets[data.key];
|
||||
var visualization = Object.assign({}, this.state.visualization, {
|
||||
widgets: this.state.visualization.widgets
|
||||
delete this.state.dashboard.widgets[data.key];
|
||||
var dashboard = Object.assign({}, this.state.dashboard, {
|
||||
widgets: this.state.dashboard.widgets
|
||||
});
|
||||
this.setState({ visualization: visualization });
|
||||
this.setState({ dashboard: dashboard });
|
||||
}
|
||||
|
||||
stopEditing() {
|
||||
|
|
@ -315,36 +315,36 @@ class Visualization extends React.Component {
|
|||
|
||||
saveChanges() {
|
||||
// Transform to a list
|
||||
var visualization = Object.assign({}, this.state.visualization, {
|
||||
widgets: this.transformToWidgetsList(this.state.visualization.widgets)
|
||||
var dashboard = Object.assign({}, this.state.dashboard, {
|
||||
widgets: this.transformToWidgetsList(this.state.dashboard.widgets)
|
||||
});
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-edit',
|
||||
data: visualization,
|
||||
type: 'dashboards/start-edit',
|
||||
data: dashboard,
|
||||
token
|
||||
});
|
||||
}
|
||||
|
||||
discardChanges() {
|
||||
this.setState({ editing: false, visualization: {} });
|
||||
this.setState({ editing: false, dashboard: {} });
|
||||
|
||||
this.reloadVisualization();
|
||||
this.reloadDashboard();
|
||||
}
|
||||
|
||||
moveWidget(e, data, applyDirection) {
|
||||
var widget = this.state.visualization.widgets[data.key];
|
||||
var widget = this.state.dashboard.widgets[data.key];
|
||||
var updated_widgets = {};
|
||||
updated_widgets[data.key] = applyDirection(widget);
|
||||
var new_widgets = Object.assign({}, this.state.visualization.widgets, updated_widgets);
|
||||
var new_widgets = Object.assign({}, this.state.dashboard.widgets, updated_widgets);
|
||||
|
||||
var visualization = Object.assign({}, this.state.visualization, {
|
||||
var dashboard = Object.assign({}, this.state.dashboard, {
|
||||
widgets: new_widgets
|
||||
});
|
||||
|
||||
this.setState({ visualization: visualization });
|
||||
this.setState({ dashboard: dashboard });
|
||||
}
|
||||
|
||||
moveAbove(widget) {
|
||||
|
|
@ -380,39 +380,39 @@ class Visualization extends React.Component {
|
|||
value = 1;
|
||||
}
|
||||
|
||||
let visualization = Object.assign({}, this.state.visualization, {
|
||||
let dashboard = Object.assign({}, this.state.dashboard, {
|
||||
grid: value
|
||||
});
|
||||
|
||||
this.setState({ visualization });
|
||||
this.setState({ dashboard });
|
||||
}
|
||||
|
||||
lockWidget(data) {
|
||||
// lock the widget
|
||||
let widget = this.state.visualization.widgets[data.key];
|
||||
let widget = this.state.dashboard.widgets[data.key];
|
||||
widget.locked = true;
|
||||
|
||||
// update visualization
|
||||
// update dashboard
|
||||
let widgets = {};
|
||||
widgets[data.key] = widget;
|
||||
widgets = Object.assign({}, this.state.visualization.widgets, widgets);
|
||||
widgets = Object.assign({}, this.state.dashboard.widgets, widgets);
|
||||
|
||||
const visualization = Object.assign({}, this.state.visualization, { widgets });
|
||||
this.setState({ visualization });
|
||||
const dashboard = Object.assign({}, this.state.dashboard, { widgets });
|
||||
this.setState({ dashboard });
|
||||
}
|
||||
|
||||
unlockWidget(data) {
|
||||
// lock the widget
|
||||
let widget = this.state.visualization.widgets[data.key];
|
||||
let widget = this.state.dashboard.widgets[data.key];
|
||||
widget.locked = false;
|
||||
|
||||
// update visualization
|
||||
// update dashboard
|
||||
let widgets = {};
|
||||
widgets[data.key] = widget;
|
||||
widgets = Object.assign({}, this.state.visualization.widgets, widgets);
|
||||
widgets = Object.assign({}, this.state.dashboard.widgets, widgets);
|
||||
|
||||
const visualization = Object.assign({}, this.state.visualization, { widgets });
|
||||
this.setState({ visualization });
|
||||
const dashboard = Object.assign({}, this.state.dashboard, { widgets });
|
||||
this.setState({ dashboard });
|
||||
}
|
||||
|
||||
pauseData = () => {
|
||||
|
|
@ -424,7 +424,7 @@ class Visualization extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const current_widgets = this.state.visualization.widgets;
|
||||
const current_widgets = this.state.dashboard.widgets;
|
||||
|
||||
let boxClasses = classNames('section', 'box', { 'fullscreen-container': this.props.isFullscreen });
|
||||
|
||||
|
|
@ -437,8 +437,8 @@ class Visualization extends React.Component {
|
|||
buttons.push({ click: () => this.discardChanges(), icon: 'ban', text: 'Cancel' });
|
||||
|
||||
gridControl = <div key={editingControls.length}>
|
||||
<span>Grid: {this.state.visualization.grid > 1 ? this.state.visualization.grid : 'Disabled'}</span>
|
||||
<Slider value={this.state.visualization.grid} style={{ width: '80px' }} step={5} onChange={value => this.setGrid(value)} />
|
||||
<span>Grid: {this.state.dashboard.grid > 1 ? this.state.dashboard.grid : 'Disabled'}</span>
|
||||
<Slider value={this.state.dashboard.grid} style={{ width: '80px' }} step={5} onChange={value => this.setGrid(value)} />
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
@ -464,7 +464,7 @@ class Visualization extends React.Component {
|
|||
<div className={boxClasses} >
|
||||
<div className='section-header box-header'>
|
||||
<div className="section-title">
|
||||
<span>{this.state.visualization.name}</span>
|
||||
<span>{this.state.dashboard.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="section-buttons-group-right">
|
||||
|
|
@ -511,20 +511,20 @@ class Visualization extends React.Component {
|
|||
onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
|
||||
editing={this.state.editing}
|
||||
index={widget_key}
|
||||
grid={this.state.visualization.grid}
|
||||
grid={this.state.dashboard.grid}
|
||||
paused={this.state.paused}
|
||||
/>
|
||||
))}
|
||||
|
||||
<Grid size={this.state.visualization.grid} disabled={this.state.visualization.grid === 1 || !this.state.editing} />
|
||||
<Grid size={this.state.dashboard.grid} disabled={this.state.dashboard.grid === 1 || !this.state.editing} />
|
||||
</Dropzone>
|
||||
|
||||
{current_widgets != null &&
|
||||
Object.keys(current_widgets).map(widget_key => {
|
||||
const data = { key: widget_key };
|
||||
|
||||
const locked = this.state.visualization.widgets[widget_key].locked;
|
||||
const disabledMove = locked || this.state.visualization.widgets[widget_key].type === 'Box';
|
||||
const locked = this.state.dashboard.widgets[widget_key].locked;
|
||||
const disabledMove = locked || this.state.dashboard.widgets[widget_key].type === 'Box';
|
||||
|
||||
return <ContextMenu style={{zIndex: 100}} id={'widgetMenu'+ widget_key} key={widget_key}>
|
||||
<Item disabled={locked} onClick={e => this.editWidget(e, data)}>Edit</Item>
|
||||
|
|
@ -548,4 +548,4 @@ class Visualization extends React.Component {
|
|||
}
|
||||
|
||||
let fluxContainerConverter = require('../common/FluxContainerConverter');
|
||||
export default Fullscreenable()(Container.create(fluxContainerConverter.convert(Visualization), { withProps: true }));
|
||||
export default Fullscreenable()(Container.create(fluxContainerConverter.convert(Dashboard), { withProps: true }));
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* File: visualizations-data-manager.js
|
||||
* File: dashboards-data-manager.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 03.03.2017
|
||||
*
|
||||
|
|
@ -21,4 +21,4 @@
|
|||
|
||||
import RestDataManager from '../common/data-managers/rest-data-manager';
|
||||
|
||||
export default new RestDataManager('visualization', '/visualizations');
|
||||
export default new RestDataManager('dashboard', '/dashboards');
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* File: new-visualization.js
|
||||
* File: new-dashboard.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 03.03.2017
|
||||
*
|
||||
|
|
@ -24,7 +24,7 @@ import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
|
|||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
|
||||
class EditVisualizationDialog extends React.Component {
|
||||
class EditDashboardDialog extends React.Component {
|
||||
valid: false;
|
||||
|
||||
constructor(props) {
|
||||
|
|
@ -52,8 +52,8 @@ class EditVisualizationDialog extends React.Component {
|
|||
|
||||
resetState() {
|
||||
this.setState({
|
||||
name: this.props.visualization.name,
|
||||
_id: this.props.visualization._id
|
||||
name: this.props.dashboard.name,
|
||||
_id: this.props.dashboard._id
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ class EditVisualizationDialog extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Edit Visualization" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<Dialog show={this.props.show} title="Edit Dashboard" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="name" validationState={this.validateForm('name')}>
|
||||
<FormLabel>Name</FormLabel>
|
||||
|
|
@ -88,4 +88,4 @@ class EditVisualizationDialog extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default EditVisualizationDialog;
|
||||
export default EditDashboardDialog;
|
||||
|
|
@ -24,7 +24,7 @@ import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
|
|||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
|
||||
class ImportVisualizationDialog extends React.Component {
|
||||
class ImportDashboardDialog extends React.Component {
|
||||
valid = false;
|
||||
imported = false;
|
||||
|
||||
|
|
@ -69,14 +69,14 @@ class ImportVisualizationDialog extends React.Component {
|
|||
|
||||
reader.onload = function(event) {
|
||||
// read simulator
|
||||
const visualization = JSON.parse(event.target.result);
|
||||
const dashboard = JSON.parse(event.target.result);
|
||||
|
||||
let defaultSimulator = "";
|
||||
if (self.props.simulation.models != null) {
|
||||
defaultSimulator = self.props.simulation.models[0].simulator;
|
||||
}
|
||||
|
||||
visualization.widgets.forEach(widget => {
|
||||
dashboard.widgets.forEach(widget => {
|
||||
switch (widget.type) {
|
||||
case 'Value':
|
||||
case 'Plot':
|
||||
|
|
@ -93,7 +93,7 @@ class ImportVisualizationDialog extends React.Component {
|
|||
|
||||
self.imported = true;
|
||||
self.valid = true;
|
||||
self.setState({ name: visualization.name, widgets: visualization.widgets, grid: visualization.grid });
|
||||
self.setState({ name: dashboard.name, widgets: dashboard.widgets, grid: dashboard.grid });
|
||||
};
|
||||
|
||||
reader.readAsText(file);
|
||||
|
|
@ -115,10 +115,10 @@ class ImportVisualizationDialog extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Import Visualization" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<Dialog show={this.props.show} title="Import Dashboard" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="file">
|
||||
<FormLabel>Visualization File</FormLabel>
|
||||
<FormLabel>Dashboard File</FormLabel>
|
||||
<FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
|
||||
</FormGroup>
|
||||
|
||||
|
|
@ -133,4 +133,4 @@ class ImportVisualizationDialog extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default ImportVisualizationDialog;
|
||||
export default ImportDashboardDialog;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* File: new-visualization.js
|
||||
* File: new-dashboard.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 03.03.2017
|
||||
*
|
||||
|
|
@ -71,7 +71,7 @@ class NewVisualzationDialog extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="New Visualization" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<Dialog show={this.props.show} title="New Dashboard" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="name" validationState={this.validateForm('name')}>
|
||||
<FormLabel>Name</FormLabel>
|
||||
|
|
@ -27,21 +27,21 @@ import FileSaver from 'file-saver';
|
|||
import AppDispatcher from '../common/app-dispatcher';
|
||||
import ProjectStore from './project-store';
|
||||
import UserStore from '../user/user-store';
|
||||
import VisualizationStore from '../visualization/visualization-store';
|
||||
import DashboardStore from '../dashboard/dashboard-store';
|
||||
import SimulationStore from '../simulation/simulation-store';
|
||||
|
||||
import Icon from '../common/icon';
|
||||
import CustomTable from '../common/table';
|
||||
import TableColumn from '../common/table-column';
|
||||
import NewVisualzationDialog from '../visualization/new-visualization';
|
||||
import EditVisualizationDialog from '../visualization/edit-visualization';
|
||||
import ImportVisualizationDialog from '../visualization/import-visualization';
|
||||
import NewVisualzationDialog from '../dashboard/new-dashboard';
|
||||
import EditDashboardDialog from '../dashboard/edit-dashboard';
|
||||
import ImportDashboardDialog from '../dashboard/import-dashboard';
|
||||
|
||||
import DeleteDialog from '../common/dialogs/delete-dialog';
|
||||
|
||||
class Visualizations extends Component {
|
||||
class Dashboards extends Component {
|
||||
static getStores() {
|
||||
return [ ProjectStore, VisualizationStore, UserStore, SimulationStore ];
|
||||
return [ ProjectStore, DashboardStore, UserStore, SimulationStore ];
|
||||
}
|
||||
|
||||
static calculateState(prevState, props) {
|
||||
|
|
@ -68,15 +68,15 @@ class Visualizations extends Component {
|
|||
simulation = SimulationStore.getState().find(simulation => simulation._id === project.simulation);
|
||||
}
|
||||
|
||||
// load visualizations
|
||||
let visualizations = [];
|
||||
// load dashboards
|
||||
let dashboards = [];
|
||||
|
||||
if (project.visualizations != null) {
|
||||
visualizations = VisualizationStore.getState().filter(visualization => project.visualizations.includes(visualization._id));
|
||||
if (project.dashboards != null) {
|
||||
dashboards = DashboardStore.getState().filter(dashboard => project.dashboards.includes(dashboard._id));
|
||||
}
|
||||
|
||||
return {
|
||||
visualizations,
|
||||
dashboards,
|
||||
project,
|
||||
simulation,
|
||||
sessionToken,
|
||||
|
|
@ -91,7 +91,7 @@ class Visualizations extends Component {
|
|||
|
||||
componentDidMount() {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-load',
|
||||
type: 'dashboards/start-load',
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
|
||||
|
|
@ -105,11 +105,11 @@ class Visualizations extends Component {
|
|||
this.setState({ newModal: false });
|
||||
|
||||
if (data) {
|
||||
// add project to visualization
|
||||
// add project to dashboard
|
||||
data.project = this.state.project._id;
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-add',
|
||||
type: 'dashboards/start-add',
|
||||
data: data,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
|
|
@ -132,7 +132,7 @@ class Visualizations extends Component {
|
|||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-remove',
|
||||
type: 'dashboards/start-remove',
|
||||
data: this.state.modalData,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
|
|
@ -143,7 +143,7 @@ class Visualizations extends Component {
|
|||
|
||||
if (data) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-edit',
|
||||
type: 'dashboards/start-edit',
|
||||
data: data,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
|
|
@ -157,7 +157,7 @@ class Visualizations extends Component {
|
|||
data.project = this.state.project._id;
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-add',
|
||||
type: 'dashboards/start-add',
|
||||
data,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
|
|
@ -172,20 +172,20 @@ class Visualizations extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
exportVisualization(index) {
|
||||
exportDashboard(index) {
|
||||
// filter properties
|
||||
let visualization = Object.assign({}, this.state.visualizations[index]);
|
||||
delete visualization._id;
|
||||
delete visualization.project;
|
||||
delete visualization.user;
|
||||
let dashboard = Object.assign({}, this.state.dashboards[index]);
|
||||
delete dashboard._id;
|
||||
delete dashboard.project;
|
||||
delete dashboard.user;
|
||||
|
||||
visualization.widgets.forEach(widget => {
|
||||
dashboard.widgets.forEach(widget => {
|
||||
delete widget.simulator;
|
||||
});
|
||||
|
||||
// show save dialog
|
||||
const blob = new Blob([JSON.stringify(visualization, null, 2)], { type: 'application/json' });
|
||||
FileSaver.saveAs(blob, 'visualization - ' + visualization.name + '.json');
|
||||
const blob = new Blob([JSON.stringify(dashboard, null, 2)], { type: 'application/json' });
|
||||
FileSaver.saveAs(blob, 'dashboard - ' + dashboard.name + '.json');
|
||||
}
|
||||
|
||||
onModalKeyPress = (event) => {
|
||||
|
|
@ -205,31 +205,31 @@ class Visualizations extends Component {
|
|||
<div className='section'>
|
||||
<h1>{this.state.project.name}</h1>
|
||||
|
||||
<CustomTable data={this.state.visualizations}>
|
||||
<TableColumn title='Name' dataKey='name' link='/visualizations/' linkKey='_id' />
|
||||
<CustomTable data={this.state.dashboards}>
|
||||
<TableColumn title='Name' dataKey='name' link='/dashboards/' linkKey='_id' />
|
||||
<TableColumn
|
||||
width='100'
|
||||
editButton
|
||||
deleteButton
|
||||
exportButton
|
||||
onEdit={(index) => this.setState({ editModal: true, modalData: this.state.visualizations[index] })}
|
||||
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.visualizations[index] })}
|
||||
onExport={index => this.exportVisualization(index)}
|
||||
onEdit={(index) => this.setState({ editModal: true, modalData: this.state.dashboards[index] })}
|
||||
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.dashboards[index] })}
|
||||
onExport={index => this.exportDashboard(index)}
|
||||
/>
|
||||
</CustomTable>
|
||||
|
||||
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Visualization</Button>
|
||||
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Dashboard</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
|
||||
|
||||
<NewVisualzationDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
|
||||
<EditVisualizationDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} visualization={this.state.modalData} />
|
||||
<ImportVisualizationDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} simulation={this.state.simulation} />
|
||||
<EditDashboardDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} dashboard={this.state.modalData} />
|
||||
<ImportDashboardDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} simulation={this.state.simulation} />
|
||||
|
||||
<DeleteDialog title="visualization" name={this.state.modalData.name} show={this.state.deleteModal} onClose={this.closeDeleteModal} />
|
||||
<DeleteDialog title="dashboard" name={this.state.modalData.name} show={this.state.deleteModal} onClose={this.closeDeleteModal} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let fluxContainerConverter = require('../common/FluxContainerConverter');
|
||||
export default Container.create(fluxContainerConverter.convert(Visualizations), {withProps: true});
|
||||
export default Container.create(fluxContainerConverter.convert(Dashboards), {withProps: true});
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ class Scenarios extends Component {
|
|||
static calculateState() {
|
||||
const scenarios = ScenarioStore.getState();
|
||||
const sessionToken = UserStore.getState().token;
|
||||
console.log(scenarios);
|
||||
|
||||
return {
|
||||
scenarios,
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ body {
|
|||
}
|
||||
|
||||
/**
|
||||
* Visualizations
|
||||
* Dashboards
|
||||
*/
|
||||
.fullscreen-container {
|
||||
padding: 10px;
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ class EditOwnUserDialog extends React.Component {
|
|||
|
||||
handleChange(e) {
|
||||
let user = UserStore.getState().currentUser;
|
||||
console.log("edit-own-user, handlechange methode called");
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
|
||||
// check all controls
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ class WidgetTopology extends React.Component {
|
|||
this.Viewer = null;
|
||||
|
||||
this.state = {
|
||||
visualizationState: 'initial'
|
||||
dashboardState: 'initial'
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -108,13 +108,13 @@ class WidgetTopology extends React.Component {
|
|||
componentWillReceiveProps(nextProps) {
|
||||
const file = nextProps.files.find(file => file._id === nextProps.widget.file);
|
||||
// Ensure model is requested only once or a different was selected
|
||||
if (this.props.widget.file !== nextProps.widget.file || (this.state.visualizationState === 'initial' && file)) {
|
||||
this.setState({'visualizationState': 'loading' });
|
||||
if (this.props.widget.file !== nextProps.widget.file || (this.state.dashboardState === 'initial' && file)) {
|
||||
this.setState({'dashboardState': 'loading' });
|
||||
if (file) {
|
||||
fetch(new Request('/' + config.publicPathBase + file.path))
|
||||
.then( response => {
|
||||
if (response.status === 200) {
|
||||
this.setState({'visualizationState': 'ready' });
|
||||
this.setState({'dashboardState': 'ready' });
|
||||
return response.text().then( contents => {
|
||||
if (this.svgElem) {
|
||||
let cimsvgInstance = new cimsvg(this.svgElem.current);
|
||||
|
|
@ -135,7 +135,7 @@ class WidgetTopology extends React.Component {
|
|||
.catch(error => {
|
||||
console.error(error);
|
||||
this.setState({
|
||||
'visualizationState': 'show_message',
|
||||
'dashboardState': 'show_message',
|
||||
'message': 'Topology could not be loaded.'});
|
||||
});
|
||||
}
|
||||
|
|
@ -143,7 +143,7 @@ class WidgetTopology extends React.Component {
|
|||
// No file has been selected
|
||||
if (!nextProps.widget.file) {
|
||||
this.setState({
|
||||
'visualizationState': 'show_message',
|
||||
'dashboardState': 'show_message',
|
||||
'message': 'Select a topology model first.'});
|
||||
}
|
||||
}
|
||||
|
|
@ -152,7 +152,7 @@ class WidgetTopology extends React.Component {
|
|||
render() {
|
||||
var markup = null;
|
||||
|
||||
switch(this.state.visualizationState) {
|
||||
switch(this.state.dashboardState) {
|
||||
case 'loading':
|
||||
markup = <div style={spinnerContainerStyle}><div className="loader" /></div>; break;
|
||||
case 'show_message':
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue