+// {error &&
{error}
}
+// {message &&
{message}
}
+//
+//
Статус сети
+//
+//
Ethernet (eth0)
+//
IP: {networkStatus.eth0?.ip || 'Не назначено'}
+//
Маска: {networkStatus.eth0?.netmask || 'Не назначено'}
+//
Шлюз: {networkStatus.eth0?.gateway || 'Не назначено'}
+//
+//
+//
WiFi (wlan0)
+//
IP: {networkStatus.wlan0?.ip || 'Не назначено'}
+//
Маска: {networkStatus.wlan0?.netmask || 'Не назначено'}
+//
Шлюз: {networkStatus.wlan0?.gateway || 'Не назначено'}
+//
Подключен к сети: {connectedSSID || 'Не подключено'}
{/* Отображаем SSID */}
+//
+// {connectedSSID &&
+//
Отключиться от WiFi } {/* Кнопка отключения */}
+//
+//
+//
Настройка статического IP
+//
+//
Ethernet (eth0)
+// IP:
+// Маска:
+// Шлюз:
+// applyStaticIPConfig('eth0')}>Применить eth0
+//
+//
+//
+//
WiFi (wlan0)
+// IP:
+// Маска:
+// Шлюз:
+// applyStaticIPConfig('wlan0')}>Применить wlan0
+//
+//
+//
WiFi Сканер и подключение
+//
+//
+
Сканирование WiFi
+ {error &&
{error}
}
+ {message &&
{message}
}
+
+
+ {isScanning ? 'Сканирование...' : 'Сканировать WiFi'}
+
+
+ {wifiNetworks.length > 0 && (
+
+ {wifiNetworks.map((network, index) => (
+
+ {network.ssid} (Сигнал: {network.signal}, Безопасность: {network.security || 'Открытая'})
+ setSsid(network.ssid)}>Выбрать
+
+ ))}
+
+ )}
+
+
Подключение к WiFi
+
SSID:
+
setSsid(e.target.value)} />
+
Пароль:
+
setPassword(e.target.value)} />
+
+ {isConnecting ? 'Подключение...' : 'Подключиться'}
+
+
Loading configuration...
;
+ }
+
+
+ const yamlString = config ? `network:\n version: ${config.network.version}\n renderer: ${config.network.renderer}\n ethernets:\n eth0:\n dhcp4: ${config.network.ethernets.eth0.dhcp4 === undefined ? 'yes' : (config.network.ethernets.eth0.dhcp4 ? 'yes' : 'no')}\n addresses: ${config.network.ethernets.eth0.addresses ? JSON.stringify(config.network.ethernets.eth0.addresses).replace(/,/g, ', ') : '[]'}\n gateway4: ${config.network.ethernets.eth0.gateway4 || 'null'}\n nameservers:\n addresses: ${JSON.stringify(config.network.ethernets.eth0.nameservers.addresses).replace(/,/g, ', ')}` : '';
+
+
+ return (
+
+ Загрузка информации о сети...
;
+ }
+
+ if (error) {
+ return (
+
+ Ошибка при загрузке сетевой информации: {error.message}
+ {macAddress?.error &&
Ошибка MAC: {macAddress.error}
}
+ {ipAddresses?.error &&
Ошибка IP: {ipAddresses.error}
}
+
+ {macAddress && macAddress.mac_address ? (
+
MAC-адрес (eth0): {macAddress.mac_address}
+ ) : (
+ macAddress && macAddress.error ? (
+
Ошибка получения MAC-адреса: {macAddress.error}
+ ) : (
+
MAC-адрес (eth0): Не удалось получить
+ )
+ )}
+
+ {ipAddresses && ipAddresses.ip_addresses && ipAddresses.ip_addresses.length > 0 ? (
+
+
IP-адреса:
+
+ {ipAddresses.ip_addresses.map((ip, index) => (
+ {ip}
+ ))}
+
+
+ ) : (
+ ipAddresses && ipAddresses.error ? (
+
Ошибка получения IP-адресов: {ipAddresses.error}
+ ) : (
+
IP-адреса (eth0): Не найдены
+ )
+ )}
+
+
+ //
+//
+// {ipParts.map((part, index) => (
+//
+// handleIpPartChange(index, e.target.value)}
+// className="p-inputtext-sm p-mr-1"
+// maxLength="3"
+// style={{ width: '50px', textAlign: 'center' }}
+// keyfilter="pint"
+// />
+// {index < 3 && . }
+//
+// ))}
+// /
+// handleSubnetMaskChange(e.value)} // e.value уже число или null
+// min={0}
+// max={32}
+// className="p-inputnumber-sm"
+// style={{ width: '60px' }}
+// keyfilter="pint"
+// />
+//
+// {/* Для отображения полного IP адреса (опционально) */}
+// {currentFullIp && (
+//
+// Полный IP адрес: {currentFullIp}
+//
+// )}
+// {(!isValidIpAddress(ipParts) || !isValidSubnetMask(subnetMask)) && (
+//
+// Неверный IP адрес или маска подсети.
+//
+// )}
+//
+
+ );
+};
+
+export default IPGatewayInput;
diff --git a/interface/src/components/menu/menu.jsx b/interface/src/components/menu/menu.jsx
new file mode 100644
index 0000000..6831479
--- /dev/null
+++ b/interface/src/components/menu/menu.jsx
@@ -0,0 +1,28 @@
+import {Menubar} from 'primereact/menubar';
+
+import 'primeicons/primeicons.css';
+
+export default function NavMenu() {
+
+ let items = [
+ {
+ label: 'home',
+ icon: 'pi pi-home',
+ url: "/home"
+ },
+
+ ];
+
+ const start =
+
+
+ )
+
+
+}
+
+
+
diff --git a/interface/src/components/wlan.jsx b/interface/src/components/wlan.jsx
new file mode 100644
index 0000000..585acba
--- /dev/null
+++ b/interface/src/components/wlan.jsx
@@ -0,0 +1,16 @@
+import './wlan/wlan.css';
+import FormConnect from "./wlan/form_connect.jsx";
+import HotspotControl from "./wlan/hotspot_control.jsx";
+import NetworkInfo from "./wlan/network_info.jsx";
+
+function Wlan() {
+ const apiUrl = '/api/wlan';
+
+ return (
+
+
Управление Wi-Fi
+
+ );
+}
+
+export default Wlan;
\ No newline at end of file
diff --git a/interface/src/components/wlan/form_connect.jsx b/interface/src/components/wlan/form_connect.jsx
new file mode 100644
index 0000000..4e3e115
--- /dev/null
+++ b/interface/src/components/wlan/form_connect.jsx
@@ -0,0 +1,44 @@
+import {useState} from 'react';
+import NetworkList from "./network_list.jsx";
+
+
+const FormConnect = ({apiUrl}) => {
+ const [ssid, setSSID] = useState('');
+ const [password, setPassword] = useState('');
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ try {
+ const response = await fetch(`${apiUrl}/connect`, {
+ method: 'POST',
+ headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+ body: `ssid=${encodeURIComponent(ssid)}&password=${encodeURIComponent(password)}`,
+ });
+ const result = await response.json();
+ alert(result.status);
+ } catch (error) {
+ alert("Ошибка подключения");
+ }
+ };
+
+ const handleNetworkSelect = (selectedSSID) => {
+ setSSID(selectedSSID);
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default FormConnect;
\ No newline at end of file
diff --git a/interface/src/components/wlan/hotspot_control.jsx b/interface/src/components/wlan/hotspot_control.jsx
new file mode 100644
index 0000000..511884f
--- /dev/null
+++ b/interface/src/components/wlan/hotspot_control.jsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+
+const HotspotControl = ({ apiUrl }) => {
+ const [ssid, setSSID] = useState('');
+ const [password, setPassword] = useState('');
+
+ const enableHotspot = async () => {
+ try {
+ const response = await fetch(`${apiUrl}/enable-hotspot`, {
+ method: 'POST',
+ body: `ssid=${ssid}&password=${password}`,
+ });
+ alert(await response.text());
+ } catch (error) {
+ alert("Ошибка включения точки доступа");
+ }
+ };
+
+ const disableHotspot = async () => {
+ try {
+ const response = await fetch(`${apiUrl}/disable-hotspot`);
+ alert(await response.text());
+ } catch (error) {
+ alert("Ошибка отключения точки доступа");
+ }
+ };
+
+ return (
+
+
Точка доступа
+ Включить
+ Отключить
+
+ );
+};
+
+export default HotspotControl;
\ No newline at end of file
diff --git a/interface/src/components/wlan/network_info.jsx b/interface/src/components/wlan/network_info.jsx
new file mode 100644
index 0000000..8681790
--- /dev/null
+++ b/interface/src/components/wlan/network_info.jsx
@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+
+const NetworkInfo = ({ apiUrl }) => {
+ const [info, setInfo] = useState({
+ ip: '-',
+ netmask: '-',
+ gateway: '-',
+ mac: '-',
+ connected: false,
+ });
+
+ useEffect(() => {
+ const fetchInfo = async () => {
+ try {
+ const response = await fetch(`${apiUrl}/network-info`);
+ const data = await response.json();
+ setInfo(data);
+ } catch (error) {
+ console.error("Ошибка получения информации:", error);
+ }
+ };
+ fetchInfo();
+ }, [apiUrl]);
+
+ return (
+
+
Сетевая информация:
+
IP: {info.ip}
+
Маска: {info.netmask}
+
Шлюз: {info.gateway}
+
MAC: {info.mac}
+
Статус: {info.connected ? "Подключено" : "Отключено"}
+
+
Доступные сети:
+ onConnect(e.target.value)}>
+ Выберите сеть
+ {networks.map((network, index) => (
+
+ {network.ssid} ({network.security}, {network.bars})
+
+ ))}
+
+
+ );
+};
+
+export default NetworkList;
\ No newline at end of file
diff --git a/interface/src/components/wlan/wlan.css b/interface/src/components/wlan/wlan.css
new file mode 100644
index 0000000..a93b641
--- /dev/null
+++ b/interface/src/components/wlan/wlan.css
@@ -0,0 +1,10 @@
+.network-info {
+ border: 1px solid #ccc;
+ padding: 1rem;
+ margin: 1rem 0;
+ border-radius: 4px;
+}
+
+.network-info p {
+ margin: 0.5rem 0;
+}
\ No newline at end of file
diff --git a/interface/src/main.jsx b/interface/src/main.jsx
new file mode 100644
index 0000000..f85044f
--- /dev/null
+++ b/interface/src/main.jsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import "primereact/resources/themes/arya-purple/theme.css";
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+import 'primereact/resources/primereact.css';
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+ 
;
+
+ return (
+