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: create edit files option

This commit is contained in:
Laura Fuentes Grau 2020-06-03 00:13:25 +02:00
parent ce26514758
commit 0bed9b3b73
3 changed files with 277 additions and 0 deletions

View file

@ -65,11 +65,18 @@ class DashboardButtonGroup extends React.Component {
);
}
buttons.push(
<Button key={key++} onClick={this.props.onEditFiles} style={buttonStyle}>
<Icon icon="file" /> Edit Files
</Button>
);
buttons.push(
<Button key={key++} onClick={this.props.onEdit} style={buttonStyle}>
<Icon icon="pen" /> Edit Layout
</Button>
);
}
return <div className='section-buttons-group-right'>

View file

@ -22,6 +22,7 @@ import classNames from 'classnames';
import Widget from '../widget/widget';
import EditWidget from '../widget/edit-widget/edit-widget';
import EditFiles from '../file/edit-files'
import WidgetContextMenu from '../widget/widget-context-menu';
import WidgetToolbox from '../widget/widget-toolbox';
import WidgetArea from '../widget/widget-area';
@ -121,6 +122,8 @@ class Dashboard extends Component {
paused: prevState.paused || false,
editModal: false,
filesEditModal: false,
filesEditSaveState: prevState.filesEditSaveState || [],
modalData: null,
modalIndex: null,
widgetChangeData: [],
@ -262,6 +265,63 @@ class Dashboard extends Component {
this.setState({ editModal: true, modalData: widget, modalIndex: index });
};
startEditFiles(){
let tempFiles = [];
this.state.files.forEach( file => {
tempFiles.push({
id: file.id,
name: file.name
});
})
this.setState({filesEditModal: true, filesEditSaveState: tempFiles});
}
closeEditFiles(files,deleteData,addData){
if(files || deleteData || addData){
if(addData.length > 0){
let formData = new FormData();
addData.forEach( file => {
delete file.id;
formData.append("file", file);
});
AppDispatcher.dispatch({
type: 'files/start-upload',
data: formData,
token: this.state.sessionToken,
scenarioID: this.state.dashboard.scenarioID,
});
}
if(deleteData.length > 0){
deleteData.forEach( file => {
AppDispatcher.dispatch({
type: 'files/start-remove',
data: file,
token: this.state.sessionToken
});
});
}
}
let formData = new FormData();
files.forEach( file => {
if(file.type === "application/octet-stream"){
let originalFile = this.state.filesEditSaveState.find(element => parseInt(element.id,10) === parseInt(file.id,10));
if(originalFile.name !== file.name){
formData.append("file", file);
AppDispatcher.dispatch({
type: 'files/start-edit',
token: this.state.sessionToken,
data: formData
});
}
}
})
this.setState({ filesEditModal: false, filesEditSaveState: [] });
}
uploadFile(data,widget){
AppDispatcher.dispatch({
type: 'files/start-upload',
@ -416,6 +476,7 @@ class Dashboard extends Component {
onFullscreen={this.props.toggleFullscreen}
onPause={this.pauseData.bind(this)}
onUnpause={this.unpauseData.bind(this)}
onEditFiles = {this.startEditFiles.bind(this)}
/>
</div>
@ -473,6 +534,14 @@ class Dashboard extends Component {
files={this.state.files}
/>
<EditFiles
sessionToken={this.state.sessionToken}
show={this.state.filesEditModal}
onClose={this.closeEditFiles.bind(this)}
signals={this.state.signals}
files={this.state.files}
/>
</div>
</div>;

201
src/file/edit-files.js Normal file
View file

@ -0,0 +1,201 @@
/**
* 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 {FormGroup, FormControl, FormLabel, Button} from 'react-bootstrap';
import Dialog from '../common/dialogs/dialog';
class EditFilesDialog extends React.Component {
valid = true;
constructor(props) {
super(props);
this.state = {
files: [],
selectedFile: {},
deleteData: [],
addData: [],
addFile: {}
};
}
static getDerivedStateFromProps(props, state){
return {
files: props.files
};
}
onClose(canceled) {
if (canceled === false) {
if (this.validChanges()) {
this.props.onClose(this.state.files,this.state.deleteData,this.state.addData);
}
} else {
this.props.onClose();
}
}
//can you add file to state array?
addFile(){
let addFile = this.state.addFile[0];
addFile.id = this.state.files[this.state.files.length -1 ].id +1;
let tempFiles = this.state.files;
tempFiles.push(addFile);
this.setState({files: tempFiles});
let tempAddFiles = this.state.addData;
tempAddFiles.push(addFile);
this.setState({addData: tempAddFiles});
this.setState({addFile: {}});
}
deleteFile(){
let tempFiles = this.state.files;
let changeId = false;
for (let i = 0; i < tempFiles.length; i++) {
if(changeId){
tempFiles[i-1] = tempFiles[i];
}
else if(tempFiles[i].id === this.state.selectedFile.id){
changeId = true;
}
}
tempFiles.pop();
this.setState({files: tempFiles});
if(this.state.selectedFile.type !== "application/octet-stream"){
let tempAddFiles = this.state.addData;
let changePosition = false;
for (let i = 0; i < tempAddFiles.length; i++) {
if(changePosition){
tempAddFiles[i-1] = tempAddFiles[i];
}
else if(tempAddFiles[i].id === this.state.selectedFile.id){
changePosition = true;
}
}
tempAddFiles.pop();
this.setState({addData: tempAddFiles});
}
else{
let tempDeleteFiles = this.state.deleteData;
tempDeleteFiles.push(this.state.selectedFile);
this.setState({deleteData: tempDeleteFiles});
}
}
handleChange(e) {
if(e.target.id === "selectedFile"){
let tempFile = this.state.files.find(element => element.id === parseInt(e.target.value, 10));
this.setState({ [e.target.id]: tempFile });
}
else if(e.target.id === "name"){
if(this.state.selectedFile.type === "application/octet-stream"){
let tempFile = this.state.selectedFile;
tempFile.name = e.target.value;
this.setState({selectedFile: tempFile});
let tempFileList = this.state.files;
tempFileList[tempFile.id - 1] = tempFile;
this.setState({files: tempFileList});
}
else {
const newFile = new File([this.state.selectedFile], e.target.value , {type: this.state.selectedFile.type});
this.setState({selectedFile: newFile});
let tempFileList = this.state.files;
newFile.id = this.state.selectedFile.id;
tempFileList[newFile.id - 1] = newFile;
this.setState({files: tempFileList});
let tempAddFiles = this.state.addData;
for (let i = 0; i < tempAddFiles.length; i++) {
if(tempAddFiles[i].id === newFile.id){
tempAddFiles[i] = newFile;
}
}
this.setState({addData: tempAddFiles});
}
}
}
validChanges() {
return true;
}
render() {
let fileOptions = [];
if (this.state.files.length > 0){
fileOptions.push(
<option key = {0} default>Select image file</option>
)
fileOptions.push(this.state.files.map((file, index) => (
<option key={index+1} value={file.id}>{file.name}</option>
)))
} else {
fileOptions = <option disabled value style={{ display: 'none' }}>No files found, please upload one first.</option>
}
return (
<Dialog show={this.props.show} title="Edit File" buttonTitle="Save" onClose={(c) => this.onClose(c)} valid={true}>
<div>
<FormGroup controlId="selectedFile">
<FormLabel>Image</FormLabel>
<FormControl
as="select"
value={this.state.selectedFile.id}
onChange={(e) => this.handleChange(e)}>{fileOptions} </FormControl>
</FormGroup>
<FormGroup controlId={"name"}>
<FormLabel>{"File Name"}</FormLabel>
<FormControl type="text" placeholder={"Enter name"} value={this.state.selectedFile.name} onChange={e => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<Button onClick={this.deleteFile.bind(this)}>Delete File</Button>
<FormGroup controlId="upload">
<FormLabel>Upload</FormLabel>
<FormControl type="file" onChange={(e) => this.setState({ addFile: e.target.files })} />
</FormGroup>
<Button size='sm' onClick={this.addFile.bind(this)}>Add File</Button>
</div>
</Dialog>
);
}
}
export default EditFilesDialog;