From 39277c91281dbc7bd40bdffabc5b5675e9ede483 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Fri, 3 Jul 2020 10:34:05 +0200 Subject: Get basic topology change working --- .../ChangeTopologyModalComponent.js | 35 +++++++++++++++++----- frontend/src/components/navigation/AppNavbar.js | 2 +- .../src/containers/modals/ChangeTopologyModal.js | 14 +++++++-- frontend/src/sagas/topology.js | 12 +++++--- frontend/src/style-globals/_mixins.sass | 3 ++ 5 files changed, 50 insertions(+), 16 deletions(-) (limited to 'frontend/src') 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)} >
- {this.props.topologies.forEach(topology => ( -
- {topology.name} -
this.onDelete(topology._id)} - > - Delete + {this.props.topologies.map((topology, idx) => ( +
+
+ {topology._id === this.props.currentTopologyId ? 'Active: ' : ''} + {topology.name} +
+
+ this.onChoose(topology._id)} + > + Choose + + idx !== 0 ? this.onDelete(topology._id) : undefined} + > + Delete +
))}
+
New Topology
{ 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 }) 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 -- cgit v1.2.3