From 90fae26aa4bd0e0eb3272ff6e6524060e9004fbb Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Mon, 29 Jun 2020 15:47:09 +0200
Subject: Prepare frontend repository for monorepo

This change prepares the frontend Git repository for the monorepo
residing at https://github.com/atlarge-research.com/opendc. To
accomodate for this, we move all files into a frontend subdirectory.
---
 .../src/components/simulations/FilterButton.js     | 24 ++++++++++++
 frontend/src/components/simulations/FilterPanel.js | 13 +++++++
 .../src/components/simulations/FilterPanel.sass    |  5 +++
 .../simulations/NewSimulationButtonComponent.js    | 17 +++++++++
 .../simulations/SimulationActionButtons.js         | 37 +++++++++++++++++++
 .../components/simulations/SimulationAuthList.js   | 43 ++++++++++++++++++++++
 .../components/simulations/SimulationAuthRow.js    | 32 ++++++++++++++++
 7 files changed, 171 insertions(+)
 create mode 100644 frontend/src/components/simulations/FilterButton.js
 create mode 100644 frontend/src/components/simulations/FilterPanel.js
 create mode 100644 frontend/src/components/simulations/FilterPanel.sass
 create mode 100644 frontend/src/components/simulations/NewSimulationButtonComponent.js
 create mode 100644 frontend/src/components/simulations/SimulationActionButtons.js
 create mode 100644 frontend/src/components/simulations/SimulationAuthList.js
 create mode 100644 frontend/src/components/simulations/SimulationAuthRow.js

(limited to 'frontend/src/components/simulations')

