From 39277c91281dbc7bd40bdffabc5b5675e9ede483 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
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 +-
 2 files changed, 28 insertions(+), 9 deletions(-)

(limited to 'frontend/src/components')

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}
                     >
-- 
cgit v1.2.3