Get basic topology change working

6 files changed, 55 insertions, 19 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
diff --git a/web-server/opendc/api/v2/simulations/simulationId/topologies/endpoint.py b/web-server/opendc/api/v2/simulations/simulationId/topologies/endpoint.py
index 09c84019..7c07e63b 100644
--- a/web-server/opendc/api/v2/simulations/simulationId/topologies/endpoint.py
+++ b/web-server/opendc/api/v2/simulations/simulationId/topologies/endpoint.py
@@ -16,10 +16,12 @@ def POST(request):
     simulation.check_exists()
     simulation.check_user_access(request.google_id, True)
 
-    topology = Topology({'name': request.params_body['topology']['name']})
+    topology = Topology({
+        'simulationId': request.params_path['simulationId'],
+        'name': request.params_body['topology']['name'],
+        'rooms': request.params_body['topology']['rooms'],
+    })
 
-    topology.set_property('datetimeCreated', Database.datetime_to_string(datetime.now()))
-    topology.set_property('datetimeLastEdited', Database.datetime_to_string(datetime.now()))
     topology.insert()
 
     simulation.obj['topologyIds'].append(topology.get_id())