@@ -125,6 +116,7 @@ function Dashboard() {
const [error, setError] = useState(null);
const [lastFetchTime, setLastFetchTime] = useState(null);
const [pingServices, setPingServices] = useState(null);
+ const [pingServicesConfig, setPingServicesConfig] = useState([]);
const [pingLoading, setPingLoading] = useState(true);
useEffect(() => {
@@ -224,6 +216,18 @@ function Dashboard() {
fetchStats();
}, []);
+ useEffect(() => {
+ let cancelled = false;
+ api.get('/ping-services-list')
+ .then(({ data }) => {
+ if (!cancelled && Array.isArray(data?.list)) setPingServicesConfig(data.list);
+ })
+ .catch(() => {
+ if (!cancelled) setPingServicesConfig([]);
+ });
+ return () => { cancelled = true; };
+ }, []);
+
useEffect(() => {
let cancelled = false;
setPingLoading(true);
@@ -270,9 +274,9 @@ function Dashboard() {
)}
/>
- {/* Пинг до сервисов: Google, Cloudflare, Yandex, Instagram */}
+ {/* Пинг до сервисов (список из настроек / Пинг сервисов) */}
- {PING_SERVICES_CONFIG.map((config) => (
+ {pingServicesConfig.map((config) => (
{
+ setLoading(true);
+ setError('');
+ try {
+ const res = await api.get('/ui-settings');
+ const data = res?.data || {};
+ setRawSettings(data);
+ setEtag(String(res?.headers?.etag || res?.headers?.ETag || '').replace(/"/g, ''));
+ const list = Array.isArray(data.pingServicesList) ? data.pingServicesList : [];
+ setItems(list.map((s) => ({
+ id: String(s?.id ?? '').trim() || slugId(s?.name),
+ name: String(s?.name ?? '').trim(),
+ host: String(s?.host ?? '').trim(),
+ port: Math.max(1, parseInt(s?.port, 10) || 443),
+ icon: typeof s?.icon === 'string' ? s.icon : 'IconWorld',
+ color: typeof s?.color === 'string' ? s.color : 'primary',
+ })).filter((s) => s.host));
+ } catch (e) {
+ console.error(e);
+ setError('Не удалось загрузить настройки');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadSettings();
+ }, []);
+
+ const saveSettings = async () => {
+ setSaving(true);
+ setError('');
+ setSuccess('');
+ try {
+ const payload = {
+ ...rawSettings,
+ pingServicesList: items.map((s) => ({
+ id: s.id,
+ name: s.name,
+ host: s.host,
+ port: s.port,
+ icon: s.icon,
+ color: s.color,
+ })),
+ };
+ const res = await api.post('/ui-settings', { settings: payload, etag });
+ setRawSettings(payload);
+ setEtag(String(res?.data?.etag || etag));
+ setSuccess('Список сервисов сохранён');
+ setTimeout(() => setSuccess(''), 3000);
+ } catch (e) {
+ setError(e?.response?.data?.message || 'Не удалось сохранить');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const openAdd = () => {
+ setNewItem({
+ id: '',
+ name: '',
+ host: '',
+ port: '443',
+ icon: 'IconBrandGoogle',
+ color: 'blue',
+ });
+ setAddModalOpen(true);
+ };
+
+ const submitAdd = () => {
+ const name = String(newItem.name || '').trim();
+ const host = String(newItem.host || '').trim();
+ if (!name) { setError('Укажите название'); return; }
+ if (!host) { setError('Укажите хост'); return; }
+ const id = newItem.id?.trim() || slugId(name);
+ if (items.some((i) => i.id === id)) { setError('Такой ID уже есть'); return; }
+ setError('');
+ setItems((prev) => [...prev, {
+ id,
+ name,
+ host,
+ port: Math.max(1, parseInt(newItem.port, 10) || 443),
+ icon: newItem.icon || 'IconWorld',
+ color: newItem.color || 'primary',
+ }]);
+ setAddModalOpen(false);
+ setSuccess('Сервис добавлен. Нажмите «Сохранить».');
+ setTimeout(() => setSuccess(''), 3000);
+ };
+
+ const openEdit = (item) => {
+ setEditingItem(item);
+ setEditDraft({
+ id: item.id,
+ name: item.name,
+ host: item.host,
+ port: String(item.port),
+ icon: item.icon || 'IconWorld',
+ color: item.color || 'primary',
+ });
+ setEditModalOpen(true);
+ };
+
+ const submitEdit = () => {
+ const name = String(editDraft.name || '').trim();
+ const host = String(editDraft.host || '').trim();
+ if (!name) { setError('Укажите название'); return; }
+ if (!host) { setError('Укажите хост'); return; }
+ const id = editDraft.id?.trim() || editingItem.id;
+ if (id !== editingItem.id && items.some((i) => i.id === id)) { setError('Такой ID уже есть'); return; }
+ setError('');
+ setItems((prev) => prev.map((i) => (i.id === editingItem.id ? {
+ id,
+ name,
+ host,
+ port: Math.max(1, parseInt(editDraft.port, 10) || 443),
+ icon: editDraft.icon || 'IconWorld',
+ color: editDraft.color || 'primary',
+ } : i)));
+ setEditModalOpen(false);
+ setEditingItem(null);
+ setSuccess('Сервис обновлён. Нажмите «Сохранить».');
+ setTimeout(() => setSuccess(''), 3000);
+ };
+
+ const openDelete = (item) => {
+ setItemToDelete(item);
+ setDeleteModalOpen(true);
+ };
+
+ const confirmDelete = () => {
+ if (itemToDelete) {
+ setItems((prev) => prev.filter((i) => i.id !== itemToDelete.id));
+ setDeleteModalOpen(false);
+ setItemToDelete(null);
+ setSuccess('Сервис удалён. Нажмите «Сохранить».');
+ setTimeout(() => setSuccess(''), 3000);
+ }
+ };
+
+ const [searchTerm, setSearchTerm] = useState('');
+ const filtered = items.filter((i) => {
+ const q = searchTerm.trim().toLowerCase();
+ if (!q) return true;
+ return (i.name || '').toLowerCase().includes(q) || (i.host || '').toLowerCase().includes(q) || (i.id || '').toLowerCase().includes(q);
+ });
+
+ return (
+
+
}
+ actions={(
+
+
+
+
+ )}
+ />
+
+ {error &&
setError('')} onRetry={loadSettings} />}
+ {success && (
+
+ {success}
+
+ )}
+
+
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+ {filtered.length} из {items.length}
+
+
+
+
+
+
+ | Иконка |
+ ID |
+ Название |
+ Хост |
+ Порт |
+ Цвет |
+ Действия |
+
+
+
+ {loading ? (
+
+ | Загрузка... |
+
+ ) : filtered.length === 0 ? (
+
+ |
+ Нет сервисов. Нажмите «Добавить» или сохраните список — на главной будут использоваться сервисы по умолчанию.
+ |
+
+ ) : (
+ filtered.map((item) => {
+ const iconInfo = getIconById(item.icon);
+ return (
+
+ |
+
+
+
+ |
+ {item.id} |
+ {item.name} |
+ {item.host} |
+ {item.port} |
+
+ {item.color}
+ |
+
+
+
+
+
+ |
+
+ );
+ })
+ )}
+
+
+
+
+
+
+
+ setNewItem((p) => ({ ...p, id: v }))} placeholder="auto из названия" helpText="Уникальный ключ. Пусто — из названия." />
+
+
+ { setEditModalOpen(false); setEditingItem(null); }}
+ onSubmit={submitEdit}
+ title="Редактировать сервис"
+ >
+ setEditDraft((p) => ({ ...p, id: v }))} />
+ setEditDraft((p) => ({ ...p, name: v }))} />
+ setEditDraft((p) => ({ ...p, host: v }))} />
+ setEditDraft((p) => ({ ...p, port: v }))} min={1} max={65535} />
+ setEditDraft((p) => ({ ...p, icon: id }))} />
+
+
+
+
+
+
+ { setDeleteModalOpen(false); setItemToDelete(null); }}
+ />
+
+
+
+
+ {open && (
+
+
+
+
+
+ setSearch(e.target.value)}
+ autoFocus
+ />
+
+
+ {filtered.map((item) => (
+
+ ))}
+
+ {filtered.length === 0 && (
+
Ничего не найдено
+ )}
+
+ )}
+
+