82 lines
2.9 KiB
TypeScript
82 lines
2.9 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-[#ccd6df] bg-white px-2 text-[1rem] text-[#222] outline-none focus:border-primary";
|
|
const labelClass = "shrink-0 text-[1.05rem] font-medium text-slate-700";
|
|
|
|
return (
|
|
<div className="w-full rounded-[6px] border border-[#dbe7f5] bg-white px-2 py-[9px] shadow-[0_2px_8px_rgba(15,23,42,0.05)]">
|
|
<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-slate-700">
|
|
{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>
|
|
);
|
|
}
|