feat: Add react-router-dom dependency and implement country flag emoji conversion in ServerManager

frontend/package.json

@@ -16,7 +16,8 @@
     "bootstrap": "^5.3.7",
     "react": "^19.1.0",
     "react-bootstrap": "^2.10.10",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",

frontend/src/ServerManager.jsx

@@ -213,6 +213,16 @@ function ServerManager() {
     if (e.key === 'Escape') handleCancelEdit();
   };
 
+  // Функция для преобразования кода страны в emoji-флаг
+  function countryToFlag(isoCode) {
+    if (!isoCode) return '';
+    return isoCode
+      .toUpperCase()
+      .replace(/./g, char =>
+        String.fromCodePoint(127397 + char.charCodeAt())
+      );
+  }
+
   return (
     <>
       {error && (
@@ -315,46 +325,6 @@ function ServerManager() {
             </div>
           </div>
 
-          {/* Bulk Update Card */}
-          <div className="card card-md mt-3">
-            <div className="card-header">
-              <h3 className="card-title">
-                <IconArrowsExchange className="icon me-2" />
-                Массовое обновление туннелей
-              </h3>
-            </div>
-            <div className="card-body">
-              <div className="mb-3">
-                <label className="form-label">Заменить с</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  value={bulkFrom}
-                  onChange={(e) => setBulkFrom(e.target.value)}
-                />
-              </div>
-              <div className="mb-3">
-                <label className="form-label">Заменить на</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  value={bulkTo}
-                  onChange={(e) => setBulkTo(e.target.value)}
-                />
-              </div>
-              <div className="form-footer">
-                <button 
-                  type="button" 
-                  className="btn btn-warning w-100"
-                  onClick={handleBulkUpdate}
-                >
-                  <IconArrowsExchange className="icon me-2" />
-                  Выполнить замену
-                </button>
-              </div>
-            </div>
-          </div>
-
           {/* Save Changes Card */}
           <div className="card card-md mt-3">
             <div className="card-header">
@@ -482,7 +452,7 @@ function ServerManager() {
                     <tr key={server.ip} className={editingServer === server.ip ? 'table-info' : ''}>
                       <td>{server.ip}</td>
                       <td>{server.dns}</td>
-                      <td><span className="badge bg-blue-lt text-blue">{server.country}</span></td>
+                      <td><span className="badge bg-blue-lt text-blue">{countryToFlag(server.country)} {server.country}</span></td>
                       <td>{server.provider}</td>
                       <td><span className="badge bg-green-lt text-green">{server.tunnel}</span></td>
                       <td className="text-end">
@@ -554,48 +524,51 @@ function ServerManager() {
   );
 }
 
-// Модальное окно для редактирования сервера
+// Модальное окно для редактирования сервера с backdrop и анимацией
 function EditServerModal({ show, server, onChange, onSave, onClose }) {
   if (!show || !server) return null;
   return (
-    <div className="modal fade show" style={{display: 'block'}} tabIndex="-1">
+    <>
-      <div className="modal-dialog">
+      <div className="modal fade show" style={{display: 'block'}} tabIndex="-1" role="dialog" aria-modal="true">
-        <div className="modal-content">
+        <div className="modal-dialog" role="document">
-          <div className="modal-header">
+          <div className="modal-content animate__animated animate__fadeInDown">
-            <h5 className="modal-title">Редактировать сервер</h5>
+            <div className="modal-header">
-            <button type="button" className="btn-close" onClick={onClose}></button>
+              <h5 className="modal-title">Редактировать сервер</h5>
-          </div>
+              <button type="button" className="btn-close" onClick={onClose}></button>
-          <div className="modal-body">
+            </div>
-            <form onSubmit={e => { e.preventDefault(); onSave(); }}>
+            <div className="modal-body">
-              <div className="mb-3">
+              <form onSubmit={e => { e.preventDefault(); onSave(); }}>
-                <label className="form-label">IP адрес</label>
+                <div className="mb-3">
-                <input type="text" className="form-control" value={server.ip} onChange={e => onChange({ ...server, ip: e.target.value })} />
+                  <label className="form-label">IP адрес</label>
-              </div>
+                  <input type="text" className="form-control" value={server.ip} onChange={e => onChange({ ...server, ip: e.target.value })} />
-              <div className="mb-3">
+                </div>
-                <label className="form-label">DNS имя</label>
+                <div className="mb-3">
-                <input type="text" className="form-control" value={server.dns} onChange={e => onChange({ ...server, dns: e.target.value })} />
+                  <label className="form-label">DNS имя</label>
-              </div>
+                  <input type="text" className="form-control" value={server.dns} onChange={e => onChange({ ...server, dns: e.target.value })} />
-              <div className="mb-3">
+                </div>
-                <label className="form-label">Страна</label>
+                <div className="mb-3">
-                <input type="text" className="form-control" value={server.country} onChange={e => onChange({ ...server, country: e.target.value })} />
+                  <label className="form-label">Страна</label>
-              </div>
+                  <input type="text" className="form-control" value={server.country} onChange={e => onChange({ ...server, country: e.target.value })} />
-              <div className="mb-3">
+                </div>
-                <label className="form-label">Провайдер</label>
+                <div className="mb-3">
-                <input type="text" className="form-control" value={server.provider} onChange={e => onChange({ ...server, provider: e.target.value })} />
+                  <label className="form-label">Провайдер</label>
-              </div>
+                  <input type="text" className="form-control" value={server.provider} onChange={e => onChange({ ...server, provider: e.target.value })} />
-              <div className="mb-3">
+                </div>
-                <label className="form-label">Тип туннеля</label>
+                <div className="mb-3">
-                <input type="text" className="form-control" value={server.tunnel} onChange={e => onChange({ ...server, tunnel: e.target.value })} />
+                  <label className="form-label">Тип туннеля</label>
-              </div>
+                  <input type="text" className="form-control" value={server.tunnel} onChange={e => onChange({ ...server, tunnel: e.target.value })} />
-            </form>
+                </div>
-          </div>
+              </form>
-          <div className="modal-footer">
+            </div>
-            <button type="button" className="btn btn-secondary" onClick={onClose}>Отмена</button>
+            <div className="modal-footer">
-            <button type="button" className="btn btn-primary" onClick={onSave}>Сохранить</button>
+              <button type="button" className="btn btn-secondary" onClick={onClose}>Отмена</button>
+              <button type="button" className="btn btn-primary" onClick={onSave}>Сохранить</button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+      <div className="modal-backdrop fade show"></div>
+    </>
   );
 }