diff --git a/frontend/src/components/simulations/FilterButton.js b/frontend/src/components/simulations/FilterButton.js
new file mode 100644
index 00000000..aa41f180
--- /dev/null
+++ b/frontend/src/components/simulations/FilterButton.js
@@ -0,0 +1,24 @@
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+
+const FilterButton = ({ active, children, onClick }) => (
+  <button
+    className={classNames("btn btn-secondary", { active: active })}
+    onClick={() => {
+      if (!active) {
+        onClick();
+      }
+    }}
+  >
+    {children}
+  </button>
+);
+
+FilterButton.propTypes = {
+  active: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
+export default FilterButton;
diff --git a/frontend/src/components/simulations/FilterPanel.js b/frontend/src/components/simulations/FilterPanel.js
new file mode 100644
index 00000000..836c0842
--- /dev/null
+++ b/frontend/src/components/simulations/FilterPanel.js
@@ -0,0 +1,13 @@
+import React from "react";
+import FilterLink from "../../containers/simulations/FilterLink";
+import "./FilterPanel.css";
+
+const FilterPanel = () => (
+  <div className="btn-group filter-panel mb-2">
+    <FilterLink filter="SHOW_ALL">All Simulations</FilterLink>
+    <FilterLink filter="SHOW_OWN">My Simulations</FilterLink>
+    <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
+  </div>
+);
+
+export default FilterPanel;
diff --git a/frontend/src/components/simulations/FilterPanel.sass b/frontend/src/components/simulations/FilterPanel.sass
new file mode 100644
index 00000000..e10e4746
--- /dev/null
+++ b/frontend/src/components/simulations/FilterPanel.sass
@@ -0,0 +1,5 @@
+.filter-panel
+  display: flex
+
+  button
+    flex: 1 !important
diff --git a/frontend/src/components/simulations/NewSimulationButtonComponent.js b/frontend/src/components/simulations/NewSimulationButtonComponent.js
new file mode 100644
index 00000000..7e12d30f
--- /dev/null
+++ b/frontend/src/components/simulations/NewSimulationButtonComponent.js
@@ -0,0 +1,17 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+const NewSimulationButtonComponent = ({ onClick }) => (
+  <div className="bottom-btn-container">
+    <div className="btn btn-primary float-right" onClick={onClick}>
+      <span className="fa fa-plus mr-2" />
+      New Simulation
+    </div>
+  </div>
+);
+
+NewSimulationButtonComponent.propTypes = {
+  onClick: PropTypes.func.isRequired
+};
+
+export default NewSimulationButtonComponent;
diff --git a/frontend/src/components/simulations/SimulationActionButtons.js b/frontend/src/components/simulations/SimulationActionButtons.js
new file mode 100644
index 00000000..46f4f159
--- /dev/null
+++ b/frontend/src/components/simulations/SimulationActionButtons.js
@@ -0,0 +1,37 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Link } from "react-router-dom";
+
+const SimulationActionButtons = ({ simulationId, onViewUsers, onDelete }) => (
+  <td className="text-right">
+    <Link
+      to={"/simulations/" + simulationId}
+      className="btn btn-outline-primary btn-sm mr-2"
+      title="Open this simulation"
+    >
+      <span className="fa fa-play" />
+    </Link>
+    <div
+      className="btn btn-outline-success btn-sm disabled mr-2"
+      title="View and edit collaborators (not supported yet)"
+      onClick={() => onViewUsers(simulationId)}
+    >
+      <span className="fa fa-users" />
+    </div>
+    <div
+      className="btn btn-outline-danger btn-sm"
+      title="Delete this simulation"
+      onClick={() => onDelete(simulationId)}
+    >
+      <span className="fa fa-trash" />
+    </div>
+  </td>
+);
+
+SimulationActionButtons.propTypes = {
+  simulationId: PropTypes.number.isRequired,
+  onViewUsers: PropTypes.func,
+  onDelete: PropTypes.func
+};
+
+export default SimulationActionButtons;
diff --git a/frontend/src/components/simulations/SimulationAuthList.js b/frontend/src/components/simulations/SimulationAuthList.js
new file mode 100644
index 00000000..f29dc96d
--- /dev/null
+++ b/frontend/src/components/simulations/SimulationAuthList.js
@@ -0,0 +1,43 @@
+import PropTypes from "prop-types";
+import React from "react";
+import Shapes from "../../shapes/index";
+import SimulationAuthRow from "./SimulationAuthRow";
+
+const SimulationAuthList = ({ authorizations }) => {
+  return (
+    <div className="vertically-expanding-container">
+      {authorizations.length === 0 ? (
+        <div className="alert alert-info">
+          <span className="info-icon fa fa-question-circle mr-2" />
+          <strong>No simulations here yet...</strong> Add some with the 'New
+          Simulation' button!
+        </div>
+      ) : (
+        <table className="table table-striped">
+          <thead>
+            <tr>
+              <th>Simulation name</th>
+              <th>Last edited</th>
+              <th>Access rights</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {authorizations.map(authorization => (
+              <SimulationAuthRow
+                simulationAuth={authorization}
+                key={authorization.simulation.id}
+              />
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+};
+
+SimulationAuthList.propTypes = {
+  authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired
+};
+
+export default SimulationAuthList;
diff --git a/frontend/src/components/simulations/SimulationAuthRow.js b/frontend/src/components/simulations/SimulationAuthRow.js
new file mode 100644
index 00000000..b638fbce
--- /dev/null
+++ b/frontend/src/components/simulations/SimulationAuthRow.js
@@ -0,0 +1,32 @@
+import classNames from "classnames";
+import React from "react";
+import SimulationActions from "../../containers/simulations/SimulationActions";
+import Shapes from "../../shapes/index";
+import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from "../../util/authorizations";
+import { parseAndFormatDateTime } from "../../util/date-time";
+
+const SimulationAuthRow = ({ simulationAuth }) => (
+  <tr>
+    <td className="pt-3">{simulationAuth.simulation.name}</td>
+    <td className="pt-3">
+      {parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)}
+    </td>
+    <td className="pt-3">
+      <span
+        className={classNames(
+          "fa",
+          "fa-" + AUTH_ICON_MAP[simulationAuth.authorizationLevel],
+          "mr-2"
+        )}
+      />
+      {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]}
+    </td>
+    <SimulationActions simulationId={simulationAuth.simulation.id} />
+  </tr>
+);
+
+SimulationAuthRow.propTypes = {
+  simulationAuth: Shapes.Authorization.isRequired
+};
+
+export default SimulationAuthRow;
-- 
cgit v1.2.3