tudor.stanciu
/
reverse-proxy-frontend
mirror of https://dev.azure.com/tstanciu94/ReverseProxy/_git/ReverseProxy_Frontend
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Server.Thoughts

master
Tudor Stanciu 2020-06-06 00:06:08 +03:00
parent 45e3b3ae83
commit 2abc0c9239
4 changed files with 91 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/locales/en/translations.json
View File

@ -55,6 +55,7 @@
"Server": {
"Title": "Server",
"Subtitle": "Expand to see details",
"Thoughts": "This reverse proxy is the only open gate to a secret creation land. There any impulse or thought can fly free and can be materialized without limits.",
"ServerHostName": "Server host",
"ApiHostName": "API host",
"Domain": "Domain",
@ -64,7 +65,8 @@
"Actions": {
"SendMessageToAuthor": "Send message to author"
},
"MessageForAuthor": "Message for author"
"MessageForAuthor": "Message for author",
"Details": "Details"
},
"Charts": {
"Server": {

4
public/locales/ro/translations.json
View File

@ -46,6 +46,7 @@
"Server": {
"Title": "Server",
"Subtitle": "Extindeţi pentru a vedea detalii",
"Thoughts": "Acest reverse proxy este singura poartă deschisă către un teren secret al creației. Acolo orice impuls sau gând poate zbura liber și poate fi materializat fără limite.",
"ServerHostName": "Gazdă server",
"ApiHostName": "Gazdă API",
"Domain": "Domeniu",
@ -55,7 +56,8 @@
"Actions": {
"SendMessageToAuthor": "Trimite mesaj către autor"
},
"MessageForAuthor": "Mesaj pentru autor"
"MessageForAuthor": "Mesaj pentru autor",
"Details": "Detalii"
},
"Charts": {
"Server": {

133
src/features/server/components/ServerComponent.js
View File

@ -10,7 +10,9 @@ import {
Collapse,
Avatar,
IconButton,
Tooltip
Tooltip,
Menu,
MenuItem
} from "@material-ui/core";
import ShareIcon from "@material-ui/icons/Share";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
@ -35,63 +37,94 @@ const ServerComponent = ({
const { t } = useTranslation();
const [expanded, setExpanded] = React.useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
const handleExpandClick = () => {
setExpanded(!expanded);
};
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleDetailsClick = () => {
openAbout();
handleClose();
};
return (
<Card>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
<DnsRoundedIcon />
</Avatar>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title={<strong>{t("Server.Title")}</strong>}
subheader={t("Server.Subtitle")}
/>
<CardContent>
{data.loaded && (
<ServerSummary
data={data}
serverHost={serverHost}
openAbout={openAbout}
handleOpenInNewTab={handleOpenInNewTab}
/>
)}
</CardContent>
<CardActions disableSpacing>
<Tooltip title={t("Server.Actions.SendMessageToAuthor")}>
<IconButton aria-label="sent message" onClick={showMessageForAuthor}>
<MessageRoundedIcon />
</IconButton>
</Tooltip>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<>
<Menu
id="server-details-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleDetailsClick}>{t("Server.Details")}</MenuItem>
</Menu>
<Card>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
<DnsRoundedIcon />
</Avatar>
}
action={
<IconButton
aria-label="settings"
onClick={handleClick}
color="primary"
>
<MoreVertIcon />
</IconButton>
}
title={<strong>{t("Server.Title")}</strong>}
subheader={t("Server.Subtitle")}
/>
<CardContent>
<ServerChartsContainer />
{data.loaded && (
<ServerSummary
data={data}
serverHost={serverHost}
handleOpenInNewTab={handleOpenInNewTab}
/>
)}
</CardContent>
</Collapse>
</Card>
<CardActions disableSpacing>
<Tooltip title={t("Server.Actions.SendMessageToAuthor")}>
<IconButton
aria-label="sent message"
onClick={showMessageForAuthor}
>
<MessageRoundedIcon />
</IconButton>
</Tooltip>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<ServerChartsContainer />
</CardContent>
</Collapse>
</Card>
</>
);
};

10
src/features/server/components/ServerSummary.js
View File

@ -7,7 +7,7 @@ import styles from "../../../components/common/styles/gridStyles";
const useStyles = makeStyles(styles);
const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => {
const classes = useStyles();
const { t } = useTranslation();
@ -41,12 +41,7 @@ const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
<Grid item xs={12} sm={12} md={12}>
<Typography variant="body2" gutterBottom color="textSecondary">
{
"Bla bla bla, bla bla bla, bla bla bla, Bla bla bla, bla bla bla, bla bla bla, Bla bla bla, bla bla bla. Pentru mai multe detalii click "
}
<Link href="#" onClick={openAbout} variant="body2">
{"aici"}
</Link>
{t("Server.Thoughts")}
</Typography>
</Grid>
</Grid>
@ -56,7 +51,6 @@ const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
ServerSummary.propTypes = {
data: PropTypes.object.isRequired,
serverHost: PropTypes.string,
openAbout: PropTypes.func.isRequired,
handleOpenInNewTab: PropTypes.func.isRequired
};