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

input user to add in text field

This commit is contained in:
irismarie 2020-06-19 15:30:50 +02:00
parent 0fe5bdcc58
commit da74f199f7
2 changed files with 63 additions and 79 deletions

View file

@ -39,8 +39,9 @@ class ScenarioStore extends ArrayStore{
}
/* store functions, called when calls to backend have returned */
// save users after they are loaded ('getUsers' call)
saveUsers(state, action) {
storeUsers(state, action) {
let scenarioID = action.scenarioID;
state.forEach((element, index, array) => {
if (element.id === scenarioID) {
@ -52,7 +53,7 @@ class ScenarioStore extends ArrayStore{
}
// save new user after it was added to scenario ('addUser' call)
saveUser(state, action) {
storeUser(state, action) {
let scenarioID = action.scenarioID;
state.forEach((element, index, array) => {
if (element.id === scenarioID) {
@ -71,8 +72,8 @@ class ScenarioStore extends ArrayStore{
const userindex = array[index]["users"].indexOf(action.user);
if (index > -1) {
array[index]["users"].splice(userindex, 1);
this.__emitChange();
}
this.__emitChange();
return state;
}
})
@ -112,10 +113,10 @@ class ScenarioStore extends ArrayStore{
}
case 'scenarios/users':
return this.saveUsers(state, action);
return this.storeUsers(state, action);
case 'scenarios/user-added':
return this.saveUser(state, action);
return this.storeUser(state, action);
case 'scenarios/user-deleted':
return this.removeUser(state, action);

View file

@ -17,11 +17,11 @@
import React from 'react';
import { Container } from 'flux/utils';
import { Button, DropdownButton, Dropdown } from 'react-bootstrap';
import { Button, InputGroup, FormControl } from 'react-bootstrap';
import FileSaver from 'file-saver';
import ScenarioStore from './scenario-store';
//import ScenariosDataManager from './scenarios-data-manager';
import ICStore from '../ic/ic-store';
import DashboardStore from '../dashboard/dashboard-store';
import ConfigStore from '../componentconfig/config-store';
@ -42,21 +42,18 @@ import EditConfigDialog from "../componentconfig/edit-config";
import EditSignalMapping from "../signal/edit-signal-mapping";
import FileStore from "../file/file-store"
import WidgetStore from "../widget/widget-store";
import UsersStore from '../user/users-store';
class Scenario extends React.Component {
static getStores() {
return [ ScenarioStore, ConfigStore, DashboardStore, ICStore, LoginStore, SignalStore, FileStore, WidgetStore, UsersStore];
return [ScenarioStore, ConfigStore, DashboardStore, ICStore, LoginStore, SignalStore, FileStore, WidgetStore];
}
static calculateState(prevState, props) {
// get selected scenario
const sessionToken = LoginStore.getState().token;
let users = null;
const scenario = ScenarioStore.getState().find(s => s.id === parseInt(props.match.params.scenario, 10));
if (scenario == null) {
AppDispatcher.dispatch({
@ -65,15 +62,6 @@ class Scenario extends React.Component {
token: sessionToken
});
}
else {
users = scenario.users;
}
let allUsers = UsersStore.getState();
let allUserNames = [];
allUsers.forEach((user) => {
allUserNames.push(user.username);
});
// obtain all dashboards of a scenario
let dashboards = DashboardStore.getState().filter(dashb => dashb.scenarioID === parseInt(props.match.params.scenario, 10));
@ -87,12 +75,8 @@ class Scenario extends React.Component {
let signals = SignalStore.getState();
return {
scenario,
users,
allUsers,
allUserNames,
sessionToken,
configs,
dashboards,
@ -115,7 +99,6 @@ class Scenario extends React.Component {
importDashboardModal: false,
modalDashboardData: {},
addUserModal: false,
deleteUserName: '',
deleteUserModal: false,
}
@ -136,22 +119,18 @@ class Scenario extends React.Component {
type: 'ics/start-load',
token: this.state.sessionToken
});
// load users
AppDispatcher.dispatch({
type: 'users/start-load',
token: this.state.sessionToken
});
}
// add User to Scenario
addUser(userindex) {
let username = this.state.allUserNames[userindex];
ScenarioStore.addUser(this.state.sessionToken, this.state.scenario.id, username);
/* ##############################################
* User modification methods
############################################## */
addUser() {
ScenarioStore.addUser(this.state.sessionToken, this.state.scenario.id, this.userToAdd);
}
closeDeleteUserModal() {
this.setState({deleteUserModal: false});
this.setState({ deleteUserModal: false });
ScenarioStore.deleteUser(this.state.sessionToken, this.state.scenario.id, this.state.deleteUserName);
}
@ -159,7 +138,7 @@ class Scenario extends React.Component {
* Component Configuration modification methods
############################################## */
addConfig(){
addConfig() {
const config = {
scenarioID: this.state.scenario.id,
name: 'New Component Configuration',
@ -175,8 +154,8 @@ class Scenario extends React.Component {
}
closeEditConfigModal(data){
this.setState({ editConfigModal : false });
closeEditConfigModal(data) {
this.setState({ editConfigModal: false });
if (data) {
AppDispatcher.dispatch({
@ -201,7 +180,7 @@ class Scenario extends React.Component {
});
}
importConfig(data){
importConfig(data) {
this.setState({ importConfigModal: false });
if (data == null) {
@ -303,7 +282,7 @@ class Scenario extends React.Component {
getICName(icID) {
for (let ic of this.state.ics) {
if (ic.id === icID) {
return ic.name || ic.uuid;
return ic.name || ic.uuid;
}
}
}
@ -313,7 +292,7 @@ class Scenario extends React.Component {
############################################## */
closeNewDashboardModal(data) {
this.setState({ newDashboardModal : false });
this.setState({ newDashboardModal: false });
if (data) {
let newDashboard = data;
// add default grid value and scenarioID
@ -328,7 +307,7 @@ class Scenario extends React.Component {
}
}
closeDeleteDashboardModal(confirmDelete){
closeDeleteDashboardModal(confirmDelete) {
this.setState({ deleteDashboardModal: false });
if (confirmDelete === false) {
@ -379,9 +358,9 @@ class Scenario extends React.Component {
* Signal modification methods
############################################## */
closeDeleteSignalModal(data){
closeDeleteSignalModal(data) {
// data contains the signal to be deleted
if (data){
if (data) {
AppDispatcher.dispatch({
type: 'signals/start-remove',
@ -392,7 +371,7 @@ class Scenario extends React.Component {
}
}
closeNewSignalModal(data){
closeNewSignalModal(data) {
//data contains the new signal incl. configID and direction
if (data) {
AppDispatcher.dispatch({
@ -403,17 +382,17 @@ class Scenario extends React.Component {
}
}
closeEditSignalsModal(data, direction){
closeEditSignalsModal(data, direction) {
if( direction === "in") {
this.setState({editInputSignalsModal: false});
} else if( direction === "out"){
this.setState({editOutputSignalsModal: false});
if (direction === "in") {
this.setState({ editInputSignalsModal: false });
} else if (direction === "out") {
this.setState({ editOutputSignalsModal: false });
} else {
return; // no valid direction
}
if (data){
if (data) {
//data is an array of signals
for (let sig of data) {
//dispatch changes to signals
@ -431,7 +410,7 @@ class Scenario extends React.Component {
* File modification methods
############################################## */
getFileName(id){
getFileName(id) {
for (let file of this.state.files) {
if (file.id === id) {
return file.name;
@ -454,38 +433,42 @@ class Scenario extends React.Component {
{/*Scenario Users table*/}
<h2>Users</h2>
<Table data={this.state.users}>
<TableColumn title='Name' dataKey='username' link='/users/' linkKey='id' />
<TableColumn title='Mail' dataKey='mail' />
<TableColumn
title=''
width='200'
deleteButton
onDelete={(index) => this.setState({ deleteUserModal: true, deleteUserName: this.state.users[index].username, modalUserIndex: index })}
<div>
<Table data={this.state.scenario.users}>
<TableColumn title='Name' dataKey='username' link='/users/' linkKey='id' />
<TableColumn title='Mail' dataKey='mail' />
<TableColumn
title=''
width='200'
deleteButton
onDelete={(index) => this.setState({ deleteUserModal: true, deleteUserName: this.state.scenario.users[index].username, modalUserIndex: index })}
/>
</Table>
</Table>
<div style={{ float: 'right' }}>
<DropdownButton
title="Add User"
onSelect={(index) => this.addUser(index)}
>
{this.state.allUserNames.map((opt,i) => (
<Dropdown.Item key={i} eventKey={i}>
{opt}
</Dropdown.Item>
))}
</DropdownButton>
<InputGroup style={{ width: 400, float: 'right' }}>
<FormControl
placeholder="Username"
onChange={(e) => this.userToAdd = e.target.value}
/>
<InputGroup.Append>
<Button
type="submit"
onClick={() => this.addUser()}>
Add User
</Button>
</InputGroup.Append>
</InputGroup><br/>
</div>
<DeleteDialog title="user" name={this.state.deleteUserName} show={this.state.deleteUserModal} onClose={(c) => this.closeDeleteUserModal(c)} />
{/*Component Configurations table*/}
<h2>Component Configurations</h2>
<Table data={this.state.configs}>
<TableColumn checkbox onChecked={(index, event) => this.onConfigChecked(index, event)} width='30' />
<TableColumn title='Name' dataKey='name' />
<TableColumn title='Selected configuration file' dataKey='selectedFileID' modifier={(selectedFileID) => this.getFileName(selectedFileID)}/>
<TableColumn title='Selected configuration file' dataKey='selectedFileID' modifier={(selectedFileID) => this.getFileName(selectedFileID)} />
<TableColumn
title='# Output Signals'
dataKey='outputLength'
@ -520,7 +503,7 @@ class Scenario extends React.Component {
{ id: '1', title: 'Stop', data: { action: 'stop' } },
{ id: '2', title: 'Pause', data: { action: 'pause' } },
{ id: '3', title: 'Resume', data: { action: 'resume' } }
]}/>
]} />
</div>
<div style={{ float: 'right' }}>
@ -557,7 +540,7 @@ class Scenario extends React.Component {
onDelete={(data) => this.closeDeleteSignalModal(data)}
direction="Input"
signals={this.state.signals}
configID={this.state.modalConfigData.id}/>
configID={this.state.modalConfigData.id} />
{/*Dashboard table*/}
<h2>Dashboards</h2>
@ -581,10 +564,10 @@ class Scenario extends React.Component {
<div style={{ clear: 'both' }} />
<NewDashboardDialog show={this.state.newDashboardModal} onClose={data => this.closeNewDashboardModal(data)}/>
<ImportDashboardDialog show={this.state.importDashboardModal} onClose={data => this.closeImportDashboardModal(data)} />
<NewDashboardDialog show={this.state.newDashboardModal} onClose={data => this.closeNewDashboardModal(data)} />
<ImportDashboardDialog show={this.state.importDashboardModal} onClose={data => this.closeImportDashboardModal(data)} />
<DeleteDialog title="dashboard" name={this.state.modalDashboardData.name} show={this.state.deleteDashboardModal} onClose={(e) => this.closeDeleteDashboardModal(e)}/>
<DeleteDialog title="dashboard" name={this.state.modalDashboardData.name} show={this.state.deleteDashboardModal} onClose={(e) => this.closeDeleteDashboardModal(e)} />
</div>;