dave/eve-signaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Fix: Background and import issues

Browse Source 
- Ensure consistent background color across all pages.
- Address import errors by using named imports.
- Consider fullscreen map for better visual integration.
This commit is contained in:
gpt-engineer-app[bot]
2025-06-15 09:46:37 +00:00
parent c6079c3543
commit 7e6d7df06e
5 changed files with 63 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CleanModeToggle.tsx
View File

@@ -7,7 +7,7 @@ interface CleanModeToggleProps {
onToggle: (enabled: boolean) => void; onToggle: (enabled: boolean) => void;
} }
const CleanModeToggle = ({ cleanMode, onToggle }: CleanModeToggleProps) => { export const CleanModeToggle = ({ cleanMode, onToggle }: CleanModeToggleProps) => {
return ( return (
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Switch <Switch

2
src/components/Header.tsx
View File

@@ -18,7 +18,7 @@ interface HeaderProps {
}>; }>;
} }
const Header = ({ title, breadcrumbs = [] }: HeaderProps) => { export const Header = ({ title, breadcrumbs = [] }: HeaderProps) => {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (

113
src/components/RegionMap.tsx
View File

@@ -1,11 +1,10 @@
import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react'; import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { MapNode } from './MapNode'; import { MapNode } from './MapNode';
import { Connection } from './Connection'; import { Connection } from './Connection';
import { getSecurityColor } from '../utils/securityColors'; import { getSecurityColor } from '../utils/securityColors';
import { useRegionData } from '../hooks/useRegionData'; import { useRegionData } from '../hooks/useRegionData';
import Header from './Header'; import { Header } from './Header';
interface Position { interface Position {
x: number; x: number;
@@ -25,7 +24,7 @@ interface RegionMapProps {
isCompact?: boolean; isCompact?: boolean;
} }
const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProps) => { export const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProps) => {
const navigate = useNavigate(); const navigate = useNavigate();
const [viewBox, setViewBox] = useState({ x: 0, y: 0, width: 1200, height: 800 }); const [viewBox, setViewBox] = useState({ x: 0, y: 0, width: 1200, height: 800 });
const [isPanning, setIsPanning] = useState(false); const [isPanning, setIsPanning] = useState(false);
@@ -33,6 +32,8 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
const [nodePositions, setNodePositions] = useState<Record<string, Position>>({}); const [nodePositions, setNodePositions] = useState<Record<string, Position>>({});
const svgRef = useRef<SVGSVGElement>(null); const svgRef = useRef<SVGSVGElement>(null);
console.log('RegionMap render:', { regionName, focusSystem, isCompact });
const { data: systems, isLoading, error } = useRegionData(regionName); const { data: systems, isLoading, error } = useRegionData(regionName);
// Process connections once when systems or nodePositions change // Process connections once when systems or nodePositions change
@@ -164,7 +165,7 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
if (isLoading) { if (isLoading) {
return ( return (
<div className={`${isCompact ? 'h-full' : 'min-h-screen'} bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center`}> <div className={`${isCompact ? 'h-full' : 'h-screen'} bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center`}>
<div className="text-white text-xl">Loading {regionName} data...</div> <div className="text-white text-xl">Loading {regionName} data...</div>
</div> </div>
); );
@@ -172,7 +173,7 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
if (error) { if (error) {
return ( return (
<div className={`${isCompact ? 'h-full' : 'min-h-screen'} bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center`}> <div className={`${isCompact ? 'h-full' : 'h-screen'} bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center`}>
<div className="text-center"> <div className="text-center">
<h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1> <h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1>
<p className="text-red-400 mb-6">Failed to load data for {regionName}</p> <p className="text-red-400 mb-6">Failed to load data for {regionName}</p>
@@ -184,7 +185,7 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
// Compact mode (for system page) // Compact mode (for system page)
if (isCompact) { if (isCompact) {
return ( return (
<div className="w-full h-full bg-black/20 backdrop-blur-sm"> <div className="w-full h-full bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
<svg <svg
ref={svgRef} ref={svgRef}
width="100%" width="100%"
@@ -259,12 +260,10 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
); );
} }
// Full page mode (original region page) // Full page mode (original region page) - Make fullscreen
return ( return (
<div className="w-full h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden relative"> <div className="w-full h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-slate-900/40 to-black"></div> <div className="h-full flex flex-col">
<div className="relative z-10 h-full flex flex-col">
<Header <Header
title={regionName} title={regionName}
breadcrumbs={[ breadcrumbs={[
@@ -273,55 +272,53 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
]} ]}
/> />
<div className="flex-1 overflow-hidden p-4"> <div className="flex-1 overflow-hidden">
<div className="w-full h-full border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm"> <svg
<svg ref={svgRef}
ref={svgRef} width="100%"
width="100%" height="100%"
height="100%" viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`} className="cursor-grab active:cursor-grabbing"
className="cursor-grab active:cursor-grabbing" onMouseDown={handleMouseDown}
onMouseDown={handleMouseDown} onMouseMove={handleMouseMove}
onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}
onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp}
onMouseLeave={handleMouseUp} onWheel={handleWheel}
onWheel={handleWheel} >
> <defs>
<defs> <filter id="glow">
<filter id="glow"> <feGaussianBlur stdDeviation="3" result="coloredBlur" />
<feGaussianBlur stdDeviation="3" result="coloredBlur" /> <feMerge>
<feMerge> <feMergeNode in="coloredBlur" />
<feMergeNode in="coloredBlur" /> <feMergeNode in="SourceGraphic" />
<feMergeNode in="SourceGraphic" /> </feMerge>
</feMerge> </filter>
</filter> </defs>
</defs>
{/* Render connections */} {/* Render connections */}
{processedConnections.map(connection => ( {processedConnections.map(connection => (
<Connection <Connection
key={connection.key} key={connection.key}
from={connection.from} from={connection.from}
to={connection.to} to={connection.to}
color={connection.color} color={connection.color}
/> />
))} ))}
{/* Render systems */} {/* Render systems */}
{systems?.map((system) => ( {systems?.map((system) => (
<MapNode <MapNode
key={system.solarSystemName} key={system.solarSystemName}
id={system.solarSystemName} id={system.solarSystemName}
name={system.solarSystemName} name={system.solarSystemName}
position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }} position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
onClick={() => handleSystemClick(system.solarSystemName)} onClick={() => handleSystemClick(system.solarSystemName)}
type="system" type="system"
security={system.security} security={system.security}
signatures={system.signatures} signatures={system.signatures}
/> />
))} ))}
</svg> </svg>
</div>
</div> </div>
</div> </div>
</div> </div>

3
src/pages/RegionPage.tsx
View File

@@ -1,5 +1,6 @@
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import RegionMap from '@/components/RegionMap'; import { RegionMap } from '@/components/RegionMap';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react'; import { ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';

8
src/pages/SystemView.tsx
View File

@@ -3,10 +3,10 @@ import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "@/hooks/use-toast"; import { toast } from "@/hooks/use-toast";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import SystemTracker from "@/components/SystemTracker"; import { SystemTracker } from "@/components/SystemTracker";
import RegionMap from "@/components/RegionMap"; import { RegionMap } from "@/components/RegionMap";
import CleanModeToggle from "@/components/CleanModeToggle"; import { CleanModeToggle } from "@/components/CleanModeToggle";
import Header from "@/components/Header"; import { Header } from "@/components/Header";
import { parseSignature, parseScannedPercentage } from "@/utils/signatureParser"; import { parseSignature, parseScannedPercentage } from "@/utils/signatureParser";
import { getSystemId } from "@/utils/systemApi"; import { getSystemId } from "@/utils/systemApi";
import pb from "@/lib/pocketbase"; import pb from "@/lib/pocketbase";