From 4e576c11b678cf722c4ac0de9f003861ff8e63ef Mon Sep 17 00:00:00 2001
From: Elena Schramme <elena.schramme@orbem.ai>
Date: Fri, 31 May 2024 17:15:16 +0200
Subject: [PATCH] improvements for escalation mode

---
 .../Element/Complex/EscalationModeElement.tsx | 31 +++++++--
 src/components/Widget/EscalationWidget.tsx    | 68 +++++++++++--------
 src/prototype/lpd/stress/highLPD.ts           |  4 +-
 tailwind.config.js                            |  8 +--
 4 files changed, 70 insertions(+), 41 deletions(-)

diff --git a/src/components/Element/Complex/EscalationModeElement.tsx b/src/components/Element/Complex/EscalationModeElement.tsx
index b58bbd6..950b3e4 100644
--- a/src/components/Element/Complex/EscalationModeElement.tsx
+++ b/src/components/Element/Complex/EscalationModeElement.tsx
@@ -1,4 +1,4 @@
-import { Key, useEffect, useState } from 'react';
+import { type Dispatch, Key, type SetStateAction, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { useAppSelector } from 'src/redux/hooks';
 import { getGazesAndKeys } from 'src/redux/slices/gazeSlice';
@@ -8,17 +8,23 @@ import MissileIcon from 'src/assets/icons/threats/missile-lg-emph.svg';
 
 type EscalationModeElementProps = {
   element: EscalationModeElementType;
+  animation: string
+  animationClass: string
+  setAnimation: (action: 'approve' | 'deny') => void;
+  setAnimationClass: Dispatch<SetStateAction<string>>
   onAction?: (action: 'approve' | 'deny') => void;
 };
 
 
 const EscalationModeElement = ({ 
     element, 
+    onAction,
+    setAnimation,
+    setAnimationClass,
+    animation,
+    animationClass
 }: EscalationModeElementProps) => {
 
-  const [animation, setAnimation] = useState<'approve' | 'deny' | 'moreInfo' | 'up' | undefined>(undefined,);
-  const [animationClass, setAnimationClass] = useState('animate-slide-in-right');
-
   const gazesAndKeys = useAppSelector(getGazesAndKeys);
   const approveDenyButtonElement = {
     id: uuid(),
@@ -47,6 +53,16 @@ const EscalationModeElement = ({
     borderRight: '0px'
   }
 
+  const handleApprove = () => {
+    setAnimation('approve');
+    if (onAction) onAction('approve');
+  };
+
+  const handleDeny = () => {
+    setAnimation('deny');
+    if (onAction) onAction('deny');
+  };
+
   useEffect(() => {
     if (animation === 'approve' || animation === 'deny') {
       setAnimationClass('animate-blur-away');
@@ -72,7 +88,8 @@ const EscalationModeElement = ({
 
 
   return (
-    <><div className={`alert-element bg-#1E1E1E text-white shadow-lg p-7 ${animationClass}`}  style={{ width: '800px', height: '985px', boxShadow: '8px 0px 60px 0px #000000', zIndex: 1000}}>
+    <><div className='bg-[rgba(37,37,38,0.5)] text-white shadow-lg p-7' style={{opacity:0, width: '560px' }}></div>
+    <><div className={`alert-element bg-#1E1E1E text-white shadow-lg p-7 ${animationClass}`} style={{ width: '800px', height: '985px', boxShadow: '8px 0px 60px 0px #000000', zIndex: 1000 }}>
           <div className="w-1/2 pr-4">
               <div className="mb-4" style={{ width: '488px', height: '128px' }}>
                   <div className="flex items-center mb-4" style={{ width: '800px' }}>
@@ -98,7 +115,7 @@ const EscalationModeElement = ({
               </div>
           </div>
       </div>
-      <div className={`alert-element bg-#1E1E1E text-white shadow-lg p-7 ${animationClass}`}  style={{ width: '560px', height: '985px' }}>
+          <div className={`alert-element bg-#1E1E1E text-white shadow-lg p-7 ${animationClass}`} style={{ width: '560px', height: '985px' }}>
               <div className="w-1/2 pl-4">
                   <h4 style={{ fontSize: '38px', height: '39px', width: '421px', marginBottom: '30px', marginTop: '50px', color: '#B7B7B7' }}>Additional Information</h4>
                   <table className="table-auto" style={{ fontSize: '32px', height: '711px', width: '443px', borderCollapse: 'collapse' }}>
@@ -154,7 +171,7 @@ const EscalationModeElement = ({
                       </tbody>
                   </table>
               </div>
-          </div></>
+          </div></></>
   );
   
 };
diff --git a/src/components/Widget/EscalationWidget.tsx b/src/components/Widget/EscalationWidget.tsx
index 7cdad9e..d2dc3a7 100644
--- a/src/components/Widget/EscalationWidget.tsx
+++ b/src/components/Widget/EscalationWidget.tsx
@@ -1,39 +1,51 @@
-import NOTCH from 'src/assets/icons/Ownship Notch.svg';
+import { useState, useEffect } from 'react';
 import type { EscalationModeWidget as EscalationModeWidgetType } from 'src/types/widget';
 import type { EscalationModeElement as EscalationModeElementType } from 'src/types/element';
 import EscalationModeElement from 'src/components/Element/Complex/EscalationModeElement';
 
 type EscalationWidgetProps = {
-    widget: EscalationModeWidgetType;
+  widget: EscalationModeWidgetType;
 };
 
-const EscalationWidget = ({ widget}: EscalationWidgetProps) => {
-    const { x, y, h, w, elements } = widget;
+const EscalationWidget = ({ widget }: EscalationWidgetProps) => {
+  const { x, y, h, w, elements } = widget;
+  const [initial, setInitial] = useState(true);
+  const [animation, setAnimation] = useState<'approve' | 'deny' | undefined>(undefined,);
+  const [animationClass, setAnimationClass] = useState('animate-slide-in-right');
 
-    var firstElements = structuredClone(elements);
+  useEffect(() => {
+    const timer = setTimeout(() => setInitial(false), 10000); // remove slide-in after 10 seconds
+    return () => clearTimeout(timer);
+  }, []);
 
-    return(
-        <div
-            style={{
-                top: y,
-                left: x,
-                width: w,
-                height: h,
-                zIndex: '1000',
-            }}
-            className="absolute bg-[#252526] flex gap-4 py-2 animate-slide-in-left"
-        >
-            {firstElements.map((element) => (
-                <EscalationModeElement
-                    key={element.id}
-                    element={element as EscalationModeElementType}
-                    onAction={(action) => {
-                        // Handle any additional logic when action is taken, e.g., logging, state updates
-                      }}
-            />
-                ))}
-        </div>
-    )
+  const handleAction = (action: 'approve' | 'deny') => {
+    // Logic to handle approve/deny action
+  };
+
+  return (
+    <div
+      style={{
+        top: y,
+        left: x,
+        width: w,
+        height: h,
+        zIndex: '1000',
+      }}
+      className={`absolute bg-[#252526] flex gap-4 py-2 ${animationClass}`}
+    >
+      {elements.map((element) => (
+        <EscalationModeElement
+          key={element.id}
+          element={element as EscalationModeElementType}
+          onAction={handleAction}
+          animation={animation!}
+          animationClass={animationClass}
+          setAnimation={setAnimation}
+          setAnimationClass={setAnimationClass}
+        />
+      ))}
+    </div>
+  );
 };
 
-export default EscalationWidget;
\ No newline at end of file
+export default EscalationWidget;
diff --git a/src/prototype/lpd/stress/highLPD.ts b/src/prototype/lpd/stress/highLPD.ts
index a189f54..b6c6eb7 100644
--- a/src/prototype/lpd/stress/highLPD.ts
+++ b/src/prototype/lpd/stress/highLPD.ts
@@ -222,10 +222,10 @@ const missileToOwnshipDetectedMessageHigh = (
       id: minimapWidgetId1, // this should be something static?
       sectionType: 'minimap',
       type: 'escalation',
-      x: 560,
+      x: 0,
       y: 85,
       h: 979,
-      w: 1360,
+      w: 1919,
       screen: '/minimap',
       canOverlap: false,
       useElementLocation: false,
diff --git a/tailwind.config.js b/tailwind.config.js
index 81c94be..63926e1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,7 @@ const config = {
     extend: {
       animation: {
         "slide-in-right": 'slide-in-right 2s ease-out forwards',
-        "blur-away": 'blur-away 7s ease-out forwards',
+        "blur-away": 'blur-away 9s ease-out forwards',
       },
       keyframes: {
         "slide-in-right": {
@@ -13,7 +13,7 @@ const config = {
             opacity: 0,
           },
           '100%': {
-            transform: 'translateX(560px)',
+            transform: 'translateX(0%)',
             opacity: 1,
           },
         },
@@ -21,11 +21,11 @@ const config = {
           '0%': {
             opacity: 1,
           },
-          '20%': {
+          '80%': {
             opacity: 1,
           },
           '100%': {
-            opacity: 1,
+            opacity: 0,
           },
         },
       },