fix: change structure tooltip to avoid paste confusion (#125)

* fix: change structure tooltip to avoid paste confusion

* fix: clarify use of evetime and use primereact calendar
This commit is contained in:
guarzo
2025-01-17 03:18:04 -05:00
committed by GitHub
parent da39a55fd0
commit 4bc76feefc
2 changed files with 34 additions and 15 deletions

View File

@@ -79,14 +79,14 @@ export const SystemStructures: React.FC = () => {
content: ( content: (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<InfoDrawer title={<b className="text-slate-50">How to add/update structures?</b>}> <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, In game, select one or more structures in D-Scan and then
<br /> <br />
then click on this widget and press Ctrl+V use the blue add structure data button
</InfoDrawer> </InfoDrawer>
<InfoDrawer title={<b className="text-slate-50">How to add a timer?</b>}> <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 In game, select a structure with an active timer, right click to copy, and then
<span className="text-blue-500"> blue </span> <span className="text-blue-500"> blue </span>
add timer button use the blue add structure data button
</InfoDrawer> </InfoDrawer>
</div> </div>
), ),

View File

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react';
import { Dialog } from 'primereact/dialog'; import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button'; import { Button } from 'primereact/button';
import { AutoComplete } from 'primereact/autocomplete'; import { AutoComplete } from 'primereact/autocomplete';
import { Calendar } from 'primereact/calendar';
import clsx from 'clsx'; import clsx from 'clsx';
import { StructureItem, StructureStatus, statusesRequiringTimer, formatToISO } from '../helpers'; import { StructureItem, StructureStatus, statusesRequiringTimer, formatToISO } from '../helpers';
@@ -53,7 +54,9 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
// If user typed more text but we have partial match in prevResults // If user typed more text but we have partial match in prevResults
if (newQuery.startsWith(prevQuery) && prevResults.length > 0) { if (newQuery.startsWith(prevQuery) && prevResults.length > 0) {
const filtered = prevResults.filter(item => item.label.toLowerCase().includes(newQuery.toLowerCase())); const filtered = prevResults.filter(item =>
item.label.toLowerCase().includes(newQuery.toLowerCase()),
);
setOwnerSuggestions(filtered); setOwnerSuggestions(filtered);
return; return;
} }
@@ -74,12 +77,18 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
[prevQuery, prevResults, outCommand], [prevQuery, prevResults, outCommand],
); );
const handleChange = (field: keyof StructureItem, val: string) => { const handleChange = (field: keyof StructureItem, val: string | Date) => {
// If we want to forbid changing structureTypeId or structureType from the dialog, do so here: // If we want to forbid changing structureTypeId or structureType from the dialog, do so here:
if (field === 'structureTypeId' || field === 'structureType') return; if (field === 'structureTypeId' || field === 'structureType') return;
setEditData(prev => { setEditData(prev => {
if (!prev) return null; if (!prev) return null;
// If this is the endTime (Date from Calendar), we store as ISO or string:
if (field === 'endTime' && val instanceof Date) {
return { ...prev, endTime: val.toISOString() };
}
return { ...prev, [field]: val }; return { ...prev, [field]: val };
}); });
}; };
@@ -87,7 +96,9 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
// when user picks a corp from auto-complete // when user picks a corp from auto-complete
const handleSelectOwner = (selected: { label: string; value: string }) => { const handleSelectOwner = (selected: { label: string; value: string }) => {
setOwnerInput(selected.label); setOwnerInput(selected.label);
setEditData(prev => (prev ? { ...prev, ownerName: selected.label, ownerId: selected.value } : null)); setEditData(prev =>
prev ? { ...prev, ownerName: selected.label, ownerId: selected.value } : null,
);
}; };
const handleStatusChange = (val: string) => { const handleStatusChange = (val: string) => {
@@ -107,7 +118,7 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
if (!statusesRequiringTimer.includes(editData.status)) { if (!statusesRequiringTimer.includes(editData.status)) {
editData.endTime = ''; editData.endTime = '';
} else if (editData.endTime) { } else if (editData.endTime) {
// convert to full ISO // convert to full ISO if not already
editData.endTime = formatToISO(editData.endTime); editData.endTime = formatToISO(editData.endTime);
} }
@@ -146,7 +157,11 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
<div className="flex flex-col gap-2 text-[14px]"> <div className="flex flex-col gap-2 text-[14px]">
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center"> <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
<span>Type:</span> <span>Type:</span>
<input readOnly className="p-inputtext p-component cursor-not-allowed" value={editData.structureType ?? ''} /> <input
readOnly
className="p-inputtext p-component cursor-not-allowed"
value={editData.structureType ?? ''}
/>
</label> </label>
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center"> <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
<span>Name:</span> <span>Name:</span>
@@ -186,17 +201,21 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
<option value="Reinforced">Reinforced</option> <option value="Reinforced">Reinforced</option>
</select> </select>
</label> </label>
{statusesRequiringTimer.includes(editData.status) && ( {statusesRequiringTimer.includes(editData.status) && (
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center"> <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
<span>End Time:</span> <span>Timer <br /> (Eve Time):</span>
<input <Calendar
type="datetime-local" value={editData.endTime ? new Date(editData.endTime) : undefined}
className="p-inputtext p-component" onChange={(e) => handleChange('endTime', e.value ?? '')}
value={editData.endTime ? editData.endTime.replace('Z', '').slice(0, 16) : ''} showTime
onChange={e => handleChange('endTime', e.target.value)} hourFormat="24"
dateFormat="yy-mm-dd"
showIcon
/> />
</label> </label>
)} )}
<label className="grid grid-cols-[100px_1fr] gap-2 items-start mt-2"> <label className="grid grid-cols-[100px_1fr] gap-2 items-start mt-2">
<span className="mt-1">Notes:</span> <span className="mt-1">Notes:</span>
<textarea <textarea