mirror of
https://github.com/wanderer-industries/wanderer
synced 2025-12-12 02:35:42 +00:00
feat: add structure widget with timer and associated api
This commit is contained in:
Gustav
@@ -4,9 +4,10 @@ import {
|
||||
RoutesWidget,
|
||||
SystemInfo,
|
||||
SystemSignatures,
|
||||
SystemStructures,
|
||||
} from '@/hooks/Mapper/components/mapInterface/widgets';
|
||||
|
||||
export const CURRENT_WINDOWS_VERSION = 7;
|
||||
export const CURRENT_WINDOWS_VERSION = 8;
|
||||
export const WINDOWS_LOCAL_STORE_KEY = 'windows:settings:v2';
|
||||
|
||||
export enum WidgetsIds {
|
||||
@@ -14,6 +15,7 @@ export enum WidgetsIds {
|
||||
signatures = 'signatures',
|
||||
local = 'local',
|
||||
routes = 'routes',
|
||||
structures = 'structures',
|
||||
}
|
||||
|
||||
export const STORED_VISIBLE_WIDGETS_DEFAULT = [
|
||||
@@ -52,6 +54,13 @@ export const DEFAULT_WIDGETS: WindowProps[] = [
|
||||
zIndex: 0,
|
||||
content: () => <RoutesWidget />,
|
||||
},
|
||||
{
|
||||
id: WidgetsIds.structures,
|
||||
position: { x: 10, y: 730 },
|
||||
size: { width: 510, height: 200 },
|
||||
zIndex: 0,
|
||||
content: () => <SystemStructures />,
|
||||
},
|
||||
];
|
||||
|
||||
type WidgetsCheckboxesType = {
|
||||
@@ -76,4 +85,8 @@ export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [
|
||||
id: WidgetsIds.routes,
|
||||
label: 'Routes',
|
||||
},
|
||||
{
|
||||
id: WidgetsIds.structures,
|
||||
label: 'Structures',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
import React, { useCallback, ClipboardEvent, useRef } from 'react';
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
|
||||
import {
|
||||
LayoutEventBlocker,
|
||||
WdImgButton,
|
||||
TooltipPosition,
|
||||
InfoDrawer,
|
||||
SystemView,
|
||||
} from '@/hooks/Mapper/components/ui-kit';
|
||||
import { PrimeIcons } from 'primereact/api';
|
||||
import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
|
||||
|
||||
import { SystemStructuresContent } from './SystemStructuresContent/SystemStructuresContent';
|
||||
import { useSystemStructures } from './hooks/useSystemStructures';
|
||||
import { processSnippetText } from './helpers';
|
||||
|
||||
export const SystemStructures: React.FC = () => {
|
||||
const {
|
||||
data: { selectedSystems },
|
||||
outCommand,
|
||||
} = useMapRootState();
|
||||
const [systemId] = selectedSystems;
|
||||
const isNotSelectedSystem = selectedSystems.length !== 1;
|
||||
|
||||
const { structures, handleUpdateStructures } = useSystemStructures({ systemId, outCommand });
|
||||
|
||||
const labelRef = useRef<HTMLDivElement>(null);
|
||||
const isCompact = useMaxWidth(labelRef, 260);
|
||||
|
||||
const processClipboard = useCallback(
|
||||
(text: string) => {
|
||||
const updated = processSnippetText(text, structures);
|
||||
handleUpdateStructures(updated);
|
||||
},
|
||||
[structures, handleUpdateStructures],
|
||||
);
|
||||
|
||||
const handlePaste = useCallback(
|
||||
(e: ClipboardEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
processClipboard(e.clipboardData.getData('text'));
|
||||
},
|
||||
[processClipboard],
|
||||
);
|
||||
|
||||
const handlePasteTimer = useCallback(async () => {
|
||||
try {
|
||||
const text = await navigator.clipboard.readText();
|
||||
processClipboard(text);
|
||||
} catch (err) {
|
||||
console.error('Clipboard read error:', err);
|
||||
}
|
||||
}, [processClipboard]);
|
||||
|
||||
function renderWidgetLabel() {
|
||||
return (
|
||||
<div className="flex justify-between items-center text-xs w-full h-full" ref={labelRef}>
|
||||
<div className="flex justify-between items-center gap-1">
|
||||
{!isCompact && (
|
||||
<div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
|
||||
Structures
|
||||
{!isNotSelectedSystem && ' in'}
|
||||
</div>
|
||||
)}
|
||||
{!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
|
||||
</div>
|
||||
|
||||
<LayoutEventBlocker className="flex gap-2.5">
|
||||
<WdImgButton
|
||||
className={`${PrimeIcons.CLOCK} text-sky-400 hover:text-sky-200 transition duration-300`}
|
||||
onClick={handlePasteTimer}
|
||||
/>
|
||||
<WdImgButton
|
||||
className={PrimeIcons.QUESTION_CIRCLE}
|
||||
tooltip={{
|
||||
position: TooltipPosition.left,
|
||||
// @ts-ignore
|
||||
content: (
|
||||
<div className="flex flex-col gap-1">
|
||||
<InfoDrawer title={<b className="text-slate-50">How to add/update structures?</b>}>
|
||||
In game, select one or more structures in D-Scan and press Ctrl+C,
|
||||
<br />
|
||||
then click on this widget and press Ctrl+V
|
||||
</InfoDrawer>
|
||||
<InfoDrawer title={<b className="text-slate-50">How to add a timer?</b>}>
|
||||
In game, select a structure with an active timer, right click to copy, and then use the
|
||||
<span className="text-blue-500"> blue </span>
|
||||
add timer button
|
||||
</InfoDrawer>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</LayoutEventBlocker>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div tabIndex={0} onPaste={handlePaste} className="h-full flex flex-col" style={{ outline: 'none' }}>
|
||||
<Widget label={renderWidgetLabel()}>
|
||||
{isNotSelectedSystem ? (
|
||||
<div className="flex-1 flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
|
||||
System is not selected
|
||||
</div>
|
||||
) : (
|
||||
<SystemStructuresContent structures={structures} onUpdateStructures={handleUpdateStructures} />
|
||||
)}
|
||||
</Widget>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
.TableRowCompact {
|
||||
height: 8px;
|
||||
max-height: 8px;
|
||||
font-size: 12px !important;
|
||||
line-height: 8px;
|
||||
}
|
||||
|
||||
.Table {
|
||||
font-size: 12px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
|
||||
.Tooltip {
|
||||
white-space: pre-line; // or pre-wrap
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import { DataTable, DataTableRowClickEvent } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { PrimeIcons } from 'primereact/api';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { SystemStructuresDialog } from '../SystemStructuresDialog/SystemStructuresDialog';
|
||||
import { StructureItem } from '../helpers/structureTypes';
|
||||
import { useHotkey } from '@/hooks/Mapper/hooks';
|
||||
import classes from './SystemStructuresContent.module.scss';
|
||||
import { renderOwnerCell, renderTypeCell, renderTimerCell } from '../renders/cellRenders';
|
||||
|
||||
interface SystemStructuresContentProps {
|
||||
structures: StructureItem[];
|
||||
onUpdateStructures: (newList: StructureItem[]) => void;
|
||||
}
|
||||
|
||||
export const SystemStructuresContent: React.FC<SystemStructuresContentProps> = ({ structures, onUpdateStructures }) => {
|
||||
const [selectedRow, setSelectedRow] = useState<StructureItem | null>(null);
|
||||
const [editingItem, setEditingItem] = useState<StructureItem | null>(null);
|
||||
const [showEditDialog, setShowEditDialog] = useState(false);
|
||||
|
||||
const handleRowClick = (e: DataTableRowClickEvent) => {
|
||||
const row = e.data as StructureItem;
|
||||
setSelectedRow(prev => (prev?.id === row.id ? null : row));
|
||||
};
|
||||
|
||||
const handleRowDoubleClick = (e: DataTableRowClickEvent) => {
|
||||
setEditingItem(e.data as StructureItem);
|
||||
setShowEditDialog(true);
|
||||
};
|
||||
|
||||
// Press Delete => remove selected row
|
||||
const handleDeleteSelected = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (!selectedRow) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const newList = structures.filter(s => s.id !== selectedRow.id);
|
||||
onUpdateStructures(newList);
|
||||
setSelectedRow(null);
|
||||
},
|
||||
[selectedRow, structures, onUpdateStructures],
|
||||
);
|
||||
|
||||
useHotkey(false, ['Delete', 'Backspace'], handleDeleteSelected);
|
||||
|
||||
const visibleStructures = useMemo(() => {
|
||||
return structures;
|
||||
}, [structures]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 p-2 text-xs text-stone-200 h-full">
|
||||
{visibleStructures.length === 0 ? (
|
||||
<div className="flex-1 flex justify-center items-center text-stone-400/80 text-sm">No structures</div>
|
||||
) : (
|
||||
<div className="flex-1">
|
||||
<DataTable
|
||||
value={visibleStructures}
|
||||
dataKey="id"
|
||||
className={clsx(classes.Table, 'w-full select-none h-full')}
|
||||
size="small"
|
||||
sortMode="single"
|
||||
rowHover
|
||||
onRowClick={handleRowClick}
|
||||
onRowDoubleClick={handleRowDoubleClick}
|
||||
rowClassName={rowData => {
|
||||
const isSelected = selectedRow?.id === rowData.id;
|
||||
return clsx(
|
||||
classes.TableRowCompact,
|
||||
'transition-colors duration-200 cursor-pointer',
|
||||
isSelected ? 'bg-amber-500/50 hover:bg-amber-500/70' : 'hover:bg-purple-400/20',
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Column header="Type" body={renderTypeCell} style={{ width: '160px' }} />
|
||||
<Column field="name" header="Name" style={{ width: '120px' }} />
|
||||
<Column header="Owner" body={renderOwnerCell} style={{ width: '120px' }} />
|
||||
<Column field="status" header="Status" style={{ width: '100px' }} />
|
||||
<Column header="Timer" body={renderTimerCell} style={{ width: '110px' }} />
|
||||
<Column
|
||||
body={(rowData: StructureItem) => (
|
||||
<i
|
||||
className={clsx(PrimeIcons.PENCIL, 'text-[14px] cursor-pointer')}
|
||||
title="Edit"
|
||||
onClick={() => {
|
||||
setEditingItem(rowData);
|
||||
setShowEditDialog(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
style={{ width: '40px', textAlign: 'center' }}
|
||||
/>
|
||||
</DataTable>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showEditDialog && editingItem && (
|
||||
<SystemStructuresDialog
|
||||
visible={showEditDialog}
|
||||
structure={editingItem}
|
||||
onClose={() => setShowEditDialog(false)}
|
||||
onSave={(updatedItem: StructureItem) => {
|
||||
const newList = structures.map(s => (s.id === updatedItem.id ? updatedItem : s));
|
||||
onUpdateStructures(newList);
|
||||
setShowEditDialog(false);
|
||||
}}
|
||||
onDelete={(deleteId: string) => {
|
||||
const newList = structures.filter(s => s.id !== deleteId);
|
||||
onUpdateStructures(newList);
|
||||
setShowEditDialog(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
|
||||
.systemStructureDialog {
|
||||
|
||||
.p-dialog-content {
|
||||
background-color: var(--surface-800) !important;
|
||||
}
|
||||
|
||||
.p-dialog-header {
|
||||
background-color: var(--surface-700);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.p-dialog-header-icon,
|
||||
.p-dialog-header-title {
|
||||
color: var(--gray-200);
|
||||
}
|
||||
|
||||
.p-inputtext {
|
||||
background-color: #2a2a2a !important;
|
||||
color: #ddd !important;
|
||||
font-size: 12px !important;
|
||||
padding: 0.25rem 0.5rem !important;
|
||||
}
|
||||
|
||||
.p-dialog-footer {
|
||||
.p-button {
|
||||
font-size: 12px !important;
|
||||
padding: 0.3rem 0.75rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { Button } from 'primereact/button';
|
||||
import { AutoComplete } from 'primereact/autocomplete';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { StructureItem, StructureStatus, statusesRequiringTimer, formatToISO } from '../helpers';
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { OutCommand } from '@/hooks/Mapper/types';
|
||||
|
||||
interface StructuresEditDialogProps {
|
||||
visible: boolean;
|
||||
structure?: StructureItem;
|
||||
onClose: () => void;
|
||||
onSave: (updatedItem: StructureItem) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
|
||||
visible,
|
||||
structure,
|
||||
onClose,
|
||||
onSave,
|
||||
onDelete,
|
||||
}) => {
|
||||
const [editData, setEditData] = useState<StructureItem | null>(null);
|
||||
const [ownerInput, setOwnerInput] = useState('');
|
||||
const [ownerSuggestions, setOwnerSuggestions] = useState<{ label: string; value: string }[]>([]);
|
||||
|
||||
const { outCommand } = useMapRootState();
|
||||
|
||||
const [prevQuery, setPrevQuery] = useState('');
|
||||
const [prevResults, setPrevResults] = useState<{ label: string; value: string }[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (structure) {
|
||||
setEditData(structure);
|
||||
setOwnerInput(structure.ownerName ?? '');
|
||||
} else {
|
||||
setEditData(null);
|
||||
setOwnerInput('');
|
||||
}
|
||||
}, [structure]);
|
||||
|
||||
// Searching corporation owners via auto-complete
|
||||
const searchOwners = useCallback(
|
||||
async (e: { query: string }) => {
|
||||
const newQuery = e.query.trim();
|
||||
if (!newQuery) {
|
||||
setOwnerSuggestions([]);
|
||||
return;
|
||||
}
|
||||
|
||||
// If user typed more text but we have partial match in prevResults
|
||||
if (newQuery.startsWith(prevQuery) && prevResults.length > 0) {
|
||||
const filtered = prevResults.filter(item => item.label.toLowerCase().includes(newQuery.toLowerCase()));
|
||||
setOwnerSuggestions(filtered);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { results = [] } = await outCommand({
|
||||
type: OutCommand.getCorporationNames,
|
||||
data: { search: newQuery },
|
||||
});
|
||||
setOwnerSuggestions(results);
|
||||
setPrevQuery(newQuery);
|
||||
setPrevResults(results);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch owners:', err);
|
||||
setOwnerSuggestions([]);
|
||||
}
|
||||
},
|
||||
[prevQuery, prevResults, outCommand],
|
||||
);
|
||||
|
||||
const handleChange = (field: keyof StructureItem, val: string) => {
|
||||
// If we want to forbid changing structureTypeId or structureType from the dialog, do so here:
|
||||
if (field === 'structureTypeId' || field === 'structureType') return;
|
||||
|
||||
setEditData(prev => {
|
||||
if (!prev) return null;
|
||||
return { ...prev, [field]: val };
|
||||
});
|
||||
};
|
||||
|
||||
// when user picks a corp from auto-complete
|
||||
const handleSelectOwner = (selected: { label: string; value: string }) => {
|
||||
setOwnerInput(selected.label);
|
||||
setEditData(prev => (prev ? { ...prev, ownerName: selected.label, ownerId: selected.value } : null));
|
||||
};
|
||||
|
||||
const handleStatusChange = (val: string) => {
|
||||
setEditData(prev => {
|
||||
if (!prev) return null;
|
||||
const newStatus = val as StructureStatus;
|
||||
// If new status doesn't require a timer, we clear out endTime
|
||||
const newEndTime = statusesRequiringTimer.includes(newStatus) ? prev.endTime : '';
|
||||
return { ...prev, status: newStatus, endTime: newEndTime };
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveClick = async () => {
|
||||
if (!editData) return;
|
||||
|
||||
// If status doesn't require a timer, clear endTime
|
||||
if (!statusesRequiringTimer.includes(editData.status)) {
|
||||
editData.endTime = '';
|
||||
} else if (editData.endTime) {
|
||||
// convert to full ISO
|
||||
editData.endTime = formatToISO(editData.endTime);
|
||||
}
|
||||
|
||||
// fetch corporation ticker if we have an ownerId
|
||||
if (editData.ownerId) {
|
||||
try {
|
||||
const { ticker } = await outCommand({
|
||||
type: OutCommand.getCorporationTicker,
|
||||
data: { corp_id: editData.ownerId },
|
||||
});
|
||||
editData.ownerTicker = ticker ?? '';
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch ticker:', err);
|
||||
editData.ownerTicker = '';
|
||||
}
|
||||
}
|
||||
|
||||
onSave(editData);
|
||||
};
|
||||
|
||||
const handleDeleteClick = () => {
|
||||
if (!editData) return;
|
||||
onDelete(editData.id);
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (!editData) return null;
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
visible={visible}
|
||||
onHide={onClose}
|
||||
header={`Edit Structure - ${editData.name ?? ''}`}
|
||||
className={clsx('myStructuresDialog', 'text-stone-200 w-full max-w-md')}
|
||||
>
|
||||
<div className="flex flex-col gap-2 text-[14px]">
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
|
||||
<span>Type:</span>
|
||||
<input readOnly className="p-inputtext p-component cursor-not-allowed" value={editData.structureType ?? ''} />
|
||||
</label>
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
|
||||
<span>Name:</span>
|
||||
<input
|
||||
className="p-inputtext p-component"
|
||||
value={editData.name ?? ''}
|
||||
onChange={e => handleChange('name', e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
|
||||
<span>Owner:</span>
|
||||
<AutoComplete
|
||||
id="owner"
|
||||
value={ownerInput}
|
||||
suggestions={ownerSuggestions}
|
||||
completeMethod={searchOwners}
|
||||
minLength={3}
|
||||
delay={400}
|
||||
field="label"
|
||||
placeholder="Corporation name..."
|
||||
onChange={e => setOwnerInput(e.value)}
|
||||
onSelect={e => handleSelectOwner(e.value)}
|
||||
/>
|
||||
</label>
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
|
||||
<span>Status:</span>
|
||||
<select
|
||||
className="p-inputtext p-component"
|
||||
value={editData.status}
|
||||
onChange={e => handleStatusChange(e.target.value)}
|
||||
>
|
||||
<option value="Powered">Powered</option>
|
||||
<option value="Anchoring">Anchoring</option>
|
||||
<option value="Unanchoring">Unanchoring</option>
|
||||
<option value="Low Power">Low Power</option>
|
||||
<option value="Abandoned">Abandoned</option>
|
||||
<option value="Reinforced">Reinforced</option>
|
||||
</select>
|
||||
</label>
|
||||
{statusesRequiringTimer.includes(editData.status) && (
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
|
||||
<span>End Time:</span>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="p-inputtext p-component"
|
||||
value={editData.endTime ? editData.endTime.replace('Z', '').slice(0, 16) : ''}
|
||||
onChange={e => handleChange('endTime', e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
<label className="grid grid-cols-[100px_1fr] gap-2 items-start mt-2">
|
||||
<span className="mt-1">Notes:</span>
|
||||
<textarea
|
||||
className="p-inputtext p-component resize-none h-24"
|
||||
value={editData.notes ?? ''}
|
||||
onChange={e => handleChange('notes', e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end items-center gap-2 mt-4">
|
||||
<Button label="Delete" severity="danger" className="p-button-sm" onClick={handleDeleteClick} />
|
||||
<Button label="Save" className="p-button-sm" onClick={handleSaveClick} />
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './parserHelper';
|
||||
export * from './pasteParser';
|
||||
export * from './structureTypes';
|
||||
export * from './structureUtils';
|
||||
@@ -0,0 +1,92 @@
|
||||
import { StructureStatus, StructureItem, STRUCTURE_TYPE_MAP } from './structureTypes';
|
||||
import { formatToISO } from './structureUtils';
|
||||
|
||||
// Up to you if you'd like to keep a separate constant here or not
|
||||
export const statusesRequiringTimer: StructureStatus[] = ['Anchoring', 'Reinforced'];
|
||||
|
||||
/**
|
||||
* parseFormatOneLine(line):
|
||||
* - Splits by tabs
|
||||
* - First col => structureTypeId
|
||||
* - Second col => rawName
|
||||
* - Third col => structureTypeName
|
||||
*/
|
||||
export function parseFormatOneLine(line: string): StructureItem | null {
|
||||
const columns = line
|
||||
.split('\t')
|
||||
.map(c => c.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
// Expecting e.g. "35832 J214811 - SomeName Astrahus"
|
||||
if (columns.length < 3) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [rawTypeId, rawName, rawTypeName] = columns;
|
||||
|
||||
if (columns.length != 4) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!STRUCTURE_TYPE_MAP[rawTypeId]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (rawTypeName != STRUCTURE_TYPE_MAP[rawTypeId]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const name = rawName.replace(/^J\d{6}\s*-\s*/, '').trim();
|
||||
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
structureTypeId: rawTypeId,
|
||||
structureType: rawTypeName,
|
||||
name,
|
||||
ownerName: '',
|
||||
notes: '',
|
||||
status: 'Powered', // Default
|
||||
endTime: '', // No timer by default
|
||||
};
|
||||
}
|
||||
|
||||
export function matchesThreeLineSnippet(lines: string[]): boolean {
|
||||
if (lines.length < 3) return false;
|
||||
return /until\s+\d{4}\.\d{2}\.\d{2}/i.test(lines[2]);
|
||||
}
|
||||
|
||||
/**
|
||||
* parseThreeLineSnippet:
|
||||
* - Example lines:
|
||||
* line1: "J214811 - Folgers"
|
||||
* line2: "1,475 km"
|
||||
* line3: "Reinforced until 2025.01.13 23:51"
|
||||
*/
|
||||
export function parseThreeLineSnippet(lines: string[]): StructureItem {
|
||||
const [line1, , line3] = lines;
|
||||
|
||||
let status: StructureStatus = 'Reinforced';
|
||||
let endTime: string | undefined;
|
||||
|
||||
// e.g. "Reinforced until 2025.01.13 23:27"
|
||||
const match = line3.match(/^(?<stat>\w+)\s+until\s+(?<dateTime>[\d.]+\s+[\d:]+)/i);
|
||||
|
||||
if (match?.groups?.stat) {
|
||||
const candidateStatus = match.groups.stat as StructureStatus;
|
||||
if (statusesRequiringTimer.includes(candidateStatus)) {
|
||||
status = candidateStatus;
|
||||
}
|
||||
}
|
||||
if (match?.groups?.dateTime) {
|
||||
let dt = match.groups.dateTime.trim().replace(/\./g, '-'); // "2025-01-13 23:27"
|
||||
dt = dt.replace(' ', 'T'); // "2025-01-13T23:27"
|
||||
endTime = formatToISO(dt); // => "2025-01-13T23:27:00Z"
|
||||
}
|
||||
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
name: line1.replace(/^J\d{6}\s*-\s*/, '').trim(),
|
||||
status,
|
||||
endTime,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { StructureItem } from './structureTypes';
|
||||
import { parseThreeLineSnippet, parseFormatOneLine, matchesThreeLineSnippet } from './parserHelper';
|
||||
|
||||
export function processSnippetText(rawText: string, existingStructures: StructureItem[]): StructureItem[] {
|
||||
if (!rawText) {
|
||||
return existingStructures.slice();
|
||||
}
|
||||
|
||||
const lines = rawText
|
||||
.split(/\r?\n/)
|
||||
.map(line => line.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
if (lines.length === 3 && matchesThreeLineSnippet(lines)) {
|
||||
return applyThreeLineSnippet(lines, existingStructures);
|
||||
} else {
|
||||
return applySingleLineParse(lines, existingStructures);
|
||||
}
|
||||
}
|
||||
|
||||
function applyThreeLineSnippet(snippetLines: string[], existingStructures: StructureItem[]): StructureItem[] {
|
||||
const updatedList = [...existingStructures];
|
||||
const snippetItem = parseThreeLineSnippet(snippetLines);
|
||||
|
||||
const existingIndex = updatedList.findIndex(s => s.name.trim() === snippetItem.name.trim());
|
||||
|
||||
if (existingIndex !== -1) {
|
||||
const existing = updatedList[existingIndex];
|
||||
updatedList[existingIndex] = {
|
||||
...existing,
|
||||
status: snippetItem.status,
|
||||
endTime: snippetItem.endTime,
|
||||
};
|
||||
}
|
||||
|
||||
return updatedList;
|
||||
}
|
||||
|
||||
function applySingleLineParse(lines: string[], existingStructures: StructureItem[]): StructureItem[] {
|
||||
const updatedList = [...existingStructures];
|
||||
const newItems: StructureItem[] = [];
|
||||
|
||||
for (const line of lines) {
|
||||
const item = parseFormatOneLine(line);
|
||||
if (!item) continue;
|
||||
|
||||
const isDuplicate = updatedList.some(
|
||||
s => s.structureTypeId === item.structureTypeId && s.name.trim() === item.name.trim(),
|
||||
);
|
||||
if (!isDuplicate) {
|
||||
newItems.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
return [...updatedList, ...newItems];
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
export type StructureStatus = 'Powered' | 'Anchoring' | 'Unanchoring' | 'Low Power' | 'Abandoned' | 'Reinforced';
|
||||
|
||||
export interface StructureItem {
|
||||
id: string;
|
||||
systemId?: string;
|
||||
structureTypeId?: string;
|
||||
structureType?: string;
|
||||
name: string;
|
||||
ownerName?: string;
|
||||
ownerId?: string;
|
||||
ownerTicker?: string;
|
||||
notes?: string;
|
||||
status: StructureStatus;
|
||||
endTime?: string;
|
||||
}
|
||||
|
||||
export const STRUCTURE_TYPE_MAP: Record<string, string> = {
|
||||
'35825': 'Raitaru',
|
||||
'35826': 'Azbel',
|
||||
'35827': 'Sotiyo',
|
||||
'35832': 'Astrahus',
|
||||
'35833': 'Fortizar',
|
||||
'35834': 'Keepstar',
|
||||
'35835': 'Athanor',
|
||||
'35836': 'Tatara',
|
||||
'40340': 'Upwell Palatine Keepstar',
|
||||
'47512': "'Moreau' Fortizar",
|
||||
'47513': "'Draccous' Fortizar",
|
||||
'47514': "'Horizon' Fortizar",
|
||||
'47515': "'Marginis' Fortizar",
|
||||
'47516': "'Prometheus' Fortizar",
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
import { StructureItem } from './structureTypes';
|
||||
|
||||
export function getActualStructures(oldList: StructureItem[], newList: StructureItem[]) {
|
||||
const oldMap = new Map(oldList.map(s => [s.id, s]));
|
||||
const newMap = new Map(newList.map(s => [s.id, s]));
|
||||
|
||||
const added: StructureItem[] = [];
|
||||
const updated: StructureItem[] = [];
|
||||
const removed: StructureItem[] = [];
|
||||
|
||||
for (const newItem of newList) {
|
||||
const oldItem = oldMap.get(newItem.id);
|
||||
if (!oldItem) {
|
||||
added.push(newItem);
|
||||
} else if (JSON.stringify(oldItem) !== JSON.stringify(newItem)) {
|
||||
updated.push(newItem);
|
||||
}
|
||||
}
|
||||
|
||||
for (const oldItem of oldList) {
|
||||
if (!newMap.has(oldItem.id)) {
|
||||
removed.push(oldItem);
|
||||
}
|
||||
}
|
||||
|
||||
return { added, updated, removed };
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export function mapServerStructure(serverData: any): StructureItem {
|
||||
const { owner_id, owner_ticker, structure_type_id, structure_type, owner_name, end_time, system_id, ...rest } =
|
||||
serverData;
|
||||
|
||||
return {
|
||||
...rest,
|
||||
ownerId: owner_id,
|
||||
ownerTicker: owner_ticker,
|
||||
ownerName: owner_name,
|
||||
structureType: structure_type,
|
||||
structureTypeId: structure_type_id,
|
||||
endTime: end_time ?? '',
|
||||
systemId: system_id,
|
||||
};
|
||||
}
|
||||
|
||||
export function formatToISO(datetimeLocal: string): string {
|
||||
if (!datetimeLocal) return '';
|
||||
|
||||
// If missing seconds, add :00
|
||||
let iso = datetimeLocal;
|
||||
if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(iso)) {
|
||||
iso += ':00';
|
||||
}
|
||||
// Ensure trailing 'Z'
|
||||
if (!iso.endsWith('Z')) {
|
||||
iso += 'Z';
|
||||
}
|
||||
return iso;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
|
||||
import { mapServerStructure, getActualStructures, StructureItem, statusesRequiringTimer } from '../helpers';
|
||||
|
||||
interface UseSystemStructuresProps {
|
||||
systemId: string | undefined;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
outCommand: (payload: any) => Promise<any>;
|
||||
}
|
||||
|
||||
export function useSystemStructures({ systemId, outCommand }: UseSystemStructuresProps) {
|
||||
const [structures, setStructures] = useState<StructureItem[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchStructures = useCallback(async () => {
|
||||
if (!systemId) {
|
||||
setStructures([]);
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const { structures: fetched = [] } = await outCommand({
|
||||
type: OutCommand.getStructures,
|
||||
data: { system_id: systemId },
|
||||
});
|
||||
|
||||
const mappedStructures = fetched.map(mapServerStructure);
|
||||
setStructures(mappedStructures);
|
||||
} catch (err) {
|
||||
console.error('Failed to get structures:', err);
|
||||
setError('Error fetching structures');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [systemId, outCommand]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStructures();
|
||||
}, [fetchStructures]);
|
||||
|
||||
const sanitizeEndTimers = useCallback((item: StructureItem) => {
|
||||
if (!statusesRequiringTimer.includes(item.status)) {
|
||||
item.endTime = '';
|
||||
}
|
||||
return item;
|
||||
}, []);
|
||||
|
||||
const sanitizeIds = useCallback((item: StructureItem) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { id, ...rest } = item;
|
||||
return rest;
|
||||
}, []);
|
||||
|
||||
const handleUpdateStructures = useCallback(
|
||||
async (newList: StructureItem[]) => {
|
||||
const { added, updated, removed } = getActualStructures(structures, newList);
|
||||
|
||||
const sanitizedAdded = added.map(sanitizeIds);
|
||||
const sanitizedUpdated = updated.map(sanitizeEndTimers);
|
||||
|
||||
try {
|
||||
const { structures: updatedStructures = [] } = await outCommand({
|
||||
type: OutCommand.updateStructures,
|
||||
data: {
|
||||
system_id: systemId,
|
||||
added: sanitizedAdded,
|
||||
updated: sanitizedUpdated,
|
||||
removed,
|
||||
},
|
||||
});
|
||||
|
||||
const finalStructures = updatedStructures.map(mapServerStructure);
|
||||
setStructures(finalStructures);
|
||||
} catch (err) {
|
||||
console.error('Failed to update structures:', err);
|
||||
}
|
||||
},
|
||||
[structures, systemId, outCommand, sanitizeIds, sanitizeEndTimers],
|
||||
);
|
||||
|
||||
return { structures, handleUpdateStructures, isLoading, error };
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './SystemStructures';
|
||||
@@ -0,0 +1,50 @@
|
||||
// File: TimerCell.tsx
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { StructureStatus } from '../helpers/structureTypes';
|
||||
import { statusesRequiringTimer } from '../helpers';
|
||||
|
||||
interface TimerCellProps {
|
||||
endTime?: string;
|
||||
status: StructureStatus;
|
||||
}
|
||||
|
||||
function TimerCellImpl({ endTime, status }: TimerCellProps) {
|
||||
const [now, setNow] = useState(() => Date.now());
|
||||
|
||||
useEffect(() => {
|
||||
if (!endTime || !statusesRequiringTimer.includes(status)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
setNow(Date.now());
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [endTime, status]);
|
||||
|
||||
if (!statusesRequiringTimer.includes(status)) {
|
||||
return <span className="text-stone-400"></span>;
|
||||
}
|
||||
if (!endTime) {
|
||||
return <span className="text-sky-400">Set Timer</span>;
|
||||
}
|
||||
|
||||
const msLeft = new Date(endTime).getTime() - now;
|
||||
if (msLeft <= 0) {
|
||||
return <span className="text-red-500">00:00:00</span>;
|
||||
}
|
||||
|
||||
const sec = Math.floor(msLeft / 1000) % 60;
|
||||
const min = Math.floor(msLeft / (1000 * 60)) % 60;
|
||||
const hr = Math.floor(msLeft / (1000 * 3600));
|
||||
|
||||
const pad = (n: number) => n.toString().padStart(2, '0');
|
||||
return (
|
||||
<span className="text-sky-400">
|
||||
{pad(hr)}:{pad(min)}:{pad(sec)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export const TimerCell = React.memo(TimerCellImpl);
|
||||
@@ -0,0 +1,36 @@
|
||||
import { StructureItem } from '../helpers';
|
||||
import { TimerCell } from './TimerCell';
|
||||
|
||||
export function renderTimerCell(row: StructureItem) {
|
||||
return <TimerCell endTime={row.endTime} status={row.status} />;
|
||||
}
|
||||
|
||||
export function renderOwnerCell(row: StructureItem) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{row.ownerId && (
|
||||
<img
|
||||
src={`https://images.evetech.net/corporations/${row.ownerId}/logo?size=32`}
|
||||
alt="corp icon"
|
||||
className="w-5 h-5 object-contain"
|
||||
/>
|
||||
)}
|
||||
<span>{row.ownerTicker || row.ownerName}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function renderTypeCell(row: StructureItem) {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
{row.structureTypeId && (
|
||||
<img
|
||||
src={`https://images.evetech.net/types/${row.structureTypeId}/icon`}
|
||||
alt="icon"
|
||||
className="w-5 h-5 object-contain"
|
||||
/>
|
||||
)}
|
||||
<span>{row.structureType ?? ''}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,3 +2,4 @@ export * from './LocalCharacters';
|
||||
export * from './SystemInfo';
|
||||
export * from './RoutesWidget';
|
||||
export * from './SystemSignatures';
|
||||
export * from './SystemStructures';
|
||||
|
||||
Reference in New Issue
Block a user