._.

src/pages/Cities.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import SelectionDialog from "../components/SelectionDialog.jsx";
 import { useNavigate } from "react-router-dom";
 import { getAuthToken } from "../api.jsx";
+import { getCoordinates } from "../geocoder.jsx";
 import {
   getCities,
   createCity,
@@ -22,6 +23,8 @@ const Cities = () => {
   const [editingCityId, setEditingCityId] = useState(null);
   const [error, setError] = useState(null);
   const [showDistrictDialog, setShowDistrictDialog] = useState(false);
+  const [isGeocodeAvailable, setIsGeocodeAvailable] = useState(false);
+  const [isFetchingCoordinates, setIsFetchingCoordinates] = useState(false);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -50,6 +53,28 @@ const Cities = () => {
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setNewCity({ ...newCity, [name]: value });
+    if (name === "name") {
+      setIsGeocodeAvailable(value.trim() !== "");
+    }
+  };
+
+  const handleGeocode = async () => {
+    try {
+      const { name } = newCity;
+      const coordinates = await getCoordinates(name);
+      if (coordinates) {
+        setNewCity({
+          ...newCity,
+          x_coordinate: coordinates.latitude,
+          y_coordinate: coordinates.longitude,
+        });
+      } else {
+        setError("Не удалось найти координаты для данного города.");
+      }
+    } catch (error) {
+      console.error("Ошибка при получении координат:", error);
+      setError("Ошибка при попытке получить координаты.");
+    }
   };
 
   const handleSubmit = async (e) => {
@@ -86,6 +111,7 @@ const Cities = () => {
       x_coordinate: city.x_coordinate,
       y_coordinate: city.y_coordinate,
     });
+    setIsGeocodeAvailable(true);
     setEditingCityId(city.id);
   };
 
@@ -106,6 +132,7 @@ const Cities = () => {
       y_coordinate: "",
     });
     setEditingCityId(null);
+    setIsGeocodeAvailable(false);
   };
 
   const handleDialogSelectDistrict = (selectedItem) => {
@@ -138,32 +165,6 @@ const Cities = () => {
           />
         </div>
 
-        <div className="form-group">
-          <label htmlFor="xCoordinate">Координата X</label>
-          <input
-            type="text"
-            className="form-control"
-            id="xCoordinate"
-            name="x_coordinate"
-            placeholder="Введите координату X"
-            value={newCity.x_coordinate}
-            onChange={handleInputChange}
-          />
-        </div>
-
-        <div className="form-group">
-          <label htmlFor="yCoordinate">Координата Y</label>
-          <input
-            type="text"
-            className="form-control"
-            id="yCoordinate"
-            name="y_coordinate"
-            placeholder="Введите координату Y"
-            value={newCity.y_coordinate}
-            onChange={handleInputChange}
-          />
-        </div>
-
         <div className="input-group mb-3">
           <input
             type="text"
@@ -188,18 +189,52 @@ const Cities = () => {
           </div>
         </div>
 
-        <div className="btn-group">
-          <button type="submit" className="btn btn-primary">
+        <div className="input-group mb-3">
+          <input
+            type="text"
+            className="form-control"
+            placeholder="X координата"
+            value={newCity.x_coordinate || ""}
+            readOnly
+          />
+        </div>
+
+        <div className="input-group mb-3">
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Y координата"
+            value={newCity.y_coordinate || ""}
+            readOnly
+          />
+        </div>
+
+        <div className="btn-group mt-3">
+          <button
+            type="submit"
+            className="btn btn-primary"
+            disabled={isFetchingCoordinates}
+          >
             {editingCityId ? "Обновить" : "Создать"}
           </button>
           <button
             type="button"
             className="btn btn-secondary"
             onClick={resetForm}
+            disabled={isFetchingCoordinates}
           >
             Отменить
           </button>
+          <button
+            type="button"
+            className="btn btn-info"
+            onClick={handleGeocode}
+            disabled={!isGeocodeAvailable || isFetchingCoordinates}
+          >
+            Узнать координаты
+          </button>
         </div>
+
         {error && (
           <div className="alert alert-danger mt-3" role="alert">
             {error}
@@ -212,9 +247,9 @@ const Cities = () => {
         <thead>
           <tr>
             <th>Название</th>
-            <th>Координата X</th>
-            <th>Координата Y</th>
             <th>Федеральный округ</th>
+            <th>X координата</th>
+            <th>Y координата</th>
             <th>Действия</th>
           </tr>
         </thead>
@@ -222,9 +257,9 @@ const Cities = () => {
           {cities.map((city) => (
             <tr key={city.id}>
               <td>{city.name}</td>
+              <td>{city.federal_district_name}</td>
               <td>{city.x_coordinate}</td>
               <td>{city.y_coordinate}</td>
-              <td>{city.federal_district_name}</td>
               <td>
                 <div className="btn-group">
                   <button