mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-30 00:00:13 +01:00
f468b44557
- Grouping js files based on the elements of the data model instead of parent js class - All js files providing functionality for one element of the data model are now in one folder; this makes is easier to implement changes for one element in all affected files/ classes - js files which are common to multiple elements are in the common folder - The new structure is more in alignment with the new Go backend code base structure - This commit does not contain any changes in functionality of the frontend
202 lines
15 KiB
JavaScript
202 lines
15 KiB
JavaScript
/**
|
|
* File: edit-widget-control-creator.js
|
|
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
|
|
* Date: 23.05.2017
|
|
*
|
|
* 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 <http://www.gnu.org/licenses/>.
|
|
**********************************************************************************/
|
|
|
|
import React from 'react';
|
|
|
|
import EditWidgetTextControl from './edit-widget-text-control';
|
|
import EditWidgetNumberControl from './edit-widget-number-control';
|
|
import EditWidgetColorControl from './edit-widget-color-control';
|
|
import EditWidgetTimeControl from './edit-widget-time-control';
|
|
import EditImageWidgetControl from './edit-widget-image-control';
|
|
import EditWidgetSimulationControl from './edit-widget-simulation-control';
|
|
import EditWidgetSignalControl from './edit-widget-signal-control';
|
|
import EditWidgetSignalsControl from './edit-widget-signals-control';
|
|
import EditWidgetOrientation from './edit-widget-orientation';
|
|
import EditWidgetAspectControl from './edit-widget-aspect-control';
|
|
import EditWidgetTextSizeControl from './edit-widget-text-size-control';
|
|
import EditWidgetCheckboxControl from './edit-widget-checkbox-control';
|
|
import EditWidgetColorZonesControl from './edit-widget-color-zones-control';
|
|
import EditWidgetMinMaxControl from './edit-widget-min-max-control';
|
|
import EditWidgetHTMLContent from './edit-widget-html-content';
|
|
import EditWidgetParametersControl from './edit-widget-parameters-control';
|
|
|
|
export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) {
|
|
// Use a list to concatenate the controls according to the widget type
|
|
var dialogControls = [];
|
|
|
|
switch(widgetType) {
|
|
case 'CustomAction':
|
|
dialogControls.push(
|
|
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetTextControl key={1} widget={widget} controlId={'icon'} label={'Icon'} placeholder={'Enter an awesome font icon name'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetSimulationControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetParametersControl key={3} widget={widget} controlId={'actions'} label={'Actions'} handleChange={(e) => handleChange(e)} />
|
|
)
|
|
break;
|
|
case 'Action':
|
|
dialogControls.push(
|
|
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
|
|
)
|
|
break;
|
|
case 'Value':
|
|
let valueBoundOnChange = (e) => {
|
|
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
|
}
|
|
dialogControls.push(
|
|
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => valueBoundOnChange(e)} />,
|
|
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetTextSizeControl key={3} widget={widget} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetCheckboxControl key={4} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'Lamp':
|
|
let lampBoundOnChange = (e) => {
|
|
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
|
}
|
|
dialogControls.push(
|
|
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => lampBoundOnChange(e)} />,
|
|
<EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetTextControl key={2} widget={widget} controlId={'threshold'} label={'Threshold'} placeholder={'0.5'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetColorControl key={3} widget={widget} controlId={'on_color'} label={'Color On'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetColorControl key={4} widget={widget} controlId={'off_color'} label={'Color Off'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
|
);
|
|
break;
|
|
case 'Plot':
|
|
let plotBoundOnChange = (e) => {
|
|
handleChange([e, {target: {id: 'signals', value: []}}]);
|
|
}
|
|
dialogControls.push(
|
|
<EditWidgetTimeControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotBoundOnChange(e)} />,
|
|
<EditWidgetSignalsControl key={2} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetMinMaxControl key={4} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'Table':
|
|
dialogControls.push(
|
|
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetCheckboxControl key={1} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'Image':
|
|
// Restrict to only image file types (MIME)
|
|
let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image'));
|
|
dialogControls.push(
|
|
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetAspectControl key={1} widget={widget} handleChange={e => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'Gauge':
|
|
let gaugeBoundOnChange = (e) => {
|
|
handleChange([e, {target: {id: 'signal', value: ''}}]);
|
|
}
|
|
dialogControls.push(
|
|
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => gaugeBoundOnChange(e) } />,
|
|
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetCheckboxControl key={3} widget={widget} controlId="colorZones" text="Show color zones" handleChange={e => handleChange(e)} />,
|
|
<EditWidgetColorZonesControl key={4} widget={widget} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetMinMaxControl key={5} widget={widget} controlId="value" handleChange={e => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'PlotTable':
|
|
let plotTableBoundOnChange = (e) => {
|
|
handleChange([e, {target: {id: 'preselectedSignals', value: []}}]);
|
|
}
|
|
dialogControls.push(
|
|
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotTableBoundOnChange(e)} />,
|
|
<EditWidgetSignalsControl key={1} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetTextControl key={2} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetTimeControl key={3} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetMinMaxControl key={4} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'Slider':
|
|
dialogControls.push(
|
|
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
|
|
<EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetSimulationControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetSignalControl key={3} widget={widget} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetCheckboxControl key={4} text={'Continous Update'} controlId={'continous_update'} widget={widget} input simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetCheckboxControl key={5} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />,
|
|
<EditWidgetMinMaxControl key={6} widget={widget} controlId={'range'} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetNumberControl key={7} widget={widget} controlId={'step'} label={'Step Size'} defaultValue={0.1} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetNumberControl key={8} widget={widget} controlId={'default_value'} label={'Default Value'} defaultValue={50} handleChange={(e) => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'Button':
|
|
let buttonBoundOnChange = (e) => {
|
|
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
|
}
|
|
dialogControls.push(
|
|
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
|
|
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => buttonBoundOnChange(e)} />,
|
|
<EditWidgetSignalControl key={2} widget={widget} controlId={'signal'} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetCheckboxControl key={3} widget={widget} controlId={'toggle'} text="Toggle" handleChange={e => handleChange(e)} />,
|
|
<EditWidgetNumberControl key={4} widget={widget} controlId={'on_value'} label={'On Value'} defaultValue={1} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetNumberControl key={5} widget={widget} controlId={'off_value'} label={'Off Value'} defaultValue={0} handleChange={(e) => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'Box':
|
|
dialogControls.push(
|
|
<EditWidgetColorControl key={0} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
|
<EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background color'} handleChange={e => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'Label':
|
|
dialogControls.push(
|
|
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
|
|
<EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetColorControl key={2} widget={widget} controlId={'fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'HTML':
|
|
dialogControls.push(
|
|
<EditWidgetHTMLContent key={0} widget={widget} placeholder='HTML Code' controlId='content' handleChange={e => handleChange(e)} />
|
|
);
|
|
break;
|
|
case 'Topology':
|
|
// Restrict to only xml files (MIME)
|
|
let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml'));
|
|
dialogControls.push(
|
|
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
|
|
);
|
|
break;
|
|
|
|
case 'Input':
|
|
let inputBoundOnChange = (e) => {
|
|
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
|
}
|
|
dialogControls.push(
|
|
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
|
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => inputBoundOnChange(e)} />,
|
|
<EditWidgetSignalControl key={2} widget={widget} controlId={'signal'} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
|
|
);
|
|
break;
|
|
|
|
default:
|
|
console.log('Non-valid widget type: ' + widgetType);
|
|
}
|
|
|
|
return dialogControls;
|
|
}
|