diff --git a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss index d61984d1..5a908031 100644 --- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss +++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss @@ -15,3 +15,14 @@ .SelectedItem { background-color: var(--selected-item-bg); } + +.FastActions { + :global { + .p-menuitem-content { + background-color: initial !important; + } + .p-menuitem-content:hover { + background-color: initial !important; + } + } +} diff --git a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx index b1ddbcf4..e2443eea 100644 --- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx +++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx @@ -14,11 +14,12 @@ import { SHIP_SIZES_SIZE, } from '@/hooks/Mapper/components/map/constants.ts'; import { Edge } from 'reactflow'; +import { LifetimeActions } from '@/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActions.tsx'; export interface ContextMenuConnectionProps { contextMenuRef: RefObject; onDeleteConnection(): void; - onChangeTimeState(): void; + onChangeTimeState(lifetime: TimeStatus): void; onChangeMassState(state: MassState): void; onChangeShipSizeStatus(state: ShipSizeStatus): void; onToggleMassSave(isLocked: boolean): void; @@ -48,12 +49,10 @@ export const ContextMenuConnection: React.FC = ({ ...(isWormhole ? [ { - label: `EOL`, - className: clsx({ - [classes.ConnectionTimeEOL]: edge.data?.time_status === TimeStatus.eol, - }), - icon: PrimeIcons.CLOCK, - command: onChangeTimeState, + className: clsx(classes.FastActions, '!h-[54px]'), + template: () => { + return ; + }, }, { label: `Frigate`, @@ -122,7 +121,7 @@ export const ContextMenuConnection: React.FC = ({ return ( <> - + ); }; diff --git a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActions.tsx b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActions.tsx new file mode 100644 index 00000000..e345dfe5 --- /dev/null +++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActions.tsx @@ -0,0 +1,79 @@ +import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit'; +import { Button } from 'primereact/button'; +import clsx from 'clsx'; +import { TimeStatus } from '@/hooks/Mapper/types'; + +const LIFE_TIME = [ + { + id: TimeStatus._1h, + label: '1H', + className: 'bg-purple-400 hover:!bg-purple-400', + inactiveClassName: 'bg-purple-400/30', + }, + { + id: TimeStatus._4h, + label: '4H', + className: 'bg-purple-300 hover:!bg-purple-300', + inactiveClassName: 'bg-purple-300/30', + }, + { + id: TimeStatus._4h30m, + label: '4.5H', + className: 'bg-indigo-300 hover:!bg-indigo-300', + inactiveClassName: 'bg-indigo-300/30', + }, + { + id: TimeStatus._8h, + label: '16H', + className: 'bg-orange-300 hover:!bg-orange-300', + inactiveClassName: 'bg-orange-400/30', + }, + { + id: TimeStatus._16h, + label: '24H', + className: 'bg-orange-300 hover:!bg-orange-300', + inactiveClassName: 'bg-orange-400/30', + }, + { + id: TimeStatus._24h, + label: '48H', + className: 'bg-orange-300 hover:!bg-orange-300', + inactiveClassName: 'bg-orange-400/30', + }, +]; + +// const active = 1; + +interface LifetimeActionsProps { + lifetime?: TimeStatus; + onChangeLifetime(lifetime: TimeStatus): void; +} + +export const LifetimeActions = ({ lifetime = TimeStatus._24h, onChangeLifetime }: LifetimeActionsProps) => { + return ( + +
Life time:
+ +
+ {LIFE_TIME.map(x => ( + + ))} +
+ + ); +}; diff --git a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/useContextMenuConnectionHandlers.ts b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/useContextMenuConnectionHandlers.ts index 9b916e66..d08bc3e7 100644 --- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/useContextMenuConnectionHandlers.ts +++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/useContextMenuConnectionHandlers.ts @@ -30,7 +30,7 @@ export const useContextMenuConnectionHandlers = () => { setEdge(undefined); }; - const onChangeTimeState = () => { + const onChangeTimeState = (lifetime: TimeStatus) => { if (!edge || !edge.data) { return; } @@ -40,7 +40,7 @@ export const useContextMenuConnectionHandlers = () => { data: { source: edge.source, target: edge.target, - value: edge.data.time_status === TimeStatus.default ? TimeStatus.eol : TimeStatus.default, + value: lifetime, }, }); setEdge(undefined); diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss index 438f9dd9..2dcde49e 100644 --- a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss +++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss @@ -5,6 +5,16 @@ stroke: #80a5c5; stroke-width: 3px; + &.time1 { + stroke: #f11ab2; + stroke-width: 4px; + } + + &.time4 { + stroke: #a654e3; + stroke-width: 4px; + } + &.TimeCrit { stroke: #f11ab2; stroke-width: 4px; diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx index f02e40f3..95d41d11 100644 --- a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx +++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx @@ -79,7 +79,8 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }: id={`back_${id}`} className={clsx(classes.EdgePathBack, { [classes.Tick]: isThickConnections, - [classes.TimeCrit]: isWormhole && data.time_status === TimeStatus.eol, + [classes.time1]: isWormhole && data.time_status === TimeStatus._1h, + [classes.time4]: isWormhole && data.time_status === TimeStatus._4h, [classes.Hovered]: hovered, [classes.Gate]: !isWormhole, })} diff --git a/assets/js/hooks/Mapper/components/mapInterface/components/SystemLinkSignatureDialog/SystemLinkSignatureDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/components/SystemLinkSignatureDialog/SystemLinkSignatureDialog.tsx index c3dbd974..12fc5876 100644 --- a/assets/js/hooks/Mapper/components/mapInterface/components/SystemLinkSignatureDialog/SystemLinkSignatureDialog.tsx +++ b/assets/js/hooks/Mapper/components/mapInterface/components/SystemLinkSignatureDialog/SystemLinkSignatureDialog.tsx @@ -9,10 +9,9 @@ import { } from '@/hooks/Mapper/components/map/constants.ts'; import { SystemSignaturesContent } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent'; import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts'; -import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize'; import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo'; import { useMapRootState } from '@/hooks/Mapper/mapRootProvider'; -import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types'; +import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types'; import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts'; import { SETTINGS_KEYS, SignatureSettingsType } from '@/hooks/Mapper/constants/signatures'; @@ -116,14 +115,14 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat ); const handleSelect = useCallback( - async (signature: SystemSignature) => { + (signature: SystemSignature) => { if (!signature) { return; } const { outCommand } = ref.current; - await outCommand({ + outCommand({ type: OutCommand.linkSignatureToSystem, data: { ...data, @@ -131,32 +130,9 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat }, }); - if (parseSignatureCustomInfo(signature.custom_info).isEOL === true) { - await outCommand({ - type: OutCommand.updateConnectionTimeStatus, - data: { - source: data.solar_system_source, - target: data.solar_system_target, - value: TimeStatus.eol, - }, - }); - } - - const whShipSize = getWhSize(wormholes, signature.type); - if (whShipSize !== undefined && whShipSize !== null) { - await outCommand({ - type: OutCommand.updateConnectionShipSizeType, - data: { - source: data.solar_system_source, - target: data.solar_system_target, - value: whShipSize, - }, - }); - } - setVisible(false); }, - [data, setVisible, wormholes], + [data, setVisible], ); useEffect(() => { diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx index c26dc8ac..eacd9369 100644 --- a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx +++ b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx @@ -1,6 +1,6 @@ import { Dialog } from 'primereact/dialog'; import { useCallback, useEffect } from 'react'; -import { OutCommand, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types'; +import { OutCommand, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types'; import { Controller, FormProvider, useForm } from 'react-hook-form'; import { SignatureGroupContent, @@ -10,7 +10,6 @@ import { InputText } from 'primereact/inputtext'; import { SystemsSettingsProvider } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/Provider.tsx'; import { Button } from 'primereact/button'; import { useMapRootState } from '@/hooks/Mapper/mapRootProvider'; -import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize'; type SystemSignaturePrepared = Omit & { linked_system: string }; @@ -22,10 +21,7 @@ export interface MapSettingsProps { } export const SignatureSettings = ({ systemId, show, onHide, signatureData }: MapSettingsProps) => { - const { - outCommand, - data: { wormholes }, - } = useMapRootState(); + const { outCommand } = useMapRootState(); const handleShow = async () => {}; const signatureForm = useForm>({}); @@ -52,32 +48,6 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map solar_system_target: values.linked_system, }, }); - - // TODO: need fix - if (values.isEOL) { - await outCommand({ - type: OutCommand.updateConnectionTimeStatus, - data: { - source: systemId, - target: values.linked_system, - value: TimeStatus.eol, - }, - }); - } - - if (values.type) { - const whShipSize = getWhSize(wormholes, values.type); - if (whShipSize !== undefined && whShipSize !== null) { - await outCommand({ - type: OutCommand.updateConnectionShipSizeType, - data: { - source: systemId, - target: values.linked_system, - value: whShipSize, - }, - }); - } - } } out = { @@ -153,7 +123,7 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map signatureForm.reset(); onHide(); }, - [signatureData, signatureForm, outCommand, systemId, onHide, wormholes], + [signatureData, signatureForm, outCommand, systemId, onHide], ); useEffect(() => { diff --git a/assets/js/hooks/Mapper/types/connection.ts b/assets/js/hooks/Mapper/types/connection.ts index 30c8b2a1..47deae75 100644 --- a/assets/js/hooks/Mapper/types/connection.ts +++ b/assets/js/hooks/Mapper/types/connection.ts @@ -10,8 +10,14 @@ export enum MassState { } export enum TimeStatus { - default, - eol, + reserved, // TODO: this reserved for not broke prev solution + _1h, + _4h, + _4h30m, + _8h, + _16h, + _24h, + _48h, } export enum ShipSizeStatus {