pub/lct-hack
Watch
1
0
Fork
You've already forked lct-hack
 0
Code Releases Packages 5 Activity

Implement DDS exercise, customer UI and local demo

Browse source
This commit is contained in:
andreysk0304 2026-09-21 19:56:13 +03:00
commit 0526b11f91
46 changed files with 2504 additions and 253 deletions
Download patch file Download diff file Expand all files Collapse all files

123
frontend/src/features/kio-card/KioCard.tsx
View file

@ -3,95 +3,124 @@
import { useSigns } from "@/shared/api/http";
import { type CardState, display } from "./merge";
import { type Field, visibleGroups } from "./fields";
import { type Field, type FieldGroup, visibleGroups } from "./fields";
interface Props {
state: CardState;
/** Обязательные поля приходят сценарием в `call.incoming`. */
required?: string[];
readOnly?: boolean;
referenceArm?: boolean;
onChange?: (path: string, value: unknown) => void;
}
export function KioCard({ state, required = [], readOnly = false, onChange }: Props) {
export function KioCard({ state, required = [], readOnly = false, referenceArm = false, onChange }: Props) {
const dds = display(state, "dds") as string | null;
const groups = visibleGroups(dds);
const section = (group: FieldGroup) => (
<section className={`kio-arm-section kio-arm-${group.area}`} key={group.title}>
{(!referenceArm || group.area !== "header") && <div className="kio-arm-section-title">{group.title}</div>}
<div className="kio-arm-fields">
{(referenceArm && group.area === "incident"
? [...group.fields].sort((a, b) => Number(b.path === "incident_type") - Number(a.path === "incident_type"))
: group.fields).map((field) => (
<Row
key={field.path}
field={field}
value={display(state, field.path)}
pending={field.path in state.pending}
required={required.includes(field.path)}
readOnly={readOnly || field.readOnly}
referenceArm={referenceArm}
onChange={onChange}
/>
))}
</div>
</section>
);
return (
<div className="kio">
{visibleGroups(dds).map((group) => (
<table className="grid" key={group.title}>
<thead>
<tr>
<th colSpan={2}>{group.title}</th>
</tr>
</thead>
<tbody>
{group.fields.map((field) => (
<Row
key={field.path}
field={field}
value={display(state, field.path)}
pending={field.path in state.pending}
required={required.includes(field.path)}
readOnly={readOnly || field.readOnly}
onChange={onChange}
/>
))}
</tbody>
</table>
))}
<div className={`kio-arm${referenceArm ? " kio-arm-ref" : ""}`}>
<div className="kio-arm-top">
{groups.filter((group) => group.title === "Звонящий").map(section)}
{groups.filter((group) => group.title === "Служебное").map(section)}
</div>
<div className="kio-arm-main">
<div className="kio-arm-left">{groups.filter((group) => group.area === "address" || group.area === "description").map(section)}</div>
<div className="kio-arm-right">{groups.filter((group) => group.area === "incident" || group.area === "dispatch" || group.area === "details").map(section)}</div>
</div>
</div>
);
}
function Row({
field, value, pending, required, readOnly, onChange,
field, value, pending, required, readOnly, referenceArm, onChange,
}: {
field: Field;
value: unknown;
pending: boolean;
required: boolean;
readOnly?: boolean;
referenceArm: boolean;
onChange?: (path: string, value: unknown) => void;
}) {
const empty = value === null || value === undefined || value === "";
const empty = value === null || value === undefined || value === "" || (Array.isArray(value) && value.length === 0);
return (
<tr>
<th>
{field.label}
<div className={`kio-arm-row kio-arm-row-${field.path.replaceAll(".", "-")}${required && empty ? " kio-arm-missing" : ""}${pending ? " kio-arm-pending" : ""}`}>
<div className="kio-arm-label">
{referenceArm && field.path === "incident_type" ? "Что случилось?"
: referenceArm && field.path === "caller_number" ? "АОН"
: referenceArm && field.path === "caller_contact" ? "Предоставленный"
: referenceArm && field.path === "caller_name" ? "Фамилия и имя заявителя"
: field.label}
{required && <span title="обязательное поле" className="required"> ·</span>}
</th>
<td className={required && empty ? "warn" : pending ? "pending" : ""}>
</div>
<div className="kio-arm-value">
{readOnly ? (
<span>{formatValue(value)}</span>
<span className="kio-arm-readonly">{formatValue(value, field)}</span>
) : (
<Input field={field} value={value} onChange={onChange} />
<Input field={field} value={value} referenceArm={referenceArm} onChange={onChange} />
)}
</td>
</tr>
</div>
</div>
);
}
function Input({
field, value, onChange,
field, value, referenceArm, onChange,
}: {
field: Field;
value: unknown;
referenceArm: boolean;
onChange?: (path: string, value: unknown) => void;
}) {
const emit = (next: unknown) => onChange?.(field.path, next);
if (field.kind === "list") {
return <span>{formatValue(value)}</span>;
return <span className="kio-arm-readonly">{formatValue(value)}</span>;
}
if (field.kind === "bool") {
return (
<input type="checkbox" checked={value === true} onChange={(e) => emit(e.target.checked)} />
<div className="kio-arm-choice" role="group" aria-label={field.label}>
<button type="button" aria-pressed={value === true} className={value === true ? "kio-arm-selected" : ""} onClick={() => emit(true)}>Да</button>
<button type="button" aria-pressed={value === false} className={value === false ? "kio-arm-selected" : ""} onClick={() => emit(false)}>Нет</button>
</div>
);
}
if (field.kind === "select") {
if (referenceArm && field.path === "incident_type") {
return (
<div className="kio-arm-type-picker" role="group" aria-label="Что случилось?">
{field.options?.map((option) => (
<button type="button" key={option.value} aria-pressed={value === option.value}
className={value === option.value ? "kio-arm-selected" : ""}
onClick={() => emit(option.value)}>{option.label}</button>
))}
</div>
);
}
return (
<select value={(value as string) ?? ""} onChange={(e) => emit(e.target.value || null)}>
<select aria-label={field.label} value={(value as string) ?? ""} onChange={(e) => emit(e.target.value || null)}>
<option value="">—</option>
{field.options?.map((option) => (
<option key={option.value} value={option.value}>{option.label}</option>
@ -102,10 +131,14 @@ function Input({
if (field.kind === "signs") {
return <SignsPicker value={(value as string[]) ?? []} onChange={(next) => emit(next)} />;
}
if (field.kind === "textarea") {
return <textarea aria-label={field.label} rows={5} value={(value as string) ?? ""} placeholder="Введите сведения со слов заявителя" onChange={(e) => emit(e.target.value)} />;
}
if (field.kind === "number") {
return (
<input
type="number"
aria-label={field.label}
min={0}
value={value === null || value === undefined ? "" : String(value)}
onChange={(e) => {
@ -120,7 +153,7 @@ function Input({
);
}
return (
<input type="text" value={(value as string) ?? ""} onChange={(e) => emit(e.target.value)} />
<input type="text" aria-label={field.label} value={(value as string) ?? ""} onChange={(e) => emit(e.target.value)} />
);
}
@ -152,6 +185,9 @@ function SignsPicker({
}}
/>
))}
{value.length > 0 && <div className="signs-selected" aria-label="Выбранные признаки">
{value.map((sign, index) => <span key={`${index}-${sign}`}>{sign}</span>)}
</div>}
</div>
);
}
@ -168,7 +204,7 @@ function SignSelect({
// Уровня может не быть: часть происшествий классифицируется двумя признаками.
if (!page.isLoading && values.length === 0) return null;
return (
<select value={chosen} onChange={(e) => onPick(e.target.value)} disabled={page.isLoading}>
<select aria-label={`Признак происшествия ${prefix.length + 1}`} value={chosen} onChange={(e) => onPick(e.target.value)} disabled={page.isLoading}>
<option value="">—</option>
{values.map((sign) => (
<option key={sign} value={sign}>{sign}</option>
@ -177,10 +213,11 @@ function SignSelect({
);
}
function formatValue(value: unknown): string {
function formatValue(value: unknown, field?: Field): string {
if (value === true) return "да";
if (value === false) return "нет";
if (Array.isArray(value)) return value.length ? value.join(", ") : "—";
if (value === null || value === undefined || value === "") return "—";
if (field?.options) return field.options.find((option) => option.value === value)?.label ?? String(value);
return String(value);
}

22
frontend/src/features/kio-card/fields.ts
View file

@ -6,7 +6,7 @@
import type { DDSCode, IncidentType } from "@/shared/types/generated";
export type FieldKind = "text" | "number" | "bool" | "select" | "signs" | "list";
export type FieldKind = "text" | "textarea" | "number" | "bool" | "select" | "signs" | "list";
export interface Field {
/** Путь в карточке: «floor», «fire.floors» — так же, как в `kio.patch`. */
@ -21,6 +21,9 @@ export interface Field {
export interface FieldGroup {
title: string;
fields: Field[];
/** Рабочие зоны карточки 112: плотная шапка, адрес и описание слева,
* классификация и маршрутизация справа. */
area: "header" | "address" | "description" | "incident" | "dispatch" | "details";
/** Группа показывается только для этой службы. */
dds?: DDSCode;
}
@ -45,6 +48,7 @@ const DDS: { value: DDSCode; label: string }[] = [
export const GROUPS: FieldGroup[] = [
{
title: "Служебное",
area: "header",
fields: [
{ path: "registered_at", label: "Время регистрации", kind: "text", readOnly: true },
{ path: "response_status", label: "Статус реагирования", kind: "text", readOnly: true },
@ -52,6 +56,7 @@ export const GROUPS: FieldGroup[] = [
},
{
title: "Звонящий",
area: "header",
fields: [
{ path: "caller_number", label: "Номер телефона", kind: "text", readOnly: true },
{ path: "caller_name", label: "ФИО", kind: "text" },
@ -61,6 +66,7 @@ export const GROUPS: FieldGroup[] = [
},
{
title: "Место",
area: "address",
fields: [
{ path: "okato", label: "ОКАТО", kind: "text" },
{ path: "address", label: "Адрес", kind: "text" },
@ -71,15 +77,22 @@ export const GROUPS: FieldGroup[] = [
{ path: "intercom_code", label: "Код домофона", kind: "text" },
],
},
{
title: "Описание со слов заявителя",
area: "description",
fields: [
{ path: "description", label: "Описание", kind: "textarea" },
],
},
{
title: "Происшествие",
area: "incident",
fields: [
// Признаки по ЕКП — то, что оператор действительно проставляет.
// Код и список оповещения считает сервер (docs/spec/DATASET.md).
{ path: "signs", label: "Признаки происшествия", kind: "signs" },
{ path: "incident_code", label: "Код ЕКП", kind: "text", readOnly: true },
{ path: "incident_type", label: "Тип происшествия", kind: "select", options: INCIDENT },
{ path: "description", label: "Описание", kind: "text" },
{ path: "victims_count", label: "Пострадавших", kind: "number" },
{ path: "is_emergency", label: "Признак ЧС", kind: "bool" },
{ path: "life_threat", label: "Угроза жизни", kind: "bool" },
@ -88,6 +101,7 @@ export const GROUPS: FieldGroup[] = [
},
{
title: "Дежурно-диспетчерская служба",
area: "dispatch",
fields: [
// Список оповещения оператор не выбирает: он производен от признаков.
{ path: "notify", label: "Список оповещения", kind: "list", readOnly: true },
@ -98,6 +112,7 @@ export const GROUPS: FieldGroup[] = [
},
{
title: "Уточнения: пожар",
area: "details",
dds: "01",
fields: [
{ path: "fire.fire_nature", label: "Характер пожара", kind: "text" },
@ -110,6 +125,7 @@ export const GROUPS: FieldGroup[] = [
},
{
title: "Уточнения: полиция",
area: "details",
dds: "02",
fields: [
{ path: "police.offence_kind", label: "Вид правонарушения", kind: "text" },
@ -120,6 +136,7 @@ export const GROUPS: FieldGroup[] = [
},
{
title: "Уточнения: медицина",
area: "details",
dds: "03",
fields: [
{ path: "medical.reason", label: "Повод к вызову", kind: "text" },
@ -131,6 +148,7 @@ export const GROUPS: FieldGroup[] = [
},
{
title: "Уточнения: ЖКХ и прочие",
area: "details",
dds: "gkh",
fields: [
{ path: "utility.failure_kind", label: "Тип аварии", kind: "text" },