1 files changed, 62 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
new file mode 100644
index 00000000..e775a663
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Shapes from '../../../../shapes'
+import { Link } from 'react-router-dom'
+import FontAwesome from 'react-fontawesome'
+
+class ScenarioListComponent extends React.Component {
+    static propTypes = {
+        scenarios: PropTypes.arrayOf(Shapes.Scenario),
+        portfolioId: PropTypes.string,
+        currentProjectId: PropTypes.string.isRequired,
+        currentScenarioId: PropTypes.string,
+        onNewScenario: PropTypes.func.isRequired,
+        onChooseScenario: PropTypes.func.isRequired,
+        onDeleteScenario: PropTypes.func.isRequired,
+    }
+
+    onDelete(id) {
+        this.props.onDeleteScenario(id)
+    }
+
+    render() {
+        return (
+            <>
+                {this.props.scenarios.map((scenario, idx) => (
+                    <div key={scenario._id} className="row mb-1">
+                        <div
+                            className={
+                                'col-7 pl-5 align-self-center ' +
+                                (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')
+                            }
+                        >
+                            {scenario.name}
+                        </div>
+                        <div className="col-5 text-right">
+                            <Link
+                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
+                                to={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
+                                onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
+                            />
+                            <span
+                                className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                                onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)}
+                            />
+                        </div>
+                    </div>
+                ))}
+                <div className="pl-4 mb-2">
+                    <div
+                        className="btn btn-outline-primary"
+                        onClick={() => this.props.onNewScenario(this.props.portfolioId)}
+                    >
+                        <FontAwesome name="plus" className="mr-1" />
+                        New scenario
+                    </div>
+                </div>
+            </>
+        )
+    }
+}
+
+export default ScenarioListComponent