lee/wanderer
1
0
Fork 0
mirror of https://github.com/wanderer-industries/wanderer synced 2025-12-12 02:35:42 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(Map): Refactored routes widget. Add loader for routes. Prepared for custom hubs

Browse Source
This commit is contained in:
achichenkov
2025-04-24 12:46:08 +03:00
parent c9b366f3e2
commit 99d68dfc0e
27 changed files with 375 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx
View File

@@ -1,79 +1,29 @@
import React, { createContext, useContext, useEffect } from 'react';
import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
import React, { createContext, useContext } from 'react';
import { RoutesWidgetProps } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
export type RoutesType = {
path_type: 'shortest' | 'secure' | 'insecure';
include_mass_crit: boolean;
include_eol: boolean;
include_frig: boolean;
include_cruise: boolean;
include_thera: boolean;
avoid_wormholes: boolean;
avoid_pochven: boolean;
avoid_edencom: boolean;
avoid_triglavian: boolean;
avoid: number[];
};
interface MapProviderProps {
type MapProviderProps = {
children: React.ReactNode;
}
} & RoutesWidgetProps;
export const DEFAULT_SETTINGS: RoutesType = {
path_type: 'shortest',
include_mass_crit: true,
include_eol: true,
include_frig: true,
include_cruise: true,
include_thera: true,
avoid_wormholes: false,
avoid_pochven: false,
avoid_edencom: false,
avoid_triglavian: false,
avoid: [],
};
export interface MapContextProps {
update: ContextStoreDataUpdate<RoutesType>;
data: RoutesType;
}
const RoutesContext = createContext<MapContextProps>({
const RoutesContext = createContext<RoutesWidgetProps>({
update: () => {},
data: { ...DEFAULT_SETTINGS },
// @ts-ignore
data: {},
});
export const RoutesProvider: React.FC<MapProviderProps> = ({ children }) => {
const { update, ref } = useContextStore<RoutesType>(
{ ...DEFAULT_SETTINGS },
{
onAfterAUpdate: values => {
localStorage.setItem(SESSION_KEY.routes, JSON.stringify(values));
},
},
);
export const RoutesProvider: React.FC<MapProviderProps> = ({ children, ...props }) => {
// TODO use it for save previous settings
// useEffect(() => {
// const items = localStorage.getItem(SESSION_KEY.routes);
// if (items) {
// update(JSON.parse(items));
// }
// }, [update]);
useEffect(() => {
const items = localStorage.getItem(SESSION_KEY.routes);
if (items) {
update(JSON.parse(items));
}
}, [update]);
return (
<RoutesContext.Provider
value={{
update,
data: ref,
}}
>
{children}
</RoutesContext.Provider>
);
return <RoutesContext.Provider value={props}>{children}</RoutesContext.Provider>;
};
export const useRouteProvider = () => {
const context = useContext<MapContextProps>(RoutesContext);
const context = useContext<RoutesWidgetProps>(RoutesContext);
return context;
};

62
assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesWidget.tsx
View File

@@ -2,6 +2,7 @@ import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
import {
LayoutEventBlocker,
LoadingWrapper,
SystemViewStandalone,
TooltipPosition,
WdCheckbox,
@@ -25,7 +26,7 @@ import {
AddSystemDialog,
SearchOnSubmitCallback,
} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
import { OutCommand } from '@/hooks/Mapper/types';
import { RoutesWidgetProps } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
const sortByDist = (a: Route, b: Route) => {
const distA = a.has_connection ? a.systems?.length || 0 : Infinity;
@@ -36,19 +37,16 @@ const sortByDist = (a: Route, b: Route) => {
export const RoutesWidgetContent = () => {
const {
data: { selectedSystems, hubs = [], systems, routes },
outCommand,
data: { selectedSystems, systems },
} = useMapRootState();
const { hubs = [], routesList } = useRouteProvider();
const [systemId] = selectedSystems;
const { loading } = useLoadRoutes();
const { systems: systemStatics, loadSystems, lastUpdateKey } = useLoadSystemStatic({ systems: hubs ?? [] });
const { open, ...systemCtxProps } = useContextMenuSystemInfoHandlers({
outCommand,
hubs,
});
const { open, ...systemCtxProps } = useContextMenuSystemInfoHandlers();
const preparedHubs = useMemo(() => {
return hubs.map(x => {
@@ -61,20 +59,20 @@ export const RoutesWidgetContent = () => {
const preparedRoutes: Route[] = useMemo(() => {
return (
routes?.routes
routesList?.routes
.sort(sortByDist)
.filter(x => x.destination.toString() !== systemId)
// .filter(x => x.destination.toString() !== systemId)
.map(route => ({
...route,
mapped_systems:
route.systems?.map(solar_system_id =>
routes?.systems_static_data.find(
routesList?.systems_static_data.find(
system_static_data => system_static_data.solar_system_id === solar_system_id,
),
) ?? [],
})) ?? []
);
}, [routes?.routes, routes?.systems_static_data, systemId]);
}, [routesList?.routes, routesList?.systems_static_data, systemId]);
const refData = useRef({ open, loadSystems, preparedRoutes });
refData.current = { open, loadSystems, preparedRoutes };
@@ -97,12 +95,6 @@ export const RoutesWidgetContent = () => {
[handleClick],
);
if (loading) {
return (
<div className="w-full h-full flex justify-center items-center select-none text-center">Loading routes...</div>
);
}
if (!systemId) {
return (
<div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
@@ -117,7 +109,7 @@ export const RoutesWidgetContent = () => {
return (
<>
{systemId !== undefined && routes && (
<LoadingWrapper loading={loading}>
<div className={clsx(classes.RoutesGrid, 'px-2 py-2')}>
{preparedRoutes.map(route => {
const sys = preparedHubs.find(x => x.solar_system_id === route.destination)!;
@@ -132,7 +124,11 @@ export const RoutesWidgetContent = () => {
<WdImgButton
className={clsx(PrimeIcons.BARS, classes.RemoveBtn)}
onClick={e => handleClick(e, route.destination.toString())}
tooltip={{ content: 'Click here to open system menu', position: TooltipPosition.top, offset: 10 }}
tooltip={{
content: 'Click here to open system menu',
position: TooltipPosition.top,
offset: 10,
}}
/>
<SystemViewStandalone
@@ -151,7 +147,7 @@ export const RoutesWidgetContent = () => {
);
})}
</div>
)}
</LoadingWrapper>
<ContextMenuSystemInfo
hubs={hubs}
@@ -167,13 +163,7 @@ export const RoutesWidgetContent = () => {
export const RoutesWidgetComp = () => {
const [routeSettingsVisible, setRouteSettingsVisible] = useState(false);
const { data, update } = useRouteProvider();
const {
data: { hubs = [] },
outCommand,
} = useMapRootState();
const preparedHubs = useMemo(() => hubs.map(x => parseInt(x)), [hubs]);
const { data, update, addHubCommand } = useRouteProvider();
const isSecure = data.path_type === 'secure';
const handleSecureChange = useCallback(() => {
@@ -190,17 +180,8 @@ export const RoutesWidgetComp = () => {
const onAddSystem = useCallback(() => setOpenAddSystem(true), []);
const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
async item => {
if (preparedHubs.includes(item.value)) {
return;
}
await outCommand({
type: OutCommand.addHub,
data: { system_id: item.value },
});
},
[hubs, outCommand],
async item => addHubCommand(item.value.toString()),
[addHubCommand],
);
return (
@@ -231,6 +212,7 @@ export const RoutesWidgetComp = () => {
className={PrimeIcons.SLIDERS_H}
onClick={() => setRouteSettingsVisible(true)}
tooltip={{
position: TooltipPosition.top,
content: 'Click here to open Routes settings',
}}
/>
@@ -251,9 +233,9 @@ export const RoutesWidgetComp = () => {
);
};
export const RoutesWidget = () => {
export const RoutesWidget = (props: RoutesWidgetProps) => {
return (
<RoutesProvider>
<RoutesProvider {...props}>
<RoutesWidgetComp />
</RoutesProvider>
);

17
assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/hooks/useLoadRoutes.ts
View File

@@ -1,10 +1,7 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { OutCommand } from '@/hooks/Mapper/types';
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
import {
RoutesType,
useRouteProvider,
} from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
import { useRouteProvider } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
import { RoutesType } from '@/hooks/Mapper/mapRootProvider/types.ts';
function usePrevious<T>(value: T): T | undefined {
const ref = useRef<T>();
@@ -19,7 +16,7 @@ function usePrevious<T>(value: T): T | undefined {
export const useLoadRoutes = () => {
// TODO ??
const [loading, setLoading] = useState(false);
const { data: routesSettings } = useRouteProvider();
const { data: routesSettings, loadRoutesCommand } = useRouteProvider();
const {
outCommand,
@@ -32,13 +29,7 @@ export const useLoadRoutes = () => {
const loadRoutes = useCallback(
(systemId: string, routesSettings: RoutesType) => {
outCommand({
type: OutCommand.getRoutes,
data: {
system_id: systemId,
routes_settings: routesSettings,
},
});
loadRoutesCommand(systemId, routesSettings);
setLoading(true);
},
[outCommand],

17
assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts Normal file
View File

@@ -0,0 +1,17 @@
import { RoutesType } from '@/hooks/Mapper/mapRootProvider/types.ts';
import { RoutesList } from '@/hooks/Mapper/types/routes.ts';
export type LoadRoutesCommand = (systemId: string, routesSettings: RoutesType) => Promise<void>;
export type AddHubCommand = (systemId: string) => Promise<void>;
export type ToggleHubCommand = (systemId: string) => Promise<void>;
export type RoutesWidgetProps = {
data: RoutesType;
update: (d: RoutesType) => void;
hubs: string[];
routesList: RoutesList | undefined;
loadRoutesCommand: LoadRoutesCommand;
addHubCommand: AddHubCommand;
toggleHubCommand: ToggleHubCommand;
};

68
assets/js/hooks/Mapper/components/mapInterface/widgets/WRoutesPublic/WRoutesPublic.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { OutCommand } from '@/hooks/Mapper/types';
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
import { AddHubCommand, LoadRoutesCommand } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
import { useCallback } from 'react';
import { RoutesWidget } from '@/hooks/Mapper/components/mapInterface/widgets';
export const WRoutesPublic = () => {
const {
outCommand,
storedSettings: { settingsRoutes, settingsRoutesUpdate },
data: { hubs, routes },
} = useMapRootState();
const loadRoutesCommand: LoadRoutesCommand = useCallback(
async (systemId, routesSettings) => {
outCommand({
type: OutCommand.getRoutes,
data: {
system_id: systemId,
routes_settings: routesSettings,
},
});
},
[outCommand],
);
const addHubCommand: AddHubCommand = useCallback(
async systemId => {
if (hubs.includes(systemId)) {
return;
}
await outCommand({
type: OutCommand.addHub,
data: { system_id: systemId },
});
},
[hubs, outCommand],
);
const toggleHubCommand: AddHubCommand = useCallback(
async (systemId: string | undefined) => {
if (!systemId) {
return;
}
outCommand({
type: !hubs.includes(systemId) ? OutCommand.addHub : OutCommand.deleteHub,
data: {
system_id: systemId,
},
});
},
[hubs, outCommand],
);
return (
<RoutesWidget
data={settingsRoutes}
update={settingsRoutesUpdate}
hubs={hubs}
routesList={routes}
loadRoutesCommand={loadRoutesCommand}
addHubCommand={addHubCommand}
toggleHubCommand={toggleHubCommand}
/>
);
};

1
assets/js/hooks/Mapper/components/mapInterface/widgets/WRoutesPublic/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './WRoutesPublic';