From c2004ca4c4dff71db038dc603159d1618e91c93e Mon Sep 17 00:00:00 2001 From: tianlinzhong <673359306@qq.com> Date: Tue, 2 Nov 2021 15:35:54 +0800 Subject: [PATCH 1/3] Energy management system notification function WEB UI --- .../components/navbar/NotificationDropdown.js | 162 ++++++++++++++---- .../components/notification/Notification.js | 34 ++-- 2 files changed, 136 insertions(+), 60 deletions(-) diff --git a/web/src/components/navbar/NotificationDropdown.js b/web/src/components/navbar/NotificationDropdown.js index 8621bbfe..53566e13 100644 --- a/web/src/components/navbar/NotificationDropdown.js +++ b/web/src/components/navbar/NotificationDropdown.js @@ -1,23 +1,97 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; -import React, { useState } from 'react'; +import React, {useEffect, useState} from 'react'; import { Link } from 'react-router-dom'; import { Card, Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap'; import ListGroup from 'reactstrap/es/ListGroup'; import ListGroupItem from 'reactstrap/es/ListGroupItem'; -import { rawEarlierNotifications, rawNewNotifications } from '../../data/notification/notification'; -import { isIterableArray } from '../../helpers/utils'; +// import { rawEarlierNotifications, rawNewNotifications } from '../../data/notification/notification'; +import {getCookieValue, isIterableArray} from '../../helpers/utils'; import useFakeFetch from '../../hooks/useFakeFetch'; import FalconCardHeader from '../common/FalconCardHeader'; import Notification from '../notification/Notification'; import { withTranslation } from 'react-i18next'; +import {APIBaseURL} from "../../config"; +import {createCookie , getPaginationArray} from '../../helpers/utils'; +import moment from 'moment'; +import createMarkup from '../../helpers/createMarkup'; +import {toast} from "react-toastify"; +import {notifications} from "../../data/notification/notification"; -const NotificationDropdown = ({ t }) => { - // State - const { data: newNotifications, setData: setNewNotifications } = useFakeFetch(rawNewNotifications); - const { data: earlierNotifications, setData: setEarlierNotifications } = useFakeFetch(rawEarlierNotifications); +const NotificationDropdown = ({ setRedirect, setRedirectUrl,t }) => { + let current_moment = moment(); + useEffect(() => { + let is_logged_in = getCookieValue('is_logged_in'); + let user_name = getCookieValue('user_name'); + let user_display_name = getCookieValue('user_display_name'); + let user_uuid = getCookieValue('user_uuid'); + let token = getCookieValue('token'); + if ((is_logged_in === null || !is_logged_in)) { + setRedirectUrl(`/authentication/basic/login`); + setRedirect(true); + } else { + // update expires time of cookies + createCookie('is_logged_in', true, 1000 * 60 * 60 * 8); + createCookie('user_name', user_name, 1000 * 60 * 60 * 8); + createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8); + createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8); + createCookie('token', token, 1000 * 60 * 60 * 8); + } + }); + const [rawNewNotificationschild, setRawNewNotificationschild] = useState([]); const [isOpen, setIsOpen] = useState(false); const [isAllRead, setIsAllRead] = useState(false); + useEffect(() => { + let isResponseOK = false; + fetch(APIBaseURL + '/webmessagesnew', { + method: 'GET', + headers: { + "Content-type": "application/json", + "User-UUID": getCookieValue('user_uuid'), + "Token": getCookieValue('token') + }, + body: null, + + }).then(response => { + console.log(response); + if (response.ok) { + isResponseOK = true; + } + return response.json(); + }).then(json => { + console.log(json) + if (isResponseOK) { + let NewnotificationList = [] + if (json.length > 0) { + json.forEach((currentValue, index) => { + let notification = {} + notification['id'] = json[index]['id']; + notification['status'] = json[index]['status']; + notification['subject'] = json[index]['subject'] + notification['message'] = json[index]['message']; + notification['created_datetime'] = moment(parseInt(json[index]['created_datetime'])) + .format("YYYY-MM-DD HH:mm:ss"); + if (NewnotificationList.length > 3 ){ + return true + } + if (notification['message'].length > 40){ + notification['message'] = notification['message'].substring(0,30) + "..."; + } + if (notification["status"] === "new"){ + NewnotificationList.push(notification); + } + + }); + } + setRawNewNotificationschild(NewnotificationList); + } + }).catch(err => { + console.log(err); + }); + + }, [t,]); + console.log("test"); + console.log(rawNewNotificationschild); // Handler const handleToggle = e => { @@ -27,28 +101,40 @@ const NotificationDropdown = ({ t }) => { const markAsRead = e => { e.preventDefault(); - const updatedNewNotifications = newNotifications.map(notification => { - if (notification.hasOwnProperty('unread')) { - return { - ...notification, - unread: false - }; + rawNewNotificationschild.map((notification,index) => { + console.log('Mark As Read: ', notification["id"]) + let isResponseOK = false; + fetch(APIBaseURL + '/webmessages/' + notification["id"], { + method: 'PUT', + headers: { + "Content-type": "application/json", + "User-UUID": getCookieValue('user_uuid'), + "Token": getCookieValue('token') + }, + body: JSON.stringify({ + "data": { + "status": 'acknowledged', + "reply": 'ok' + } + }), + }).then(response => { + if (response.ok) { + isResponseOK = true; + return null; + } else { + return response.json(); } - return notification; - }); - const updatedEarlierNotifications = earlierNotifications.map(notification => { - if (notification.hasOwnProperty('unread')) { - return { - ...notification, - unread: false - }; - } - setIsAllRead(true); - return notification; - }); + }).then(json => { + console.log(isResponseOK); + if (isResponseOK) { - setNewNotifications(updatedNewNotifications); - setEarlierNotifications(updatedEarlierNotifications); + } else { + toast.error(json.description) + } + }).catch(err => { + console.log(err); + }); + }); }; return ( @@ -82,20 +168,20 @@ const NotificationDropdown = ({ t }) => { -
{t('notification_NEW')}
- {isIterableArray(newNotifications) && - newNotifications.map((notification, index) => ( - - - - ))} -
{t('notification_EARLIER')}
- {isIterableArray(earlierNotifications) && - earlierNotifications.map((notification, index) => ( - +
{t('notification_NEW')}
+ {isIterableArray(rawNewNotificationschild) && + rawNewNotificationschild.map((notification, index) => ( + ))} + {/*
{t('notification_EARLIER')}
*/} + {/*{isIterableArray(rawNewNotificationschild) &&*/} + {/* rawNewNotificationschild.map((notification, index) => (*/} + {/* */} + {/* */} + {/* */} + {/* ))}*/}
diff --git a/web/src/components/notification/Notification.js b/web/src/components/notification/Notification.js index 97aa5f15..4c515a0b 100644 --- a/web/src/components/notification/Notification.js +++ b/web/src/components/notification/Notification.js @@ -5,38 +5,28 @@ import { Link } from 'react-router-dom'; import Avatar from '../common/Avatar'; import createMarkup from '../../helpers/createMarkup'; -const Notification = ({ to, avatar, time, className, unread, flush, emoji, children }) => ( - - {avatar && ( -
- -
- )} +const Notification = ({ created_datetime, id, status, flush, message,subject}) => ( +
-

+

{subject}

{status}

+

- {emoji && ( - - {emoji} - - )} - {time} + {created_datetime}

); Notification.propTypes = { - to: PropTypes.string.isRequired, - avatar: PropTypes.shape(Avatar.propTypes), - time: PropTypes.string.isRequired, - className: PropTypes.string, - unread: PropTypes.bool, + created_datetime: PropTypes.string.isRequired, + id: PropTypes.string, + status: PropTypes.string, + subject: PropTypes.string, flush: PropTypes.bool, - emoji: PropTypes.string, - children: PropTypes.node + message: PropTypes.node }; -Notification.defaultProps = { unread: false, flush: false }; +Notification.defaultProps = { status: "acknowledged", flush: false }; export default Notification; From 2bade8434f4cd44562e1766e3cb05a6aa2bd41c9 Mon Sep 17 00:00:00 2001 From: tianlinzhong <673359306@qq.com> Date: Tue, 2 Nov 2021 16:02:42 +0800 Subject: [PATCH 2/3] Energy management system notification function WEB UI --- web/src/components/MyEMS/Notification/Notification.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/web/src/components/MyEMS/Notification/Notification.js b/web/src/components/MyEMS/Notification/Notification.js index 50af1e93..cc4c4c1f 100644 --- a/web/src/components/MyEMS/Notification/Notification.js +++ b/web/src/components/MyEMS/Notification/Notification.js @@ -62,7 +62,7 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => { let isResponseOK = false; if (!fetchSuccess) { - fetch(APIBaseURL + '/notifications?' + + fetch(APIBaseURL + '/webmessagesnew?' + 'startdatetime=' + startDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&enddatetime=' + endDatetime.format('YYYY-MM-DDTHH:mm:ss'), { method: 'GET', @@ -90,7 +90,8 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => { let notification = {} notification['id'] = json[index]['id']; notification['subject'] = json[index]['subject']; - notification['created_datetime'] = json[index]['created_datetime']; + notification['created_datetime'] = moment(parseInt(json[index]['created_datetime'])) + .format("YYYY-MM-DD HH:mm:ss"); notification['message'] = json[index]['message']; notification['status'] = json[index]['status']; notification['url'] = json[index]['url']; @@ -250,7 +251,7 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => { const handleRead = (id, ) => { console.log('Mark As Read: ', id) let isResponseOK = false; - fetch(APIBaseURL + '/notifications/' + id, { + fetch(APIBaseURL + '/webmessages/' + id, { method: 'PUT', headers: { "Content-type": "application/json", @@ -259,7 +260,9 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => { }, body: JSON.stringify({ "data": { - "status": 'read' + "status": '' + + '', + "reply": 'ok' } }), }).then(response => { From 4d91e63dcb0b36292da5e5361d58186a235bebf3 Mon Sep 17 00:00:00 2001 From: tianlinzhong <673359306@qq.com> Date: Fri, 5 Nov 2021 10:06:19 +0800 Subject: [PATCH 3/3] solve the bug --- .../MyEMS/Notification/Notification.js | 3 +- .../components/navbar/NotificationDropdown.js | 51 +++++-------------- 2 files changed, 15 insertions(+), 39 deletions(-) diff --git a/web/src/components/MyEMS/Notification/Notification.js b/web/src/components/MyEMS/Notification/Notification.js index cc4c4c1f..62aa3a62 100644 --- a/web/src/components/MyEMS/Notification/Notification.js +++ b/web/src/components/MyEMS/Notification/Notification.js @@ -260,8 +260,7 @@ const Notification = ({ setRedirect, setRedirectUrl, t }) => { }, body: JSON.stringify({ "data": { - "status": '' + - '', + "status": 'acknowledged', "reply": 'ok' } }), diff --git a/web/src/components/navbar/NotificationDropdown.js b/web/src/components/navbar/NotificationDropdown.js index 53566e13..408faabe 100644 --- a/web/src/components/navbar/NotificationDropdown.js +++ b/web/src/components/navbar/NotificationDropdown.js @@ -1,46 +1,27 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; -import React, {useEffect, useState} from 'react'; +import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { Card, Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap'; import ListGroup from 'reactstrap/es/ListGroup'; import ListGroupItem from 'reactstrap/es/ListGroupItem'; -// import { rawEarlierNotifications, rawNewNotifications } from '../../data/notification/notification'; -import {getCookieValue, isIterableArray} from '../../helpers/utils'; +import { rawEarlierNotifications, rawNewNotifications } from '../../data/notification/notification'; +import { isIterableArray } from '../../helpers/utils'; import useFakeFetch from '../../hooks/useFakeFetch'; import FalconCardHeader from '../common/FalconCardHeader'; import Notification from '../notification/Notification'; import { withTranslation } from 'react-i18next'; -import {APIBaseURL} from "../../config"; -import {createCookie , getPaginationArray} from '../../helpers/utils'; +import { APIBaseURL } from "../../config"; import moment from 'moment'; -import createMarkup from '../../helpers/createMarkup'; -import {toast} from "react-toastify"; -import {notifications} from "../../data/notification/notification"; +import { toast } from "react-toastify"; +import { getCookieValue } from '../../helpers/utils'; -const NotificationDropdown = ({ setRedirect, setRedirectUrl,t }) => { - let current_moment = moment(); - useEffect(() => { - let is_logged_in = getCookieValue('is_logged_in'); - let user_name = getCookieValue('user_name'); - let user_display_name = getCookieValue('user_display_name'); - let user_uuid = getCookieValue('user_uuid'); - let token = getCookieValue('token'); - if ((is_logged_in === null || !is_logged_in)) { - setRedirectUrl(`/authentication/basic/login`); - setRedirect(true); - } else { - // update expires time of cookies - createCookie('is_logged_in', true, 1000 * 60 * 60 * 8); - createCookie('user_name', user_name, 1000 * 60 * 60 * 8); - createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8); - createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8); - createCookie('token', token, 1000 * 60 * 60 * 8); - } - }); +const NotificationDropdown = ({ t }) => { + // State const [rawNewNotificationschild, setRawNewNotificationschild] = useState([]); const [isOpen, setIsOpen] = useState(false); const [isAllRead, setIsAllRead] = useState(false); + useEffect(() => { let isResponseOK = false; fetch(APIBaseURL + '/webmessagesnew', { @@ -93,6 +74,7 @@ const NotificationDropdown = ({ setRedirect, setRedirectUrl,t }) => { console.log("test"); console.log(rawNewNotificationschild); + // Handler const handleToggle = e => { e.preventDefault(); @@ -137,6 +119,7 @@ const NotificationDropdown = ({ setRedirect, setRedirectUrl,t }) => { }); }; + return ( { -
{t('notification_NEW')}
+
{t('notification_NEW')}
{isIterableArray(rawNewNotificationschild) && rawNewNotificationschild.map((notification, index) => ( - + ))} - {/*
{t('notification_EARLIER')}
*/} - {/*{isIterableArray(rawNewNotificationschild) &&*/} - {/* rawNewNotificationschild.map((notification, index) => (*/} - {/* */} - {/* */} - {/* */} - {/* ))}*/} +