From 3d2c6bf4448c7ef8100ecc17decf95f26dbc9bdb Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Tue, 20 Jun 2023 22:00:33 +0200
Subject: [PATCH] simplify with show remaining flow #397

---
 web/html/xui/inbound_client_table.html |  24 +++-
 web/html/xui/inbound_info_modal.html   | 170 ++++++++++++++-----------
 web/html/xui/inbounds.html             |  47 ++++---
 web/translation/translate.en_US.toml   |   2 +-
 web/translation/translate.fa_IR.toml   |   2 +-
 web/translation/translate.ru_RU.toml   |   2 +-
 web/translation/translate.zh_Hans.toml |   2 +-
 7 files changed, 152 insertions(+), 97 deletions(-)

diff --git a/web/html/xui/inbound_client_table.html b/web/html/xui/inbound_client_table.html
index 8d1dd985..86427ba5 100644
--- a/web/html/xui/inbound_client_table.html
+++ b/web/html/xui/inbound_client_table.html
@@ -29,11 +29,25 @@
     <a-tag v-if="!isClientEnabled(record, client.email)" color="red">{{ i18n "depleted" }}</a-tag>
 </template>                                    
 <template slot="traffic" slot-scope="text, client">
-    <a-tag :color="statsColor(record, client.email)">[[ sizeFormat(getUpStats(record, client.email)) ]] / [[ sizeFormat(getDownStats(record, client.email)) ]]</a-tag>
-    <template v-if="client._totalGB > 0">
-        <a-tag :color="statsColor(record, client.email)">[[client._totalGB]]GB</a-tag>
-    </template>
-    <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
+    <a-popover :overlay-class-name="themeSwitcher.darkClass">
+        <template slot="content" v-if="client.email">
+            <table cellpadding="2" width="100%">
+                <tr>
+                    <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
+                    <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
+                </tr>
+                <tr v-if="client.totalGB > 0">
+                    <td>{{ i18n "remained" }}</td>
+                    <td>[[ sizeFormat(client.totalGB - getUpStats(record, client.email) - getDownStats(record, client.email)) ]]</td>
+                </tr>
+            </table>
+        </template>
+        <a-tag :color="statsColor(record, client.email)">
+            [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] /
+            <template v-if="client.totalGB > 0">[[client._totalGB]]GB</template>
+            <template v-else>♾</template>
+        </a-tag>
+    </a-popover>
 </template>                                    
 <template slot="expiryTime" slot-scope="text, client, index">
     <template v-if="client.expiryTime > 0">
diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/inbound_info_modal.html
index 8cc0491e..3de5a2c2 100644
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -59,71 +59,108 @@
         </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>
-                <th>{{ i18n "usage" }}</th>
+                <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 "remained" }}</th>
                 <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
                 <th>{{ i18n "pages.inbounds.expireDate" }}</th>
