1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

wip: make dashboard manually resizable #230

This commit is contained in:
Laura Fuentes Grau 2020-06-25 18:01:26 +02:00
parent 8523b9e354
commit b317cc095a
4 changed files with 43 additions and 12 deletions

View file

@ -120,6 +120,7 @@ class Dashboard extends Component {
editing: prevState.editing || false,
paused: prevState.paused || false,
dropZoneHeight: prevState.dropZoneHeight || maxHeight +80,
editModal: false,
filesEditModal: prevState.filesEditModal || false,
@ -130,7 +131,6 @@ class Dashboard extends Component {
widgetOrigIDs: prevState.widgetOrigIDs || [],
maxWidgetHeight: maxHeight || null,
dropZoneHeight: maxHeight +80 || null,
};
}
@ -389,6 +389,27 @@ class Dashboard extends Component {
this.forceUpdate();
};
setDashboardSize(value) {
const maxHeight = Object.values(this.state.widgets).reduce((currentHeight, widget) => {
const absolutHeight = widget.y + widget.height;
return absolutHeight > currentHeight ? absolutHeight : currentHeight;
}, 0);
let tempSize = null;
if(value === -1){
tempSize = this.state.dropZoneHeight - 50;
if(tempSize > maxHeight +80){
this.setState({dropZoneHeight: tempSize});
}
}
else{
tempSize = this.state.dropZoneHeight + 50;
this.setState( {dropZoneHeight: tempSize});
return tempSize;
}
}
pauseData(){
this.setState({ paused: true });
};
@ -402,6 +423,7 @@ class Dashboard extends Component {
const grid = this.state.dashboard.grid;
const boxClasses = classNames('section', 'box', { 'fullscreen-padding': this.props.isFullscreen });
let draggable = this.state.editing;
let dropZoneHeight = this.state.dropZoneHeight;
return <div className={boxClasses} >
<div className='section-header box-header'>
<div className="section-title">
@ -424,10 +446,10 @@ class Dashboard extends Component {
<div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>
{this.state.editing &&
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} widgets={this.state.widgets} />
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} onDashboardSizeChange={this.setDashboardSize.bind(this)} widgets={this.state.widgets} />
}
{!draggable?(
<WidgetArea widgets={this.state.widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
<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}
@ -448,7 +470,7 @@ class Dashboard extends Component {
))}
</WidgetArea>
) : (
<WidgetArea widgets={this.state.widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
<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}

View file

@ -387,7 +387,7 @@ body {
.section-buttons-group-right {
height: auto !important;
padding: 5px;
float: right;
}

View file

@ -44,13 +44,8 @@ class WidgetArea extends React.Component {
}
render() {
const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => {
const absolutHeight = widget.y + widget.height;
return absolutHeight > currentHeight ? absolutHeight : currentHeight;
}, 0);
return <Dropzone height={maxHeight + 80} onDrop={this.handleDrop} editing={this.props.editing} widgets={this.props.widgets}>
return <Dropzone height={this.props.dropZoneHeight} onDrop={this.handleDrop} editing={this.props.editing} widgets={this.props.widgets}>
{this.props.children}
<Grid size={this.props.grid} disabled={this.props.grid === 1 || this.props.editing !== true} />

View file

@ -18,6 +18,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import Slider from 'rc-slider';
import { Button } from 'react-bootstrap';
import Icon from "../common/icon";
import ToolboxItem from './toolbox-item';
@ -57,6 +59,17 @@ class WidgetToolbox extends React.Component {
<div>
<span>Grid: { this.props.grid > 1 ? this.props.grid : 'Disabled' }</span>
<Slider value={this.props.grid} style={{ width: '80px' }} step={5} onChange={this.onGridChange} />
</div>
</div>
<div className='section-buttons-group-right'>
<div>
<Button variant="dark" key={0} onClick={() => this.props.onDashboardSizeChange(1)} >
<Icon icon="plus" />
</Button>
<Button variant="dark" key={1} onClick={() => this.props.onDashboardSizeChange(-1)} >
<Icon icon="minus" />
</Button>
</div>
</div>
</div>;
@ -66,7 +79,8 @@ class WidgetToolbox extends React.Component {
WidgetToolbox.propTypes = {
widgets: PropTypes.array,
grid: PropTypes.number,
onGridChange: PropTypes.func
onGridChange: PropTypes.func,
onDashboardSizeChange: PropTypes.func
};
export default WidgetToolbox;