diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index f8ca6b4..b504422 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -24,6 +24,13 @@ "StartDate": "Start date", "StopDate": "Stop date", "RunningTime": "Running time", - "Host": "Host" + "Host": "Host", + "LogRows": "Log rows", + "LogSize": "Log size", + "Details": { + "From": "From", + "To": "To", + "Options": "Option" + } } } diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index 2e93f20..7204bd8 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -15,6 +15,13 @@ "StartDate": "Dată pornire", "StopDate": "Dată oprire", "RunningTime": "Timp de rulare", - "Host": "Gazdă" + "Host": "Gazdă", + "LogRows": "Linii log", + "LogSize": "Dimensiune log", + "Details": { + "From": "De la", + "To": "Către", + "Options": "Opțiuni" + } } } diff --git a/src/features/session/components/SessionDetailsComponent.js b/src/features/session/components/SessionDetailsComponent.js index 03b8762..85f964c 100644 --- a/src/features/session/components/SessionDetailsComponent.js +++ b/src/features/session/components/SessionDetailsComponent.js @@ -9,6 +9,12 @@ import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Paper from "@material-ui/core/Paper"; import Spinner from "../../../components/common/Spinner"; +import DonutLargeRoundedIcon from "@material-ui/icons/DonutLargeRounded"; +import IconButton from "@material-ui/core/IconButton"; +import Tooltip from "@material-ui/core/Tooltip"; +import SessionDetailsHeaderComponent from "./SessionDetailsHeaderComponent"; +import { Grid } from "@material-ui/core"; +import { useTranslation } from "react-i18next"; const StyledTableCell = withStyles((theme) => ({ head: { @@ -34,42 +40,74 @@ const useStyles = makeStyles({ } }); -const SessionDetailsComponent = ({ forwards }) => { +const SessionDetailsComponent = ({ session, forwards }) => { const classes = useStyles(); + const { t } = useTranslation(); - return !forwards || forwards.loading ? ( - - ) : ( - forwards.loaded && ( - - - - - - From - To - - - - {forwards.map((row) => ( - - {forwards.indexOf(row) + 1} - {row.from} - {row.to} - - ))} - -
-
- ) + return ( + + + {!forwards || forwards.loading ? ( + + ) : ( + forwards.loaded && ( + + + + + + + {t("Session.Details.From")} + + {t("Session.Details.To")} + + {t("Session.Details.Options")} + + + + + {forwards.map((row) => ( + + + {forwards.indexOf(row) + 1} + + {row.from} + {row.to} + + {row.options ? ( + + + + + + ) : ( + "" + )} + + + ))} + +
+
+ ) + )} +
+ +
+
+ + + +
); }; SessionDetailsComponent.propTypes = { + session: PropTypes.object.isRequired, forwards: PropTypes.array }; diff --git a/src/features/session/components/SessionDetailsHeaderComponent.js b/src/features/session/components/SessionDetailsHeaderComponent.js new file mode 100644 index 0000000..4acf751 --- /dev/null +++ b/src/features/session/components/SessionDetailsHeaderComponent.js @@ -0,0 +1,35 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { Grid } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; +import { useTranslation } from "react-i18next"; +import styles from "../styles/gridStyles"; + +const useStyles = makeStyles(styles); + +const SessionDetailsHeaderComponent = ({ session }) => { + const classes = useStyles(); + const { t } = useTranslation(); + + return ( + + + {`${t("Session.LogRows")}: `} + {session.logRows || "-"} + + + + {`${t("Session.LogSize")}: `} + {`${ + session.logSizeKB || "-" + } KB`} + + + ); +}; + +SessionDetailsHeaderComponent.propTypes = { + session: PropTypes.object.isRequired +}; + +export default SessionDetailsHeaderComponent; diff --git a/src/features/session/components/SessionListComponent.js b/src/features/session/components/SessionListComponent.js index f7f4874..6236051 100644 --- a/src/features/session/components/SessionListComponent.js +++ b/src/features/session/components/SessionListComponent.js @@ -46,6 +46,7 @@ const SessionListComponent = ({ sessions, handleToggle, forwards }) => { diff --git a/src/features/session/components/SessionSummary.js b/src/features/session/components/SessionSummary.js index 83b840b..cb73503 100644 --- a/src/features/session/components/SessionSummary.js +++ b/src/features/session/components/SessionSummary.js @@ -4,15 +4,9 @@ import { Grid } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons"; import { useTranslation } from "react-i18next"; +import styles from "../styles/gridStyles"; -const useStyles = makeStyles((theme) => ({ - value: { - fontWeight: theme.typography.fontWeightMedium - }, - miniContainer: { - paddingTop: "10px" - } -})); +const useStyles = makeStyles(styles); const SessionSummary = ({ session }) => { const classes = useStyles(); diff --git a/src/features/session/styles/gridStyles.js b/src/features/session/styles/gridStyles.js new file mode 100644 index 0000000..54097ab --- /dev/null +++ b/src/features/session/styles/gridStyles.js @@ -0,0 +1,10 @@ +const styles = (theme) => ({ + value: { + fontWeight: theme.typography.fontWeightMedium + }, + miniContainer: { + paddingTop: "10px" + } +}); + +export default styles;