98 lines
3.1 KiB
TypeScript
98 lines
3.1 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-[20px] w-[62px] rounded border border-input bg-background px-[1px] text-center text-[1.1rem] 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-[1px]">
|
|
<label className="flex min-h-[24px] items-center justify-between ">
|
|
<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] items-center justify-between ">
|
|
<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] items-center justify-between ">
|
|
<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>
|
|
);
|
|
}
|