From b3e108e7a334dd62dd63caa20ec1dda85fc03d43 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Thu, 14 May 2020 13:45:35 +0300 Subject: [PATCH] popup for forward options --- public/locales/en/translations.json | 15 +++- public/locales/ro/translations.json | 15 +++- src/components/common/ActiveIcon.js | 17 ++++ src/components/common/MaterialTable.js | 21 +++++ .../components/ForwardOptionsComponent.js | 83 +++++++++++++++++++ .../components/ForwardOptionsDialog.js | 44 ++++++++++ .../session/components/SessionContainer.js | 34 ++++++-- .../components/SessionForwardsComponent.js | 56 ++++++------- .../components/SessionListComponent.js | 11 ++- .../session/components/SessionSummary.js | 8 +- src/features/session/styles/tableStyles.js | 10 +++ 11 files changed, 264 insertions(+), 50 deletions(-) create mode 100644 src/components/common/ActiveIcon.js create mode 100644 src/components/common/MaterialTable.js create mode 100644 src/features/session/components/ForwardOptionsComponent.js create mode 100644 src/features/session/components/ForwardOptionsDialog.js create mode 100644 src/features/session/styles/tableStyles.js diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index 0e4aaa2..93db929 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -17,6 +17,9 @@ "Sessions": "Sessions", "About": "About" }, + "General": { + "Close": "Close" + }, "Session": { "Title": "Sessions", "Session": "Session", @@ -27,10 +30,18 @@ "Host": "Host", "LogRows": "Log rows", "LogSize": "Log size", - "Details": { + "Forwards": { "From": "From", "To": "To", - "Options": "Options" + "Options": { + "Title": "Options", + "Name": "Name", + "Active": "Active", + "TrailingSlash": "Trailing slash", + "TrailingSlashTooltip": "A trailing slash is the forward slash placed at the end of a URL. The trailing slash is generally used to mark a directory, and if a URL is not terminated using a trailing slash, this generally points to a file.", + "PathOverwrite": "Path overwrite", + "PathOverwriteTooltip": "Option by which the base path of the application is automatically overwritten in all http text responses received from it." + } } } } diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index 7204bd8..b076f59 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -8,6 +8,9 @@ "Sessions": "Sesiuni", "About": "Despre" }, + "General": { + "Close": "Închide" + }, "Session": { "Title": "Sesiuni", "Session": "Sesiune", @@ -18,10 +21,18 @@ "Host": "Gazdă", "LogRows": "Linii log", "LogSize": "Dimensiune log", - "Details": { + "Forwards": { "From": "De la", "To": "Către", - "Options": "Opțiuni" + "Options": { + "Title": "Opțiuni", + "Name": "Denumire", + "Active": "Activă", + "TrailingSlash": "Trailing slash", + "TrailingSlashTooltip": "Bara oblică plasată la sfarșitul unei adrese URL. Slash-ul final este de obicei utilizat pentru a marca un director și dacă o adresă URL nu este încheiată folosind o bară oblică, aceasta indică în general un fișier.", + "PathOverwrite": "Path overwrite", + "PathOverwriteTooltip": "Opțiune prin care calea de bază a aplicației este suprascrisă automat în toate răspunsurile de text http primite de la aceasta." + } } } } diff --git a/src/components/common/ActiveIcon.js b/src/components/common/ActiveIcon.js new file mode 100644 index 0000000..361d34a --- /dev/null +++ b/src/components/common/ActiveIcon.js @@ -0,0 +1,17 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons"; + +const ActiveIcon = ({ active }) => { + return active && active === true ? ( + + ) : ( + + ); +}; + +ActiveIcon.propTypes = { + active: PropTypes.bool +}; + +export default ActiveIcon; diff --git a/src/components/common/MaterialTable.js b/src/components/common/MaterialTable.js new file mode 100644 index 0000000..60c6933 --- /dev/null +++ b/src/components/common/MaterialTable.js @@ -0,0 +1,21 @@ +import TableCell from "@material-ui/core/TableCell"; +import TableRow from "@material-ui/core/TableRow"; +import { withStyles } from "@material-ui/core/styles"; + +export const StyledTableCell = withStyles((theme) => ({ + head: { + backgroundColor: theme.palette.primary.main, + color: theme.palette.common.white + }, + body: { + fontSize: 14 + } +}))(TableCell); + +export const StyledTableRow = withStyles((theme) => ({ + root: { + "&:nth-of-type(odd)": { + backgroundColor: theme.palette.action.hover + } + } +}))(TableRow); diff --git a/src/features/session/components/ForwardOptionsComponent.js b/src/features/session/components/ForwardOptionsComponent.js new file mode 100644 index 0000000..438c41f --- /dev/null +++ b/src/features/session/components/ForwardOptionsComponent.js @@ -0,0 +1,83 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { makeStyles } from "@material-ui/core/styles"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableContainer from "@material-ui/core/TableContainer"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Paper from "@material-ui/core/Paper"; +import Tooltip from "@material-ui/core/Tooltip"; +import { useTranslation } from "react-i18next"; +import styles from "../styles/tableStyles"; +import { + StyledTableCell, + StyledTableRow +} from "../../../components/common/MaterialTable"; +import ActiveIcon from "../../../components/common/ActiveIcon"; +import Typography from "@material-ui/core/Typography"; + +const useStyles = makeStyles(styles); + +const ForwardOptionsComponent = ({ options }) => { + const classes = useStyles(); + const { t } = useTranslation(); + + return ( + <> + + + + + + {t("Session.Forwards.Options.Name")} + + + {t("Session.Forwards.Options.Active")} + + + + + + + + {t("Session.Forwards.Options.TrailingSlash")} + + + + + + + + + + {t("Session.Forwards.Options.PathOverwrite")} + + + + + + + +
+ + + {options.title} + + + ); +}; + +ForwardOptionsComponent.propTypes = { + options: PropTypes.object.isRequired +}; + +export default ForwardOptionsComponent; diff --git a/src/features/session/components/ForwardOptionsDialog.js b/src/features/session/components/ForwardOptionsDialog.js new file mode 100644 index 0000000..f82b942 --- /dev/null +++ b/src/features/session/components/ForwardOptionsDialog.js @@ -0,0 +1,44 @@ +import React from "react"; +import PropTypes from "prop-types"; +import Button from "@material-ui/core/Button"; +import Dialog from "@material-ui/core/Dialog"; +import DialogActions from "@material-ui/core/DialogActions"; +import DialogContent from "@material-ui/core/DialogContent"; +import DialogTitle from "@material-ui/core/DialogTitle"; +import { useTranslation } from "react-i18next"; +import ForwardOptionsComponent from "./ForwardOptionsComponent"; + +const ForwardOptionsDialog = ({ open, handleClose, options }) => { + const { t } = useTranslation(); + + return ( +
+ + + {t("Session.Forwards.Options.Title")} + + + {options ? : ""} + + + + + +
+ ); +}; + +ForwardOptionsDialog.propTypes = { + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, + options: PropTypes.object +}; + +export default ForwardOptionsDialog; diff --git a/src/features/session/components/SessionContainer.js b/src/features/session/components/SessionContainer.js index b576293..2ae9485 100644 --- a/src/features/session/components/SessionContainer.js +++ b/src/features/session/components/SessionContainer.js @@ -1,11 +1,15 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { connect } from "react-redux"; import { bindActionCreators } from "redux"; import PropTypes from "prop-types"; import SessionListComponent from "./SessionListComponent"; +import ForwardOptionsDialog from "./ForwardOptionsDialog"; import { loadServerSessions, loadSessionForwards } from "../actionCreators"; const SessionContainer = ({ actions, sessions, forwards }) => { + const [optionsDialogOpen, setOptionsDialogOpen] = useState(false); + const [forwardOptions, setForwardOptions] = useState(null); + useEffect(() => { actions.loadServerSessions(); }, []); @@ -14,12 +18,30 @@ const SessionContainer = ({ actions, sessions, forwards }) => { if (expanded) actions.loadSessionForwards(sessionId); }; + const handleOptionsDialogOpen = (options) => () => { + setForwardOptions(options); + setOptionsDialogOpen(true); + }; + + const handleOptionsDialogClose = () => { + setOptionsDialogOpen(false); + setForwardOptions(null); + }; + return ( - + <> + + + ); }; diff --git a/src/features/session/components/SessionForwardsComponent.js b/src/features/session/components/SessionForwardsComponent.js index b46011e..711a0d4 100644 --- a/src/features/session/components/SessionForwardsComponent.js +++ b/src/features/session/components/SessionForwardsComponent.js @@ -1,9 +1,8 @@ import React from "react"; import PropTypes from "prop-types"; -import { withStyles, makeStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; -import TableCell from "@material-ui/core/TableCell"; import TableContainer from "@material-ui/core/TableContainer"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; @@ -15,32 +14,15 @@ import Tooltip from "@material-ui/core/Tooltip"; import SessionForwardsHeaderComponent from "./SessionForwardsHeaderComponent"; import { Grid } from "@material-ui/core"; import { useTranslation } from "react-i18next"; +import styles from "../styles/tableStyles"; +import { + StyledTableCell, + StyledTableRow +} from "../../../components/common/MaterialTable"; -const StyledTableCell = withStyles((theme) => ({ - head: { - backgroundColor: theme.palette.primary.main, - color: theme.palette.common.white - }, - body: { - fontSize: 14 - } -}))(TableCell); +const useStyles = makeStyles(styles); -const StyledTableRow = withStyles((theme) => ({ - root: { - "&:nth-of-type(odd)": { - backgroundColor: theme.palette.action.hover - } - } -}))(TableRow); - -const useStyles = makeStyles({ - table: { - minWidth: 700 - } -}); - -const SessionForwardsComponent = ({ session, forwards }) => { +const SessionForwardsComponent = ({ session, forwards, openOptionsDialog }) => { const classes = useStyles(); const { t } = useTranslation(); @@ -61,11 +43,13 @@ const SessionForwardsComponent = ({ session, forwards }) => { - {t("Session.Details.From")} + {t("Session.Forwards.From")} + + + {t("Session.Forwards.To")} - {t("Session.Details.To")} - {t("Session.Details.Options")} + {t("Session.Forwards.Options.Title")} @@ -79,8 +63,15 @@ const SessionForwardsComponent = ({ session, forwards }) => { {row.to} {row.options ? ( - - + + >> ${row.to}` + })} + > @@ -108,7 +99,8 @@ const SessionForwardsComponent = ({ session, forwards }) => { SessionForwardsComponent.propTypes = { session: PropTypes.object.isRequired, - forwards: PropTypes.array + forwards: PropTypes.array, + openOptionsDialog: PropTypes.func.isRequired }; export default SessionForwardsComponent; diff --git a/src/features/session/components/SessionListComponent.js b/src/features/session/components/SessionListComponent.js index b8277e5..ae59028 100644 --- a/src/features/session/components/SessionListComponent.js +++ b/src/features/session/components/SessionListComponent.js @@ -20,7 +20,12 @@ const useStyles = makeStyles((theme) => ({ } })); -const SessionListComponent = ({ sessions, handleToggle, forwards }) => { +const SessionListComponent = ({ + sessions, + handleToggle, + forwards, + openOptionsDialog +}) => { const classes = useStyles(); const { t } = useTranslation(); @@ -48,6 +53,7 @@ const SessionListComponent = ({ sessions, handleToggle, forwards }) => { @@ -61,7 +67,8 @@ const SessionListComponent = ({ sessions, handleToggle, forwards }) => { SessionListComponent.propTypes = { sessions: PropTypes.array.isRequired, handleToggle: PropTypes.func.isRequired, - forwards: PropTypes.object.isRequired + forwards: PropTypes.object.isRequired, + openOptionsDialog: PropTypes.func.isRequired }; export default SessionListComponent; diff --git a/src/features/session/components/SessionSummary.js b/src/features/session/components/SessionSummary.js index cb73503..a55bf78 100644 --- a/src/features/session/components/SessionSummary.js +++ b/src/features/session/components/SessionSummary.js @@ -2,7 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Grid } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; -import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons"; +import ActiveIcon from "../../../components/common/ActiveIcon"; import { useTranslation } from "react-i18next"; import styles from "../styles/gridStyles"; @@ -21,11 +21,7 @@ const SessionSummary = ({ session }) => { {`${t("Session.Active")}: `} - {session.active ? ( - - ) : ( - - )} + {`${t("Session.StartDate")}: `} diff --git a/src/features/session/styles/tableStyles.js b/src/features/session/styles/tableStyles.js new file mode 100644 index 0000000..4c8fe18 --- /dev/null +++ b/src/features/session/styles/tableStyles.js @@ -0,0 +1,10 @@ +const styles = () => ({ + table: { + minWidth: 700 + }, + narrowTable: { + minWidth: 400 + } +}); + +export default styles;