# feat
## Deskripsi: - Tampilan Map - Tambah pin map ### No Issue
This commit is contained in:
3
src/app_modules/map/ui/index.ts
Normal file
3
src/app_modules/map/ui/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { UiMap_MapBoxView } from "./ui_map";
|
||||
export { UiMap_SplashView } from "./ui_splash";
|
||||
export { UiMap_CreatePin } from "./ui_create_pin"
|
||||
139
src/app_modules/map/ui/ui_create_pin.tsx
Normal file
139
src/app_modules/map/ui/ui_create_pin.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AccentColor,
|
||||
MainColor,
|
||||
} from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
|
||||
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
|
||||
import {
|
||||
Button,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Stack,
|
||||
TextInput
|
||||
} from "@mantine/core";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import Map, { Marker } from "react-map-gl";
|
||||
import { map_funCreatePin } from "../fun/create/fun_create_pin";
|
||||
import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
|
||||
|
||||
export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
|
||||
const [[lat, long], setLatLong] = useState([0, 0]);
|
||||
const [isPin, setIsPin] = useState(false);
|
||||
const [namePin, setNamePin] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack style={{ borderRadius: "10px" }}>
|
||||
<Map
|
||||
mapboxAccessToken={mapboxToken}
|
||||
mapStyle={"mapbox://styles/mapbox/streets-v11"}
|
||||
initialViewState={{
|
||||
latitude: defaultLatLong[0],
|
||||
longitude: defaultLatLong[1],
|
||||
zoom: defaultMapZoom,
|
||||
}}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
width: "100%",
|
||||
height: "60vh",
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
onClick={(a) => {
|
||||
setLatLong([a.lngLat.lat, a.lngLat.lng]);
|
||||
setIsPin(true);
|
||||
}}
|
||||
>
|
||||
<Marker
|
||||
style={{
|
||||
color: "red",
|
||||
width: 40,
|
||||
// height: 40,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
latitude={lat}
|
||||
longitude={long}
|
||||
anchor="bottom"
|
||||
>
|
||||
<Stack spacing={0}>
|
||||
<Image
|
||||
w={"100%"}
|
||||
alt="image"
|
||||
src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
|
||||
/>
|
||||
</Stack>
|
||||
</Marker>
|
||||
</Map>
|
||||
|
||||
<Paper
|
||||
style={{
|
||||
padding: "15px",
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput
|
||||
disabled={isPin ? false : true}
|
||||
style={{ transition: "0.5s" }}
|
||||
styles={{ label: { color: isPin ? "white" : "gray" } }}
|
||||
label="Nama Pin"
|
||||
placeholder="Masukan nama pin map"
|
||||
withAsterisk
|
||||
onChange={(val) => {
|
||||
setNamePin(_.startCase(val.currentTarget.value));
|
||||
}}
|
||||
/>
|
||||
<ButtonSavePin
|
||||
namePin={namePin}
|
||||
lat={lat as any}
|
||||
long={long as any}
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonSavePin({
|
||||
namePin,
|
||||
lat,
|
||||
long,
|
||||
}: {
|
||||
namePin: string;
|
||||
lat: string;
|
||||
long: string;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
async function onSavePin() {
|
||||
const res = await map_funCreatePin({ data: { namePin, lat, long } });
|
||||
res.status === 200
|
||||
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
|
||||
: ComponentGlobal_NotifikasiGagal(res.message);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Group position="right">
|
||||
<Button
|
||||
style={{ transition: "0.5s" }}
|
||||
disabled={namePin === "" ? true : false}
|
||||
radius={"xl"}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
onClick={() => onSavePin()}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
117
src/app_modules/map/ui/ui_map.tsx
Normal file
117
src/app_modules/map/ui/ui_map.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import "mapbox-gl/dist/mapbox-gl.css";
|
||||
import { Image, Stack, Text, Tooltip } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { useRef, useState } from "react";
|
||||
import Map, {
|
||||
AttributionControl,
|
||||
GeolocateControl,
|
||||
Marker,
|
||||
NavigationControl,
|
||||
Popup,
|
||||
ScaleControl,
|
||||
} from "react-map-gl";
|
||||
import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
|
||||
import { MODEL_MAP } from "../lib/interface";
|
||||
import { ComponentMap_DrawerDetailData } from "../_component";
|
||||
import { map_funGetAllMap } from "../fun/get/fun_get_all_map";
|
||||
|
||||
export function UiMap_MapBoxView({
|
||||
mapboxToken,
|
||||
dataMap,
|
||||
}: {
|
||||
mapboxToken: string;
|
||||
dataMap: MODEL_MAP[];
|
||||
}) {
|
||||
const [mapId, setMapId] = useState("");
|
||||
const [openDrawer, setOpenDrawer] = useState(false);
|
||||
const [data, setData] = useState(dataMap);
|
||||
|
||||
useShallowEffect(() => {
|
||||
onLoadData();
|
||||
}, []);
|
||||
|
||||
async function onLoadData() {
|
||||
const loadData = await map_funGetAllMap();
|
||||
setData(loadData as any);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack style={{ borderRadius: "10px" }}>
|
||||
<Map
|
||||
mapboxAccessToken={mapboxToken}
|
||||
mapStyle={"mapbox://styles/mapbox/streets-v11"}
|
||||
initialViewState={{
|
||||
latitude: defaultLatLong[0],
|
||||
longitude: defaultLatLong[1],
|
||||
zoom: defaultMapZoom,
|
||||
}}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
width: "auto",
|
||||
height: "90vh",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
attributionControl={false}
|
||||
>
|
||||
{data.map((e, i) => (
|
||||
<Stack key={i}>
|
||||
<Marker
|
||||
style={{
|
||||
width: 40,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
latitude={e.latitude}
|
||||
longitude={e.longitude}
|
||||
anchor="bottom"
|
||||
offset={[0, 0]}
|
||||
scale={1}
|
||||
>
|
||||
<Stack
|
||||
spacing={0}
|
||||
align="center"
|
||||
onClick={() => {
|
||||
setMapId(e.id);
|
||||
setOpenDrawer(true);
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
w={"100%"}
|
||||
alt="image"
|
||||
src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
|
||||
/>
|
||||
<Text
|
||||
fz={"xs"}
|
||||
bg={"dark"}
|
||||
c={"white"}
|
||||
align="center"
|
||||
style={{
|
||||
borderRadius: "5px",
|
||||
padding: "5px",
|
||||
width: "auto",
|
||||
}}
|
||||
lineClamp={2}
|
||||
>
|
||||
{e.namePin}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Marker>
|
||||
</Stack>
|
||||
))}
|
||||
|
||||
<NavigationControl />
|
||||
<ScaleControl position="top-left" />
|
||||
<AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
|
||||
</Map>
|
||||
</Stack>
|
||||
|
||||
<ComponentMap_DrawerDetailData
|
||||
opened={openDrawer}
|
||||
close={() => setOpenDrawer(false)}
|
||||
mapId={mapId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
22
src/app_modules/map/ui/ui_splash.tsx
Normal file
22
src/app_modules/map/ui/ui_splash.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
|
||||
import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { IconMap2 } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export function UiMap_SplashView() {
|
||||
const router = useRouter();
|
||||
|
||||
useShallowEffect(() => {
|
||||
setTimeout(() => {
|
||||
router.replace(RouterMap.main_view, { scroll: false }), 1000;
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<UIGlobal_SplashScreen icon={<IconMap2 size={300} />} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user