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:
parent
ce26514758
commit
0bed9b3b73
3 changed files with 277 additions and 0 deletions
|
@ -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'>
|
||||
|
|
|
@ -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
201
src/file/edit-files.js
Normal 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;
|
Loading…
Add table
Reference in a new issue