Mui update done :3
This commit is contained in:
Frikky
@@ -29,7 +29,7 @@ import LoginPage from "./views/LoginPage";
|
|||||||
import SettingsPage from "./views/SettingsPage";
|
import SettingsPage from "./views/SettingsPage";
|
||||||
import KeepAlive from "./views/KeepAlive.jsx";
|
import KeepAlive from "./views/KeepAlive.jsx";
|
||||||
|
|
||||||
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
|
import { ThemeProvider } from "@mui/material/styles";
|
||||||
|
|
||||||
import UpdateAuthentication from "./views/UpdateAuthentication.jsx";
|
import UpdateAuthentication from "./views/UpdateAuthentication.jsx";
|
||||||
import FrameworkWrapper from "./views/FrameworkWrapper.jsx";
|
import FrameworkWrapper from "./views/FrameworkWrapper.jsx";
|
||||||
@@ -666,11 +666,8 @@ const App = (message, props) => {
|
|||||||
</Routes>
|
</Routes>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
// <div style={{backgroundColor: "rgba(21, 32, 43, 1)", color: "#fffff", minHeight: "100vh"}}>
|
|
||||||
// backgroundColor: "#213243",
|
|
||||||
// This is a mess hahahah
|
|
||||||
return (
|
return (
|
||||||
<MuiThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
<CookiesProvider>
|
<CookiesProvider>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Provider template={AlertTemplate} {...options}>
|
<Provider template={AlertTemplate} {...options}>
|
||||||
@@ -678,7 +675,7 @@ const App = (message, props) => {
|
|||||||
</Provider>
|
</Provider>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
</CookiesProvider>
|
</CookiesProvider>
|
||||||
</MuiThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,377 +0,0 @@
|
|||||||
import React, {useEffect, useState} from 'react';
|
|
||||||
|
|
||||||
import ReactGA from 'react-ga4';
|
|
||||||
import { useTheme } from '@material-ui/core/styles';
|
|
||||||
import {Link} from 'react-router-dom';
|
|
||||||
|
|
||||||
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
|
|
||||||
|
|
||||||
import algoliasearch from 'algoliasearch/lite';
|
|
||||||
import { InstantSearch, Configure, connectSearchBox, connectHits, connectHitInsights } from 'react-instantsearch-dom';
|
|
||||||
|
|
||||||
import aa from 'search-insights'
|
|
||||||
|
|
||||||
import {
|
|
||||||
Zoom,
|
|
||||||
Grid,
|
|
||||||
Paper,
|
|
||||||
TextField,
|
|
||||||
ButtonBase,
|
|
||||||
InputAdornment,
|
|
||||||
Typography,
|
|
||||||
Button,
|
|
||||||
Tooltip
|
|
||||||
} from '@material-ui/core';
|
|
||||||
|
|
||||||
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
|
||||||
//const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
|
|
||||||
const AppGrid1 = props => {
|
|
||||||
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, userdata, searchValue } = props
|
|
||||||
|
|
||||||
const isCloud =
|
|
||||||
window.location.host === "localhost:3000" ||
|
|
||||||
window.location.host === "shuffler.io";
|
|
||||||
|
|
||||||
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
|
||||||
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
|
|
||||||
const theme = useTheme();
|
|
||||||
//const [apps, setApps] = React.useState([]);
|
|
||||||
//const [filteredApps, setFilteredApps] = React.useState([]);
|
|
||||||
const [formMail, setFormMail] = React.useState("");
|
|
||||||
const [message, setMessage] = React.useState("");
|
|
||||||
const [formMessage, setFormMessage] = React.useState("");
|
|
||||||
|
|
||||||
const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
|
|
||||||
|
|
||||||
const innerColor = "rgba(255,255,255,0.65)"
|
|
||||||
const borderRadius = 3
|
|
||||||
window.title = "Shuffle | Apps | Find and integrate any app"
|
|
||||||
|
|
||||||
const submitContact = (email, message) => {
|
|
||||||
const data = {
|
|
||||||
"firstname": "",
|
|
||||||
"lastname": "",
|
|
||||||
"title": "",
|
|
||||||
"companyname": "",
|
|
||||||
"email": email,
|
|
||||||
"phone": "",
|
|
||||||
"message": message,
|
|
||||||
}
|
|
||||||
|
|
||||||
const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
|
|
||||||
|
|
||||||
fetch(globalUrl+"/api/v1/contact", {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(response => {
|
|
||||||
if (response.success === true) {
|
|
||||||
setFormMessage(response.reason)
|
|
||||||
//alert.info("Thanks for submitting!")
|
|
||||||
} else {
|
|
||||||
setFormMessage(errorMessage)
|
|
||||||
}
|
|
||||||
|
|
||||||
setFormMail("")
|
|
||||||
setMessage("")
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
setFormMessage(errorMessage)
|
|
||||||
console.log(error)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
|
||||||
const urlSearchParams = new URLSearchParams(window.location.search)
|
|
||||||
const params = Object.fromEntries(urlSearchParams.entries())
|
|
||||||
const foundQuery = {searchValue}
|
|
||||||
if (foundQuery !== null && foundQuery !== undefined) {
|
|
||||||
console.log("Got query: ", foundQuery)
|
|
||||||
refine(foundQuery)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form noValidate action="" role="search">
|
|
||||||
<input
|
|
||||||
fullWidth
|
|
||||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
|
||||||
InputProps={{
|
|
||||||
style:{
|
|
||||||
color: "white",
|
|
||||||
fontSize: "1em",
|
|
||||||
height: 50,
|
|
||||||
},
|
|
||||||
startAdornment: (
|
|
||||||
<InputAdornment position="start">
|
|
||||||
<SearchIcon style={{marginLeft: 5}}/>
|
|
||||||
</InputAdornment>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
autoComplete='off'
|
|
||||||
type="hidden"
|
|
||||||
color="primary"
|
|
||||||
defaultValue={currentRefinement}
|
|
||||||
placeholder="Find Apps..."
|
|
||||||
id="shuffle_search_field"
|
|
||||||
onChange={(event) => {
|
|
||||||
refine(event.currentTarget.value)
|
|
||||||
}}
|
|
||||||
limit={5}
|
|
||||||
/>
|
|
||||||
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
var workflowDelay = -50
|
|
||||||
const Hits = ({ hits, insights }) => {
|
|
||||||
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
|
||||||
var counted = 0
|
|
||||||
|
|
||||||
//console.log(hits)
|
|
||||||
//var curhits = hits
|
|
||||||
//if (hits.length > 0 && defaultApps.length === 0) {
|
|
||||||
// setDefaultApps(hits)
|
|
||||||
//}
|
|
||||||
|
|
||||||
//const [defaultApps, setDefaultApps] = React.useState([])
|
|
||||||
//console.log(hits)
|
|
||||||
//if (hits.length > 0 && hits.length !== innerHits.length) {
|
|
||||||
// setInnerHits(hits)
|
|
||||||
//}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
{hits.map((data, index) => {
|
|
||||||
|
|
||||||
workflowDelay += 50
|
|
||||||
|
|
||||||
const paperStyle = {
|
|
||||||
backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : theme.palette.inputColor,
|
|
||||||
color: index === mouseHoverIndex ? theme.palette.inputColor : "rgba(255,255,255,0.8)",
|
|
||||||
border: `1px solid ${innerColor}`,
|
|
||||||
padding: 15,
|
|
||||||
cursor: "pointer",
|
|
||||||
position: "relative",
|
|
||||||
minHeight: 116,
|
|
||||||
}
|
|
||||||
|
|
||||||
if (counted === 12/xs*rowHandler) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
counted += 1
|
|
||||||
var parsedname = ""
|
|
||||||
for (var key = 0; key < data.name.length; key++) {
|
|
||||||
var character = data.name.charAt(key)
|
|
||||||
if (character === character.toUpperCase()) {
|
|
||||||
//console.log(data.name[key], data.name[key+1])
|
|
||||||
if (data.name.charAt(key+1) !== undefined && data.name.charAt(key+1) === data.name.charAt(key+1).toUpperCase()) {
|
|
||||||
} else {
|
|
||||||
parsedname += " "
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
parsedname += character
|
|
||||||
}
|
|
||||||
|
|
||||||
parsedname = (parsedname.charAt(0).toUpperCase()+parsedname.substring(1)).replaceAll("_", " ")
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
|
||||||
<Grid item xs={xs} key={index}>
|
|
||||||
<Link to={`/apps/${data.objectID}?queryID=${data.__queryID}`} style={{textDecoration: "none", color: "#f85a3e"}}>
|
|
||||||
<Paper elevation={0} style={paperStyle} onMouseOver={() => {
|
|
||||||
setMouseHoverIndex(index)
|
|
||||||
/*
|
|
||||||
ReactGA.event({
|
|
||||||
category: "app_grid_view",
|
|
||||||
action: `search_bar_click`,
|
|
||||||
label: "",
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
}} onMouseOut={() => {
|
|
||||||
setMouseHoverIndex(-1)
|
|
||||||
}} onClick={() => {
|
|
||||||
if (isCloud) {
|
|
||||||
ReactGA.event({
|
|
||||||
category: "app_grid_view",
|
|
||||||
action: `app_${parsedname}_${data.id}_click`,
|
|
||||||
label: "",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
|
|
||||||
console.log(searchClient)
|
|
||||||
aa('init', {
|
|
||||||
appId: searchClient.appId,
|
|
||||||
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
|
||||||
})
|
|
||||||
|
|
||||||
const timestamp = new Date().getTime()
|
|
||||||
aa('sendEvents', [
|
|
||||||
{
|
|
||||||
eventType: 'click',
|
|
||||||
eventName: 'Product Clicked',
|
|
||||||
index: 'appsearch',
|
|
||||||
objectIDs: [data.objectID],
|
|
||||||
timestamp: timestamp,
|
|
||||||
queryID: data.__queryID,
|
|
||||||
positions: [data.__position],
|
|
||||||
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
}}>
|
|
||||||
<ButtonBase style={{padding: 5, borderRadius: 3, minHeight: 100, minWidth: 100,}}>
|
|
||||||
<img alt={data.name} src={data.image_url} style={{width: "100%", maxWidth: 100, minWidth: 100, minHeight: 100, maxHeight: 100, display: "block", margin: "0 auto"}} />
|
|
||||||
</ButtonBase>
|
|
||||||
<div/>
|
|
||||||
{index === mouseHoverIndex || showName === true ?
|
|
||||||
parsedname
|
|
||||||
:
|
|
||||||
null
|
|
||||||
}
|
|
||||||
{data.generated ?
|
|
||||||
<Tooltip title={"Created with App editor"} style={{marginTop: "28px", width: "100%"}} aria-label={data.name}>
|
|
||||||
{data.invalid ?
|
|
||||||
<CloudQueueIcon style={{position: "absolute", top: 1, left: 3, height: 16, width: 16, color: theme.palette.primary.main }}/>
|
|
||||||
:
|
|
||||||
<CloudQueueIcon style={{position: "absolute", top: 1, left: 3, height: 16, width: 16, color: "rgba(255,255,255,0.95)",}}/>
|
|
||||||
}
|
|
||||||
</Tooltip>
|
|
||||||
:
|
|
||||||
<Tooltip title={"Created with python (custom app)"} style={{marginTop: "28px", width: "100%"}} aria-label={data.name}>
|
|
||||||
<CodeIcon style={{position: "absolute", top: 1, left: 3, height: 16, width: 16, color: "rgba(255,255,255,0.95)",}}/>
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
</Paper>
|
|
||||||
</Link>
|
|
||||||
</Grid>
|
|
||||||
</Zoom>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</Grid>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomSearchBox = connectSearchBox(SearchBox)
|
|
||||||
const CustomHits = connectHits(Hits)
|
|
||||||
//const CustomHits = connectHitInsights(aa)(Hits)
|
|
||||||
const selectButtonStyle = {
|
|
||||||
minWidth: 150,
|
|
||||||
maxWidth: 150,
|
|
||||||
minHeight: 50,
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{width: "100%", textAlign: "center", position: "relative", height: "100%", display: "flex"}}>
|
|
||||||
{/*
|
|
||||||
<div style={{padding: 10, }}>
|
|
||||||
<Button
|
|
||||||
style={selectButtonStyle}
|
|
||||||
variant="outlined"
|
|
||||||
onClick={() => {
|
|
||||||
const searchField = document.createElement("shuffle_search_field")
|
|
||||||
console.log("Field: ", searchField)
|
|
||||||
if (searchField !== null & searchField !== undefined) {
|
|
||||||
console.log("Set field.")
|
|
||||||
searchField.value = "WHAT WABALABA"
|
|
||||||
searchField.setAttribute("value", "WHAT WABALABA")
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cases
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
*/}
|
|
||||||
<div style={{width: "100%", position: "relative", height: "100%",}}>
|
|
||||||
<InstantSearch searchClient={searchClient} indexName="appsearch">
|
|
||||||
<div style={{maxWidth: 450, margin: "auto", marginTop: 15, marginBottom: 15, }}>
|
|
||||||
<CustomSearchBox />
|
|
||||||
</div>
|
|
||||||
<CustomHits hitsPerPage={5}/>
|
|
||||||
<Configure clickAnalytics />
|
|
||||||
</InstantSearch>
|
|
||||||
{showSuggestion === true ?
|
|
||||||
<div style={{paddingTop: 0, maxWidth: isMobile ? "100%" : "60%", margin: "auto"}}>
|
|
||||||
<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
|
|
||||||
Can't find what you're looking for?
|
|
||||||
</Typography>
|
|
||||||
<div style={{flex: "1", display: "flex", flexDirection: "row", textAlign: "center",}}>
|
|
||||||
<TextField
|
|
||||||
required
|
|
||||||
style={{flex: "1", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
|
|
||||||
InputProps={{
|
|
||||||
style:{
|
|
||||||
color: "#ffffff",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
color="primary"
|
|
||||||
fullWidth={true}
|
|
||||||
placeholder="Email (optional)"
|
|
||||||
type="email"
|
|
||||||
id="email-handler"
|
|
||||||
autoComplete="email"
|
|
||||||
margin="normal"
|
|
||||||
variant="outlined"
|
|
||||||
onChange={e => setFormMail(e.target.value)}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
required
|
|
||||||
style={{flex: "1", backgroundColor: theme.palette.inputColor}}
|
|
||||||
InputProps={{
|
|
||||||
style:{
|
|
||||||
color: "#ffffff",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
color="primary"
|
|
||||||
fullWidth={true}
|
|
||||||
placeholder="What apps do you want to see?"
|
|
||||||
type=""
|
|
||||||
id="standard-required"
|
|
||||||
margin="normal"
|
|
||||||
variant="outlined"
|
|
||||||
autoComplete="off"
|
|
||||||
onChange={e => setMessage(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
style={buttonStyle}
|
|
||||||
disabled={message.length === 0}
|
|
||||||
onClick={() => {
|
|
||||||
submitContact(formMail, message)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
<Typography style={{color: "white"}} variant="body2">{formMessage}</Typography>
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
|
|
||||||
<span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>
|
|
||||||
<Typography variant="body2" color="textSecondary" style={{}}>
|
|
||||||
Search by
|
|
||||||
</Typography>
|
|
||||||
<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
|
||||||
<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AppGrid1;
|
|
||||||
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
|
|||||||
|
|
||||||
import ReactGA from 'react-ga4';
|
import ReactGA from 'react-ga4';
|
||||||
import {Link} from 'react-router-dom';
|
import {Link} from 'react-router-dom';
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
SkipNext as SkipNextIcon,
|
SkipNext as SkipNextIcon,
|
||||||
@@ -40,7 +41,6 @@ const CreatorGrid = props => {
|
|||||||
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs } = props
|
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs } = props
|
||||||
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
||||||
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
|
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
|
||||||
const theme = useTheme();
|
|
||||||
//const [apps, setApps] = React.useState([]);
|
//const [apps, setApps] = React.useState([]);
|
||||||
//const [filteredApps, setFilteredApps] = React.useState([]);
|
//const [filteredApps, setFilteredApps] = React.useState([]);
|
||||||
const [formMail, setFormMail] = React.useState("");
|
const [formMail, setFormMail] = React.useState("");
|
||||||
|
|||||||
@@ -1,883 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { BrowserView, MobileView } from "react-device-detect";
|
|
||||||
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
import { useTheme } from "@material-ui/core/styles";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Chip,
|
|
||||||
Badge,
|
|
||||||
Typography,
|
|
||||||
Paper,
|
|
||||||
Tooltip,
|
|
||||||
List,
|
|
||||||
Avatar,
|
|
||||||
Menu,
|
|
||||||
ListItem,
|
|
||||||
MenuItem,
|
|
||||||
Select,
|
|
||||||
Button,
|
|
||||||
IconButton,
|
|
||||||
Grid,
|
|
||||||
} from "@material-ui/core";
|
|
||||||
|
|
||||||
import {
|
|
||||||
MeetingRoom as MeetingRoomIcon,
|
|
||||||
Settings as SettingsIcon,
|
|
||||||
Notifications as NotificationsIcon,
|
|
||||||
Home as HomeIcon,
|
|
||||||
Polymer as PolymerIcon,
|
|
||||||
Apps as AppsIcon,
|
|
||||||
Description as DescriptionIcon,
|
|
||||||
HelpOutline as HelpOutlineIcon,
|
|
||||||
} from "@material-ui/icons";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Analytics as AnalyticsIcon,
|
|
||||||
Lightbulb as LightbulbIcon,
|
|
||||||
} from "@mui/icons-material";
|
|
||||||
//import LogoutIcon from '@mui/icons-material/Logout';
|
|
||||||
import { useAlert } from "react-alert";
|
|
||||||
import SearchField from '../components/Searchfield'
|
|
||||||
|
|
||||||
const hoverColor = "#f85a3e";
|
|
||||||
const hoverOutColor = "#e8eaf6";
|
|
||||||
|
|
||||||
const Header = (props) => {
|
|
||||||
const {
|
|
||||||
globalUrl,
|
|
||||||
setNotifications,
|
|
||||||
notifications,
|
|
||||||
isLoggedIn,
|
|
||||||
removeCookie,
|
|
||||||
homePage,
|
|
||||||
isLoaded,
|
|
||||||
userdata,
|
|
||||||
cookies,
|
|
||||||
} = props;
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
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 alert = useAlert();
|
|
||||||
|
|
||||||
const hrefStyle = {
|
|
||||||
color: hoverOutColor,
|
|
||||||
textDecoration: "none",
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
setAnchorElAvatar(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
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("COOKIES: ", cookies, "Remover: ", removeCookie);
|
|
||||||
// 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
|
|
||||||
//cookies.remove("session_token")
|
|
||||||
//window.location.pathname = "/"
|
|
||||||
console.log("Should've logged out");
|
|
||||||
removeCookie("session_token", { path: "/" });
|
|
||||||
removeCookie("session_token", { path: "/workflows" });
|
|
||||||
window.location.reload();
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log("Error in logout: ", error);
|
|
||||||
removeCookie("session_token", { path: "/" });
|
|
||||||
window.location.reload();
|
|
||||||
//removeCookie("session_token", {path: "/"})
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClickChangeOrg = (orgId) => {
|
|
||||||
// Don't really care about the logout
|
|
||||||
//name: org.name,
|
|
||||||
//orgId = "asd"
|
|
||||||
const data = {
|
|
||||||
org_id: orgId,
|
|
||||||
};
|
|
||||||
|
|
||||||
localStorage.setItem("getting_started_sidebar", "open");
|
|
||||||
|
|
||||||
fetch(`${globalUrl}/api/v1/orgs/${orgId}/change`, {
|
|
||||||
mode: "cors",
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
credentials: "include",
|
|
||||||
crossDomain: true,
|
|
||||||
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 !== undefined && responseJson.success) {
|
|
||||||
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: "/"})
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClick = (event) => {
|
|
||||||
setAnchorEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const chipStyle = {
|
|
||||||
backgroundColor: "#3d3f43",
|
|
||||||
height: 30,
|
|
||||||
marginRight: 5,
|
|
||||||
paddingLeft: 5,
|
|
||||||
paddingRight: 5,
|
|
||||||
height: 28,
|
|
||||||
cursor: "pointer",
|
|
||||||
borderColor: "#3d3f43",
|
|
||||||
color: "white",
|
|
||||||
};
|
|
||||||
|
|
||||||
const notificationWidth = 350;
|
|
||||||
const NotificationItem = (props) => {
|
|
||||||
const { data } = props;
|
|
||||||
|
|
||||||
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="h6">{data.title}</Typography>
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
<Typography variant="h6">{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="body1">{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 */}
|
|
||||||
{data.read === false ? (
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
variant="contained"
|
|
||||||
style={{ marginTop: 15 }}
|
|
||||||
onClick={() => {
|
|
||||||
dismissNotification(data.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Dismiss
|
|
||||||
</Button>
|
|
||||||
) : null}
|
|
||||||
</Paper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const notificationMenu = (
|
|
||||||
<span style={{ zIndex: 10001 }}>
|
|
||||||
<IconButton
|
|
||||||
color="primary"
|
|
||||||
style={{ zIndex: 10001, marginRight: 15 }}
|
|
||||||
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: "90vh",
|
|
||||||
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="h6">
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Should be based on some path
|
|
||||||
const avatarMenu = (
|
|
||||||
<span style={{ zIndex: 10001 }}>
|
|
||||||
<IconButton
|
|
||||||
color="primary"
|
|
||||||
style={{ zIndex: 10001, marginRight: 15 }}
|
|
||||||
aria-controls="simple-menu"
|
|
||||||
aria-haspopup="true"
|
|
||||||
onClick={(event) => {
|
|
||||||
setAnchorElAvatar(event.currentTarget);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
style={{ height: 30, width: 30 }}
|
|
||||||
alt="Your username here"
|
|
||||||
src=""
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="simple-menu"
|
|
||||||
anchorEl={anchorElAvatar}
|
|
||||||
keepMounted
|
|
||||||
open={Boolean(anchorElAvatar)}
|
|
||||||
style={{ zIndex: 10012 }}
|
|
||||||
onClose={() => {
|
|
||||||
handleClose();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem
|
|
||||||
onClick={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
handleClose();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Link to="/docs" style={hrefStyle}>
|
|
||||||
<HelpOutlineIcon style={{marginRight: 5 }}/> About
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
onClick={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
handleClose();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Link to="/getting-started" style={hrefStyle}>
|
|
||||||
<AnalyticsIcon style={{marginRight: 5 }}/> Get Started
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
onClick={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
handleClose();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Link to="/usecases" style={hrefStyle}>
|
|
||||||
<LightbulbIcon style={{marginRight: 5 }}/> Use Cases
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
onClick={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
handleClose();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Link to="/settings" style={hrefStyle}>
|
|
||||||
<SettingsIcon style={{marginRight: 5 }}/> Settings
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
style={{ color: "white" }}
|
|
||||||
onClick={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
handleClose();
|
|
||||||
handleClickLogout();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MeetingRoomIcon style={{marginRight: 5 }}/> Logout
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle top bar or something
|
|
||||||
const logoCheck = !homePage ? null : null;
|
|
||||||
//<div style={{position: "fixed", top: 0, left: 0, display: "flex"}}>
|
|
||||||
const loginTextBrowser = !isLoggedIn ? (
|
|
||||||
<div style={{ display: "flex" }}>
|
|
||||||
<List style={{ flex: 1, display: "flex", flexDirect: "row" }} component="nav">
|
|
||||||
<ListItem style={{ textAlign: "center", marginLeft: "0px" }}>
|
|
||||||
<Link to="/docs" style={hrefStyle}>
|
|
||||||
<div
|
|
||||||
onMouseOver={handleSoarHover}
|
|
||||||
onMouseOut={handleSoarHoverOut}
|
|
||||||
style={{ color: SoarHoverColor, cursor: "pointer" }}
|
|
||||||
>
|
|
||||||
About
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</ListItem>
|
|
||||||
</List>
|
|
||||||
{!isLoaded ? null :
|
|
||||||
userdata.chat_disabled === true ? null :
|
|
||||||
<div style={{flex: 1, }}>
|
|
||||||
<SearchField serverside={false} userdata={userdata} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
<div style={{ flex: 1, display: "flex", flexDirection: "row-reverse" }}>
|
|
||||||
<List
|
|
||||||
style={{ display: "flex", flexDirection: "row-reverse" }}
|
|
||||||
component="nav"
|
|
||||||
>
|
|
||||||
<ListItem style={{ flex: "1", textAlign: "center" }}>
|
|
||||||
<Link to="/login" style={hrefStyle}>
|
|
||||||
<div
|
|
||||||
onMouseOver={handleLoginHover}
|
|
||||||
onMouseOut={handleLoginHoverOut}
|
|
||||||
style={{ color: LoginHoverColor, cursor: "pointer" }}
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</ListItem>
|
|
||||||
</List>
|
|
||||||
</div>
|
|
||||||
</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", maxWidth: 140, }}>
|
|
||||||
<Link to="/workflows" style={hrefStyle}>
|
|
||||||
<div
|
|
||||||
onMouseOver={handleSoarHover}
|
|
||||||
onMouseOut={handleSoarHoverOut}
|
|
||||||
style={{
|
|
||||||
color: SoarHoverColor,
|
|
||||||
cursor: "pointer",
|
|
||||||
display: "flex",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<PolymerIcon style={{ marginRight: "5px" }} />
|
|
||||||
<span style={{ marginTop: 2 }}>Workflows</span>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem style={{ textAlign: "center", maxWidth: 100, }}>
|
|
||||||
<Link to="/apps" style={hrefStyle}>
|
|
||||||
<div
|
|
||||||
onMouseOver={handleHelpHover}
|
|
||||||
onMouseOut={handleHelpHoverOut}
|
|
||||||
style={{
|
|
||||||
color: HelpHoverColor,
|
|
||||||
cursor: "pointer",
|
|
||||||
display: "flex",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AppsIcon style={{ marginRight: "5px" }} />
|
|
||||||
<span style={{ marginTop: 2 }}>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={{ textAlign: "center", maxWidth: 120, }}>
|
|
||||||
<Link to="/docs" style={hrefStyle}>
|
|
||||||
<div
|
|
||||||
onMouseOver={handleDocsHover}
|
|
||||||
onMouseOut={handleDocsHoverOut}
|
|
||||||
style={{
|
|
||||||
color: DocsHoverColor,
|
|
||||||
cursor: "pointer",
|
|
||||||
display: "flex",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DescriptionIcon style={{ marginRight: "5px" }} />
|
|
||||||
<span style={{ marginTop: 2 }}>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>
|
|
||||||
{!isLoaded ? null :
|
|
||||||
userdata.chat_disabled === true ? null :
|
|
||||||
<div style={{flex: 1, }}>
|
|
||||||
<SearchField serverside={false} userdata={userdata} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
<div
|
|
||||||
style={{ flex: 1, display: "flex", flexDirection: "row-reverse" }}
|
|
||||||
>
|
|
||||||
{avatarMenu}
|
|
||||||
{notificationMenu}
|
|
||||||
{userdata === undefined ||
|
|
||||||
userdata.admin === undefined ||
|
|
||||||
userdata.admin === null ||
|
|
||||||
!userdata.admin ? null : (
|
|
||||||
<Link to="/admin" style={hrefStyle}>
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
style={{ marginRight: 15, marginTop: 12 }}
|
|
||||||
>
|
|
||||||
Admin
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{userdata === undefined ||
|
|
||||||
userdata.orgs === undefined ||
|
|
||||||
userdata.orgs === null ||
|
|
||||||
userdata.orgs.length <= 1 ? null : (
|
|
||||||
<Select
|
|
||||||
SelectDisplayProps={{
|
|
||||||
style: {
|
|
||||||
marginLeft: 10,
|
|
||||||
maxWidth: 200,
|
|
||||||
overflow: "hidden",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
value={userdata.active_org.id}
|
|
||||||
fullWidth
|
|
||||||
style={{
|
|
||||||
zIndex: 10012,
|
|
||||||
marginTop: 5,
|
|
||||||
backgroundColor: theme.palette.surfaceColor,
|
|
||||||
marginRight: 15,
|
|
||||||
color: "white",
|
|
||||||
height: 50,
|
|
||||||
width: 200,
|
|
||||||
}}
|
|
||||||
MenuProps={{
|
|
||||||
style: { zIndex: 10012 },
|
|
||||||
}}
|
|
||||||
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
|
|
||||||
|
|
||||||
//if (data.creator_org !== undefined && data.creator_org !== null && data.creator_org.length > 0 && data.fixed !== true) {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reordering to have suborgs with access under original org
|
|
||||||
if (data.child_orgs !== undefined && data.child_orgs !== null) {
|
|
||||||
var cnt = 0
|
|
||||||
for (var key in data.child_orgs) {
|
|
||||||
const childorg = data.child_orgs[key]
|
|
||||||
const foundIndex = userdata.orgs.findIndex(item => item.id === childorg.id)
|
|
||||||
if (foundIndex !== -1) {
|
|
||||||
const newindex = parseInt(index)+parseInt(cnt)
|
|
||||||
|
|
||||||
var newitem = userdata.orgs[foundIndex]
|
|
||||||
newitem.fixed = true
|
|
||||||
userdata.orgs.splice(newindex+1, 0, newitem)
|
|
||||||
userdata.orgs.splice(foundIndex+1, 1)
|
|
||||||
} else {
|
|
||||||
console.log("ORG NOT FOUND IN LIST: ", childorg)
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is stupid :)
|
|
||||||
cnt += 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log("ORG: ", data)
|
|
||||||
const imageStyle = {
|
|
||||||
width: imagesize,
|
|
||||||
height: imagesize,
|
|
||||||
pointerEvents: "none",
|
|
||||||
marginRight: 10,
|
|
||||||
marginLeft: data.creator_org !== undefined && data.creator_org !== null && data.creator_org.length > 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} />
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MenuItem key={index} disabled={data.id === userdata.active_org.id} style={{backgroundColor: theme.palette.inputColor, color: "white", height: 40,}} value={data.id}>
|
|
||||||
|
|
||||||
<Tooltip color="primary" title={parsedTitle} placement="left">
|
|
||||||
<div style={{display: "flex"}}>
|
|
||||||
{image} {data.name}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
</MenuItem>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
//console.log("USR: ", userdata.orgs)
|
|
||||||
|
|
||||||
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>
|
|
||||||
<HomeIcon style={{ marginTop: "3px", marginRight: "5px" }} />
|
|
||||||
</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>
|
|
||||||
</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" }}
|
|
||||||
>
|
|
||||||
Shuffle
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem style={{ textAlign: "center" }}>
|
|
||||||
<Link to="/workflows" style={hrefStyle}>
|
|
||||||
<div
|
|
||||||
onMouseOver={handleSoarHover}
|
|
||||||
onMouseOut={handleSoarHoverOut}
|
|
||||||
style={{ color: SoarHoverColor, cursor: "pointer" }}
|
|
||||||
>
|
|
||||||
Workflows
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem style={{ textAlign: "center" }}>
|
|
||||||
<Link to="/apps" style={hrefStyle}>
|
|
||||||
<div
|
|
||||||
onMouseOver={handleHelpHover}
|
|
||||||
onMouseOut={handleHelpHoverOut}
|
|
||||||
style={{ color: HelpHoverColor, cursor: "pointer" }}
|
|
||||||
>
|
|
||||||
Apps
|
|
||||||
</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: "10", display: "flex", flexDirection: "row-reverse" }}
|
|
||||||
>
|
|
||||||
{avatarMenu}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
// <Divider style={{height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
|
|
||||||
const loadedCheck = (
|
|
||||||
<div style={{ minHeight: 60 }}>
|
|
||||||
<BrowserView>{loginTextBrowser}</BrowserView>
|
|
||||||
<MobileView>{loginTextMobile}</MobileView>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
// <div style={{backgroundImage: "linear-gradient(-90deg,#342f78 0,#29255e 50%,#1b1947 100%"}}>
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
position: "fixed",
|
|
||||||
minHeight: 60,
|
|
||||||
maxHeight: 60,
|
|
||||||
top: 0,
|
|
||||||
zIndex: 10000,
|
|
||||||
backgroundColor: "inherit",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loadedCheck}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import React, {useState} from 'react';
|
import React, {useState} from 'react';
|
||||||
import {BrowserView, MobileView} from "react-device-detect";
|
import {BrowserView, MobileView} from "react-device-detect";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
import {Link} from 'react-router-dom';
|
import {Link} from 'react-router-dom';
|
||||||
import ReactGA from 'react-ga4';
|
import ReactGA from 'react-ga4';
|
||||||
@@ -45,7 +46,6 @@ const hoverOutColor = "#e8eaf6"
|
|||||||
|
|
||||||
const Header = props => {
|
const Header = props => {
|
||||||
const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, userdata, serverside, } = props;
|
const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, userdata, serverside, } = props;
|
||||||
const theme = useTheme();
|
|
||||||
const alert = useAlert()
|
const alert = useAlert()
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1,5 +1,6 @@
|
|||||||
import React, { useState, useEffect, useLayoutEffect } from "react";
|
import React, { useState, useEffect, useLayoutEffect } from "react";
|
||||||
import { makeStyles, createStyles } from "@mui/styles";
|
import { makeStyles, createStyles } from "@mui/styles";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
|
|
||||||
import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
|
import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
|
||||||
@@ -8,7 +9,6 @@ import { sortByKey } from "../views/AngularWorkflow.jsx";
|
|||||||
//import NestedMenuItem from "material-ui-nested-menu-item-v5";
|
//import NestedMenuItem from "material-ui-nested-menu-item-v5";
|
||||||
import { NestedMenuItem } from "mui-nested-menu";
|
import { NestedMenuItem } from "mui-nested-menu";
|
||||||
import { useAlert } from "react-alert";
|
import { useAlert } from "react-alert";
|
||||||
import theme from '../theme.jsx';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
ButtonGroup,
|
ButtonGroup,
|
||||||
@@ -170,7 +170,6 @@ const ParsedAction = (props) => {
|
|||||||
//setExpansionModalOpen,
|
//setExpansionModalOpen,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
//const theme = useTheme();
|
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const alert = useAlert()
|
const alert = useAlert()
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/* eslint-disable react/no-multi-comp */
|
/* eslint-disable react/no-multi-comp */
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { makeStyles } from "@mui/material/styles";
|
import { makeStyles } from "@mui/styles";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CircularProgress,
|
CircularProgress,
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
import { useInterval } from "react-powerhooks";
|
import { useInterval } from "react-powerhooks";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
IconButton,
|
IconButton,
|
||||||
@@ -270,7 +271,6 @@ const Apps = (props) => {
|
|||||||
const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
|
const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
|
||||||
|
|
||||||
//const [workflows, setWorkflows] = React.useState([]);
|
//const [workflows, setWorkflows] = React.useState([]);
|
||||||
const theme = useTheme();
|
|
||||||
const baseRepository = "https://github.com/frikky/shuffle-apps";
|
const baseRepository = "https://github.com/frikky/shuffle-apps";
|
||||||
const alert = useAlert();
|
const alert = useAlert();
|
||||||
let navigate = useNavigate();
|
let navigate = useNavigate();
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { BrowserView, MobileView } from "react-device-detect";
|
import { BrowserView, MobileView } from "react-device-detect";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
import Paper from '@material-ui/core/Paper';
|
import Paper from '@material-ui/core/Paper';
|
||||||
import Button from '@material-ui/core/Button';
|
import Button from '@material-ui/core/Button';
|
||||||
|
|
||||||
import TextField from '@material-ui/core/TextField';
|
import TextField from '@material-ui/core/TextField';
|
||||||
|
|
||||||
import { useTheme } from '@material-ui/core/styles';
|
|
||||||
|
|
||||||
const bodyDivStyle = {
|
const bodyDivStyle = {
|
||||||
margin: "auto",
|
margin: "auto",
|
||||||
@@ -19,8 +19,6 @@ const bodyDivStyle = {
|
|||||||
const Contact = (props) => {
|
const Contact = (props) => {
|
||||||
const { globalUrl, isLoaded } = props;
|
const { globalUrl, isLoaded } = props;
|
||||||
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const boxStyle = {
|
const boxStyle = {
|
||||||
flex: "1",
|
flex: "1",
|
||||||
marginLeft: "10px",
|
marginLeft: "10px",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { useInterval } from "react-powerhooks";
|
import { useInterval } from "react-powerhooks";
|
||||||
import AppFramework from "../components/AppFramework.jsx";
|
import AppFramework from "../components/AppFramework.jsx";
|
||||||
import { makeStyles, useTheme } from "@mui/material/styles";
|
import { makeStyles, useTheme } from "@mui/styles";
|
||||||
// nodejs library that concatenates classes
|
// nodejs library that concatenates classes
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import theme from '../theme.jsx';
|
import theme from '../theme.jsx';
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import ReactMarkdown from "react-markdown";
|
|||||||
import { BrowserView, MobileView } from "react-device-detect";
|
import { BrowserView, MobileView } from "react-device-detect";
|
||||||
import { useParams, useNavigate, Link } from "react-router-dom";
|
import { useParams, useNavigate, Link } from "react-router-dom";
|
||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Grid,
|
Grid,
|
||||||
@@ -56,7 +57,6 @@ const Docs = (defaultprops) => {
|
|||||||
const { globalUrl, selectedDoc, serverside, serverMobile } = defaultprops;
|
const { globalUrl, selectedDoc, serverside, serverMobile } = defaultprops;
|
||||||
|
|
||||||
let navigate = useNavigate();
|
let navigate = useNavigate();
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
// Quickfix for react router 5 -> 6
|
// Quickfix for react router 5 -> 6
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useEffect, useContext } from "react";
|
import React, { useEffect, useContext } from "react";
|
||||||
import { makeStyles } from "@mui/material/styles";
|
import { makeStyles } from "@mui/styles";
|
||||||
|
|
||||||
import ReactGA from 'react-ga4';
|
import ReactGA from 'react-ga4';
|
||||||
import SecurityFramework from '../components/SecurityFramework.jsx';
|
import SecurityFramework from '../components/SecurityFramework.jsx';
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Link, useParams } from "react-router-dom";
|
import { Link, useParams } from "react-router-dom";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
|
|
||||||
import Grid from "@material-ui/core/Grid";
|
import Grid from "@material-ui/core/Grid";
|
||||||
import Card from "@material-ui/core/Card";
|
import Card from "@material-ui/core/Card";
|
||||||
@@ -12,7 +13,6 @@ import Button from "@material-ui/core/Button";
|
|||||||
const Workflows = (defaultprops) => {
|
const Workflows = (defaultprops) => {
|
||||||
const { globalUrl, isLoggedIn, isLoaded } = defaultprops;
|
const { globalUrl, isLoggedIn, isLoaded } = defaultprops;
|
||||||
|
|
||||||
const theme = useTheme();
|
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
var props = JSON.parse(JSON.stringify(defaultprops))
|
var props = JSON.parse(JSON.stringify(defaultprops))
|
||||||
props.match = {}
|
props.match = {}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import theme from '../theme.jsx';
|
||||||
import {
|
import {
|
||||||
Grid,
|
Grid,
|
||||||
Typography,
|
Typography,
|
||||||
@@ -15,7 +16,6 @@ import detectEthereumProvider from "@metamask/detect-provider";
|
|||||||
|
|
||||||
const Settings = (props) => {
|
const Settings = (props) => {
|
||||||
const { globalUrl, isLoaded, userdata, setUserData } = props;
|
const { globalUrl, isLoaded, userdata, setUserData } = props;
|
||||||
const theme = useTheme();
|
|
||||||
const alert = useAlert();
|
const alert = useAlert();
|
||||||
let navigate = useNavigate();
|
let navigate = useNavigate();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user