diff --git a/src/pages/dashboards/dashboard-button-group.js b/src/pages/dashboards/dashboard-button-group.js
new file mode 100644
index 0000000..71db45e
--- /dev/null
+++ b/src/pages/dashboards/dashboard-button-group.js
@@ -0,0 +1,112 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see .
+ ******************************************************************************/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '../../common/buttons/icon-button';
+
+const buttonStyle = {
+ marginLeft: '12px',
+ height: '44px',
+ width: '35px',
+};
+
+const iconStyle = {
+ height: '25px',
+ width: '25px'
+}
+
+let buttonkey = 0;
+
+class DashboardButtonGroup extends React.Component {
+
+ getBtn(icon, tooltip, clickFn, locked = false) {
+ if (locked) {
+ return
+ } else {
+ return
+ }
+ }
+
+ render() {
+ const buttons = [];
+ buttonkey = 0;
+
+ if (this.props.editing) {
+ buttons.push(this.getBtn("save", "Save changes", this.props.onSave));
+ buttons.push(this.getBtn("times", "Discard changes", this.props.onCancel));
+ } else {
+ if (this.props.fullscreen !== true) {
+ buttons.push(this.getBtn("expand", "Change to fullscreen view", this.props.onFullscreen));
+ } else {
+ buttons.push(this.getBtn("compress", "Back to normal view", this.props.onFullscreen));
+ }
+
+ if (this.props.paused) {
+ buttons.push(this.getBtn("play", "Continue simulation", this.props.onUnpause));
+ } else {
+ buttons.push(this.getBtn("pause", "Pause simulation", this.props.onPause));
+ }
+
+ if (this.props.fullscreen !== true) {
+ let tooltip = this.props.locked ? "View files of scenario" : "Add, edit or delete files of scenario";
+ buttons.push(this.getBtn("file", tooltip, this.props.onEditFiles));
+ buttons.push(this.getBtn("sign-in-alt", "Add, edit or delete input signals", this.props.onEditInputSignals, this.props.locked));
+ buttons.push(this.getBtn("sign-out-alt", "Add, edit or delete output signals", this.props.onEditOutputSignals, this.props.locked));
+ buttons.push(this.getBtn("pen", "Add widgets and edit layout", this.props.onEdit, this.props.locked));
+ }
+ }
+
+ return
+// );
+// };
+
+// export default Fullscreenable()(Dashboard);
+
+const Dashboard = (props) => {
+ return
+}
+
+export default Dashboard;
diff --git a/src/pages/dashboards/dropzone.js b/src/pages/dashboards/dropzone.js
new file mode 100644
index 0000000..530ec1e
--- /dev/null
+++ b/src/pages/dashboards/dropzone.js
@@ -0,0 +1,77 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see .
+ ******************************************************************************/
+
+import React from 'react';
+import { DropTarget } from 'react-dnd';
+import classNames from 'classnames';
+
+const dropzoneTarget = {
+ drop(props, monitor, component) {
+ // get drop position
+ var position = monitor.getSourceClientOffset();
+ var dropzoneRect = component.wrapper.getBoundingClientRect();
+ position.x -= dropzoneRect.left;
+ position.y -= dropzoneRect.top;
+
+ // Z-Index is one more the top most children
+ let foundZ = props.widgets.reduce( (maxZ, currentWidget) => {
+ if (currentWidget != null) {
+ // Is there a simpler way? Is not easy to expose a getter in a Container.create(Component)
+ if (currentWidget.z > maxZ) {
+ return currentWidget.z;
+ }
+ }
+
+ return maxZ;
+ }, 0)
+ position.z = foundZ >= 100? foundZ : foundZ += 10;
+ if(monitor.getItem().name === "Box"){
+ position.z = 0;
+ }
+
+ props.onDrop(monitor.getItem(), position);
+ }
+};
+
+function collect(connect, monitor) {
+
+ return {
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver(),
+ canDrop: monitor.canDrop()
+ };
+}
+
+class Dropzone extends React.Component {
+ render() {
+
+ var toolboxClass = classNames({
+ 'box-content': true,
+ 'toolbox-dropzone': true,
+ 'toolbox-dropzone-active': this.props.isOver && this.props.canDrop && this.props.editing,
+ 'toolbox-dropzone-editing': this.props.editing
+ });
+
+ return this.props.connectDropTarget(
+
+ );
+ }
+}
+
+export default DropTarget('widget', dropzoneTarget, collect)(Dropzone);
diff --git a/src/pages/dashboards/grid.js b/src/pages/dashboards/grid.js
new file mode 100644
index 0000000..3c3a180
--- /dev/null
+++ b/src/pages/dashboards/grid.js
@@ -0,0 +1,38 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see .
+ ******************************************************************************/
+
+import React from 'react';
+
+class Grid extends React.Component {
+ render() {
+ if (this.props.disabled) return false;
+
+ return (
+
+ );
+ }
+}
+
+export default Grid;
diff --git a/src/pages/dashboards/widget-area.js b/src/pages/dashboards/widget-area.js
new file mode 100644
index 0000000..1e55641
--- /dev/null
+++ b/src/pages/dashboards/widget-area.js
@@ -0,0 +1,76 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see .
+ ******************************************************************************/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Dropzone from './dropzone';
+import Grid from './grid';
+
+import WidgetFactory from '../../widget/widget-factory';
+
+class WidgetArea extends React.Component {
+ snapToGrid(value) {
+ if (this.props.grid === 1) {
+ return value;
+ }
+
+ return Math.round(value / this.props.grid) * this.props.grid;
+ }
+
+ handleDrop = (item, position) => {
+ position.x = this.snapToGrid(position.x);
+ position.y = this.snapToGrid(position.y);
+
+ const widget = WidgetFactory.createWidgetOfType(item.name, position);
+
+ if (this.props.onWidgetAdded != null) {
+ this.props.onWidgetAdded(widget);
+ }
+ }
+
+ render() {
+
+ return
+ {this.props.children}
+
+
+ ;
+ }
+}
+
+WidgetArea.propTypes = {
+ children: PropTypes.node, //TODO is .node correct here? Was .children before leading to compile error
+ editing: PropTypes.bool,
+ grid: PropTypes.number,
+ //widgets: PropTypes.array,
+ onWidgetAdded: PropTypes.func
+};
+
+WidgetArea.defaultProps = {
+ widgets: {}
+};
+
+export default WidgetArea;