106 lines
3.7 KiB
TypeScript
Executable File
106 lines
3.7 KiB
TypeScript
Executable File
// app/admin/upload/_components/map/StylingLayers.tsx
|
|
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { Button } from "@/shared/components/ui/button";
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/shared/components/ui/tabs";
|
|
import CustomLayerStyle from "./CustomLayerStyle"; // ⬅️ Import Komponen Baru
|
|
|
|
function normalizeBase64(xmlString:any) {
|
|
return xmlString.replace(
|
|
/xlink:href="base64:([^"?]+)(\?[^"]*)?"/g,
|
|
(_: any, base64Content: any) => {
|
|
return `xlink:href="data:image/svg+xml;base64,${base64Content}"`;
|
|
}
|
|
);
|
|
}
|
|
|
|
const StylingLayers = ({
|
|
data,
|
|
geometryType,
|
|
onSubmit,
|
|
geosStyle
|
|
}: { data: any, geometryType: string, onSubmit: (val: any) => void, geosStyle: any[] }) => {
|
|
|
|
// Ubah default tab ke 'custom' agar user langsung bisa edit warna
|
|
const [activeTab, setActiveTab] = useState("custom");
|
|
const [parsedSld, setParsedSld] = useState<string | null>(null);
|
|
|
|
return (
|
|
<div className="w-full h-full bg-white flex flex-col">
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full flex-1 flex flex-col">
|
|
<TabsList className="grid grid-cols-2 w-full mb-4">
|
|
{/* 🔥 Aktifkan Tab Custom */}
|
|
<TabsTrigger value="custom">Custom</TabsTrigger>
|
|
<TabsTrigger value="upload">Upload SLD</TabsTrigger>
|
|
{/* <TabsTrigger value="geoserver">List Style</TabsTrigger> */}
|
|
</TabsList>
|
|
|
|
{/* 🔥 Tambahkan Content Tab Custom */}
|
|
<TabsContent value="custom" className="flex-1 overflow-auto h-full">
|
|
<CustomLayerStyle
|
|
data={data}
|
|
geometryType={geometryType}
|
|
onSubmit={onSubmit}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="upload" className="flex-1 overflow-auto">
|
|
<div className="p-4 h-full flex flex-col">
|
|
<div className="p-4 border rounded-lg text-center">
|
|
<h3 className="text-lg font-semibold mb-2">Upload File SLD</h3>
|
|
|
|
<p className="text-sm text-gray-500 mb-3">
|
|
Unggah file .sld untuk mengganti style layer.
|
|
</p>
|
|
|
|
<input
|
|
type="file"
|
|
accept=".sld"
|
|
className="block w-full text-sm file:mr-4 file:px-4 file:py-2
|
|
file:rounded-md file:border file:bg-gray-100
|
|
file:hover:bg-gray-200 cursor-pointer"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = () => {
|
|
const sld = normalizeBase64(reader.result)
|
|
setParsedSld(sld)
|
|
onSubmit({
|
|
styleType: "sld",
|
|
sldContent: sld,
|
|
});
|
|
};
|
|
|
|
reader.readAsText(file);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="pt-4 border-t mt-auto">
|
|
<Button
|
|
className="w-full disabled:bg-gray-400"
|
|
onClick={() =>
|
|
onSubmit({
|
|
styleType: "sld",
|
|
sldContent: parsedSld,
|
|
})
|
|
}
|
|
disabled={!parsedSld}
|
|
>
|
|
Terapkan Style
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="geoserver" className="flex-1 overflow-auto">
|
|
{/* ... (Konten List Style tetap sama) ... */}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StylingLayers; |