89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import type { ExmnMapFilters, ExmnMapJobType } from "./exmnMapTypes";
|
|
|
|
type Props = {
|
|
jobType: ExmnMapJobType;
|
|
filters: ExmnMapFilters;
|
|
onFiltersChange: (filters: ExmnMapFilters) => void;
|
|
};
|
|
|
|
const GRADE_OPTIONS = ["", "1", "2", "3", "4", "5"];
|
|
|
|
/** 조사결과 레이어의 세 가지 자동 적용 필터다. */
|
|
export default function ExmnLayerSettingPanel({
|
|
jobType,
|
|
filters,
|
|
onFiltersChange,
|
|
}: Props) {
|
|
const updateFilter = (key: keyof ExmnMapFilters, value: string) => {
|
|
onFiltersChange({
|
|
...filters,
|
|
[key]: value.replace(/[^0-9]/g, ""),
|
|
});
|
|
};
|
|
const selectClass =
|
|
"h-[24px] w-[54px] rounded-[4px] border border-input bg-background px-2 text-[1rem] text-foreground outline-none focus:border-primary";
|
|
const labelClass = "shrink-0 text-[1.05rem] font-medium text-label";
|
|
|
|
return (
|
|
<div className="w-full rounded-[6px] border border-border bg-background px-2 py-[9px] shadow-blur">
|
|
<div className="mb-2 flex items-center gap-1">
|
|
{/* 관로/맨홀 조사유형을 구분하는 지도 범례 의미색이므로 고정색을 유지한다. */}
|
|
<span
|
|
className={`h-2 w-2 rounded-full ${jobType === "PPL" ? "bg-[#facc15]" : "bg-[#8b5cf6]"}`}
|
|
/>
|
|
<span className="text-[1.1rem] font-semibold text-label">
|
|
{jobType === "PPL" ? "관로조사" : "맨홀조사"}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<label className="flex min-h-[25px] items-center justify-between gap-2">
|
|
<span className={labelClass}>사업차수</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-[25px] items-center justify-between gap-2">
|
|
<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-[25px] items-center justify-between gap-2">
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|