diff options
Diffstat (limited to 'frontend')
5 files changed, 50 insertions, 16 deletions
diff --git a/frontend/src/components/modals/custom-components/ChangeTopologyModalComponent.js b/frontend/src/components/modals/custom-components/ChangeTopologyModalComponent.js index e36bde48..f1645dcf 100644 --- a/frontend/src/components/modals/custom-components/ChangeTopologyModalComponent.js +++ b/frontend/src/components/modals/custom-components/ChangeTopologyModalComponent.js @@ -7,6 +7,8 @@ class ChangeTopologyModalComponent extends React.Component { static propTypes = { show: PropTypes.bool.isRequired, topologies: PropTypes.arrayOf(Shapes.Topology), + currentTopologyId: PropTypes.number, + onChooseTopology: PropTypes.func.isRequired, onCreateTopology: PropTypes.func.isRequired, onDuplicateTopology: PropTypes.func.isRequired, onDeleteTopology: PropTypes.func.isRequired, @@ -26,6 +28,11 @@ class ChangeTopologyModalComponent extends React.Component { } } + onChoose(id) { + this.props.onChooseTopology(id) + this.reset() + } + onCreate() { this.props.onCreateTopology(this.textInput.value) this.reset() @@ -58,19 +65,31 @@ class ChangeTopologyModalComponent extends React.Component { onCancel={this.onCancel.bind(this)} > <div> - {this.props.topologies.forEach(topology => ( - <div key={topology._id}> - {topology.name} - <div - className="btn btn-danger" - onClick={() => this.onDelete(topology._id)} - > - Delete + {this.props.topologies.map((topology, idx) => ( + <div key={topology._id} className="row mb-1"> + <div className="col-6"> + <em>{topology._id === this.props.currentTopologyId ? 'Active: ' : ''}</em> + {topology.name} + </div> + <div className="col-6 text-right"> + <span + className="btn btn-primary mr-1" + onClick={() => this.onChoose(topology._id)} + > + Choose + </span> + <span + className={'btn btn-danger ' + (idx === 0 ? 'disabled' : '')} + onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined} + > + Delete + </span> </div> </div> ))} </div> + <h5 className="pt-3 pt-1">New Topology</h5> <form onSubmit={e => { e.preventDefault() diff --git a/frontend/src/components/navigation/AppNavbar.js b/frontend/src/components/navigation/AppNavbar.js index 15f08b5f..c3ab3c47 100644 --- a/frontend/src/components/navigation/AppNavbar.js +++ b/frontend/src/components/navigation/AppNavbar.js @@ -26,7 +26,7 @@ const AppNavbar = ({ simulationId, inSimulation, fullWidth, onViewTopologies }) </NavItem> <NavItem route="topologies"> <span - className="nav-link" + className="nav-link clickable" title="Topologies" onClick={onViewTopologies} > diff --git a/frontend/src/containers/modals/ChangeTopologyModal.js b/frontend/src/containers/modals/ChangeTopologyModal.js index bd364194..a1db9032 100644 --- a/frontend/src/containers/modals/ChangeTopologyModal.js +++ b/frontend/src/containers/modals/ChangeTopologyModal.js @@ -2,6 +2,7 @@ import { connect } from 'react-redux' import ChangeTopologyModalComponent from '../../components/modals/custom-components/ChangeTopologyModalComponent' import { closeChangeTopologyModal } from '../../actions/modals/topology' import { addTopology, deleteTopology } from '../../actions/topologies' +import { setCurrentTopology } from '../../actions/topology/building' const mapStateToProps = state => { let topologies = state.objects.simulation[state.currentSimulationId] ? state.objects.simulation[state.currentSimulationId].topologyIds.map(t => ( @@ -12,17 +13,24 @@ const mapStateToProps = state => { } return { - show: state.modals.newExperimentModalVisible, + show: state.modals.changeTopologyModalVisible, + currentTopologyId: state.currentTopologyId, topologies, } } const mapDispatchToProps = dispatch => { return { + onChooseTopology: (id) => { + dispatch( + setCurrentTopology(id) + ) + dispatch(closeChangeTopologyModal()) + }, onCreateTopology: (name) => { if (name) { dispatch( - addTopology({name}) + addTopology({name, rooms: []}) ) } dispatch(closeChangeTopologyModal()) @@ -31,7 +39,7 @@ const mapDispatchToProps = dispatch => { if (name) { // TODO different handling here dispatch( - addTopology({name}) + addTopology({name, rooms: []}) ) } dispatch(closeChangeTopologyModal()) diff --git a/frontend/src/sagas/topology.js b/frontend/src/sagas/topology.js index e7ce9043..f86dcdc3 100644 --- a/frontend/src/sagas/topology.js +++ b/frontend/src/sagas/topology.js @@ -50,11 +50,10 @@ export function* onAddTopology(action) { const topology = yield call( addTopology, Object.assign({}, action.topology, { - _id: -1, simulationId: currentSimulationId, }) ) - yield put(addToStore('topology', topology)) + yield fetchAndStoreTopology(topology._id) const topologyIds = yield select((state) => state.objects.simulation[currentSimulationId].topologyIds) yield put( @@ -62,6 +61,7 @@ export function* onAddTopology(action) { topologyIds: topologyIds.concat([topology._id]), }) ) + yield put(setCurrentTopology(topology._id)) } catch (error) { console.error(error) } @@ -69,10 +69,14 @@ export function* onAddTopology(action) { export function* onDeleteTopology(action) { try { - yield call(deleteTopology, action.id) - const currentSimulationId = yield select((state) => state.currentSimulationId) const topologyIds = yield select((state) => state.objects.simulation[currentSimulationId].topologyIds) + const currentTopologyId = yield select((state) => state.currentTopologyId) + if (currentTopologyId === action.id) { + yield put(setCurrentTopology(topologyIds.filter(t => t !== action.id)[0])) + } + + yield call(deleteTopology, action.id) yield put( addPropToStoreObject('simulation', currentSimulationId, { diff --git a/frontend/src/style-globals/_mixins.sass b/frontend/src/style-globals/_mixins.sass index d0a8d1ac..03eaec8a 100644 --- a/frontend/src/style-globals/_mixins.sass +++ b/frontend/src/style-globals/_mixins.sass @@ -19,3 +19,6 @@ =clickable cursor: pointer +user-select + +.clickable + +clickable |