feat: Добавлена навигация между калькуляторами и исправлена ошибка API
- Добавлен компонент CalculatorNav для переключения между калькуляторами - Навигация сохраняет chat_id при переходах - Исправлен endpoint API (используется правильный путь с типом калькулятора) - Пересобран frontend для применения изменений
This commit is contained in:
parent
281fc94838
commit
02ad29e64b
11
frontend/app/[calculator]/layout.tsx
Normal file
11
frontend/app/[calculator]/layout.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
// app/[calculator]/layout.tsx
|
||||||
|
// Layout для страниц калькуляторов с сохранением chat_id
|
||||||
|
|
||||||
|
export default function CalculatorLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,6 +1,11 @@
|
|||||||
|
// app/page.tsx
|
||||||
|
// Главная страница с выбором калькулятора
|
||||||
|
|
||||||
import { redirect } from 'next/navigation';
|
import { redirect } from 'next/navigation';
|
||||||
|
import { getAvailableCalculators } from '@/lib/calculators';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
// Редирект на калькулятор мыла по умолчанию
|
// Редирект на калькулятор мыла по умолчанию, если есть chat_id
|
||||||
|
// Иначе показываем список калькуляторов
|
||||||
redirect('/soap');
|
redirect('/soap');
|
||||||
}
|
}
|
||||||
|
|||||||
54
frontend/components/CalculatorNav.tsx
Normal file
54
frontend/components/CalculatorNav.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
// components/CalculatorNav.tsx
|
||||||
|
// Навигация между калькуляторами
|
||||||
|
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { usePathname, useSearchParams } from 'next/navigation';
|
||||||
|
|
||||||
|
export default function CalculatorNav() {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const chatId = searchParams.get('chat_id');
|
||||||
|
|
||||||
|
// Сохраняем chat_id при переходах
|
||||||
|
const queryString = chatId ? `?chat_id=${chatId}` : '';
|
||||||
|
|
||||||
|
const calculators = [
|
||||||
|
{ id: 'soap', name: 'Мыло' },
|
||||||
|
{ id: 'candle', name: 'Свеча' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleCalculatorChange = (calcId: string) => {
|
||||||
|
window.location.href = `/${calcId}${queryString}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mb-6 bg-gray-700 rounded-lg p-4">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-200 mb-3">
|
||||||
|
Выберите калькулятор:
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{calculators.map((calc) => {
|
||||||
|
const isActive = pathname === `/${calc.id}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={calc.id}
|
||||||
|
onClick={() => handleCalculatorChange(calc.id)}
|
||||||
|
className={`
|
||||||
|
px-4 py-2 rounded-md text-center font-medium transition-colors
|
||||||
|
${isActive
|
||||||
|
? 'bg-sky-500 text-gray-100'
|
||||||
|
: 'bg-gray-600 text-gray-200 hover:bg-gray-500 active:bg-gray-400'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{calc.name}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@ -8,6 +8,7 @@ import Image from 'next/image';
|
|||||||
import { getCalculator } from '@/lib/calculators';
|
import { getCalculator } from '@/lib/calculators';
|
||||||
import { submitCalculator } from '@/lib/api';
|
import { submitCalculator } from '@/lib/api';
|
||||||
import FormField from './FormField';
|
import FormField from './FormField';
|
||||||
|
import CalculatorNav from './CalculatorNav';
|
||||||
import type { Calculator } from '@/types/calculator';
|
import type { Calculator } from '@/types/calculator';
|
||||||
|
|
||||||
interface DynamicCalculatorProps {
|
interface DynamicCalculatorProps {
|
||||||
@ -215,6 +216,9 @@ export default function DynamicCalculator({ calculatorType }: DynamicCalculatorP
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Навигация между калькуляторами */}
|
||||||
|
<CalculatorNav />
|
||||||
|
|
||||||
{/* Предупреждение о chat_id */}
|
{/* Предупреждение о chat_id */}
|
||||||
{chatId === null && (
|
{chatId === null && (
|
||||||
<div className="bg-yellow-800 p-2 text-yellow-200 font-semibold rounded">
|
<div className="bg-yellow-800 p-2 text-yellow-200 font-semibold rounded">
|
||||||
|
|||||||
@ -162,7 +162,7 @@ export default function SoapCalculator() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`${API_BASE_URL}/api/submit`, {
|
const res = await fetch(`${API_BASE_URL}/api/submit/soap`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: formData,
|
body: formData,
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user