frikky
1029 lines
32 KiB
React
1029 lines
32 KiB
React
import React, {useState} from 'react';
|
|
import {BrowserView, MobileView} from "react-device-detect";
|
|
import { useTheme } from '@material-ui/core/styles';
|
|
|
|
import {Link} from 'react-router-dom';
|
|
import ReactGA from 'react-ga4';
|
|
|
|
import {
|
|
Paper,
|
|
Typography,
|
|
Badge,
|
|
Tooltip,
|
|
List,
|
|
ListItem,
|
|
Avatar,
|
|
Menu,
|
|
MenuItem,
|
|
Select,
|
|
Button,
|
|
Grid,
|
|
IconButton,
|
|
Divider,
|
|
LinearProgress,
|
|
} from '@material-ui/core'
|
|
|
|
import {
|
|
MeetingRoom as MeetingRoomIcon,
|
|
HelpOutline as HelpOutlineIcon,
|
|
Settings as SettingsIcon,
|
|
Notifications as NotificationsIcon,
|
|
Home as HomeIcon,
|
|
Polymer as PolymerIcon,
|
|
Apps as AppsIcon,
|
|
Description as DescriptionIcon,
|
|
EmojiObjects as EmojiObjectsIcon,
|
|
Business as BusinessIcon,
|
|
} from '@material-ui/icons';
|
|
|
|
import {
|
|
Analytics as AnalyticsIcon,
|
|
Lightbulb as LightbulbIcon,
|
|
} from "@mui/icons-material";
|
|
|
|
import { useAlert } from "react-alert";
|
|
|
|
import SearchField from '../components/Searchfield.jsx'
|
|
const hoverColor = "#f85a3e"
|
|
const hoverOutColor = "#e8eaf6"
|
|
|
|
const Header = props => {
|
|
const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, userdata, serverside, } = props;
|
|
const theme = useTheme();
|
|
const alert = useAlert()
|
|
|
|
|
|
const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
|
|
const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
|
|
const [LoginHoverColor, setLoginHoverColor] = useState(hoverOutColor);
|
|
const [DocsHoverColor, setDocsHoverColor] = useState(hoverOutColor);
|
|
const [HelpHoverColor, setHelpHoverColor] = useState(hoverOutColor);
|
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
const [anchorElAvatar, setAnchorElAvatar] = React.useState(null);
|
|
const [subAnchorEl, setSubAnchorEl] = React.useState(null);
|
|
|
|
|
|
const handleClick = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
setAnchorElAvatar(null);
|
|
};
|
|
|
|
const hrefStyle = {
|
|
color: hoverOutColor,
|
|
textDecoration: "none",
|
|
}
|
|
|
|
const isCloud = serverside === true ? true : window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
|
|
|
const clearNotifications = () => {
|
|
// Don't really care about the logout
|
|
fetch(`${globalUrl}/api/v1/notifications/clear`, {
|
|
credentials: "include",
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(function(response) {
|
|
if (response.status !== 200) {
|
|
console.log("Error in response")
|
|
}
|
|
|
|
return response.json();
|
|
}).then(function(responseJson) {
|
|
if (responseJson.success === true) {
|
|
setNotifications([])
|
|
handleClose()
|
|
} else {
|
|
alert.error("Failed dismissing notifications. Please try again later.")
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log("error in notification dismissal: ", error)
|
|
//removeCookie("session_token", {path: "/"})
|
|
})
|
|
}
|
|
|
|
const dismissNotification = (alert_id) => {
|
|
// Don't really care about the logout
|
|
fetch(`${globalUrl}/api/v1/notifications/${alert_id}/markasread`, {
|
|
credentials: "include",
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(function(response) {
|
|
if (response.status !== 200) {
|
|
console.log("Error in response")
|
|
}
|
|
|
|
return response.json();
|
|
}).then(function(responseJson) {
|
|
if (responseJson.success === true) {
|
|
const newNotifications = notifications.filter(data => data.id !== alert_id)
|
|
console.log("NEW NOTIFICATIONS: ", newNotifications)
|
|
setNotifications(newNotifications)
|
|
} else {
|
|
alert.error("Failed dismissing notification. Please try again later.")
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log("error in notification dismissal: ", error)
|
|
//removeCookie("session_token", {path: "/"})
|
|
})
|
|
}
|
|
|
|
// DEBUG HERE
|
|
const handleClickLogout = () => {
|
|
console.log("SHOULD LOG OUT")
|
|
|
|
// Don't really care about the logout
|
|
fetch(globalUrl+"/api/v1/logout", {
|
|
credentials: "include",
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(() => {
|
|
// Log out anyway
|
|
removeCookie("session_token", {path: "/"})
|
|
removeCookie("session_token", {path: "/"})
|
|
removeCookie("session_token", {path: "/"})
|
|
removeCookie("session_token", {path: "/"})
|
|
window.location.pathname = "/"
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
});
|
|
}
|
|
|
|
// Rofl this is weird
|
|
const handleDocsHover = () => {
|
|
setDocsHoverColor(hoverColor)
|
|
}
|
|
|
|
const handleDocsHoverOut = () => {
|
|
setDocsHoverColor(hoverOutColor)
|
|
}
|
|
|
|
const handleHomeHover = () => {
|
|
setHomeHoverColor(hoverColor)
|
|
}
|
|
|
|
const handleHelpHover = () => {
|
|
setHelpHoverColor(hoverColor)
|
|
}
|
|
|
|
const handleHelpHoverOut = () => {
|
|
setHelpHoverColor(hoverOutColor)
|
|
}
|
|
|
|
const handleSoarHover = () => {
|
|
setSoarHoverColor(hoverColor)
|
|
}
|
|
|
|
const handleSoarHoverOut = () => {
|
|
setSoarHoverColor(hoverOutColor)
|
|
}
|
|
|
|
const handleHomeHoverOut = () => {
|
|
setHomeHoverColor(hoverOutColor)
|
|
}
|
|
|
|
const handleLoginHover = () => {
|
|
setLoginHoverColor(hoverColor)
|
|
}
|
|
|
|
const handleLoginHoverOut = () => {
|
|
setLoginHoverColor(hoverOutColor)
|
|
}
|
|
|
|
// Should be based on some path
|
|
const logoCheck = !homePage ? null : null
|
|
|
|
const notificationWidth = 300
|
|
const imagesize = 22;
|
|
const boxColor = "#86c142";
|
|
const NotificationItem = (props) => {
|
|
const {data} = props
|
|
|
|
var image = "";
|
|
var orgName = "";
|
|
var orgId = "";
|
|
if (userdata.orgs !== undefined) {
|
|
const foundOrg = userdata.orgs.find((org) => org.id === data["org_id"]);
|
|
if (foundOrg !== undefined && foundOrg !== null) {
|
|
//position: "absolute", bottom: 5, right: -5,
|
|
const imageStyle = {
|
|
width: imagesize,
|
|
height: imagesize,
|
|
pointerEvents: "none",
|
|
marginLeft: data.creator_org !== undefined && data.creator_org.length > 0 ? 20 : 0,
|
|
borderRadius: 10,
|
|
border: foundOrg.id === userdata.active_org.id ? `3px solid ${boxColor}` : null,
|
|
cursor: "pointer",
|
|
marginRight: 10,
|
|
};
|
|
|
|
image =
|
|
foundOrg.image === "" ? (
|
|
<img
|
|
alt={foundOrg.name}
|
|
src={theme.palette.defaultImage}
|
|
style={imageStyle}
|
|
/>
|
|
) : (
|
|
<img
|
|
alt={foundOrg.name}
|
|
src={foundOrg.image}
|
|
style={imageStyle}
|
|
onClick={() => {}}
|
|
/>
|
|
);
|
|
|
|
orgName = foundOrg.name;
|
|
orgId = foundOrg.id;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Paper style={{backgroundColor: theme.palette.surfaceColor, width: notificationWidth, padding: 25, borderBottom: "1px solid rgba(255,255,255,0.4)"}}>
|
|
{/*<Typography variant="h6">
|
|
{new Date(data.updated_at).toISOString()}
|
|
</Typography >*/}
|
|
{data.reference_url !== undefined && data.reference_url !== null && data.reference_url.length > 0 ?
|
|
<Link to={data.reference_url} style={{color: "#f86a3e", textDecoration: "none",}}>
|
|
<Typography variant="body1">
|
|
{data.title}
|
|
</Typography >
|
|
</Link>
|
|
:
|
|
<Typography variant="body1" color="textSecondary">
|
|
{data.title}
|
|
</Typography >
|
|
}
|
|
|
|
{data.image !== undefined && data.image !== null && data.image.length > 0 ?
|
|
<img alt={data.title} src={data.image} style={{height: 100, width: 100, }} />
|
|
:
|
|
null
|
|
}
|
|
<Typography variant="body2">
|
|
{data.description}
|
|
</Typography >
|
|
{/*data.tags !== undefined && data.tags !== null && data.tags.length > 0 ?
|
|
data.tags.map((tag, index) => {
|
|
return (
|
|
<Chip
|
|
key={index}
|
|
style={chipStyle}
|
|
label={tag}
|
|
onClick={() => {
|
|
}}
|
|
variant="outlined"
|
|
color="primary"
|
|
/>
|
|
)
|
|
})
|
|
: null */}
|
|
<div style={{display: "flex"}}>
|
|
{data.read === false ?
|
|
<Button color="primary" variant="contained" style={{marginTop: 15}} onClick={() => {
|
|
dismissNotification(data.id)
|
|
}}>
|
|
Dismiss
|
|
</Button>
|
|
: null}
|
|
<Tooltip title={`Org "${orgName}"`} placement="bottom">
|
|
<div
|
|
style={{ cursor: "pointer", marginLeft: 10, marginTop: 20, }}
|
|
onClick={() => {
|
|
}}
|
|
>
|
|
{image}
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</Paper>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
const notificationMenu =
|
|
<span style={{}}>
|
|
<IconButton color="primary" style={{}} aria-controls="simple-menu" aria-haspopup="true" onClick={(event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
}}>
|
|
<Badge badgeContent={notifications.length} color="primary">
|
|
<NotificationsIcon color="secondary" style={{height: 30, width: 30,}} alt="Your username here" src="" />
|
|
</Badge>
|
|
</IconButton>
|
|
<Menu
|
|
id="simple-menu"
|
|
anchorEl={anchorEl}
|
|
keepMounted
|
|
open={Boolean(anchorEl)}
|
|
style={{zIndex: 10002, maxHeight: "80vh", overflowX: "hidden", overflowY: "auto",}}
|
|
PaperProps={{
|
|
style: {
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
}
|
|
}}
|
|
onClose={() => {
|
|
handleClose()
|
|
}}
|
|
>
|
|
<Paper style={{backgroundColor: theme.palette.surfaceColor, width: notificationWidth, padding: 25, borderBottom: "3px solid rgba(255,255,255,0.4)"}}>
|
|
<div style={{display: "flex", marginBottom: 5, }}>
|
|
<Typography variant="body1">
|
|
Your Notifications ({notifications.length})
|
|
</Typography>
|
|
{notifications.length > 1 ?
|
|
<Button color="primary" variant="contained" style={{marginLeft: 30, }} onClick={() => {
|
|
clearNotifications()
|
|
}}>
|
|
Flush
|
|
</Button>
|
|
: null}
|
|
</div>
|
|
<Typography variant="body2">
|
|
Notifications are made by Shuffle to help you discover issues or improvements.
|
|
</Typography >
|
|
</Paper>
|
|
{notifications.map((data, index) => {
|
|
return (
|
|
<NotificationItem data={data} key={index} />
|
|
)
|
|
})}
|
|
</Menu>
|
|
</span>
|
|
|
|
const handleClickChangeOrg = (orgId) => {
|
|
// Don't really care about the logout
|
|
//name: org.name,
|
|
//orgId = "asd"
|
|
const data = {
|
|
org_id: orgId,
|
|
}
|
|
|
|
localStorage.setItem("globalUrl", "")
|
|
localStorage.setItem("getting_started_sidebar", "open");
|
|
|
|
fetch(`${globalUrl}/api/v1/orgs/${orgId}/change`, {
|
|
mode: 'cors',
|
|
credentials: 'include',
|
|
crossDomain: true,
|
|
method: 'POST',
|
|
body: JSON.stringify(data),
|
|
withCredentials: true,
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=utf-8',
|
|
},
|
|
})
|
|
.then(function(response) {
|
|
if (response.status !== 200) {
|
|
console.log("Error in response")
|
|
}
|
|
|
|
return response.json();
|
|
}).then(function(responseJson) {
|
|
if (responseJson.success === true) {
|
|
if (responseJson.region_url !== undefined && responseJson.region_url !== null && responseJson.region_url.length > 0) {
|
|
console.log("Region Change: ", responseJson.region_url)
|
|
localStorage.setItem("globalUrl", responseJson.region_url)
|
|
//globalUrl = responseJson.region_url
|
|
}
|
|
|
|
setTimeout(() => {
|
|
window.location.reload()
|
|
}, 2000)
|
|
alert.success("Successfully changed active organization - refreshing!")
|
|
} else {
|
|
alert.error("Failed changing org: ", responseJson.reason)
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log("error changing: ", error)
|
|
//removeCookie("session_token", {path: "/"})
|
|
})
|
|
}
|
|
|
|
const supportMenu =
|
|
<span style={{marginTop: 0}}>
|
|
<a href="https://discord.gg/B2CBzUm" style={{ textDecoration: "none", color: "#f85a3e" }} rel="noopener noreferrer" target="_blank">
|
|
<Tooltip color="primary" title={"Join the community"} placement="left">
|
|
<IconButton color="primary" style={{}} aria-controls="simple-menu" aria-haspopup="true" onClick={(event) => {}}>
|
|
<img alt="Discord Community Join" src={"/images/social/resized/discord.png"} style={{height: 30, width: 30, }}/>
|
|
</IconButton>
|
|
</Tooltip>
|
|
</a>
|
|
</span>
|
|
|
|
// Should be based on some path
|
|
const parsedAvatar = userdata.avatar !== undefined && userdata.avatar !== null && userdata.avatar.length > 0 ? userdata.avatar : ""
|
|
|
|
const avatarMenu =
|
|
<span>
|
|
<IconButton color="primary" style={{marginRight: 5, }} aria-controls="simple-menu" aria-haspopup="true" onClick={(event) => {
|
|
setAnchorElAvatar(event.currentTarget);
|
|
}}>
|
|
<Avatar style={{height: 30, width: 30,}} alt="Your username here" src={parsedAvatar} />
|
|
</IconButton>
|
|
<Menu
|
|
id="simple-menu"
|
|
anchorEl={anchorElAvatar}
|
|
keepMounted
|
|
open={Boolean(anchorElAvatar)}
|
|
style={{zIndex: 10012}}
|
|
onClose={() => {
|
|
handleClose()
|
|
}}
|
|
>
|
|
<Link to="/admin" style={hrefStyle}>
|
|
<MenuItem
|
|
onClick={(event) => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<BusinessIcon style={{marginRight: 5, }} /> Admin
|
|
</MenuItem>
|
|
</Link>
|
|
<Divider />
|
|
<Link to="/docs" style={hrefStyle}>
|
|
<MenuItem
|
|
onClick={(event) => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<HelpOutlineIcon style={{marginRight: 5 }}/> About
|
|
</MenuItem>
|
|
</Link>
|
|
{/*
|
|
<Link to="/getting-started" style={hrefStyle}>
|
|
<MenuItem
|
|
onClick={(event) => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<AnalyticsIcon style={{marginRight: 5 }}/> Get Started
|
|
</MenuItem>
|
|
</Link>
|
|
*/}
|
|
<Link to="/usecases" style={hrefStyle}>
|
|
<MenuItem
|
|
onClick={(event) => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<LightbulbIcon style={{marginRight: 5 }}/> Use Cases
|
|
</MenuItem>
|
|
</Link>
|
|
<Divider />
|
|
<Link to={`/creators/${userdata.public_username}`} style={hrefStyle}>
|
|
<MenuItem onClick={(event) => {
|
|
handleClose()
|
|
}}>
|
|
<EmojiObjectsIcon style={{marginRight: 5 }}/> Creator page
|
|
</MenuItem>
|
|
</Link>
|
|
<Link to="/settings" style={hrefStyle}>
|
|
<MenuItem onClick={(event) => {
|
|
handleClose()
|
|
}}>
|
|
<SettingsIcon style={{marginRight: 5 }}/> Settings
|
|
</MenuItem>
|
|
</Link>
|
|
<Divider />
|
|
<MenuItem style={{color: "white"}} onClick={(event) => {
|
|
handleClickLogout()
|
|
event.preventDefault()
|
|
handleClose()
|
|
}}>
|
|
<MeetingRoomIcon style={{marginRight: 5 }}/> Logout
|
|
</MenuItem>
|
|
</Menu>
|
|
</span>
|
|
|
|
const listItemStyle = {
|
|
textAlign: "center",
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
}
|
|
|
|
// Handle top bar or something
|
|
const loginTextBrowser = !isLoggedIn ?
|
|
<div style={{display: "flex", minWidth: 1250, maxWidth: 1250, margin: "auto", textAlign: "center",}}>
|
|
<div style={{display: "flex", flex: 1, }}>
|
|
<List style={{display: "flex", flexDirect: "row"}} component="nav">
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px", paddingRight: 0,}}>
|
|
<Link to="/" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}} onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "home_click",
|
|
label: "",
|
|
})
|
|
}
|
|
}}>
|
|
<img src={"/images/logos/orange_logo.svg"} alt="shuffle logo" style={{height: 20, width: 20, }}/>
|
|
{/*<img alt="Logo Shuffle frontpage lockup" src={"/images/white_logo_new.png"} style={{margin: "auto", height: 22, }}/>*/}
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px",}}>
|
|
<Link to ="/usecases" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}} onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "usecases_click",
|
|
label: "",
|
|
})
|
|
}
|
|
}}>
|
|
Usecases
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
{/*
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px", paddingRight: 0, }}>
|
|
<Link to ="/contact" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}} onClick={() => {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "contact_click",
|
|
label: "",
|
|
})
|
|
}}>
|
|
Contact
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
*/}
|
|
{isCloud ?
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px", paddingRight: 0,}}>
|
|
<Link to ="/pricing" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}} onClick={() => {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "pricing_click",
|
|
label: "",
|
|
})
|
|
}}>
|
|
Pricing
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
: null}
|
|
{isCloud ?
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px", paddingRight: 0, }}>
|
|
<Link rel="noopener noreferrer" to="/partner" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}} onClick={() => {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "partner_click",
|
|
label: "",
|
|
})
|
|
}}>
|
|
Partner
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
:
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px", paddingRight: 0, }}>
|
|
<Link rel="noopener noreferrer" to="/docs" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}} onClick={() => {}}>
|
|
Documentation
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
}
|
|
|
|
</List>
|
|
</div>
|
|
<div style={{flex: 1, marginTop: 0,}}>
|
|
<SearchField serverside={serverside} userdata={userdata} />
|
|
</div>
|
|
<div style={{flex: 1, display: "flex", flexDirection: "row-reverse"}}>
|
|
<List style={{display: 'flex', flexDirection: 'row-reverse'}} component="nav">
|
|
<ListItem style={{textAlign: "center"}}>
|
|
<Link to="/login" style={hrefStyle}>
|
|
<Button variant="outlined" style={{textTransform: "none", borderRadius: 25, padding: "7px 14px 7px 14px", maxWidth: 100, minWidth: 100, }} onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "signin_click",
|
|
label: "",
|
|
})
|
|
}
|
|
}}>Login</Button>
|
|
</Link>
|
|
</ListItem>
|
|
|
|
{isCloud ?
|
|
<ListItem style={{flextextAlign: "center", marginRight: 10, }}>
|
|
<Link to="/register" style={hrefStyle}>
|
|
<Button variant="contained" color="primary" style={{minWidth: 100, maxWidth: 100, padding: "7px 14px 7px 14px", borderRadius: 25, textTransform: "none", backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", color: "white",}} onClick={() => {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "register_click",
|
|
label: "",
|
|
})
|
|
}}>Sign Up</Button>
|
|
</Link>
|
|
</ListItem>
|
|
: null}
|
|
|
|
{/*
|
|
<span style={{marginTop: 8}}>
|
|
{supportMenu}
|
|
</span>
|
|
*/}
|
|
|
|
{/*
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px", paddingRight: 0, }}>
|
|
<Link rel="noopener noreferrer" to="/docs" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}} onClick={() => {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "docs_click_not_signedin",
|
|
label: "",
|
|
})
|
|
}}>
|
|
Docs
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
*/}
|
|
</List>
|
|
</div>
|
|
</div>
|
|
:
|
|
<div style={{display: "flex", backgroundColor: "#1f2023",}}>
|
|
<div style={{minWidth: 1250, maxWidth: 1250, display: "flex", margin: "auto", }}>
|
|
<div style={{flex: 1, flexDirection: "row"}}>
|
|
<List style={{height: 56, marginTop: "auto", marginBottom: "auto", display: "flex", flexDirect: "row", alignItems: "baseline", maxWidth: 340, }} component="nav">
|
|
<ListItem style={{textAlign: "center"}}>
|
|
<Link to="/" style={hrefStyle}>
|
|
<div onMouseOver={handleHomeHover} onMouseOut={handleHomeHoverOut} style={{color: HomeHoverColor, cursor: "pointer"}}>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid item>
|
|
<img src={"/images/logos/orange_logo.svg"} alt="logo" style={{height: 20, width: 20, marginTop: 10,}}/>
|
|
{/*
|
|
<HomeIcon style={{marginTop: 7, marginRight: 0}} />
|
|
*/}
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={listItemStyle}>
|
|
<Link to="/workflows" style={hrefStyle}>
|
|
<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer", display: "flex"}}>
|
|
{/*
|
|
<PolymerIcon style={{marginRight: "5px"}} />
|
|
*/}
|
|
<span style={{marginTop: 0, marginRight: 8, }}>Workflows</span>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={listItemStyle}>
|
|
<Link to="/apps" style={hrefStyle}>
|
|
<div onMouseOver={handleHelpHover} onMouseOut={handleHelpHoverOut} style={{color: HelpHoverColor, cursor: "pointer", display: "flex",}}>
|
|
{/*
|
|
<AppsIcon style={{marginRight: "5px"}} />
|
|
*/}
|
|
<span style={{marginTop: 0, marginRight: 5, }}>Apps</span>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
{/*
|
|
<ListItem style={{textAlign: "center"}}>
|
|
<Link to="/dashboard" style={hrefStyle}>
|
|
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer"}}>Dashboard</div>
|
|
</Link>
|
|
</ListItem>
|
|
*/}
|
|
<ListItem style={listItemStyle}>
|
|
<Link to="/docs" style={hrefStyle}>
|
|
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer", display: "flex"}}>
|
|
{/*
|
|
<DescriptionIcon style={{marginRight: "5px"}} />
|
|
*/}
|
|
<span style={{marginTop: 0,}}>Docs</span>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
{/*
|
|
<ListItem style={{textAlign: "center"}}>
|
|
<Link to="/pricing" style={hrefStyle}>
|
|
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer", display: "flex"}}>
|
|
<DescriptionIcon style={{marginRight: "5px"}} />
|
|
<span style={{marginTop: 2}}>Pricing</span>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
*/}
|
|
{/*
|
|
<ListItem style={{textAlign: "center"}}>
|
|
<Link to="/configurations" style={hrefStyle}>
|
|
<div onMouseOver={handleCredentialHover} onMouseOut={handleCredentialHoverOut} style={{color: CredentialHoverColor, cursor: "pointer"}}>Configure</div>
|
|
</a>
|
|
</ListItem>
|
|
*/}
|
|
</List>
|
|
</div>
|
|
<div style={{flex: 1, marginTop: 0,}}>
|
|
<SearchField serverside={serverside} userdata={userdata} />
|
|
</div>
|
|
<div style={{flex: 1, display: "flex", flexDirection: "row-reverse"}}>
|
|
<List style={{display: 'flex', flexDirection: 'row-reverse', marginRight: 0, paddingRight: 0, paddingTop: 0, }} component="nav">
|
|
<span style={{display: "flex", paddingTop: 10, flexDirection: "row-reverse",}}>
|
|
{avatarMenu}
|
|
{notificationMenu}
|
|
{/*supportMenu*/}
|
|
{logoCheck}
|
|
</span>
|
|
|
|
{/*
|
|
<ListItem style={{minWidth: 80, maxWidth: 80, padding: 0, marginRight: 8, marginLeft: 0, float: "right", right: 0, }}>
|
|
<Link to="/admin" style={hrefStyle}>
|
|
<Button
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Admin
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
*/}
|
|
|
|
{/*
|
|
<ListItem style={{paddingRight: 0}}>
|
|
<Link to="/contact" style={hrefStyle}>
|
|
<Button
|
|
style={{}}
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
Contact
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
*/}
|
|
|
|
{/*userdata.app_execution_limit !== 5000 && userdata.app_execution_limit !== 10000 ?
|
|
userdata === undefined || userdata.orgs === undefined || userdata.orgs === null || userdata.orgs.length > 1 ? null :
|
|
<ListItem style={{flex: "1", textAlign: "center", paddingRight: 0, }}>
|
|
<Link to="/pricing" style={hrefStyle}>
|
|
<Button
|
|
style={{}}
|
|
variant="outlined"
|
|
color="primary">Pricing</Button>
|
|
</Link>
|
|
</ListItem>
|
|
: null*/}
|
|
|
|
|
|
|
|
{userdata === undefined || userdata.orgs === undefined || userdata.orgs === null || userdata.orgs.length <= 1 ?
|
|
null
|
|
:
|
|
<span style={{paddingTop: 12, }}>
|
|
<Select
|
|
|
|
disableUnderline
|
|
SelectDisplayProps={{
|
|
style: {
|
|
maxWidth: 50,
|
|
overflow: "hidden",
|
|
paddingLeft: 8,
|
|
},
|
|
}}
|
|
MenuProps={{
|
|
style: {
|
|
zIndex: 10002,
|
|
},
|
|
}}
|
|
style={{
|
|
borderRadius: theme.palette.borderRadius,
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
marginRight: 15,
|
|
color: "white",
|
|
height: 45,
|
|
width: 85,
|
|
}}
|
|
|
|
value={userdata.active_org.id}
|
|
fullWidth
|
|
onChange={(e) => {
|
|
handleClickChangeOrg(e.target.value)
|
|
}}
|
|
>
|
|
{userdata.orgs.map((data, index) => {
|
|
if (
|
|
data.name === undefined ||
|
|
data.name === null ||
|
|
data.name.length === 0
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
const imagesize = 22
|
|
var skipOrg = false
|
|
if (data.creator_org !== undefined && data.creator_org !== null && data.creator_org.length > 0) {
|
|
// Finds the parent org
|
|
for (var key in userdata.child_orgs) {
|
|
if (data.child_orgs[key].id === data.creator_org) {
|
|
skipOrg = true
|
|
break
|
|
}
|
|
}
|
|
|
|
if (skipOrg) {
|
|
return null
|
|
}
|
|
}
|
|
|
|
const imageStyle = {
|
|
width: imagesize,
|
|
height: imagesize,
|
|
pointerEvents: "none",
|
|
marginRight: 10,
|
|
marginLeft: data.creator_org !== undefined && data.creator_org !== null && data.creator_org.length > 0 ? data.id === userdata.active_org.id ? 0 : 20 : 0,
|
|
}
|
|
|
|
const parsedTitle = data.creator_org !== undefined && data.creator_org !== null && data.creator_org.length > 0 ? `Suborg of ${data.creator_org}` : ""
|
|
|
|
const image = data.image === "" ?
|
|
<img alt={data.name} src={theme.palette.defaultImage} style={imageStyle} />
|
|
:
|
|
<img alt={data.name} src={data.image} style={imageStyle} />
|
|
|
|
|
|
var regiontag = "eu"
|
|
if (data.region_url !== undefined && data.region_url !== null && data.region_url.length > 0) {
|
|
const regionsplit = data.region_url.split(".")
|
|
if (regionsplit.length > 2 && !regionsplit[0].includes("shuffler")) {
|
|
const namesplit = regionsplit[0].split("/")
|
|
|
|
regiontag = namesplit[namesplit.length - 1]
|
|
}
|
|
}
|
|
|
|
return (
|
|
<MenuItem key={index} disabled={data.id === userdata.active_org.id} style={{backgroundColor: theme.palette.inputColor, color: "white", height: 40, zIndex: 10003, }} value={data.id}>
|
|
|
|
<Tooltip color="primary" title={parsedTitle} placement="left">
|
|
<div style={{display: "flex"}}>
|
|
<Typography variant="body2" style={{borderRadius: theme.palette.borderRadius, float: "left", margin: "0 0 0 0", marginRight: 25, }}>{regiontag}</Typography> {image} <span style={{marginLeft: 8}}>{data.name}</span>
|
|
</div>
|
|
</Tooltip>
|
|
</MenuItem>
|
|
)
|
|
})}
|
|
</Select>
|
|
</span>
|
|
}
|
|
|
|
{userdata === undefined || userdata.app_execution_limit === undefined || userdata.app_execution_usage === undefined || userdata.app_execution_usage < 1000 ?
|
|
null
|
|
:
|
|
<Tooltip title={`Amount of executions left: ${userdata.app_execution_usage} / ${userdata.app_execution_limit}. When the limit is reached, you can still use Shuffle normally, but your Workflow triggers may stop working. Reach out to support@shuffler.io to extend this limit.`}>
|
|
<div style={{maxHeight: 30, minHeight: 30, padding: 8, textAlign: "center", cursor: "pointer", borderRadius: theme.palette.borderRadius, marginRight: 10, marginTop: 12, backgroundColor: theme.palette.surfaceColor, minWidth: 60, maxWidth: 60, }} onClick={() => {
|
|
if (window.drift !== undefined) {
|
|
window.drift.api.startInteraction({ interactionId: 326905 })
|
|
} else {
|
|
console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
|
|
}
|
|
}}>
|
|
<Typography variant="body2" color="textSecondary" style={{fontSize: 12, color: '#f86a3e' }}>
|
|
<b>
|
|
{(userdata.app_execution_usage/userdata.app_execution_limit*100).toFixed(0)}%
|
|
</b>
|
|
</Typography>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
style={{marginTop: 5, }}
|
|
value={(userdata.app_execution_usage/userdata.app_execution_limit*100).toFixed(0)}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
}
|
|
|
|
</List>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
const loginTextMobile = !isLoggedIn ?
|
|
<div style={{display: "flex"}}>
|
|
<List style={{display: "flex", flexDirection: "row"}} component="nav">
|
|
<ListItem style={{textAlign: "center"}}>
|
|
<Link to="/" style={hrefStyle}>
|
|
<div onMouseOver={handleHomeHover} onMouseOut={handleHomeHoverOut} style={{color: HomeHoverColor, cursor: "pointer"}}>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid item>
|
|
<img src={"/images/logos/orange_logo.svg"} alt="logo" style={{height: 20, width: 20, marginTop: 3, marginRight: 5, }}/>
|
|
{/*<HomeIcon style={{marginTop: 3, marginRight: 5}} />*/}
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{textAlign: "center"}}>
|
|
<Link to="/docs" style={hrefStyle}>
|
|
<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer"}}>
|
|
About
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px"}}>
|
|
<Link to ="/contact" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}}>
|
|
Contact
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px", paddingLeft: 0,}}>
|
|
<Link to ="/pricing" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}}>
|
|
Pricing
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
</List>
|
|
</div>
|
|
:
|
|
<div style={{display: "flex"}}>
|
|
<div style={{flex: "1", flexDirection: "row"}}>
|
|
<List style={{display: "flex", flexDirect: "row", flex: "1"}} component="nav">
|
|
<ListItem style={{textAlign: "center"}}>
|
|
<Link to="/" style={hrefStyle}>
|
|
<div onMouseOver={handleHomeHover} onMouseOut={handleHomeHoverOut} style={{color: HomeHoverColor, cursor: "pointer"}}>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid item>
|
|
<HomeIcon style={{marginTop: "3px", marginRight: "5px"}} />
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px"}}>
|
|
<Link to ="/contact" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}}>
|
|
Contact
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{textAlign: "center", marginLeft: "0px"}}>
|
|
<Link to ="/pricing" style={hrefStyle}>
|
|
<Button variant="text" color="secondary" style={{textTransform: "none"}}>
|
|
Pricing
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
</List>
|
|
</div>
|
|
<div style={{flex: "10", display: "flex", flexDirection: "row-reverse"}}>
|
|
<List style={{display: 'flex', flexDirection: 'row-reverse'}} component="nav">
|
|
<ListItem style={{flex: "1", textAlign: "center"}}>
|
|
<div onMouseOver={handleLoginHover} onMouseOut={handleLoginHoverOut} onClick={handleClickLogout} style={{color: LoginHoverColor, cursor: "pointer"}}>
|
|
Logout
|
|
</div>
|
|
</ListItem>
|
|
{logoCheck}
|
|
<ListItem></ListItem>
|
|
</List>
|
|
</div>
|
|
</div>
|
|
|
|
// <Divider style={{height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
|
|
const loadedCheck =
|
|
<div style={{minHeight: 68}}>
|
|
<BrowserView>
|
|
{loginTextBrowser}
|
|
</BrowserView>
|
|
<MobileView>
|
|
{loginTextMobile}
|
|
</MobileView>
|
|
</div>
|
|
// <div style={{backgroundImage: "linear-gradient(-90deg,#342f78 0,#29255e 50%,#1b1947 100%"}}>
|
|
return (
|
|
<div style={{backgroundColor: props.color === "undefined" ? "inherit" : props.color}}>
|
|
{loadedCheck}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Header;
|