+
+
{' '}No thanks, I would like to unsubscribe from all emails (best choice)
diff --git a/src/Pages/LedSign/LedSign.js b/src/Pages/LedSign/LedSign.js
index 6e48e2c15..a0cd1dfe7 100644
--- a/src/Pages/LedSign/LedSign.js
+++ b/src/Pages/LedSign/LedSign.js
@@ -1,11 +1,13 @@
import React, { useState, useEffect } from 'react';
import { healthCheck, updateSignText } from '../../APIFunctions/LedSign';
import { useSCE } from '../../Components/context/SceContext';
+
import './ledsign.css';
function LedSign() {
const { user } = useSCE();
const [signHealthy, setSignHealthy] = useState(false);
+ const [showInput, setInput] = useState(false);
const [loading, setLoading] = useState(true);
const [text, setText] = useState('');
const [brightness, setBrightness] = useState(50);
@@ -13,12 +15,11 @@ function LedSign() {
const [backgroundColor, setBackgroundColor] = useState('#0000ff');
const [textColor, setTextColor] = useState('#00ff00');
const [borderColor, setBorderColor] = useState('#ff0000');
+ const [expiration, setExpiration] = useState(null);
+ const [existingExpirationFromSign, setExistingExpirationFromSign] = useState(null);
const [awaitingSignResponse, setAwaitingSignResponse] = useState(false);
- const [awaitingStopSignResponse, setAwaitingStopSignResponse]
- = useState(false);
const [requestSuccessful, setRequestSuccessful] = useState();
const [stopRequestSuccesful, setStopRequestSuccesful] = useState();
-
const inputArray = [
{
title: 'Sign Text:',
@@ -67,7 +68,43 @@ function LedSign() {
}
];
+ function isExpired() {
+ if (!expiration) {
+ return false;
+ }
+ const currDate = new Date();
+ const expireDateObject = new Date(expiration);
+ return expireDateObject < currDate;
+ }
+
+ function getFormattedTime(maybeISOString = null) {
+ let date = new Date();
+ if (maybeISOString) {
+ date = new Date(maybeISOString);
+ }
+
+ return date.toLocaleString('en-US', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: 'numeric',
+ minute: '2-digit',
+ hour12: true,
+ timeZoneName: 'short',
+ });
+ }
+
+ async function handleExpiration() {
+ setExpiration(null);
+ setInput(!showInput);
+ }
+
async function handleSend() {
+ let expirationToUse = null;
+ if (expiration) {
+ expirationToUse = new Date(expiration).toISOString();
+ }
+
setAwaitingSignResponse(true);
let correctedScrollSpeed = 10 - scrollSpeed;
const signResponse = await updateSignText(
@@ -78,6 +115,7 @@ function LedSign() {
backgroundColor,
textColor,
borderColor,
+ expiration: expirationToUse,
email: user.email,
firstName: user.firstName,
},
@@ -88,7 +126,6 @@ function LedSign() {
}
async function handleStop() {
- setAwaitingStopSignResponse(true);
const signResponse = await updateSignText(
{
ledIsOff: true,
@@ -98,7 +135,6 @@ function LedSign() {
user.token
);
setStopRequestSuccesful(!signResponse.error);
- setAwaitingStopSignResponse(false);
}
function renderRequestStatus() {
@@ -115,20 +151,60 @@ function LedSign() {
);
}
}
+
+ function maybeShowExpirationDate() {
+ if (!existingExpirationFromSign) {
+ return <>;
+ }
+ const humanizedExpiration = new Date(existingExpirationFromSign)
+ .toLocaleString('en-US', {
+ timeZoneName: 'short' // e.g., "Pacific Standard Time"
+ });
+ return
The current sign message will expire on {humanizedExpiration}
;
+ }
+
+ function getExpirationButtonOrInput() {
+ if (showInput) {
+ return <>
+
+ setInput(!showInput)}>
+ Cancel Expiration
+
+
+ {
+ isExpired() &&
+
+ Your selected expiration is considered behind the current time of {getFormattedTime()}.
+
+
+ Submitting a message with this expiration will not update the sign.
+
+
+ }
+ ;
+ }
+
+ return
+ Set Expiration
+ ;
+ }
+
useEffect(() => {
async function checkSignHealth() {
setLoading(true);
const status = await healthCheck(user.firstName);
- if (status && !status.error) {
+ if (status.responseData && !status.error) {
setSignHealthy(true);
const { responseData } = status;
- if (responseData && responseData.text) {
+ if (Object.keys(responseData).length > 0) {
setText(responseData.text);
setBrightness(responseData.brightness);
setScrollSpeed(responseData.scrollSpeed);
setBackgroundColor(responseData.backgroundColor);
setTextColor(responseData.textColor);
setBorderColor(responseData.borderColor);
+ setExistingExpirationFromSign(responseData.expiration);
}
} else {
setSignHealthy(false);
@@ -198,6 +274,8 @@ function LedSign() {
>