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 [userdata, setUserData] = useState({});
const [notifications, setNotifications] = useState([
{
"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 [notifications, setNotifications] = useState([])
const [cookies, setCookie, removeCookie] = useCookies([])
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [dataset, setDataset] = useState(false);
const [isLoaded, setIsLoaded] = useState(false);
@@ -106,7 +77,7 @@ const App = (message, props) => {
})
.then(response => response.json())
.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)
setNotifications(responseJson.notifications)
}
@@ -157,8 +128,8 @@ const App = (message, props) => {
</div> :
<div style={{ backgroundColor: "#1F2023", color: "rgba(255, 255, 255, 0.65)", minHeight: "100vh" }}>
<ScrollToTop setCurpath={setCurpath} />
<Header notifications={notifications} checkLogin={checkLogin} cookies={cookies} removeCookie={removeCookie} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} userdata={userdata} {...props} />
<div style={{marginTop: 60}}/>
<Header notifications={notifications} setNotifications={setNotifications} checkLogin={checkLogin} cookies={cookies} removeCookie={removeCookie} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} userdata={userdata} {...props} />
<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="/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} />} />
frontend/src/components/Header.js
+24 -15
View File
@@ -13,7 +13,7 @@ const hoverColor = "#f85a3e"
const hoverOutColor = "#e8eaf6"
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 [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
@@ -34,7 +34,7 @@ const Header = props => {
// Don't really care about the logout
fetch(`${globalUrl}/api/v1/notifications/${alert_id}/markasread`, {
credentials: "include",
method: 'POST',
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
@@ -46,16 +46,16 @@ const Header = props => {
return response.json();
}).then(function(responseJson) {
if (responseJson.success !== undefined && responseJson.success) {
setTimeout(() => {
window.location.reload()
}, 2000)
if (responseJson.success === true) {
const newNotifications = notifications.filter(data => data.id !== alert_id)
console.log("NEW NOTIFICATIONS: ", newNotifications)
setNotifications(newNotifications)
} else {
alert.error("Failed changing org: ", responseJson.reason)
alert.error("Failed dismissing notification. Please try again later.")
}
})
.catch(error => {
console.log("error changing: ", error)
console.log("error in notification dismissal: ", error)
//removeCookie("session_token", {path: "/"})
})
}
@@ -187,13 +187,22 @@ const Header = props => {
const {data} = props
return (
<Paper style={{width: 300, padding: 25, borderBottom: "1px solid rgba(255,255,255,0.4)"}}>
<Typography variant="h6">
<Paper style={{backgroundColor: theme.palette.surfaceColor, width: 300, padding: 25, borderBottom: "1px solid rgba(255,255,255,0.4)"}}>
{/*<Typography variant="h6">
{new Date(data.updated_at).toISOString()}
</Typography >
<Typography variant="h6">
{data.title}
</Typography >
</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, }} />
:
@@ -372,7 +381,7 @@ const Header = props => {
</div>
<div style={{flex: "10", display: "flex", flexDirection: "row-reverse"}}>
{avatarMenu}
{/*notificationMenu*/}
{notificationMenu}
{userdata === undefined || userdata.admin === undefined || userdata.admin === null || !userdata.admin ? null :
<Link to="/admin" style={hrefStyle}>
<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 =
<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 ?
<div style={{padding: 25, }}>
<Breadcrumbs aria-label="breadcrumb" separator="›" style={{color: "white", fontSize: 16}}>