improvements for escalation mode
This commit is contained in:
parent
4d7e346308
commit
4e576c11b6
@ -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 { v4 as uuid } from 'uuid';
|
||||||
import { useAppSelector } from 'src/redux/hooks';
|
import { useAppSelector } from 'src/redux/hooks';
|
||||||
import { getGazesAndKeys } from 'src/redux/slices/gazeSlice';
|
import { getGazesAndKeys } from 'src/redux/slices/gazeSlice';
|
||||||
@ -8,17 +8,23 @@ import MissileIcon from 'src/assets/icons/threats/missile-lg-emph.svg';
|
|||||||
|
|
||||||
type EscalationModeElementProps = {
|
type EscalationModeElementProps = {
|
||||||
element: EscalationModeElementType;
|
element: EscalationModeElementType;
|
||||||
|
animation: string
|
||||||
|
animationClass: string
|
||||||
|
setAnimation: (action: 'approve' | 'deny') => void;
|
||||||
|
setAnimationClass: Dispatch<SetStateAction<string>>
|
||||||
onAction?: (action: 'approve' | 'deny') => void;
|
onAction?: (action: 'approve' | 'deny') => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const EscalationModeElement = ({
|
const EscalationModeElement = ({
|
||||||
element,
|
element,
|
||||||
|
onAction,
|
||||||
|
setAnimation,
|
||||||
|
setAnimationClass,
|
||||||
|
animation,
|
||||||
|
animationClass
|
||||||
}: EscalationModeElementProps) => {
|
}: EscalationModeElementProps) => {
|
||||||
|
|
||||||
const [animation, setAnimation] = useState<'approve' | 'deny' | 'moreInfo' | 'up' | undefined>(undefined,);
|
|
||||||
const [animationClass, setAnimationClass] = useState('animate-slide-in-right');
|
|
||||||
|
|
||||||
const gazesAndKeys = useAppSelector(getGazesAndKeys);
|
const gazesAndKeys = useAppSelector(getGazesAndKeys);
|
||||||
const approveDenyButtonElement = {
|
const approveDenyButtonElement = {
|
||||||
id: uuid(),
|
id: uuid(),
|
||||||
@ -47,6 +53,16 @@ const EscalationModeElement = ({
|
|||||||
borderRight: '0px'
|
borderRight: '0px'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleApprove = () => {
|
||||||
|
setAnimation('approve');
|
||||||
|
if (onAction) onAction('approve');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeny = () => {
|
||||||
|
setAnimation('deny');
|
||||||
|
if (onAction) onAction('deny');
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (animation === 'approve' || animation === 'deny') {
|
if (animation === 'approve' || animation === 'deny') {
|
||||||
setAnimationClass('animate-blur-away');
|
setAnimationClass('animate-blur-away');
|
||||||
@ -72,7 +88,8 @@ const EscalationModeElement = ({
|
|||||||
|
|
||||||
|
|
||||||
return (
|
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="w-1/2 pr-4">
|
||||||
<div className="mb-4" style={{ width: '488px', height: '128px' }}>
|
<div className="mb-4" style={{ width: '488px', height: '128px' }}>
|
||||||
<div className="flex items-center mb-4" style={{ width: '800px' }}>
|
<div className="flex items-center mb-4" style={{ width: '800px' }}>
|
||||||
@ -154,7 +171,7 @@ const EscalationModeElement = ({
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div></>
|
</div></></>
|
||||||
);
|
);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
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 { EscalationModeWidget as EscalationModeWidgetType } from 'src/types/widget';
|
||||||
import type { EscalationModeElement as EscalationModeElementType } from 'src/types/element';
|
import type { EscalationModeElement as EscalationModeElementType } from 'src/types/element';
|
||||||
import EscalationModeElement from 'src/components/Element/Complex/EscalationModeElement';
|
import EscalationModeElement from 'src/components/Element/Complex/EscalationModeElement';
|
||||||
@ -7,12 +7,22 @@ type EscalationWidgetProps = {
|
|||||||
widget: EscalationModeWidgetType;
|
widget: EscalationModeWidgetType;
|
||||||
};
|
};
|
||||||
|
|
||||||
const EscalationWidget = ({ widget}: EscalationWidgetProps) => {
|
const EscalationWidget = ({ widget }: EscalationWidgetProps) => {
|
||||||
const { x, y, h, w, elements } = widget;
|
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(
|
const handleAction = (action: 'approve' | 'deny') => {
|
||||||
|
// Logic to handle approve/deny action
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
top: y,
|
top: y,
|
||||||
@ -21,19 +31,21 @@ const EscalationWidget = ({ widget}: EscalationWidgetProps) => {
|
|||||||
height: h,
|
height: h,
|
||||||
zIndex: '1000',
|
zIndex: '1000',
|
||||||
}}
|
}}
|
||||||
className="absolute bg-[#252526] flex gap-4 py-2 animate-slide-in-left"
|
className={`absolute bg-[#252526] flex gap-4 py-2 ${animationClass}`}
|
||||||
>
|
>
|
||||||
{firstElements.map((element) => (
|
{elements.map((element) => (
|
||||||
<EscalationModeElement
|
<EscalationModeElement
|
||||||
key={element.id}
|
key={element.id}
|
||||||
element={element as EscalationModeElementType}
|
element={element as EscalationModeElementType}
|
||||||
onAction={(action) => {
|
onAction={handleAction}
|
||||||
// Handle any additional logic when action is taken, e.g., logging, state updates
|
animation={animation!}
|
||||||
}}
|
animationClass={animationClass}
|
||||||
|
setAnimation={setAnimation}
|
||||||
|
setAnimationClass={setAnimationClass}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default EscalationWidget;
|
export default EscalationWidget;
|
@ -222,10 +222,10 @@ const missileToOwnshipDetectedMessageHigh = (
|
|||||||
id: minimapWidgetId1, // this should be something static?
|
id: minimapWidgetId1, // this should be something static?
|
||||||
sectionType: 'minimap',
|
sectionType: 'minimap',
|
||||||
type: 'escalation',
|
type: 'escalation',
|
||||||
x: 560,
|
x: 0,
|
||||||
y: 85,
|
y: 85,
|
||||||
h: 979,
|
h: 979,
|
||||||
w: 1360,
|
w: 1919,
|
||||||
screen: '/minimap',
|
screen: '/minimap',
|
||||||
canOverlap: false,
|
canOverlap: false,
|
||||||
useElementLocation: false,
|
useElementLocation: false,
|
||||||
|
@ -4,7 +4,7 @@ const config = {
|
|||||||
extend: {
|
extend: {
|
||||||
animation: {
|
animation: {
|
||||||
"slide-in-right": 'slide-in-right 2s ease-out forwards',
|
"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: {
|
keyframes: {
|
||||||
"slide-in-right": {
|
"slide-in-right": {
|
||||||
@ -13,7 +13,7 @@ const config = {
|
|||||||
opacity: 0,
|
opacity: 0,
|
||||||
},
|
},
|
||||||
'100%': {
|
'100%': {
|
||||||
transform: 'translateX(560px)',
|
transform: 'translateX(0%)',
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -21,11 +21,11 @@ const config = {
|
|||||||
'0%': {
|
'0%': {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
},
|
},
|
||||||
'20%': {
|
'80%': {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
},
|
},
|
||||||
'100%': {
|
'100%': {
|
||||||
opacity: 1,
|
opacity: 0,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user