-        <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>
-            </td>
-            <td>
-                <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>
-                <template v-if="infoModal.clientSettings.expiryTime > 0">
-                    <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
-                        [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
+            </tr>
+            <tr>
+                <td>
+                    <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>
-                </template>
-                <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="cyan">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
-                <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
-            </td>
-        </tr>
-    </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>
-    </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>
-    </template>
+                </td>
+                <td>
+                    <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>
+                    <template v-if="infoModal.clientSettings.expiryTime > 0">
+                        <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
+                            [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
+                        </a-tag>
+                    </template>
+                    <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="cyan">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
+                    <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
+                </td>
+            </tr>
+        </table>
+        <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
+            <a-divider>Subscription link</a-divider>
+            <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-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>
@@ -185,17 +222,6 @@
         </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 = {
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 88b4143a..73d7014d 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -203,12 +203,27 @@
                                 </template>
                             </template>
                             <template slot="traffic" slot-scope="text, dbInbound">
-                                <a-tag color="blue">[[ sizeFormat(dbInbound.up) ]] / [[ sizeFormat(dbInbound.down) ]]</a-tag>
-                                <template v-if="dbInbound.total > 0">
-                                    <a-tag v-if="dbInbound.up + dbInbound.down < dbInbound.total" color="cyan">[[ sizeFormat(dbInbound.total) ]]</a-tag>
-                                    <a-tag v-else color="red">[[ sizeFormat(dbInbound.total) ]]</a-tag>
-                                </template>
-                                <a-tag v-else color="green">{{ i18n "unlimited" }}</a-tag>
+                                <a-popover :overlay-class-name="themeSwitcher.darkClass">
+                                    <template slot="content">
+                                        <table cellpadding="2" width="100%">
+                                            <tr>
+                                                <td>↑[[ sizeFormat(dbInbound.up) ]]</td>
+                                                <td>↓[[ sizeFormat(dbInbound.down) ]]</td>
+                                            </tr>
+                                            <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
+                                                <td>{{ i18n "remained" }}</td>
+                                                <td>[[ sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
+                                            </tr>
+                                        </table>
+                                    </template>
+                                    <a-tag :color="dbInbound.total == 0 ? 'green' : dbInbound.up + dbInbound.down < dbInbound.total ? 'cyan' : 'red'">
+                                        [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
+                                        <template v-if="dbInbound.total > 0">
+                                            [[ sizeFormat(dbInbound.total) ]]
+                                        </template>
+                                        <template v-else>♾</template>
+                                    </a-tag>
+                                </a-popover>
                             </template>
                             <template slot="enable" slot-scope="text, dbInbound">
                                 <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id)"></a-switch>
@@ -257,18 +272,18 @@
     const columns = [{
         title: '{{ i18n "pages.inbounds.operate" }}',
         align: 'center',
-        width: 40,
+        width: 30,
         scopedSlots: { customRender: 'action' },
     }, {
         title: '{{ i18n "pages.inbounds.enable" }}',
         align: 'center',
-        width: 40,
+        width: 30,
         scopedSlots: { customRender: 'enable' },
     }, {
         title: "ID",
         align: 'center',
         dataIndex: "id",
-        width: 30,
+        width: 20,
     }, {
         title: '{{ i18n "pages.inbounds.remark" }}',
         align: 'center',
@@ -287,12 +302,12 @@
     }, {
         title: '{{ i18n "clients" }}',
         align: 'left',
-        width: 50,
+        width: 40,
         scopedSlots: { customRender: 'clients' },
     }, {
-        title: '{{ i18n "pages.inbounds.traffic" }}↑|↓',
+        title: '{{ i18n "pages.inbounds.traffic" }}',
         align: 'center',
-        width: 120,
+        width: 60,
         scopedSlots: { customRender: 'traffic' },
     }, {
         title: '{{ i18n "pages.inbounds.expireDate" }}',
@@ -305,8 +320,8 @@
         { title: '{{ i18n "pages.inbounds.operate" }}', width: 70, scopedSlots: { customRender: 'actions' } },
         { title: '{{ i18n "pages.inbounds.enable" }}', width: 30, scopedSlots: { customRender: 'enable' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 70, scopedSlots: { customRender: 'traffic' } },
-        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 50, scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 50, scopedSlots: { customRender: 'expiryTime' } },
         { title: 'UUID', width: 120, dataIndex: "id" },
     ];
 
@@ -314,8 +329,8 @@
         { title: '{{ i18n "pages.inbounds.operate" }}', width: 70, scopedSlots: { customRender: 'actions' } },
         { title: '{{ i18n "pages.inbounds.enable" }}', width: 30, scopedSlots: { customRender: 'enable' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 70, scopedSlots: { customRender: 'traffic' } },
-        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 50, scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 50, scopedSlots: { customRender: 'expiryTime' } },
         { title: 'Password', width: 120, dataIndex: "password" },
     ];
 
diff --git a/web/translation/translate.en_US.toml b/web/translation/translate.en_US.toml
index c35d5295..84571903 100644
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -12,7 +12,6 @@
 "protocol" = "Protocol"
 "search" = "Search"
 "filter" = "Filter"
-
 "loading" = "Loading"
 "second" = "Second"
 "minute" = "Minute"
@@ -48,6 +47,7 @@
 "install" = "Install"
 "clients" = "Clients"
 "usage" = "Usage"
+"remained" = "Remained"
 
 [menu]
 "dashboard" = "System Status"
diff --git a/web/translation/translate.fa_IR.toml b/web/translation/translate.fa_IR.toml
index c4d8a79f..1d4c373a 100644
--- a/web/translation/translate.fa_IR.toml
+++ b/web/translation/translate.fa_IR.toml
@@ -12,7 +12,6 @@
 "protocol" = "پروتکل"
 "search" = "جستجو"
 "filter" = "فیلتر"
-
 "loading" = "در حال بروزرسانی.."
 "second" = "ثانیه"
 "minute" = "دقیقه"
@@ -48,6 +47,7 @@
 "install" = "نصب"
 "clients" = "کاربران"
 "usage" = "استفاده"
+"remained" = "باقیمانده"
 
 [menu]
 "dashboard" = "وضعیت سیستم"
diff --git a/web/translation/translate.ru_RU.toml b/web/translation/translate.ru_RU.toml
index b80298e1..ac8bd787 100644
--- a/web/translation/translate.ru_RU.toml
+++ b/web/translation/translate.ru_RU.toml
@@ -12,7 +12,6 @@
 "protocol" = "протокол"
 "search" = "поиск"
 "filter" = "Фильтр"
-
 "loading" = "загрузка"
 "second" = "секунда"
 "minute" = "минута"
@@ -48,6 +47,7 @@
 "install" = "установка"
 "clients" = "клиенты"
 "usage" = "использование"
+"remained" = "остались"
 
 [menu]
 "dashboard" = "статус системы"
diff --git a/web/translation/translate.zh_Hans.toml b/web/translation/translate.zh_Hans.toml
index 5dcd1522..648e4861 100644
--- a/web/translation/translate.zh_Hans.toml
+++ b/web/translation/translate.zh_Hans.toml
@@ -12,7 +12,6 @@
 "protocol" = "协议"
 "search" = "搜尋"
 "filter" = "过滤器"
-
 "loading" = "加载中"
 "second" = "秒"
 "minute" = "分钟"
@@ -48,6 +47,7 @@
 "install" = "安装"
 "clients" = "客户端"
 "usage" = "用法"
+"remained" = "仍然存在"
 
 [menu]
 "dashboard" = "系统状态"