feat: Add Leaflet map integration and project coordinates handling
- Updated package.json to include dependencies for Leaflet and Playwright testing. - Added new images for Leaflet markers and layers. - Created scripts for generating test data with project coordinates. - Enhanced ProjectViewPage to display project coordinates and integrated ProjectMap component. - Modified ProjectForm to include coordinates input field. - Implemented CustomWMTSMap and EnhancedLeafletMap components for improved map functionality. - Created ProjectMap component to dynamically render project location on the map. - Added mapLayers configuration for various base layers including Polish Geoportal. - Implemented WMTS capabilities handling for dynamic layer loading. - Updated database initialization to include coordinates column in projects table. - Modified project creation and update functions to handle coordinates. - Added utility functions for formatting project status and deadlines.
This commit is contained in:
@@ -12,15 +12,13 @@ import { differenceInCalendarDays, parseISO } from "date-fns";
|
||||
import PageContainer from "@/components/ui/PageContainer";
|
||||
import PageHeader from "@/components/ui/PageHeader";
|
||||
import ProjectStatusDropdown from "@/components/ProjectStatusDropdown";
|
||||
import ProjectMap from "@/components/ui/ProjectMap";
|
||||
|
||||
export default function ProjectViewPage({ params }) {
|
||||
const { id } = params;
|
||||
export default async function ProjectViewPage({ params }) {
|
||||
const { id } = await params;
|
||||
const project = getProjectWithContract(id);
|
||||
const notes = getNotesForProject(id);
|
||||
const daysRemaining = differenceInCalendarDays(
|
||||
parseISO(project.finish_date),
|
||||
new Date()
|
||||
);
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<PageContainer>
|
||||
@@ -36,6 +34,10 @@ export default function ProjectViewPage({ params }) {
|
||||
);
|
||||
}
|
||||
|
||||
const daysRemaining = project.finish_date
|
||||
? differenceInCalendarDays(parseISO(project.finish_date), new Date())
|
||||
: null;
|
||||
|
||||
const getDeadlineVariant = (days) => {
|
||||
if (days < 0) return "danger";
|
||||
if (days <= 7) return "warning";
|
||||
@@ -130,11 +132,15 @@ export default function ProjectViewPage({ params }) {
|
||||
</span>
|
||||
<p className="text-gray-900">{project.investment_number}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div> <div>
|
||||
<span className="text-sm font-medium text-gray-500">Contact</span>
|
||||
<p className="text-gray-900">{project.contact}</p>
|
||||
</div>
|
||||
</div> {project.coordinates && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Coordinates</span>
|
||||
<p className="text-gray-900">{project.coordinates}</p>
|
||||
</div>
|
||||
)}
|
||||
{project.notes && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Notes</span>
|
||||
@@ -207,9 +213,26 @@ export default function ProjectViewPage({ params }) {
|
||||
</span>
|
||||
<p className="text-gray-900">{project.investor}</p>
|
||||
</div>
|
||||
</CardContent> </Card>{" "}
|
||||
</div> {/* Project Location Map */}
|
||||
{project.coordinates && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Project Location
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ProjectMap
|
||||
coordinates={project.coordinates}
|
||||
projectName={project.project_name}
|
||||
showLayerControl={true}
|
||||
mapHeight="h-80"
|
||||
defaultLayer="Polish Geoportal Orthophoto"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>{" "}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<ProjectTasksSection projectId={id} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user