diff options
Diffstat (limited to 'src/components/simulations')
| -rw-r--r-- | src/components/simulations/FilterButton.js | 32 | ||||
| -rw-r--r-- | src/components/simulations/FilterPanel.js | 12 | ||||
| -rw-r--r-- | src/components/simulations/NewSimulationButtonComponent.js | 18 | ||||
| -rw-r--r-- | src/components/simulations/SimulationActionButtons.js | 58 | ||||
| -rw-r--r-- | src/components/simulations/SimulationAuthList.js | 61 | ||||
| -rw-r--r-- | src/components/simulations/SimulationAuthRow.js | 42 |
6 files changed, 117 insertions, 106 deletions
diff --git a/src/components/simulations/FilterButton.js b/src/components/simulations/FilterButton.js index b26dd231..aa41f180 100644 --- a/src/components/simulations/FilterButton.js +++ b/src/components/simulations/FilterButton.js @@ -1,22 +1,24 @@ -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; +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> +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 + active: PropTypes.bool.isRequired, + children: PropTypes.node.isRequired, + onClick: PropTypes.func.isRequired }; export default FilterButton; diff --git a/src/components/simulations/FilterPanel.js b/src/components/simulations/FilterPanel.js index 504e24e4..836c0842 100644 --- a/src/components/simulations/FilterPanel.js +++ b/src/components/simulations/FilterPanel.js @@ -1,13 +1,13 @@ -import React from 'react'; +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> + <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/src/components/simulations/NewSimulationButtonComponent.js b/src/components/simulations/NewSimulationButtonComponent.js index 74036c1b..7e12d30f 100644 --- a/src/components/simulations/NewSimulationButtonComponent.js +++ b/src/components/simulations/NewSimulationButtonComponent.js @@ -1,17 +1,17 @@ -import PropTypes from 'prop-types'; -import React from 'react'; +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> +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, + onClick: PropTypes.func.isRequired }; export default NewSimulationButtonComponent; diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js index c8325a71..46f4f159 100644 --- a/src/components/simulations/SimulationActionButtons.js +++ b/src/components/simulations/SimulationActionButtons.js @@ -1,37 +1,37 @@ import PropTypes from "prop-types"; -import React from 'react'; -import {Link} from "react-router-dom"; +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> +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, + simulationId: PropTypes.number.isRequired, + onViewUsers: PropTypes.func, + onDelete: PropTypes.func }; export default SimulationActionButtons; diff --git a/src/components/simulations/SimulationAuthList.js b/src/components/simulations/SimulationAuthList.js index 27b141fe..f29dc96d 100644 --- a/src/components/simulations/SimulationAuthList.js +++ b/src/components/simulations/SimulationAuthList.js @@ -1,38 +1,43 @@ -import PropTypes from 'prop-types'; -import React from 'react'; +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> - } +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, + authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired }; export default SimulationAuthList; diff --git a/src/components/simulations/SimulationAuthRow.js b/src/components/simulations/SimulationAuthRow.js index 5f452f3e..b638fbce 100644 --- a/src/components/simulations/SimulationAuthRow.js +++ b/src/components/simulations/SimulationAuthRow.js @@ -1,28 +1,32 @@ -import classNames from 'classnames'; -import React from 'react'; +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"; +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> +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, + simulationAuth: Shapes.Authorization.isRequired }; export default SimulationAuthRow; |
