102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
/**
|
|
* 화면명: 관로조사 레이어 설정
|
|
* 사업차수와 조사 종류·상태등급별 지도 표시 조건을 설정한다.
|
|
*/
|
|
"use client";
|
|
|
|
import type { ExmnMapFilters, ExmnMapJobType } from "./exmnMapTypes";
|
|
import LayerSettingCard from "../layerSetting/LayerSettingCard";
|
|
|
|
type Props = {
|
|
jobType: ExmnMapJobType;
|
|
filters: ExmnMapFilters;
|
|
onFiltersChange: (filters: ExmnMapFilters) => void;
|
|
enabled?: boolean;
|
|
onEnabledChange?: (enabled: boolean) => void;
|
|
onClose?: () => void;
|
|
};
|
|
|
|
const GRADE_OPTIONS = ["", "1", "2", "3", "4", "5"];
|
|
|
|
/** 조사결과 레이어의 세 가지 자동 적용 필터다. */
|
|
export default function ExmnLayerSettingPanel({
|
|
jobType,
|
|
filters,
|
|
onFiltersChange,
|
|
enabled = true,
|
|
onEnabledChange = () => {},
|
|
onClose = () => {},
|
|
}: Props) {
|
|
const updateFilter = (key: keyof ExmnMapFilters, value: string) => {
|
|
onFiltersChange({
|
|
...filters,
|
|
[key]: value.replace(/[^0-9]/g, ""),
|
|
});
|
|
};
|
|
const selectClass =
|
|
"h-[26px] w-full rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground outline-none focus:border-primary";
|
|
const labelClass = "shrink-0 text-[1.15rem] font-medium text-label";
|
|
const title = jobType === "PPL" ? "관로조사" : "맨홀조사";
|
|
|
|
return (
|
|
<LayerSettingCard
|
|
title={title}
|
|
enabled={enabled}
|
|
onEnabledChange={onEnabledChange}
|
|
onClose={onClose}
|
|
>
|
|
<div className="space-y-[6px]">
|
|
<label className="flex min-h-[24px] flex-col items-stretch gap-1">
|
|
<span className={`flex items-center gap-1 ${labelClass}`}>
|
|
<span
|
|
className={`h-2 w-2 rounded-full ${jobType === "PPL" ? "bg-[#facc15]" : "bg-[#8b5cf6]"}`}
|
|
/>
|
|
사업차수
|
|
</span>
|
|
<input
|
|
className={selectClass}
|
|
type="text"
|
|
inputMode="numeric"
|
|
maxLength={10}
|
|
placeholder="전체"
|
|
value={filters.bizCycl}
|
|
onChange={(event) => updateFilter("bizCycl", event.target.value)}
|
|
/>
|
|
</label>
|
|
<label className="flex min-h-[24px] flex-col items-stretch gap-1">
|
|
<span className={labelClass}>구조적 상태등급</span>
|
|
<select
|
|
className={selectClass}
|
|
value={filters.structuralGrade}
|
|
onChange={(event) =>
|
|
updateFilter("structuralGrade", event.target.value)
|
|
}
|
|
>
|
|
{GRADE_OPTIONS.map((grade) => (
|
|
<option key={grade || "all"} value={grade}>
|
|
{grade || "전체"}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="flex min-h-[24px] flex-col items-stretch gap-1">
|
|
<span className={labelClass}>운영적 상태등급</span>
|
|
<select
|
|
className={selectClass}
|
|
value={filters.operationalGrade}
|
|
onChange={(event) =>
|
|
updateFilter("operationalGrade", event.target.value)
|
|
}
|
|
>
|
|
{GRADE_OPTIONS.map((grade) => (
|
|
<option key={grade || "all"} value={grade}>
|
|
{grade || "전체"}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</LayerSettingCard>
|
|
);
|
|
}
|