From 85fb2fda5eb2b3485ed08944273e84d9da0ce10f Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Wed, 21 Jun 2023 14:21:34 +0330
Subject: simplify with show remaining flow

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>
---
 web/html/xui/inbound_info_modal.html | 150 +++++++++++++++++++----------------
 1 file changed, 83 insertions(+), 67 deletions(-)

(limited to 'web/html/xui/inbound_info_modal.html')

diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/inbound_info_modal.html
index d44634a0..00cb5ce6 100644
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -8,8 +8,7 @@
     width="600px"
     >
     <table style="margin-bottom: 10px; width: 100%;">
-        <tr>
-            <td>
+        <tr><td>
                 <table>
                     <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="green">[[ dbInbound.protocol ]]</a-tag></td></tr>
                     <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag color="blue">[[ dbInbound.address ]]</a-tag></td></tr>
@@ -21,7 +20,6 @@
                     <tr>
                         <td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td>
                     </tr>
-
                     <template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
                         <tr v-if="inbound.host"><td>{{ i18n "host" }}</td><td><a-tag color="green">[[ inbound.host ]]</a-tag></td></tr>
                         <tr v-else><td>{{ i18n "host" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
@@ -46,8 +44,7 @@
                         <tr><td>grpc multiMode</td><td><a-tag color="green">[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
                     </template>
                 </table>
-            </td>
-        </tr>
+            </td></tr>
         <tr colspan="2" v-if="dbInbound.hasLink()">
             <td v-if="inbound.tls">
                 tls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
@@ -66,48 +63,56 @@
         </tr>
     </table>
     <template v-if="infoModal.clientSettings">
-    <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
-    <table style="margin-bottom: 10px;">
-        <tr>
-            <td>{{ i18n "pages.inbounds.email" }}</td>
-            <td><a-tag color="green">[[ infoModal.clientSettings.email ]]</a-tag></td>
-        </tr>
-        <tr v-if="infoModal.clientSettings.id">
-            <td>ID</td>
-            <td><a-tag color="green">[[ infoModal.clientSettings.id ]]</a-tag></td>
-        </tr>
-        <tr v-if="infoModal.inbound.canEnableTlsFlow()">
-            <td>Flow</td>
-            <td><a-tag color="green">[[ infoModal.clientSettings.flow ]]</a-tag></td>
-        </tr>
-        <tr v-if="infoModal.clientSettings.password">
-            <td>Password</td>
-            <td><a-tag color="green">[[ infoModal.clientSettings.password ]]</a-tag></td>
-        </tr>
-        <tr>
-            <td>{{ i18n "status" }}</td>
-            <td>
-                <a-tag v-if="isEnable" color="blue">{{ i18n "enabled" }}</a-tag>
-                <a-tag v-else color="red">{{ i18n "disabled" }}</a-tag>
-                <a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
-            </td>
-        </tr>
-    </table>
-    <table style="margin-bottom: 10px; width: 100%;">
+        <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
+        <table style="margin-bottom: 10px;">
+            <tr>
+                <td>{{ i18n "pages.inbounds.email" }}</td>
+                <td><a-tag color="green">[[ infoModal.clientSettings.email ]]</a-tag></td>
+            </tr>
+            <tr v-if="infoModal.clientSettings.id">
+                <td>ID</td>
+                <td><a-tag color="green">[[ infoModal.clientSettings.id ]]</a-tag></td>
+            </tr>
+            <tr v-if="infoModal.inbound.canEnableTlsFlow()">
+                <td>Flow</td>
+                <td><a-tag color="green">[[ infoModal.clientSettings.flow ]]</a-tag></td>
+            </tr>
+            <tr v-if="infoModal.clientSettings.password">
+                <td>Password</td>
+                <td><a-tag color="green">[[ infoModal.clientSettings.password ]]</a-tag></td>
+            </tr>
+            <tr>
+                <td>{{ i18n "status" }}</td>
+                <td>
+                    <a-tag v-if="isEnable" color="blue">{{ i18n "enabled" }}</a-tag>
+                    <a-tag v-else color="red">{{ i18n "disabled" }}</a-tag>
+                    <a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
+                </td>
+            </tr>
+            <tr v-if="infoModal.clientStats">
+                <td>{{ i18n "usage" }}</td>
+                <td>
+                    <a-tag color="green">[[ sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag>
+                    <a-tag color="blue">↑ [[ sizeFormat(infoModal.clientStats.up) ]] / [[ sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
+                </td>
+            </tr>
+        </table>
+        <table style="margin-bottom: 10px; width: 100%;">
             <tr>
-                <th>{{ i18n "usage" }}</th>
+                <th>{{ i18n "remained" }}</th>
                 <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
                 <th>{{ i18n "pages.inbounds.expireDate" }}</th>
+            </tr>
         <tr>
             <td>
-                <a-tag v-if="infoModal.clientStats" color="green">
-                    [[ sizeFormat(infoModal.clientStats['up']) ]] / 
-                    [[ sizeFormat(infoModal.clientStats['down']) ]]
-                    ([[ sizeFormat(infoModal.clientStats['up'] + infoModal.clientStats['down']) ]])
+                <a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
+                    [[ sizeFormat(infoModal.clientSettings.totalGB - infoModal.clientStats.up - infoModal.clientStats.down) ]]
                 </a-tag>
             </td>
             <td>
-                <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">[[ sizeFormat(infoModal.clientSettings.totalGB) ]]</a-tag>
+                <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
+                    [[ sizeFormat(infoModal.clientSettings.totalGB) ]]
+                </a-tag>
                 <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
             </td>
             <td>
@@ -123,15 +128,44 @@
     </table>
     <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
         <a-divider>Subscription link</a-divider>
-        <a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a>
-        <a-icon id="copy-sub-link" type="snippets" @click="copyToClipboard('copy-sub-link', infoModal.subLink)"></a-icon>
+        <a-row>
+            <a-col :span="22"><a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a></a-col>
+            <a-col :span="2">
+                <a-tooltip title='{{ i18n "copy" }}'>
+                    <button class="ant-btn ant-btn-primary" id="copy-sub-link" @click="copyToClipboard('copy-sub-link', infoModal.subLink)">
+                        <a-icon type="snippets"></a-icon>
+                    </button>
+                </a-tooltip>
+            </a-col>
+        </a-row>
     </template>
     <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
         <a-divider>Telegram Username</a-divider>
-        <a :href="[[ infoModal.tgLink ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a>
-        <a-icon id="copy-tg-link" type="snippets" @click="copyToClipboard('copy-tg-link', '@' + infoModal.clientSettings.tgId)"></a-icon>
+        <a-row>
+            <a-col :span="22"><a :href="[[ infoModal.tgLink ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a></a-col>
+            <a-col :span="2">
+                <a-tooltip title='{{ i18n "copy" }}'>
+                    <button class="ant-btn ant-btn-primary" id="copy-tg-link" @click="copyToClipboard('copy-tg-link', '@' + infoModal.clientSettings.tgId)">
+                        <a-icon type="snippets"></a-icon>
+                    </button>
+                </a-tooltip>
+            </a-col>
+        </a-row>
     </template>
+    <template v-if="dbInbound.hasLink()">
+        <a-divider>URL</a-divider>
+        <a-row v-for="(link,index) in infoModal.links">
+            <a-col :span="22"><a-tag color="cyan">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
+            <a-col :span="2" style="text-align: right;">
+                <a-tooltip title='{{ i18n "copy" }}'>
+                    <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
+                        <a-icon type="snippets"></a-icon>
+                    </button>
+                </a-tooltip>
+            </a-col>
+        </a-row>
     </template>
+</template>
     <template v-else>
         <a-divider></a-divider>
         <table v-if="inbound.protocol == Protocols.SHADOWSOCKS" style="margin-bottom: 10px; width: 100%;">
@@ -139,8 +173,7 @@
                 <th>{{ i18n "encryption" }}</th>
                 <th>{{ i18n "password" }}</th>
                 <th>{{ i18n "pages.inbounds.network" }}</th>
-            </tr>
-            <tr>
+            </tr><tr>
                 <td><a-tag color="green">[[ inbound.settings.method ]]</a-tag></td>
                 <td><a-tag color="blue">[[ inbound.settings.password ]]</a-tag></td>
                 <td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td>
@@ -152,8 +185,7 @@
                 <th>{{ i18n "pages.inbounds.destinationPort" }}</th>
                 <th>{{ i18n "pages.inbounds.network" }}</th>
                 <th>FollowRedirect</th>
-            </tr>
-            <tr>
+            </tr><tr>
                 <td><a-tag color="green">[[ inbound.settings.address ]]</a-tag></td>
                 <td><a-tag color="blue">[[ inbound.settings.port ]]</a-tag></td>
                 <td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td>
@@ -166,18 +198,15 @@
                 <th>{{ i18n "password" }} Auth</th>
                 <th>{{ i18n "pages.inbounds.enable" }} udp</th>
                 <th>IP</th>
-            </tr>
-            <tr>
+            </tr><tr>
                 <td><a-tag color="green">[[ inbound.settings.auth ]]</a-tag></td>
                 <td><a-tag color="blue">[[ inbound.settings.udp]]</a-tag></td>
                 <td><a-tag color="green">[[ inbound.settings.ip ]]</a-tag></td>
-            </tr>
-            <tr v-if="inbound.settings.auth == 'password'">
+            </tr><tr v-if="inbound.settings.auth == 'password'">
                 <td> </td>
                 <td>{{ i18n "username" }}</td>
                 <td>{{ i18n "password" }}</td>
-            </tr>
-            <tr v-for="account,index in inbound.settings.accounts">
+            </tr><tr v-for="account,index in inbound.settings.accounts">
                 <td><a-tag color="green">[[ index ]]</a-tag></td>
                 <td><a-tag color="blue">[[ account.user ]]</a-tag></td>
                 <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
@@ -189,8 +218,7 @@
                 <th> </th>
                 <th>{{ i18n "username" }}</th>
                 <th>{{ i18n "password" }}</th>
-            </tr>
-            <tr v-for="account,index in inbound.settings.accounts">
+            </tr><tr v-for="account,index in inbound.settings.accounts">
                 <td><a-tag color="green">[[ index ]]</a-tag></td>
                 <td><a-tag color="blue">[[ account.user ]]</a-tag></td>
                 <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
@@ -198,20 +226,8 @@
         </table>
         </table>
     </template>
-    <div v-if="dbInbound.hasLink()">
-        <a-divider>URL</a-divider>
-        <a-row v-for="(link,index) in infoModal.links">
-            <a-col :span="21"><a-tag color="cyan">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
-            <a-col :span="3" style="text-align: right;">
-                <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
-                    <a-icon type="snippets"></a-icon>{{ i18n "copy" }}
-                </button>
-            </a-col>
-        </a-row>
-    </div>
 </a-modal>
 <script>
-
     const infoModal = {
         visible: false,
         inbound: new Inbound(),
-- 
cgit v1.2.3