From 43bb16be4b242261b46f4ec4ffbe025916d52c49 Mon Sep 17 00:00:00 2001
From: Hossin Asaadi <hossin.asaadi@gmail.com>
Date: Sun, 13 Nov 2022 10:09:43 -0500
Subject: [PATCH] add TotalGb and expireDate to  Vless.html

---
 web/html/xui/form/protocol/vless.html | 154 ++++++++++++++++----------
 1 file changed, 95 insertions(+), 59 deletions(-)

diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 0b6e6a5f..72f9262b 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -1,87 +1,123 @@
 {{define "form/vless"}}
-<a-form layout="inline" v-for="(vless, index) in inbound.settings.vlesses"
+<a-form layout="inline">
+<a-collapse activeKey="0"  v-for="(vless, index) in inbound.settings.vlesses"
 :key="`vless-${index}`">
-    <a-form layout="inline">
-        <a-form-item label="Email">
-            <a-input v-model.trim="vless.email"></a-input>
+
+    <a-collapse-panel :header="getHeaderText(vless.email)">
+        <a-tag v-if="isExpiry(index) || ((getUpStats(vless.email) + getDownStats(vless.email)) > vless.totalGB && vless.totalGB != 0)" color="red" style="margin-bottom: 10px;display: block;text-align: center;">Account is (Expired|Traffic Ended) And Disabled</a-tag>
+
+        <a-form layout="inline">
+            <a-form-item label="Email">
+                <a-input v-model.trim="vless.email"></a-input>
+            </a-form-item>
+            <a-form-item>
+                <span slot="label">
+                    IP Count Limit
+                    <a-tooltip>
+                        <template slot="title">
+                            disable inbound if more than entered count (0 for disable limit ip)
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+
+                <a-input type="number" v-model.number="vless.limitIp"></a-input>
+            </a-form-item>
+            <a-form-item v-if="vless.email && vless.limitIp > 0 && isEdit">
+                <span slot="label">
+                    IP log
+                    <a-tooltip>
+                        <template slot="title">
+                            IPs history Log (before enabling inbound after it has been disabled by IP limit, you should clear the log)
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <a-form layout="block">
+
+                    <a-textarea readonly @click="getDBClientIps(vless.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 0.5, maxRows: 10 }">
+                    </a-textarea>
+
+                    <a-button type="danger" @click="clearDBClientIps(vless.email,$event)" >clear log</a-button>
+                </a-form>
+            </a-form-item>
+        </a-form>
+        <a-form-item label="id">
+            <a-input v-model.trim="vless.id"></a-input>
+        </a-form-item>
+        <a-form-item v-if="inbound.xtls" label="flow">
+            <a-select v-model="vless.flow" style="width: 150px">
+                <a-select-option value="">{{ i18n "none" }}</a-select-option>
+                <a-select-option v-for="key in FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+            </a-select>
         </a-form-item>
         <a-form-item>
             <span slot="label">
-                IP Count Limit
+                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
                 <a-tooltip>
                     <template slot="title">
-                        disable inbound if more than entered count (0 for disable limit ip)
+                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
                     </template>
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-
-            <a-input type="number" v-model.number="vless.limitIp"></a-input>
+            <a-input-number v-model="vless._totalGB" :min="0"></a-input-number>
         </a-form-item>
-        <a-form-item v-if="vless.email && vless.limitIp > 0 && isEdit">
+        <a-form-item>
             <span slot="label">
-                IP log
+                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
                 <a-tooltip>
                     <template slot="title">
-                        IPs history Log (before enabling inbound after it has been disabled by IP limit, you should clear the log)
+                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
                     </template>
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-form layout="block">
-
-                <a-textarea readonly @click="getDBClientIps(vless.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 0.5, maxRows: 10 }">
-                </a-textarea>
-
-                <a-button type="danger" @click="clearDBClientIps(vless.email,$event)" >clear log</a-button>
-            </a-form>
+            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+                           v-model="vless._expiryTime" style="width: 300px;"></a-date-picker>
         </a-form-item>
-    </a-form>
-    <a-form-item label="id">
-        <a-input v-model.trim="vless.id"></a-input>
-    </a-form-item>
-    <a-form-item v-if="inbound.xtls" label="flow">
-        <a-select v-model="vless.flow" style="width: 150px">
-            <a-select-option value="">{{ i18n "none" }}</a-select-option>
-            <a-select-option v-for="key in FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-        </a-select>
-    </a-form-item>
+        <a-form layout="inline">
+            <a-tag color="blue">[[ sizeFormat(getUpStats(vless.email)) ]] / [[ sizeFormat(getDownStats(vless.email)) ]]</a-tag>
+            <a-form v-if="vless._totalGB > 0">
+                <a-tag color="red">used : [[ sizeFormat(getUpStats(vless.email) + getDownStats(vless.email)) ]]</a-tag>
+            </a-form>
+        </a-form>
 
         <!--Add Svg Icon-->
         <svg
 
-        @click="addClient(inbound.protocol,vless, inbound.settings.vlesses)"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        width="24"
-        height="24"
-        class="ml-2 cursor-pointer"
-        >
-        <path fill="none" d="M0 0h24v24H0z" />
-        <path
-        fill="green"
-        d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"
-        />
-    </svg>
+            @click="addClient(inbound.protocol,vless, inbound.settings.vlesses)"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            class="ml-2 cursor-pointer"
+            >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+            fill="green"
+            d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"
+            />
+        </svg>
 
-    <!--Remove Svg Icon-->
-    <svg
-        v-show="inbound.settings.vlesses.length > 1"
-        @click="removeClient(index, inbound.settings.vlesses)"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        width="24"
-        height="24"
-        class="ml-2 cursor-pointer"
-        >
-        <path fill="none" d="M0 0h24v24H0z" />
-        <path
-        fill="#EC4899"
-        d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"
-        />
-    </svg>
-    <a-divider style="height: 2px; background-color: #7e7e7e" />
-</a-form>
+        <!--Remove Svg Icon-->
+        <svg
+            v-show="inbound.settings.vlesses.length > 1"
+            @click="removeClient(index, inbound.settings.vlesses)"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            class="ml-2 cursor-pointer"
+            >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+            fill="#EC4899"
+            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"
+            />
+        </svg>
+
+    </a-form>
 
 <a-form layout="inline">
     <a-form-item label="fallbacks">