Added more abilities for banners

antbac · antbac · commit 93727fb312d6 · 2021-07-08T20:17:26.000+02:00
diff --git a/public/src/App.tsx b/public/src/App.tsx
@@ -28,7 +28,7 @@ export default (): JSX.Element => {
   dispatch(loadBanners());
 
   useEffect(() => {
-    const seenBanners = (localStorage.getItem('SeenBanners') ?? []) as number[];
+    const seenBanners = JSON.parse(localStorage.getItem('SeenBanners') ?? '[]') as number[];
     for (let banner of banners) {
       if (banner.startTime > Date.now() || banner.endTime < Date.now() || seenBanners.some(id => id === banner.id)) {
         continue;
diff --git a/public/src/actions/bannerActions.ts b/public/src/actions/bannerActions.ts
@@ -5,6 +5,7 @@ import { HTTP_SERVER_URL } from '../configuration';
 
 export const ActionTypes = Object.freeze({
   AddBanner: 'ADD_BANNER',
+  UpdateBanner: 'UPDATE_BANNER',
   DeleteBanner: 'DELETE_BANNER',
   GetBanners: new AsyncFunction('GET_BANNERS'),
   HideBanner: 'HIDE_BANNER'
@@ -15,9 +16,14 @@ export const addBanner = (message: string, startTime: number, endTime: number):
   payload: { message, startTime, endTime }
 });
 
-export const deleteBanner = (id: number): FluxStandardAction => ({
+export const updateBanner = (id: number, message: string, startTime: number, endTime: number): FluxStandardAction => ({
+  type: ActionTypes.UpdateBanner,
+  payload: { id, message, startTime, endTime }
+});
+
+export const deleteBanner = (id: number, message: string, startTime: number, endTime: number): FluxStandardAction => ({
   type: ActionTypes.DeleteBanner,
-  payload: { id }
+  payload: { id, message, startTime, endTime }
 });
 
 export const loadBanners = (): AsyncAction => ({
diff --git a/public/src/actions/modalActions.ts b/public/src/actions/modalActions.ts
@@ -15,6 +15,7 @@ export const ActionTypes = Object.freeze({
   OpenSetQueueInformationModal: 'OPEN_SET_QUEUE_INFORMATION_MODAL',
   OpenSetServerMessageModal: 'OPEN_SET_SERVER_MESSAGE_MODAL',
   OpenAddBannerModal: 'OPEN_ADD_BANNER_MODAL',
+  OpenUpdateBannerModal: 'OPEN_UPDATE_BANNER_MODAL',
   OpenShowMotdModal: 'OPEN_SHOW_MOTD_MODAL',
   OpenShowQueueModal: 'OPEN_SHOW_QUEUE_MODAL'
 });
@@ -60,6 +61,11 @@ export const openAddBannerModal = (): FluxStandardAction => ({
   type: ActionTypes.OpenAddBannerModal
 });
 
+export const openUpdateBannerModal = (id: number): FluxStandardAction => ({
+  type: ActionTypes.OpenUpdateBannerModal,
+  payload: { id }
+});
+
 export const openShowQueueModal = (queueName: string): FluxStandardAction => ({
   type: ActionTypes.OpenShowQueueModal,
   payload: { queueName }
diff --git a/public/src/middlewares/SocketMiddleware.ts b/public/src/middlewares/SocketMiddleware.ts
@@ -215,9 +215,22 @@ const middleware = () => {
         break;
       }
 
+      case BannerActions.UpdateBanner: {
+        sendMessage(new RequestMessage(`updateBanner`, {
+          id: action.payload.id,
+          message: action.payload.message,
+          startTime: action.payload.startTime,
+          endTime: action.payload.endTime
+        }));
+        break;
+      }
+
       case BannerActions.DeleteBanner: {
-        sendMessage(new RequestMessage(`deleteBanner`, {
-          id: action.payload.id
+        sendMessage(new RequestMessage(`updateBanner`, {
+          id: action.payload.id,
+          message: action.payload.message,
+          startTime: action.payload.startTime,
+          endTime: action.payload.endTime
         }));
         break;
       }
diff --git a/public/src/pages/Administration/Administrators/AdministrationInformation.tsx b/public/src/pages/Administration/Administrators/AdministrationInformation.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux'
 import { GlobalStore } from '../../../store';
+import { Link } from 'react-router-dom';
 import { openSetServerMessageModal, openAddBannerModal } from '../../../actions/modalActions';
-import { deleteBanner } from '../../../actions/bannerActions';
 import User from '../../../models/User';
 import Banner from '../../../models/Banner';
-import { Cross } from '../../../viewcomponents/FontAwesome';
+import BannerList from './BannerList';
 
 export default function AdministrationInformationViewComponent() {
 
@@ -51,14 +51,11 @@ export default function AdministrationInformationViewComponent() {
                   {
                     banners.length === 0
                       ? null
-                      : <div className="mb-5">
-                          <h4>Active information banners</h4>
-                          {
-                            banners.map((banner: Banner) =>
-                              <p key={banner.id}>
-                                <Cross color="red" title="Remove banner" onClick={() => dispatch(deleteBanner(banner.id))} /> { banner.message }
-                              </p>)
-                          }
+                      : <div className="row mb-5">
+                          <div className="col-12 mb-3">
+                            <h2>Currently active banners <Link to="/help#banner">?</Link></h2>
+                          </div>
+                          <BannerList />
                         </div>
                   }
                 </>
diff --git a/public/src/pages/Administration/Administrators/BannerList.tsx b/public/src/pages/Administration/Administrators/BannerList.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux'
+import { GlobalStore } from '../../../store';
+import { openUpdateBannerModal } from '../../../actions/modalActions';
+import Banner from '../../../models/Banner';
+import { Pen } from '../../../viewcomponents/FontAwesome';
+
+export default (): JSX.Element | null => {
+
+  const banners = useSelector<GlobalStore, Banner[]>(store => store.banners);
+
+  const dispatch = useDispatch();
+
+  function getTimestamp(ms: number) {
+    const date = new Date(ms);
+    const pad = (n: any, s = 2) => (`${new Array(s).fill(0)}${n}`).slice(-s);
+    return `${pad(date.getFullYear(),4)}-${pad(date.getMonth()+1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+  }
+
+  return (
+    banners.length
+      ? <div>
+          <table className="table table-striped scrollable">
+            <thead>
+              <tr>
+                <th>Message</th>
+                <th>Shown between</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                banners.map((banner: Banner) =>
+                  <tr key={ banner.id }>
+                    <td>{ banner.message }</td>
+                    <td>{ getTimestamp(banner.startTime) } and { getTimestamp(banner.endTime) }</td>
+                    <td>
+                      <Pen
+                        color="green"
+                        title="Update banner"
+                        onClick={() => dispatch(openUpdateBannerModal(banner.id))} />
+                    </td>
+                  </tr>)
+              }
+            </tbody>
+          </table>
+        </div>
+      : null
+  );
+};
diff --git a/public/src/pages/Help/Users/index.tsx b/public/src/pages/Help/Users/index.tsx
@@ -114,6 +114,13 @@ export default (): JSX.Element | null => {
 
             To search for a queue, type the queue name (or parts of the queue name) in the search box at the top of the page.
           </p>
+
+          <h3 id="banner">Banners</h3>
+          <p>
+            Although <i>Stay A While</i> is a flawless system, once in a blue moon, an administrator may want to inform the users of upcoming or current issues and changes.
+            If that were to ever happen, an alert box will be displayed at the bottom of the user's screen.
+            Feel free to discard the message after reading it thoroughly several times over.
+          </p>
         </div>
       : null
   );
diff --git a/public/src/reducers/bannerReducer.ts b/public/src/reducers/bannerReducer.ts
@@ -7,10 +7,6 @@ const initialState = [] as Banner[];
 export default (state = initialState, action: FluxStandardAction) => {
   switch (action.type) {
 
-    case BannerActionTypes.DeleteBanner: {
-      return state;
-    }
-
     case BannerActionTypes.GetBanners.Rejected: {
       return state;
     }
@@ -25,7 +21,7 @@ export default (state = initialState, action: FluxStandardAction) => {
 
     case BannerActionTypes.HideBanner: {
       const token = 'SeenBanners';
-      const seenBanners = (localStorage.getItem(token) ?? []) as number[];
+      const seenBanners = JSON.parse(localStorage.getItem('SeenBanners') ?? '[]') as number[];
       seenBanners.push(action.payload.id);
       localStorage.setItem(token, JSON.stringify(seenBanners));
       return state;
diff --git a/public/src/reducers/modalReducer.ts b/public/src/reducers/modalReducer.ts
@@ -14,6 +14,7 @@ import { ModalType as SetMotdModal } from '../viewcomponents/Modals/SetMotdModal
 import { ModalType as SetQueueInformationModal } from '../viewcomponents/Modals/SetQueueInformationModal';
 import { ModalType as SetServerMessageModal } from '../viewcomponents/Modals/ServerMessageModal';
 import { ModalType as AddBannerModal } from '../viewcomponents/Modals/AddBannerModal';
+import { ModalType as UpdateBannerModal } from '../viewcomponents/Modals/UpdateBannerModal';
 import { ModalType as ShowMessageModal } from '../viewcomponents/Modals/ShowMessageModal';
 import { ModalType as ShowMotdModal } from '../viewcomponents/Modals/ShowMotdModal';
 import { ModalType as ShowQueueModal } from '../viewcomponents/Modals/ShowQueueModal';
@@ -78,6 +79,10 @@ export default (state = initialState, action: FluxStandardAction) => {
       return { ...state, modalList: [...state.modalList, new Modal(AddBannerModal)] }
     }
 
+    case ModalActionTypes.OpenUpdateBannerModal: {
+      return { ...state, modalList: [...state.modalList, new Modal(UpdateBannerModal, action.payload)] }
+    }
+
     case ModalActionTypes.OpenShowQueueModal: {
       return { ...state, modalList: [...state.modalList, new Modal(ShowQueueModal, action.payload)] }
     }
diff --git a/public/src/viewcomponents/FontAwesome.tsx b/public/src/viewcomponents/FontAwesome.tsx
@@ -11,6 +11,7 @@ export const Invisible = (props: any): JSX.Element => Markup(props, 'eye-slash')
 export const Lock = (props: any): JSX.Element => Markup(props, 'lock');
 export const Megaphone = (props: any): JSX.Element => Markup(props, 'bullhorn');
 export const Muted = (props: any): JSX.Element => Markup(props, 'volume-mute');
+export const Pen = (props: any): JSX.Element => Markup(props, 'pen');
 export const Plus = (props: any): JSX.Element => Markup(props, 'plus');
 export const QuestionMark = (props: any): JSX.Element => Markup(props, 'question');
 export const Sign = (props: any): JSX.Element => Markup(props, 'sign');
diff --git a/public/src/viewcomponents/Modal.tsx b/public/src/viewcomponents/Modal.tsx
@@ -13,6 +13,7 @@ import SendBadLocation, { ModalType as SendBadLocationModal } from './Modals/Sen
 import SendMessage, { ModalType as SendMessageModal } from './Modals/SendMessageModal';
 import ServerMessage, { ModalType as ServerMessageModal } from './Modals/ServerMessageModal';
 import AddBanner, { ModalType as AddBannerModal } from './Modals/AddBannerModal';
+import UpdateBanner, { ModalType as UpdateBannerModal } from './Modals/UpdateBannerModal';
 import SetMotd, { ModalType as SetMotdModal } from './Modals/SetMotdModal';
 import SetQueueInformation, { ModalType as SetQueueInformationModal } from './Modals/SetQueueInformationModal';
 import ShowMessage, { ModalType as ShowMessageModal } from './Modals/ShowMessageModal';
@@ -79,6 +80,10 @@ export default (): JSX.Element => {
         return (<AddBanner { ...props } />);
       }
 
+      case UpdateBannerModal: {
+        return (<UpdateBanner { ...props } />);
+      }
+
       case SetMotdModal: {
         return (<SetMotd { ...props } />);
       }
diff --git a/public/src/viewcomponents/Modals/UpdateBannerModal.tsx b/public/src/viewcomponents/Modals/UpdateBannerModal.tsx
@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux'
+import Modal from 'react-bootstrap/Modal';
+import DatePicker from 'react-datepicker';
+import "react-datepicker/dist/react-datepicker.css";
+import { updateBanner, deleteBanner } from '../../actions/bannerActions';
+import { GlobalStore } from '../../store';
+import Banner from '../../models/Banner';
+
+export const ModalType = 'UPDATE_BANNER_MODAL';
+
+export default (props: any): JSX.Element | null => {
+
+  const banner = useSelector<GlobalStore, Banner | undefined>(store => store.banners.find(banner => banner.id === props.id));
+
+  const [message, setMessage] = useState(banner?.message);
+  const [startDate, setStartDate] = useState(new Date(banner?.startTime ?? new Date().getTime()));
+  const [endDate, setEndDate] = useState(new Date(banner?.endTime ?? new Date().getTime()));
+
+  const dispatch = useDispatch();
+
+  function changeMessage(event: any): void {
+    setMessage(event.target.value);
+  }
+
+  function submitMessage(): void {
+    if (banner === undefined || message === undefined) {
+      return;
+    }
+
+    dispatch(updateBanner(banner.id, message, startDate.getTime(), endDate.getTime()));
+    props.onHide();
+  }
+
+  function sendDeletion(): void {
+    if (banner === undefined || message === undefined) {
+      return;
+    }
+
+    dispatch(deleteBanner(banner.id, banner.message, banner.startTime, banner.startTime));
+    props.onHide();
+  }
+
+  return (
+    banner === undefined
+      ? null
+      : <Modal
+        {...props}
+        size="lg"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered >
+        <Modal.Header closeButton>
+          <Modal.Title id="contained-modal-title-vcenter">
+            Add informational banner
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <label className="mr-1" htmlFor="message">Message</label>
+          <textarea name="message" className="w-100" onChange={changeMessage}>{message}</textarea>
+          <br/><br/>
+          <div className="row">
+            <div className="col-md-6">
+              <label htmlFor="startDate">Start date</label>
+              <br/>
+              <DatePicker
+                name="startDate"
+                className="mb-2"
+                selected={ startDate as Date }
+                onChange={ date => setStartDate(date as Date) }
+                showTimeSelect
+                timeFormat="HH:mm"
+                timeIntervals={1}
+                timeCaption="time"
+                dateFormat="yyyy-MM-dd HH:mm" />
+            </div>
+            <div className="col-md-6">
+              <label htmlFor="endDate">End date</label>
+              <br/>
+              <DatePicker
+                name="endDate"
+                className="mb-2"
+                selected={ endDate as Date }
+                onChange={ date => setEndDate(date as Date) }
+                showTimeSelect
+                timeFormat="HH:mm"
+                timeIntervals={1}
+                timeCaption="time"
+                dateFormat="yyyy-MM-dd HH:mm" />
+            </div>
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <button
+            className="btn btn-danger"
+            onClick={sendDeletion} >
+              Delete banner
+            </button>
+          <button
+            className="btn btn-primary"
+            onClick={submitMessage} >
+              Send message
+            </button>
+        </Modal.Footer>
+      </Modal>
+  );
+};
