mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
wip: widgets are now viewable, to get the needed testdata switch to the example-dashboard branch in the backend
This commit is contained in:
parent
6a2201a59a
commit
508ad8918e
5 changed files with 39 additions and 24 deletions
|
@ -57,6 +57,7 @@ class Dashboard extends React.Component {
|
|||
prevState = {};
|
||||
}
|
||||
const sessionToken = LoginStore.getState().token;
|
||||
|
||||
let dashboard = Map();
|
||||
console.log("dashboard calculate state was called: " + props.match.params.dashboard);
|
||||
let dashboards = DashboardStore.getState()
|
||||
|
@ -82,7 +83,7 @@ class Dashboard extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
let files = FileStore.getState();
|
||||
/*let files = FileStore.getState();
|
||||
|
||||
if(files.length === 0){
|
||||
AppDispatcher.dispatch({
|
||||
|
@ -90,7 +91,7 @@ class Dashboard extends React.Component {
|
|||
token: sessionToken,
|
||||
param: '?objectID=1&objectType=widget'
|
||||
});
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
console.log("here are the widgets: ");
|
||||
|
@ -141,7 +142,7 @@ class Dashboard extends React.Component {
|
|||
*/
|
||||
}
|
||||
let widgets = {};
|
||||
|
||||
|
||||
for (let widget of dashboard.get('widgets')) {
|
||||
widgets[Dashboard.lastWidgetKey] = widget;
|
||||
console.log(" the last widgetKey: " + Dashboard.lastWidgetKey);
|
||||
|
@ -170,10 +171,10 @@ class Dashboard extends React.Component {
|
|||
sessionToken: sessionToken,
|
||||
projects: null, //ProjectStore.getState(),
|
||||
simulations: null, //SimulationStore.getState(),
|
||||
files: FileStore.getState(),
|
||||
files: null,
|
||||
|
||||
project: prevState.project || null,
|
||||
simulation: prevState.simulation || null,
|
||||
project: null,
|
||||
simulation: null,
|
||||
simulationModels,
|
||||
editing: prevState.editing || false,
|
||||
paused: prevState.paused || false,
|
||||
|
@ -196,19 +197,20 @@ class Dashboard extends React.Component {
|
|||
}
|
||||
|
||||
//!!!won't work anymore
|
||||
/* componentDidMount() {
|
||||
componentWillMount() {
|
||||
//document.addEventListener('keydown', this.handleKeydown.bind(this));
|
||||
console.log("problem in componentdidmount");
|
||||
if (this.state.dashboard.has('id') === false) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'dashboards/start-load',
|
||||
data: this.props.match.params.dashboard,
|
||||
token: this.state.sessionToken
|
||||
token: this.state.sessionToken,
|
||||
param: '?scenarioID=1',
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
componentWillUnmount() {
|
||||
//document.removeEventListener('keydown', this.handleKeydown.bind(this));
|
||||
|
|
|
@ -84,12 +84,14 @@ class Widget extends React.Component {
|
|||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'files/start-load',
|
||||
token: this.state.sessionToken
|
||||
token: this.state.sessionToken,
|
||||
param: '?objectID=1&objectType=widget'
|
||||
});
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulationModels/start-load',
|
||||
token: this.state.sessionToken
|
||||
token: this.state.sessionToken,
|
||||
param: '?scenarioID=1'
|
||||
});
|
||||
|
||||
}
|
||||
|
@ -116,6 +118,8 @@ class Widget extends React.Component {
|
|||
createWidget(widget) {
|
||||
let simulationModel = null;
|
||||
|
||||
console.log("createwidget was called");
|
||||
console.log(" the widget type is: " + widget.type);
|
||||
for (let model of this.state.simulationModels) {
|
||||
if (model._id !== widget.simulationModel) {
|
||||
continue;
|
||||
|
@ -123,7 +127,7 @@ class Widget extends React.Component {
|
|||
|
||||
simulationModel = model;
|
||||
}
|
||||
|
||||
//all types are lowercase!!! at least slider is
|
||||
if (widget.type === 'CustomAction') {
|
||||
return <WidgetCustomAction widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulationModel={simulationModel} />
|
||||
} else if (widget.type === 'Action') {
|
||||
|
@ -147,6 +151,7 @@ class Widget extends React.Component {
|
|||
} else if (widget.type === 'NumberInput') {
|
||||
return <WidgetInput widget={widget} editing={this.props.editing} simulationModel={simulationModel} onInputChanged={(value) => this.inputDataChanged(widget, value)} />
|
||||
} else if (widget.type === 'Slider') {
|
||||
console.log("inside slider: simulationModel: " + simulationModel);
|
||||
return <WidgetSlider widget={widget} editing={this.props.editing} simulationModel={simulationModel} onWidgetChange={(w) => this.props.onWidgetStatusChange(w, this.props.index) } onInputChanged={value => this.inputDataChanged(widget, value)} />
|
||||
} else if (widget.type === 'Gauge') {
|
||||
return <WidgetGauge widget={widget} data={this.state.simulatorData} editing={this.props.editing} simulationModel={simulationModel} />
|
||||
|
@ -160,9 +165,10 @@ class Widget extends React.Component {
|
|||
|
||||
return null;
|
||||
}
|
||||
|
||||
rn
|
||||
|
||||
render() {
|
||||
console.log("!!!render Widget was called");
|
||||
const element = this.createWidget(this.props.data);
|
||||
|
||||
if (this.props.editing) {
|
||||
|
|
|
@ -33,7 +33,7 @@ class WidgetGauge extends Component {
|
|||
this.state = {
|
||||
value: 0,
|
||||
minValue: null,
|
||||
maxValue: null
|
||||
maxValue: null
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -26,8 +26,8 @@ import EditWidgetColorControl from '../edit-widget-color-control';
|
|||
class WidgetLabel extends Component {
|
||||
render() {
|
||||
const style = {
|
||||
fontSize: this.props.widget.textSize + 'px',
|
||||
color: EditWidgetColorControl.ColorPalette[this.props.widget.fontColor]
|
||||
fontSize: this.props.widget.customProperties.textSize + 'px',
|
||||
color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
@ -39,19 +39,22 @@ class WidgetSlider extends Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
unit: ''
|
||||
unit: 'bla',
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
console.log("componentwillreceiveprops calle, next props: ");
|
||||
console.log(nextProps);
|
||||
if (nextProps.simulationModel == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update value
|
||||
if (nextProps.widget.default_value && this.state.value === undefined) {
|
||||
if (nextProps.widget.customProperties.default_value && this.state.value === undefined) {
|
||||
this.setState({
|
||||
value: nextProps.widget.default_value,
|
||||
value: nextProps.widget.customProperties.default_value,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -63,7 +66,7 @@ class WidgetSlider extends Component {
|
|||
}
|
||||
|
||||
// Check if the orientation changed, update the size if it did
|
||||
if (this.props.widget.orientation !== nextProps.widget.orientation) {
|
||||
if (this.props.widget.customProperties.orientation !== nextProps.widget.customProperties.orientation) {
|
||||
let baseWidget = nextProps.widget;
|
||||
|
||||
// Exchange dimensions and constraints
|
||||
|
@ -94,11 +97,15 @@ class WidgetSlider extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
let isVertical = this.props.widget.orientation === WidgetSlider.OrientationTypes.VERTICAL.value;
|
||||
console.log("render of slider was called");
|
||||
console.log(this.props.widget);
|
||||
console.log("the maxRange is : " + this.props.widget.customProperties.rangeMax);
|
||||
let isVertical = this.props.widget.customProperties.orientation === WidgetSlider.OrientationTypes.VERTICAL.value;
|
||||
console.log("this state has the value: " + this.state.value);
|
||||
|
||||
let fields = {
|
||||
name: this.props.widget.name,
|
||||
control: <Slider min={ this.props.widget.rangeMin } max={ this.props.widget.rangeMax } step={ this.props.widget.step } value={ this.state.value } disabled={ this.props.editing } vertical={ isVertical } onChange={ (v) => this.valueIsChanging(v) } onAfterChange={ (v) => this.valueChanged(v) }/>,
|
||||
control: <Slider min={ this.props.widget.customProperties.rangeMin } max={ this.props.widget.customProperties.rangeMax } step={ this.props.widget.customProperties.step } value={ this.state.value } disabled={ this.props.editing } vertical={ isVertical } onChange={ (v) => this.valueIsChanging(v) } onAfterChange={ (v) => this.valueChanged(v) }/>,
|
||||
value: <span>{ format('.3s')(Number.parseFloat(this.state.value)) }</span>,
|
||||
unit: <span className="signal-unit">{ this.state.unit }</span>
|
||||
}
|
||||
|
@ -111,7 +118,7 @@ class WidgetSlider extends Component {
|
|||
});
|
||||
|
||||
return (
|
||||
this.props.widget.orientation === WidgetSlider.OrientationTypes.HORIZONTAL.value? (
|
||||
!isVertical? (
|
||||
<div className={widgetClasses}>
|
||||
<label>{ fields.name }</label>
|
||||
<div className='slider'>{ fields.control }</div>
|
||||
|
|
Loading…
Add table
Reference in a new issue