From 473d410bc4e8ad6a31abd3ae368c5e69e736497d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B8=D0=BA=D1=82=D0=BE=D1=80?=
 <78488229+viktor138irk@users.noreply.github.com>
Date: Thu, 7 May 2026 00:50:41 +0900
Subject: [PATCH] Update network UI for port ranges

---
 web/templates/network.html | 39 +++++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/web/templates/network.html b/web/templates/network.html
index 3e45988..701e714 100644
--- a/web/templates/network.html
+++ b/web/templates/network.html
@@ -11,7 +11,7 @@
     <header class="topbar">
       <div>
         <div class="brand">Сеть</div>
-        <div class="muted">NAT Router для VPS и проброс портов к VM</div>
+        <div class="muted">NAT Router для VPS, проброс одиночных портов и диапазонов к VM</div>
       </div>
       <div class="top-meta">
         <span>user: {{ user }}</span>
@@ -76,17 +76,17 @@
       <article class="card">
         <div class="card-head">
           <h2>Добавить проброс порта</h2>
-          <span class="pill">DNAT auto IP</span>
+          <span class="pill">DNAT auto IP · ranges</span>
         </div>
         <form method="post" action="/network/forward/add" class="form-grid">
           <label>
             <span>Описание</span>
-            <input type="text" name="note" placeholder="Например: сайт, SSH, SIP, панель управления">
+            <input type="text" name="note" placeholder="Например: сайт, SSH, SIP, RTP MikoPBX">
           </label>
 
           <label>
-            <span>Внешний порт</span>
-            <input type="number" name="external_port" min="1" max="65535" placeholder="Например: 80, 443, 2222" required>
+            <span>Внешний порт или диапазон</span>
+            <input type="text" name="external_port" pattern="[0-9]{1,5}([:-][0-9]{1,5})?" placeholder="80, 443, 2222 или 10000-20000" required>
           </label>
 
           <label>
@@ -101,8 +101,8 @@
           <input type="hidden" name="guest_ip" value="auto">
 
           <label>
-            <span>Внутренний порт</span>
-            <input type="number" name="guest_port" list="standard-ports" min="1" max="65535" placeholder="Выбери стандартный или введи вручную" required>
+            <span>Внутренний порт или диапазон</span>
+            <input type="text" name="guest_port" list="standard-ports" pattern="[0-9]{1,5}([:-][0-9]{1,5})?" placeholder="Выбери стандартный или введи 10000-20000" required>
             <datalist id="standard-ports">
               <option value="20" label="FTP data"></option>
               <option value="21" label="FTP"></option>
@@ -133,6 +133,7 @@
               <option value="8080" label="HTTP alternative"></option>
               <option value="8443" label="HTTPS alternative"></option>
               <option value="10000" label="Webmin / RTP start"></option>
+              <option value="10000-20000" label="RTP / VoIP media range"></option>
             </datalist>
           </label>
 
@@ -145,7 +146,7 @@
           </label>
 
           <div class="notice">
-            Внутренний IP VM подставится автоматически. Внутренний порт можно выбрать из списка или вписать любой вручную.
+            Можно указать одиночный порт или диапазон. Для VoIP/RTP обычно: внешний 10000-20000 → внутренний 10000-20000, протокол udp. Длины диапазонов должны совпадать.
           </div>
 
           <button class="primary wide">Добавить и применить</button>
@@ -232,20 +233,32 @@
       </div>
       <table>
         <thead>
-          <tr><th>Внешний порт</th><th>VM</th><th>Внутренний адрес</th><th>Протокол</th><th>Описание</th><th></th></tr>
+          <tr><th>Проброс</th><th>VM</th><th>Внутренний адрес</th><th>Протокол</th><th>Описание</th><th>Действия</th></tr>
         </thead>
         <tbody>
         {% for item in ctx.forwards %}
           <tr>
-            <td class="strong">{{ item.external_port }} → {{ item.guest_port }}</td>
+            <td class="strong">
+              {{ item.external_port_label|default(item.external_port) }} → {{ item.guest_port_label|default(item.guest_port) }}
+              {% if item.is_range %}<span class="status warn">range</span>{% endif %}
+            </td>
             <td>{{ item.vm_name }}</td>
             <td>{{ item.guest_ip }}</td>
             <td><span class="status ok">{{ item.protocol }}</span></td>
             <td>{{ item.note }}</td>
             <td>
-              <form method="post" action="/network/forward/{{ item.id }}/delete">
-                <button class="danger">Удалить</button>
-              </form>
+              <div class="actions">
+                <form method="post" action="/network/diagnose">
+                  <input type="hidden" name="vm_name" value="{{ item.vm_name }}">
+                  <input type="hidden" name="external_port" value="{{ item.external_port }}">
+                  <input type="hidden" name="guest_port" value="{{ item.guest_port }}">
+                  <input type="hidden" name="protocol" value="{{ item.protocol }}">
+                  <button>Диагностика</button>
+                </form>
+                <form method="post" action="/network/forward/{{ item.id }}/delete">
+                  <button class="danger">Удалить</button>
+                </form>
+              </div>
             </td>
           </tr>
         {% else %}