marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#202: Added dismissal of Notifications and a cleaner menu

Browse Source
This commit is contained in:
frikky
2021-10-04 21:19:36 +02:00
parent 8551f82330
commit dcc8b8bbd5
3 changed files with 30 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+5 -34
View File
@@ -49,37 +49,8 @@ if ( window.location.port === "3000") {
const App = (message, props) => { const App = (message, props) => {
const [userdata, setUserData] = useState({}); const [userdata, setUserData] = useState({});
const [notifications, setNotifications] = useState([ const [notifications, setNotifications] = useState([])
{ const [cookies, setCookie, removeCookie] = useCookies([])
"image": "https://dytvr9ot2sszz.cloudfront.net/whats-new-announcements/billboard_metricsdashbd_sept2021.png",
"created_at": 1519211809934,
"updated_at": 1519211809934,
"title": "some title",
"description": "This is a description",
"dismissable": true,
"personal": false,
"org_id": "",
"tags": ["tag1", "tag2"],
"amount": 3,
"id": "123",
"read": false,
},
{
"image": "https://dytvr9ot2sszz.cloudfront.net/whats-new-announcements/billboard_metricsdashbd_sept2021.png",
"created_at": 1519211809934,
"updated_at": 1519211809934,
"title": "some title",
"description": "This is a description",
"dismissable": true,
"personal": false,
"org_id": "",
"tags": ["tag1", "tag2"],
"amount": 3,
"id": "456",
"read": true,
}
]);
const [cookies, setCookie, removeCookie] = useCookies([]);
const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false);
const [dataset, setDataset] = useState(false); const [dataset, setDataset] = useState(false);
const [isLoaded, setIsLoaded] = useState(false); const [isLoaded, setIsLoaded] = useState(false);
@@ -106,7 +77,7 @@ const App = (message, props) => {
}) })
.then(response => response.json()) .then(response => response.json())
.then(responseJson => { .then(responseJson => {
if (responseJson.success === true && responseJson.notifications !== null && responseJson.notifications !== undefined) { if (responseJson.success === true && responseJson.notifications !== null && responseJson.notifications !== undefined && responseJson.notifications.length > 0) {
console.log("RESP: ", responseJson) console.log("RESP: ", responseJson)
setNotifications(responseJson.notifications) setNotifications(responseJson.notifications)
} }
@@ -157,8 +128,8 @@ const App = (message, props) => {
</div> : </div> :
<div style={{ backgroundColor: "#1F2023", color: "rgba(255, 255, 255, 0.65)", minHeight: "100vh" }}> <div style={{ backgroundColor: "#1F2023", color: "rgba(255, 255, 255, 0.65)", minHeight: "100vh" }}>
<ScrollToTop setCurpath={setCurpath} /> <ScrollToTop setCurpath={setCurpath} />
<Header notifications={notifications} checkLogin={checkLogin} cookies={cookies} removeCookie={removeCookie} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} userdata={userdata} {...props} /> <Header notifications={notifications} setNotifications={setNotifications} checkLogin={checkLogin} cookies={cookies} removeCookie={removeCookie} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} userdata={userdata} {...props} />
<div style={{marginTop: 60}}/> <div style={{height: 60}}/>
<Route exact path="/login" render={props => <LoginPage isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} checkLogin={checkLogin} {...props} />} /> <Route exact path="/login" render={props => <LoginPage isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} checkLogin={checkLogin} {...props} />} />
<Route exact path="/admin" render={props => <Admin userdata={userdata} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} {...props} />} /> <Route exact path="/admin" render={props => <Admin userdata={userdata} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} {...props} />} />
<Route exact path="/admin/:key" render={props => <Admin isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} {...props} />} /> <Route exact path="/admin/:key" render={props => <Admin isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} {...props} />} />
frontend/src/components/Header.js
+24 -15
View File
@@ -13,7 +13,7 @@ const hoverColor = "#f85a3e"
const hoverOutColor = "#e8eaf6" const hoverOutColor = "#e8eaf6"
const Header = props => { const Header = props => {
const { globalUrl, notifications, isLoggedIn, removeCookie, homePage, isLoaded, userdata, cookies } = props; const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, isLoaded, userdata, cookies } = props;
const theme = useTheme(); const theme = useTheme();
const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor); const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
@@ -34,7 +34,7 @@ const Header = props => {
// Don't really care about the logout // Don't really care about the logout
fetch(`${globalUrl}/api/v1/notifications/${alert_id}/markasread`, { fetch(`${globalUrl}/api/v1/notifications/${alert_id}/markasread`, {
credentials: "include", credentials: "include",
method: 'POST', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
@@ -46,16 +46,16 @@ const Header = props => {
return response.json(); return response.json();
}).then(function(responseJson) { }).then(function(responseJson) {
if (responseJson.success !== undefined && responseJson.success) { if (responseJson.success === true) {
setTimeout(() => { const newNotifications = notifications.filter(data => data.id !== alert_id)
window.location.reload() console.log("NEW NOTIFICATIONS: ", newNotifications)
}, 2000) setNotifications(newNotifications)
} else { } else {
alert.error("Failed changing org: ", responseJson.reason) alert.error("Failed dismissing notification. Please try again later.")
} }
}) })
.catch(error => { .catch(error => {
console.log("error changing: ", error) console.log("error in notification dismissal: ", error)
//removeCookie("session_token", {path: "/"}) //removeCookie("session_token", {path: "/"})
}) })
} }
@@ -187,13 +187,22 @@ const Header = props => {
const {data} = props const {data} = props
return ( return (
<Paper style={{width: 300, padding: 25, borderBottom: "1px solid rgba(255,255,255,0.4)"}}> <Paper style={{backgroundColor: theme.palette.surfaceColor, width: 300, padding: 25, borderBottom: "1px solid rgba(255,255,255,0.4)"}}>
<Typography variant="h6"> {/*<Typography variant="h6">
{new Date(data.updated_at).toISOString()} {new Date(data.updated_at).toISOString()}
</Typography > </Typography >*/}
<Typography variant="h6"> {data.reference_url !== undefined && data.reference_url !== null && data.reference_url.length > 0 ?
{data.title} <Link to={data.reference_url} style={{color: "#f86a3e", textDecoration: "none",}}>
</Typography > <Typography variant="h6">
{data.title}
</Typography >
</Link>
:
<Typography variant="h6">
{data.title}
</Typography >
}
{data.image !== undefined && data.image !== null && data.image.length > 0 ? {data.image !== undefined && data.image !== null && data.image.length > 0 ?
<img alt={data.title} src={data.image} style={{height: 100, width: 100, }} /> <img alt={data.title} src={data.image} style={{height: 100, width: 100, }} />
: :
@@ -372,7 +381,7 @@ const Header = props => {
</div> </div>
<div style={{flex: "10", display: "flex", flexDirection: "row-reverse"}}> <div style={{flex: "10", display: "flex", flexDirection: "row-reverse"}}>
{avatarMenu} {avatarMenu}
{/*notificationMenu*/} {notificationMenu}
{userdata === undefined || userdata.admin === undefined || userdata.admin === null || !userdata.admin ? null : {userdata === undefined || userdata.admin === undefined || userdata.admin === null || !userdata.admin ? null :
<Link to="/admin" style={hrefStyle}> <Link to="/admin" style={hrefStyle}>
<Button color="primary" variant="contained" style={{marginRight: 15, marginTop: 12}}> <Button color="primary" variant="contained" style={{marginRight: 15, marginTop: 12}}>
frontend/src/views/AngularWorkflow.jsx
+1 -1
View File
@@ -8033,7 +8033,7 @@ const AngularWorkflow = (props) => {
} }
const executionModal = const executionModal =
<Drawer anchor={"right"} open={executionModalOpen} onClose={() => setExecutionModalOpen(false)} style={{resize: "both", overflow: "auto",}} PaperProps={{style: {resize: "both", overflow: "auto", minWidth: 400, maxWidth: 400, backgroundColor: "#1F2023", color: "white", fontSize: 18}}}> <Drawer anchor={"right"} open={executionModalOpen} onClose={() => setExecutionModalOpen(false)} style={{resize: "both", overflow: "auto", zIndex: 10005}} PaperProps={{style: {resize: "both", overflow: "auto", minWidth: 400, maxWidth: 400, backgroundColor: "#1F2023", color: "white", fontSize: 18, zIndex: 10005}}}>
{executionModalView === 0 ? {executionModalView === 0 ?
<div style={{padding: 25, }}> <div style={{padding: 25, }}>
<Breadcrumbs aria-label="breadcrumb" separator="›" style={{color: "white", fontSize: 16}}> <Breadcrumbs aria-label="breadcrumb" separator="›" style={{color: "white", fontSize: 16}}>