diff options
Diffstat (limited to 'web/html/xui/inbound_client_table.html')
| -rw-r--r-- | web/html/xui/inbound_client_table.html | 246 |
1 files changed, 225 insertions, 21 deletions
diff --git a/web/html/xui/inbound_client_table.html b/web/html/xui/inbound_client_table.html index 138c91c3..5109fb28 100644 --- a/web/html/xui/inbound_client_table.html +++ b/web/html/xui/inbound_client_table.html @@ -2,34 +2,66 @@ <template slot="actions" slot-scope="text, client, index"> <a-tooltip> <template slot="title">{{ i18n "qrCode" }}</template> - <a-icon style="font-size: 24px;" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record,index);"></a-icon> + <a-icon style="font-size: 24px;" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record,index);"></a-icon> </a-tooltip> <a-tooltip> <template slot="title">{{ i18n "pages.client.edit" }}</template> - <a-icon style="font-size: 24px;" type="edit" @click="openEditClient(record.id,client);"></a-icon> + <a-icon style="font-size: 24px;" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon> </a-tooltip> <a-tooltip> <template slot="title">{{ i18n "info" }}</template> - <a-icon style="font-size: 24px;" type="info-circle" @click="showInfo(record,index);"></a-icon> + <a-icon style="font-size: 24px;" class="normal-icon" type="info-circle" @click="showInfo(record,index);"></a-icon> </a-tooltip> <a-tooltip> <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template> - <a-icon style="font-size: 24px;" type="retweet" @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0"></a-icon> + <a-popconfirm @confirm="resetClientTraffic(client,record.id,false)" + title='{{ i18n "pages.inbounds.resetTrafficContent"}}' + :overlay-class-name="themeSwitcher.currentTheme" + ok-text='{{ i18n "reset"}}' + cancel-text='{{ i18n "cancel"}}'> + <a-icon slot="icon" type="question-circle-o" style="color: blue"></a-icon> + <a-icon style="font-size: 24px;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon> + </a-popconfirm> </a-tooltip> <a-tooltip> <template slot="title"><span style="color: #FF4D4F"> {{ i18n "delete"}}</span></template> - <a-icon style="font-size: 24px;" type="delete" v-if="isRemovable(record.id)" @click="delClient(record.id,client)"></a-icon> + <a-popconfirm @confirm="delClient(record.id,client,false)" + title='{{ i18n "pages.inbounds.deleteClientContent"}}' + :overlay-class-name="themeSwitcher.currentTheme" + ok-text='{{ i18n "delete"}}' + ok-type="danger" + cancel-text='{{ i18n "cancel"}}'> + <a-icon slot="icon" type="question-circle-o" style="color: #e04141"></a-icon> + <a-icon style="font-size: 24px" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon> + </a-popconfirm> </a-tooltip> </template> <template slot="enable" slot-scope="text, client, index"> <a-switch v-model="client.enable" @change="switchEnableClient(record.id,client)"></a-switch> </template> +<template slot="online" slot-scope="text, client, index"> + <template v-if="isClientOnline(client.email)"> + <a-tag color="green">{{ i18n "online" }}</a-tag> + </template> + <template v-else> + <a-tag>{{ i18n "offline" }}</a-tag> + </template> +</template> <template slot="client" slot-scope="text, client"> + <a-tooltip> + <template slot="title"> + <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template> + <template v-else-if="!client.enable">{{ i18n "disabled" }}</template> + <template v-else-if="isClientOnline(client.email)">{{ i18n "online" }}</template> + </template> + <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"> + </a-badge> + </a-tooltip> [[ client.email ]] <a-tag v-if="!isClientEnabled(record, client.email)" color="red">{{ i18n "depleted" }}</a-tag> </template> <template slot="traffic" slot-scope="text, client"> - <a-popover :overlay-class-name="themeSwitcher.darkClass"> + <a-popover :overlay-class-name="themeSwitcher.currentTheme"> <template slot="content" v-if="client.email"> <table cellpadding="2" width="100%"> <tr> @@ -38,28 +70,200 @@ </tr> <tr v-if="client.totalGB > 0"> <td>{{ i18n "remained" }}</td> - <td>[[ sizeFormat(client.totalGB - getUpStats(record, client.email) - getDownStats(record, client.email)) ]]</td> + <td>[[ sizeFormat(getRemStats(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> - <svg style="fill: currentColor; height: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"/></svg> - </template> - </a-tag> + <table> + <tr> + <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> + [[ sizeFormat(getSumStats(record, client.email)) ]] + </td> + <td width="120px" v-if="!client.enable"> + <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" + :show-info="false" + :percent="statsProgress(record, client.email)"/> + </td> + <td width="120px" v-else-if="client.totalGB > 0"> + <a-progress :stroke-color="statsColor(record, client.email)" + :show-info="false" + :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''" + :percent="statsProgress(record, client.email)"/> + </td> + <td width="120px" v-else class="infinite-bar"> + <a-progress + :show-info="false" + :status="isClientOnline(client.email)? 'active' : ''" + :percent="100"></a-progress> + </td> + <td width="60px"> + <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template> + <span v-else style="font-weight: 100;font-size: 14pt;">∞</span> + </td> + </tr> + </table> </a-popover> </template> <template slot="expiryTime" slot-scope="text, client, index"> - <template v-if="client.expiryTime > 0"> - <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, client.expiryTime)"> - [[ DateUtil.formatMillis(client._expiryTime) ]] + <template v-if="client.expiryTime !=0 && client.reset >0"> + <a-popover :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span> + <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span> + </template> + <table> + <tr> + <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> + [[ remainedDays(client.expiryTime) ]] + </td> + <td width="120px" class="infinite-bar"> + <a-progress :show-info="false" + :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''" + :percent="expireProgress(client.expiryTime, client.reset)"/> + </td> + <td width="60px">[[ client.reset + "d" ]]</td> + </tr> + </table> + </a-popover> + </template> + <template v-else> + <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span> + <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span> + </template> + <a-tag style="min-width: 50px; border: none;" :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> + [[ remainedDays(client.expiryTime) ]] </a-tag> + </a-popover> + <a-tag v-else :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" style="border: 0;" class="infinite-tag">∞</a-tag> </template> - <a-tag v-else-if="client.expiryTime < 0" color="cyan"> - [[ client._expiryTime ]] {{ i18n "pages.client.days" }} - </a-tag> - <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag> +</template> +<template slot="actionMenu" slot-scope="text, client, index"> + <a-dropdown :trigger="['click']"> + <a-icon @click="e => e.preventDefault()" type="ellipsis" style="font-size: 20px;"></a-icon> + <a-menu slot="overlay" :theme="themeSwitcher.currentTheme"> + <a-menu-item v-if="record.hasLink()" @click="showQrcode(record.id,client);"> + <a-icon style="font-size: 14px;" type="qrcode"></a-icon> + {{ i18n "qrCode" }} + </a-menu-item> + <a-menu-item @click="openEditClient(record.id,client);"> + <a-icon style="font-size: 14px;" type="edit"></a-icon> + {{ i18n "pages.client.edit" }} + </a-menu-item> + <a-menu-item @click="showInfo(record.id,client);"> + <a-icon style="font-size: 14px;" type="info-circle"></a-icon> + {{ i18n "info" }} + </a-menu-item> + <a-menu-item @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0"> + <a-icon style="font-size: 14px;" type="retweet"></a-icon> + {{ i18n "pages.inbounds.resetTraffic" }} + </a-menu-item> + <a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,client)"> + <a-icon style="font-size: 14px;" type="delete"></a-icon> + <span style="color: #FF4D4F"> {{ i18n "delete"}}</span> + </a-menu-item> + <a-menu-item> + <a-switch v-model="client.enable" size="small" @change="switchEnableClient(record.id,client)"> + </a-switch> + {{ i18n "enable"}} + </a-menu-item> + </a-menu> + </a-dropdown> +</template> +<template slot="info" slot-scope="text, client, index"> + <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click"> + <template slot="content"> + <table> + <tr> + <td colspan="3" style="text-align: center;">{{ i18n "pages.inbounds.traffic" }}</td> + </tr> + <tr> + <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> + [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] + </td> + <td width="120px" v-if="!client.enable"> + <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" + :show-info="false" + :percent="statsProgress(record, client.email)"/> + </td> + <td width="120px" v-else-if="client.totalGB > 0"> + <a-popover :overlay-class-name="themeSwitcher.currentTheme"> + <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> + <td>{{ i18n "remained" }}</td> + <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td> + </tr> + </table> + </template> + <a-progress :stroke-color="statsColor(record, client.email)" + :show-info="false" + :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''" + :percent="statsProgress(record, client.email)"/> + </a-popover> + </td> + <td width="120px" v-else class="infinite-bar"> + <a-progress :stroke-color="themeSwitcher.isDarkTheme ? '#2c1e32':'#F2EAF1'" + :show-info="false" + :status="isClientOnline(client.email)? 'active' : ''" + :percent="100"></a-progress> + </td> + <td width="80px"> + <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template> + <span v-else style="font-weight: 100;font-size: 14pt;">∞</span> + </td> + </tr> + <tr> + <td colspan="3" style="text-align: center;"> + <a-divider style="margin: 0; border-collapse: separate;"></a-divider> + {{ i18n "pages.inbounds.expireDate" }} + </td> + </tr> + <tr> + <template v-if="client.expiryTime !=0 && client.reset >0"> + <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> + [[ remainedDays(client.expiryTime) ]] + </td> + <td width="120px" class="infinite-bar"> + <a-popover :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span> + <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span> + </template> + <a-progress :show-info="false" + :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''" + :percent="expireProgress(client.expiryTime, client.reset)"/> + </a-popover> + </td> + <td width="60px">[[ client.reset + "d" ]]</td> + </template> + <template v-else> + <td colspan="3" style="text-align: center;"> + <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme"> + <template slot="content"> + <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span> + <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span> + </template> + <a-tag style="min-width: 50px; border: none;" + :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> + [[ remainedDays(client.expiryTime) ]] + </a-tag> + </a-popover> + <a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">∞</a-tag> + </template> + </td> + </tr> + </table> + </template> + <a-badge> + <a-icon v-if="!client.enable" slot="count" type="pause-circle" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon> + <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;"><a-icon type="solution"></a-icon></a-button> + </a-badge> + </a-popover> </template> {{end}}
\ No newline at end of file |