Skip to content

Commit e771e6f

Browse files
Embotic-WayneEmbotic-Wayne
committed
nvm btn
1 parent f941ea6 commit e771e6f

File tree

1 file changed

+87
-68
lines changed

1 file changed

+87
-68
lines changed

‎src/Pages/LedSign/LedSign.js‎

Lines changed: 87 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ function LedSign() {
2525
const [permissionRequest, setPermissionRequest] = useState(null);
2626
const [checkingPermission, setCheckingPermission] = useState(false);
2727
const [requestingPermission, setRequestingPermission] = useState(false);
28+
const [cancelingRequest, setCancelingRequest] = useState(false);
2829
const isOfficer = user.accessLevel >= membershipState.OFFICER;
2930
const [tab, setTab] = useState('sign');
3031
const [allPermissionRequests, setAllPermissionRequests] = useState([]);
@@ -237,6 +238,16 @@ function LedSign() {
237238
// eslint-disable-next-line
238239
}, []);
239240

241+
async function fetchAllPermissionRequests() {
242+
if (!isOfficer) return;
243+
setLoadingRequests(true);
244+
const result = await getAllPermissionRequests('LED_SIGN', user.token);
245+
if (!result.error && result.responseData) {
246+
setAllPermissionRequests(result.responseData);
247+
}
248+
setLoadingRequests(false);
249+
}
250+
240251
useEffect(() => {
241252
if (isOfficer && tab === 'requests') {
242253
fetchAllPermissionRequests();
@@ -272,6 +283,17 @@ function LedSign() {
272283
setRequestingPermission(false);
273284
}
274285

286+
async function handleCancelRequest() {
287+
if (!permissionRequest || !permissionRequest._id) return;
288+
289+
setCancelingRequest(true);
290+
const result = await deletePermissionRequest('LED_SIGN', permissionRequest._id, user.token);
291+
if (!result.error) {
292+
setPermissionRequest(null);
293+
}
294+
setCancelingRequest(false);
295+
}
296+
275297
function renderPermissionRequestUI() {
276298
if (user.accessLevel >= membershipState.OFFICER) {
277299
return null;
@@ -294,6 +316,13 @@ function LedSign() {
294316
<p className="text-sm text-gray-600 dark:text-gray-400 italic">
295317
Drop a message in Discord to speed up the process!
296318
</p>
319+
<button
320+
className="btn bg-gray-500 hover:bg-gray-400 text-white"
321+
onClick={handleCancelRequest}
322+
disabled={cancelingRequest}
323+
>
324+
{cancelingRequest ? 'Canceling...' : 'Nevermind'}
325+
</button>
297326
</div>
298327
);
299328
}
@@ -331,16 +360,6 @@ function LedSign() {
331360
: 'p-2 hover:bg-gray-400 rounded-md dark:text-white text-gray-700';
332361
}
333362

334-
async function fetchAllPermissionRequests() {
335-
if (!isOfficer) return;
336-
setLoadingRequests(true);
337-
const result = await getAllPermissionRequests('LED_SIGN', user.token);
338-
if (!result.error && result.responseData) {
339-
setAllPermissionRequests(result.responseData);
340-
}
341-
setLoadingRequests(false);
342-
}
343-
344363
async function handleApprove(requestId) {
345364
const result = await approvePermissionRequest('LED_SIGN', requestId, user.token);
346365
if (!result.error) await fetchAllPermissionRequests();
@@ -442,75 +461,75 @@ function LedSign() {
442461
</div>
443462
{tab === 'sign' && (
444463
<div className="space-y-12 mt-10 gap-x-6 gap-y-8 w-full sm:grid-cols-6">
445-
<div className="flex border-b border-gray-900/10 pb-12 md:w-full">
446-
<div className="flex flex-col justify-center items-center sm:col-span-3 w-full">
447-
<div className='w-2/3 lg:w-1/2'>
448-
<label>Preview</label>
449-
<div>
450-
<div
451-
className="led-sign-preview-border-top"
452-
style={{ backgroundColor: borderColor }}
453-
></div>
454-
<div
455-
className="led-sign-preview-background"
456-
style={{ backgroundColor: backgroundColor }}
457-
>
458-
<div className="led-sign-marquee-container">
459-
<div className="led-sign-marquee" style={{ animationDuration: `${getAnimationDuration()}s` }}>
460-
<h1 className="led-sign-preview-text text-3xl" style={{ color: textColor }} placeholder="Sign Text">
461-
{/*
464+
<div className="flex border-b border-gray-900/10 pb-12 md:w-full">
465+
<div className="flex flex-col justify-center items-center sm:col-span-3 w-full">
466+
<div className='w-2/3 lg:w-1/2'>
467+
<label>Preview</label>
468+
<div>
469+
<div
470+
className="led-sign-preview-border-top"
471+
style={{ backgroundColor: borderColor }}
472+
></div>
473+
<div
474+
className="led-sign-preview-background"
475+
style={{ backgroundColor: backgroundColor }}
476+
>
477+
<div className="led-sign-marquee-container">
478+
<div className="led-sign-marquee" style={{ animationDuration: `${getAnimationDuration()}s` }}>
479+
<h1 className="led-sign-preview-text text-3xl" style={{ color: textColor }} placeholder="Sign Text">
480+
{/*
462481
we add a padding of 28 characters of whitespace so the entire message
463482
scrolls to the end of the preview before repeating. the preview has a
464483
width of about 28 characters.
465484
*/}
466-
{text.padEnd(28, ' ')}
467-
</h1>
485+
{text.padEnd(28, ' ')}
486+
</h1>
487+
</div>
488+
</div>
468489
</div>
490+
<div
491+
className="led-sign-preview-border-bottom"
492+
style={{ backgroundColor: borderColor }}
493+
></div>
469494
</div>
470495
</div>
471-
<div
472-
className="led-sign-preview-border-bottom"
473-
style={{ backgroundColor: borderColor }}
474-
></div>
475-
</div>
476-
</div>
477-
{maybeShowExpirationDate()}
478-
{getExpirationButtonOrInput()}
479-
{
480-
inputArray.map(({
481-
id,
482-
title,
483-
type,
484-
value,
485-
onChange,
486-
...rest
487-
}) => (
488-
<div key={title} className="sm:col-span-2 sm:col-start-1 w-2/3 lg:w-1/2">
489-
<div className="mt-2 ">
490-
<label htmlFor="copies" className="block text-sm font-medium leading-6">{title}</label>
491-
<input
492-
type={type}
493-
value={value}
494-
id={id}
495-
onChange={onChange}
496-
className="indent-2 text-black dark:text-white block w-full rounded-md border-0 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
497-
{...rest}
498-
/>
499-
</div>
500-
</div>
501-
))
502-
}
496+
{maybeShowExpirationDate()}
497+
{getExpirationButtonOrInput()}
498+
{
499+
inputArray.map(({
500+
id,
501+
title,
502+
type,
503+
value,
504+
onChange,
505+
...rest
506+
}) => (
507+
<div key={title} className="sm:col-span-2 sm:col-start-1 w-2/3 lg:w-1/2">
508+
<div className="mt-2 ">
509+
<label htmlFor="copies" className="block text-sm font-medium leading-6">{title}</label>
510+
<input
511+
type={type}
512+
value={value}
513+
id={id}
514+
onChange={onChange}
515+
className="indent-2 text-black dark:text-white block w-full rounded-md border-0 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
516+
{...rest}
517+
/>
518+
</div>
519+
</div>
520+
))
521+
}
503522

504-
<button className='btn w-2/3 lg:w-1/2 bg-red-500 hover:bg-red-400 text-black mt-4' onClick={handleStop}>
523+
<button className='btn w-2/3 lg:w-1/2 bg-red-500 hover:bg-red-400 text-black mt-4' onClick={handleStop}>
505524
Stop
506-
</button>
507-
<button className='btn w-2/3 lg:w-1/2 bg-green-500 hover:bg-green-400 text-black mt-2' onClick={handleSend}>
525+
</button>
526+
<button className='btn w-2/3 lg:w-1/2 bg-green-500 hover:bg-green-400 text-black mt-2' onClick={handleSend}>
508527
Send
509-
</button>
510-
{renderRequestStatus()}
528+
</button>
529+
{renderRequestStatus()}
530+
</div>
531+
</div>
511532
</div>
512-
</div>
513-
</div>
514533
)}
515534
{tab === 'requests' && <MaybeRenderListOfSignRequests />}
516535
</>

0 commit comments

Comments
 (0)