KeyOverwriteCard

master
Tudor Stanciu 2021-05-16 03:27:09 +03:00
parent 5939a43d14
commit 77c5f38f5b
12 changed files with 242 additions and 44 deletions

View File

@ -22,7 +22,8 @@
"General": { "General": {
"Close": "Close", "Close": "Close",
"Send": "Send", "Send": "Send",
"Advanced": "Advanced" "Advanced": "Advanced",
"Enabled": "Enabled"
}, },
"Session": { "Session": {
"Title": "Sessions", "Title": "Sessions",
@ -53,6 +54,15 @@
} }
} }
}, },
"Forward": {
"Title": "Forward from {{from}} to {{to}}",
"Options": {
"KeyOverwrite": {
"Origin": "Origin",
"Substitute": "Substitute"
}
}
},
"ReleaseNotes": { "ReleaseNotes": {
"Title": "Release notes", "Title": "Release notes",
"Version": "Version" "Version": "Version"

View File

@ -13,7 +13,8 @@
"General": { "General": {
"Close": "Închide", "Close": "Închide",
"Send": "Trimite", "Send": "Trimite",
"Advanced": "Avansat" "Advanced": "Avansat",
"Enabled": "Activat"
}, },
"Session": { "Session": {
"Title": "Sesiuni", "Title": "Sesiuni",
@ -44,6 +45,15 @@
} }
} }
}, },
"Forward": {
"Title": "Redirecționare de la {{from}} către {{to}}",
"Options": {
"KeyOverwrite": {
"Origin": "Înlocuit",
"Substitute": "Înlocuitor"
}
}
},
"ReleaseNotes": { "ReleaseNotes": {
"Title": "Note lansare", "Title": "Note lansare",
"Version": "Versiune" "Version": "Versiune"

View File

@ -1,8 +1,9 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import ForwardOptionsAdvancedContainer from "../../options/components/advanced/ForwardOptionsAdvancedContainer";
const ForwardComponent = ({ forward }) => { const ForwardComponent = ({ forward }) => {
return <div>{forward.forwardId}</div>; return <ForwardOptionsAdvancedContainer optionsId={forward.optionId} />;
}; };
ForwardComponent.propTypes = { ForwardComponent.propTypes = {

View File

@ -6,9 +6,17 @@ import { connect } from "react-redux";
import { bindActionCreators } from "redux"; import { bindActionCreators } from "redux";
import { loadSessionForwards } from "../../../session/actionCreators"; import { loadSessionForwards } from "../../../session/actionCreators";
import Spinner from "../../../../components/common/Spinner"; import Spinner from "../../../../components/common/Spinner";
import styles from "../../../../components/common/styles/divStyles";
import { useTranslation } from "react-i18next";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(styles);
const ForwardContainer = ({ actions, forward }) => { const ForwardContainer = ({ actions, forward }) => {
const params = useParams(); const params = useParams();
const classes = useStyles();
const { t } = useTranslation();
const { sessionId } = params; const { sessionId } = params;
if (!forward) { if (!forward) {
@ -16,7 +24,12 @@ const ForwardContainer = ({ actions, forward }) => {
return <Spinner />; return <Spinner />;
} }
return <ForwardComponent forward={forward} />; return (
<div className={classes.root}>
<h3>{t("Forward.Title", forward)}</h3>
<ForwardComponent forward={forward} />
</div>
);
}; };
ForwardContainer.propTypes = { ForwardContainer.propTypes = {
@ -24,8 +37,8 @@ ForwardContainer.propTypes = {
forward: PropTypes.object forward: PropTypes.object
}; };
function mapStateToProps(state, route) { function mapStateToProps(state, props) {
const { sessionId, forwardId } = route.match.params; const { sessionId, forwardId } = props.match.params;
const session = state.forwards[sessionId]; const session = state.forwards[sessionId];
const forward = session?.find(z => (z.forwardId = forwardId)); const forward = session?.find(z => (z.forwardId = forwardId));

View File

@ -1,8 +1,27 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import TrailingSlashComponent from "./TrailingSlashComponent";
import PathOverwriteComponent from "./PathOverwriteComponent";
import PathInjectionComponent from "./PathInjectionComponent";
import KeyOverwriteCard from "./keyOverwrite/KeyOverwriteCard";
const ForwardOptionsAdvancedComponent = () => { const ForwardOptionsAdvancedComponent = ({ options }) => {
return <div>in dev</div>; return (
<>
{options.trailingSlash && <TrailingSlashComponent />}
{options.pathOverwrite && (
<PathOverwriteComponent data={options.pathOverwrite} />
)}
{options.pathInjection && (
<PathInjectionComponent data={options.pathInjection} />
)}
{options.keyOverwrite && <KeyOverwriteCard data={options.keyOverwrite} />}
</>
);
};
ForwardOptionsAdvancedComponent.propTypes = {
options: PropTypes.object.isRequired
}; };
export default ForwardOptionsAdvancedComponent; export default ForwardOptionsAdvancedComponent;

View File

@ -0,0 +1,41 @@
import React from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { loadForwardOptions } from "../../actionCreators";
import ForwardOptionsAdvancedComponent from "./ForwardOptionsAdvancedComponent";
import Spinner from "../../../../../components/common/Spinner";
const ForwardOptionsAdvancedContainer = ({ actions, optionsId, options }) => {
if (!options) {
actions.loadForwardOptions(optionsId);
return <Spinner />;
}
return <ForwardOptionsAdvancedComponent options={options} />;
};
ForwardOptionsAdvancedContainer.propTypes = {
actions: PropTypes.object.isRequired,
optionsId: PropTypes.string.isRequired,
options: PropTypes.object
};
function mapStateToProps(state, props) {
const options = state.options[props.optionsId];
return {
options
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ loadForwardOptions }, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ForwardOptionsAdvancedContainer);

View File

@ -1,36 +0,0 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { loadForwardOptions } from "../../actionCreators";
import ForwardOptionsAdvancedComponent from "./ForwardOptionsAdvancedComponent";
const ForwardOptionsAdvancedView = ({ actions, options }) => {
useEffect(() => {
// actions.loadForwardOptions(forward.optionId);
}, []);
return <ForwardOptionsAdvancedComponent />;
};
ForwardOptionsAdvancedView.propTypes = {
actions: PropTypes.object.isRequired,
options: PropTypes.object.isRequired
};
function mapStateToProps(state) {
return {
options: state.options
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ loadForwardOptions }, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ForwardOptionsAdvancedView);

View File

@ -0,0 +1,12 @@
import React from "react";
import PropTypes from "prop-types";
const PathInjectionComponent = ({ data }) => {
return "";
};
PathInjectionComponent.propTypes = {
data: PropTypes.object.isRequired
};
export default PathInjectionComponent;

View File

@ -0,0 +1,12 @@
import React from "react";
import PropTypes from "prop-types";
const PathOverwriteComponent = ({ data }) => {
return "";
};
PathOverwriteComponent.propTypes = {
data: PropTypes.object.isRequired
};
export default PathOverwriteComponent;

View File

@ -0,0 +1,5 @@
const TrailingSlashComponent = () => {
return "";
};
export default TrailingSlashComponent;

View File

@ -0,0 +1,72 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import styles from "../../../../../../components/common/styles/expandableCardStyles";
import { makeStyles } from "@material-ui/core/styles";
import {
Card,
CardHeader,
CardContent,
CardActions,
Collapse,
Avatar,
IconButton
} from "@material-ui/core";
import { useTranslation } from "react-i18next";
import SurroundSoundRoundedIcon from "@material-ui/icons/SurroundSoundRounded";
import clsx from "clsx";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import KeyOverwriteSummary from "./KeyOverwriteSummary";
const useStyles = makeStyles(styles);
const KeyOverwriteCard = ({ data }) => {
const [expanded, setExpanded] = useState(false);
const classes = useStyles();
const { t } = useTranslation();
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<Card>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
<SurroundSoundRoundedIcon />
</Avatar>
}
action={
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
}
title={<strong>{t("Server.ActiveSession")}</strong>}
subheader={t("Server.ActiveSessionSubtitle")}
/>
<CardContent>
<KeyOverwriteSummary data={data} />
</CardContent>
<CardActions disableSpacing></CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<div>CONTENT...</div>
</CardContent>
</Collapse>
</Card>
);
};
KeyOverwriteCard.propTypes = {
data: PropTypes.object.isRequired
};
export default KeyOverwriteCard;

View File

@ -0,0 +1,39 @@
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 "../../../../../../components/common/styles/gridStyles";
import ActiveIcon from "../../../../../../components/common/ActiveIcon";
const useStyles = makeStyles(styles);
const KeyOverwriteSummary = ({ data }) => {
const classes = useStyles();
const { t } = useTranslation();
return (
<Grid container>
<Grid item xs={6} sm={3} md={3}>
{`${t("General.Enabled")}: `}
<ActiveIcon active={data.on} />
</Grid>
<Grid item xs={6} sm={3} md={3}>
{`${t("Forward.Options.KeyOverwrite.Origin")}: `}
<span className={classes.value}>{data.origin}</span>
</Grid>
<Grid item xs={6} sm={3} md={3}>
{`${t("Forward.Options.KeyOverwrite.Substitute")}: `}
<span className={classes.value}>{data.substitute}</span>
</Grid>
</Grid>
);
};
KeyOverwriteSummary.propTypes = {
data: PropTypes.object.isRequired
};
export default KeyOverwriteSummary;