Import Vector lab project
This commit is contained in:
root
@@ -0,0 +1,274 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
const Step4Environment = ({ data, updateData }) => {
|
||||
const toggleTerrain = (terrain) => {
|
||||
const current = data.terrain || [];
|
||||
const updated = current.includes(terrain)
|
||||
? current.filter((t) => t !== terrain)
|
||||
: [...current, terrain];
|
||||
updateData({ terrain: updated });
|
||||
};
|
||||
|
||||
// Автоматически определяем сезон из даты потери
|
||||
useEffect(() => {
|
||||
if (data.lost_time && !data.season) {
|
||||
const date = new Date(data.lost_time);
|
||||
const month = date.getMonth() + 1; // 1-12
|
||||
|
||||
let season = 'лето';
|
||||
if (month >= 3 && month <= 5) season = 'весна';
|
||||
else if (month >= 6 && month <= 8) season = 'лето';
|
||||
else if (month >= 9 && month <= 11) season = 'осень';
|
||||
else season = 'зима'; // 12, 1, 2
|
||||
|
||||
updateData({ season });
|
||||
}
|
||||
}, [data.lost_time]);
|
||||
|
||||
const handleGetLocation = () => {
|
||||
if (!navigator.geolocation) {
|
||||
alert("Геолокация не поддерживается вашим браузером");
|
||||
return;
|
||||
}
|
||||
|
||||
updateData({ gps_loading: true });
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
updateData({
|
||||
tnp_lat: position.coords.latitude.toFixed(6),
|
||||
tnp_lon: position.coords.longitude.toFixed(6),
|
||||
gps_loading: false
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
alert("Ошибка получения координат: " + error.message);
|
||||
updateData({ gps_loading: false });
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 0
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-step">
|
||||
<h2>Шаг 5: Среда и местность</h2>
|
||||
|
||||
{/* Сезон определяется автоматически, показываем только для информации */}
|
||||
{data.season && (
|
||||
<div className="form-group">
|
||||
<label>Сезон (определен автоматически)</label>
|
||||
<div style={{ padding: "12px", background: "#161b22", borderRadius: "6px", color: "#8b949e" }}>
|
||||
{data.season.charAt(0).toUpperCase() + data.season.slice(1)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group">
|
||||
<label>Температура (°C)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={data.temperature || ""}
|
||||
onChange={(e) => updateData({ temperature: parseFloat(e.target.value) })}
|
||||
min="-40"
|
||||
max="40"
|
||||
step="1"
|
||||
placeholder="Например: 15"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Осадки</label>
|
||||
<div className="button-group">
|
||||
<button
|
||||
type="button"
|
||||
className={data.precipitation === "нет" ? "selected" : ""}
|
||||
onClick={() => updateData({ precipitation: "нет" })}
|
||||
>
|
||||
Нет
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={data.precipitation === "дождь" ? "selected" : ""}
|
||||
onClick={() => updateData({ precipitation: "дождь" })}
|
||||
>
|
||||
Дождь
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={data.precipitation === "снег" ? "selected" : ""}
|
||||
onClick={() => updateData({ precipitation: "снег" })}
|
||||
>
|
||||
Снег
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={data.precipitation === "туман" ? "selected" : ""}
|
||||
onClick={() => updateData({ precipitation: "туман" })}
|
||||
>
|
||||
Туман
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Видимость</label>
|
||||
<div className="button-group">
|
||||
<button
|
||||
type="button"
|
||||
className={data.visibility === "хорошая" ? "selected" : ""}
|
||||
onClick={() => updateData({ visibility: "хорошая" })}
|
||||
>
|
||||
Хорошая
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={data.visibility === "средняя" ? "selected" : ""}
|
||||
onClick={() => updateData({ visibility: "средняя" })}
|
||||
>
|
||||
Средняя
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={data.visibility === "плохая" ? "selected" : ""}
|
||||
onClick={() => updateData({ visibility: "плохая" })}
|
||||
>
|
||||
Плохая
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Типы местности (можно выбрать несколько) *</label>
|
||||
<div className="checkbox-group">
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.terrain?.includes("лес")}
|
||||
onChange={() => toggleTerrain("лес")}
|
||||
/>
|
||||
Лес
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.terrain?.includes("поле")}
|
||||
onChange={() => toggleTerrain("поле")}
|
||||
/>
|
||||
Поле
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.terrain?.includes("болото")}
|
||||
onChange={() => toggleTerrain("болото")}
|
||||
/>
|
||||
Болото
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.terrain?.includes("водоём")}
|
||||
onChange={() => toggleTerrain("водоём")}
|
||||
/>
|
||||
Водоём (река, озеро)
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.terrain?.includes("населённый_пункт")}
|
||||
onChange={() => toggleTerrain("населённый_пункт")}
|
||||
/>
|
||||
Населённый пункт
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.terrain?.includes("дороги")}
|
||||
onChange={() => toggleTerrain("дороги")}
|
||||
/>
|
||||
Дороги / тропы
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.terrain?.includes("заброшенные_здания")}
|
||||
onChange={() => toggleTerrain("заброшенные_здания")}
|
||||
/>
|
||||
Заброшенные здания
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.terrain?.includes("сельхоз")}
|
||||
onChange={() => toggleTerrain("сельхоз")}
|
||||
/>
|
||||
Сельхоз угодья
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.terrain?.includes("овраги")}
|
||||
onChange={() => toggleTerrain("овраги")}
|
||||
/>
|
||||
Овраги / ямы
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Координаты точки потери (GPS) *</label>
|
||||
<div style={{ marginBottom: "12px" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="gps-button"
|
||||
onClick={handleGetLocation}
|
||||
disabled={data.gps_loading}
|
||||
>
|
||||
{data.gps_loading ? "Получение координат..." : "📍 Получить текущие координаты"}
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "12px" }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<label style={{ fontSize: "12px", color: "#8b949e" }}>Широта</label>
|
||||
<input
|
||||
type="number"
|
||||
value={data.tnp_lat || ""}
|
||||
onChange={(e) => updateData({ tnp_lat: e.target.value })}
|
||||
placeholder="53.9000"
|
||||
step="0.000001"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<label style={{ fontSize: "12px", color: "#8b949e" }}>Долгота</label>
|
||||
<input
|
||||
type="number"
|
||||
value={data.tnp_lon || ""}
|
||||
onChange={(e) => updateData({ tnp_lon: e.target.value })}
|
||||
placeholder="27.5667"
|
||||
step="0.000001"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Или введите адрес</label>
|
||||
<input
|
||||
type="text"
|
||||
value={data.tnp_address || ""}
|
||||
onChange={(e) => updateData({ tnp_address: e.target.value })}
|
||||
placeholder="Минск, ул. Ленина 10"
|
||||
/>
|
||||
<p style={{ fontSize: "12px", color: "#8b949e", marginTop: "4px" }}>
|
||||
Адрес будет преобразован в координаты автоматически
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Step4Environment;
|
||||
Reference in New Issue
Block a user