diff --git a/jams-react-client/src/views/Blueprint/Blueprint.js b/jams-react-client/src/views/Blueprint/Blueprint.js
index 5c81a9e5194a1b59853a08729203a4f9ed9ba363..94cbc25062f189dfb8b95cb400f574983ac4c6c7 100644
--- a/jams-react-client/src/views/Blueprint/Blueprint.js
+++ b/jams-react-client/src/views/Blueprint/Blueprint.js
@@ -9,6 +9,7 @@ import Box from "@material-ui/core/Box";
import EditBlueprintPermissions from "./EditBlueprintPermissions";
import EditBlueprintConfiguration from "./EditBlueprintConfiguration";
+import EditBlueprintUi from "./EditBlueprintUi";
import { infoColor } from "assets/jss/material-dashboard-react.js";
@@ -69,6 +70,10 @@ export default function Blueprint(props) {
label={i18next.t("configuration", "Configuration")}
{...a11yProps(1)}
/>
+ <Tab
+ label={i18next.t("customization", "Customization")}
+ {...a11yProps(2)}
+ />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
@@ -77,6 +82,9 @@ export default function Blueprint(props) {
<TabPanel value={value} index={1}>
<EditBlueprintConfiguration blueprintName={props.blueprintName} />
</TabPanel>
+ <TabPanel value={value} index={2}>
+ <EditBlueprintUi blueprintName={props.blueprintName} />
+ </TabPanel>
</div>
);
}
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
index fcacfb569dceb7ad460f9887ac865430595b5f24..c0300566383a318997a4e494e7bfaae34f277823 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
@@ -191,10 +191,14 @@ export default function EditBlueprintConfiguration(props) {
const [turnPassowrdVisible, setTurnPasswordVisible] = useState(false);
+ const [uiCustomization, setUiCustomization] = useState("");
+
const [open, setOpen] = useState(false);
const [message, setMessage] = useState(false);
const [severity, setSeverity] = useState("success");
+ const [getRequestDone, setGetRequestDone] = useState(false);
+
useEffect(() => {
axios(
configApiCall(
@@ -211,6 +215,7 @@ export default function EditBlueprintConfiguration(props) {
setAutoAnswer(policyData["autoAnswer"]);
setPeerDiscovery(policyData["peerDiscovery"]);
setRendezVous(policyData["rendezVous"]);
+ setUiCustomization(policyData["uiCustomization"]);
setUpnpEnabled(policyData["upnpEnabled"]);
if (policyData["turnEnabled"] === true) {
@@ -244,10 +249,18 @@ export default function EditBlueprintConfiguration(props) {
" " +
error
);
+ })
+ .finally(() => {
+ setGetRequestDone(true);
});
}, [props.blueprintName, props.username]);
const handleUpdateConfiguration = (field, value, selectedOptions = []) => {
+ // if the get request is not done yet, don't update the configuration
+ if (!getRequestDone) {
+ return;
+ }
+
let data = {
videoEnabled: videoEnabled,
publicInCalls: publicInCalls,
@@ -264,6 +277,7 @@ export default function EditBlueprintConfiguration(props) {
proxyEnabled: proxyEnabled,
proxyServer: proxyServer,
dhtProxyListUrl: dhtProxyListUrl,
+ uiCustomization: uiCustomization,
};
data[field] = value;
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
index a95bcfba2aa37908112d860240417a0c34280846..2adc2a3e0bf5251a7180a12fd205c7d73a722620 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
@@ -148,6 +148,8 @@ export default function EditBlueprintPermissions(props) {
const [allowLookup, setAllowLookup] = useState(true);
+ const [uiCustomization, setUiCustomization] = useState("");
+
const [open, setOpen] = useState(false);
const [message, setMessage] = useState(false);
const [severity, setSeverity] = useState("success");
@@ -184,6 +186,7 @@ export default function EditBlueprintPermissions(props) {
useEffect(() => {
searchUsers();
+
axios(
configApiCall(
api_path_blueprints + "?name=" + props.blueprintName,
@@ -194,6 +197,7 @@ export default function EditBlueprintPermissions(props) {
)
.then((response) => {
let policyData = JSON.parse(response.data.policyData);
+
setVideoEnabled(policyData["videoEnabled"]);
setPublicInCalls(policyData["publicInCalls"]);
setAutoAnswer(policyData["autoAnswer"]);
@@ -211,6 +215,8 @@ export default function EditBlueprintPermissions(props) {
setDhtProxyListUrl();
setAllowLookup(policyData["allowLookup"]);
+ setUiCustomization(policyData["uiCustomization"]);
+
policyData["defaultModerators"].split("/").forEach((id) => {
if (id !== "undefined" && id !== "") {
axios(
@@ -265,6 +271,7 @@ export default function EditBlueprintPermissions(props) {
proxyServer: proxyServer,
dhtProxyListUrl: dhtProxyListUrl,
allowLookup: allowLookup,
+ uiCustomization: uiCustomization,
};
if (field === "peerDiscovery") {
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
new file mode 100644
index 0000000000000000000000000000000000000000..ebafec4236aa1b29b81990afbad0baa96a9e9b91
--- /dev/null
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
@@ -0,0 +1,169 @@
+import React, { useState } from "react";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+
+// core components
+import Grid from "@material-ui/core/Grid";
+import GridItem from "components/Grid/GridItem.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import Card from "components/Card/Card.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardIcon from "components/Card/CardIcon.js";
+import CardBody from "components/Card/CardBody.js";
+
+import SettingsIcon from "@material-ui/icons/Settings";
+
+import { hexToRgb, blackColor } from "assets/jss/material-dashboard-react.js";
+
+import axios from "axios";
+import configApiCall from "../../api";
+import {
+ api_path_blueprints,
+ api_path_get_image,
+ api_path_post_image,
+} from "../../globalUrls";
+
+import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
+
+import Snackbar from "@material-ui/core/Snackbar";
+import MuiAlert from "@material-ui/lab/Alert";
+
+import i18next from "i18next";
+
+const DEFAULT_UI_CUSTOMIZATION = {
+ hasTitle: true,
+ customTitle: "",
+ hasDescription: true,
+ customDescription: "",
+ hasTips: false,
+ hasBackgroundCustom: false,
+ customBackgroundColor: "",
+ customBackgroundImageUrl: "",
+ hasLogo: true,
+ customLogoImageUrl: "",
+};
+
+const styles = {
+ ...dashboardStyle,
+ card: {
+ minWidth: "500px",
+ },
+ cardBody: {
+ flexGrow: 1,
+ },
+ cardCategoryWhite: {
+ color: "rgba(255,255,255,.62)",
+ margin: "0",
+ fontSize: "14px",
+ marginTop: "0",
+ marginBottom: "0",
+ },
+ cardTitleWhite: {
+ color: "#FFFFFF",
+ marginTop: "0px",
+ minHeight: "auto",
+ fontWeight: "300",
+ fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ marginBottom: "3px",
+ textDecoration: "none",
+ },
+ input: {
+ display: "none",
+ },
+ profileAsBackground: {
+ backgroundSize: "100% 100%",
+ width: "80px",
+ height: "80px",
+ },
+ centerIconMiddle: {
+ position: "relative",
+ top: "20px",
+ left: "15px",
+ },
+ editProfilePicture: {
+ borderRadius: "50%",
+ width: "200px",
+ height: "200px",
+ boxShadow:
+ "0 6px 8px -12px rgba(" +
+ hexToRgb(blackColor) +
+ ", 0.56), 0 4px 25px 0px rgba(" +
+ hexToRgb(blackColor) +
+ ", 0.12), 0 8px 10px -5px rgba(" +
+ hexToRgb(blackColor) +
+ ", 0.2)",
+ },
+ dialogPaper: {
+ minHeight: "60vh",
+ maxHeight: "60vh",
+ minWidth: "80vh",
+ maxWidth: "80vh",
+ },
+ uploadIconStyle: {
+ fontSize: "35px",
+ marginBottom: "10px",
+ marginRight: "10px",
+ },
+};
+
+const useStyles = makeStyles(styles);
+
+function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+export default function EditBlueprintUi({ blueprintName }) {
+ const classes = useStyles();
+
+ const [open, setOpen] = useState(false);
+ const [message, setMessage] = useState(false);
+ const [severity, setSeverity] = useState("success");
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ <div>
+ <Snackbar
+ anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+ open={open}
+ onClose={handleClose}
+ message={message}
+ key={"bottomright"}
+ >
+ <Alert onClose={handleClose} severity={severity}>
+ {message}
+ </Alert>
+ </Snackbar>
+
+ <GridContainer>
+ <GridItem xs={12} sm={12} md={6}>
+ <Card profile className={classes.card}>
+ <CardHeader color="info" stats icon>
+ <CardIcon color="info">
+ <SettingsIcon />
+ </CardIcon>
+ <p className={classes.cardCategory}>
+ {i18next.t("customization", "Customization")}
+ </p>
+ <h3 className={classes.cardTitle}>{blueprintName}</h3>
+ </CardHeader>
+ <CardBody profile>
+ <div className={classes.cardBody}>
+ <Grid container spacing={5}>
+ <Grid item xs={12} sm={12} md={12}>
+ <Grid container spacing={2}>
+ {/* TODO */}
+ Coming soon
+ </Grid>
+ </Grid>
+ </Grid>
+ </div>
+ </CardBody>
+ </Card>
+ </GridItem>
+ </GridContainer>
+ </div>
+ );
+}