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 (
+
+
+
+ );
+};
+
+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;