3x-ui/web/html/modals/client_batch_edit_modal.html

210 lines
11 KiB
HTML
Raw Normal View History

{{define "modals/clientBatchEditModal"}}
<a-modal id="client-batch-edit-modal" v-model="clientBatchEditModal.visible" :title="clientBatchEditModal.title"
@ok="clientBatchEditModal.ok" :confirm-loading="clientBatchEditModal.confirmLoading" :closable="true" :mask-closable="false"
:ok-text="clientBatchEditModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
<a-alert type="warning" :message="clientBatchEditModal.selectedCount + ' {{ i18n "pages.client.batchEditAlert" }}'" :style="{ marginBottom: '16px' }" banner show-icon></a-alert>
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
<a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
<a-radio-group v-model="clientBatchEditModal.enable" button-style="solid">
<a-radio-button :value="null">{{ i18n "pages.client.batchKeep" }}</a-radio-button>
<a-radio-button :value="true">{{ i18n "enable" }}</a-radio-button>
<a-radio-button :value="false">{{ i18n "disabled" }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item v-if="inbound.protocol === Protocols.VMESS" label='{{ i18n "security" }}'>
<a-select v-model="clientBatchEditModal.security" :dropdown-class-name="themeSwitcher.currentTheme" allow-clear :placeholder='{{ printf "%q" (i18n "pages.client.batchKeep") }}'>
<a-select-option v-for="key in USERS_SECURITY" :value="key">[[ key ]]</a-select-option>
</a-select>
</a-form-item>
<a-form-item label='Flow' v-if="clientBatchEditModal.inbound && clientBatchEditModal.inbound.canEnableTlsFlow()">
<a-select v-model="clientBatchEditModal.flow" :dropdown-class-name="themeSwitcher.currentTheme" allow-clear :placeholder='{{ printf "%q" (i18n "pages.client.batchKeep") }}'>
<a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
<a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
</a-select>
</a-form-item>
<a-form-item v-if="app.ipLimitEnable">
<template slot="label">
<a-tooltip>
<template slot="title">
<span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
</template>
<span>{{ i18n "pages.inbounds.IPLimit" }} </span>
<a-icon type="question-circle"></a-icon>
</a-tooltip>
</template>
<a-input-number v-model.number="clientBatchEditModal.limitIp" :min="0" :placeholder='{{ printf "%q" (i18n "pages.client.batchKeep") }}'></a-input-number>
</a-form-item>
<a-form-item>
<template slot="label">
<a-tooltip>
<template slot="title">
0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
</template>
{{ i18n "pages.inbounds.totalFlow" }}
<a-icon type="question-circle"></a-icon>
</a-tooltip>
</template>
<a-input-number v-model.number="clientBatchEditModal.totalGB" :min="0" :placeholder='{{ printf "%q" (i18n "pages.client.batchKeep") }}'></a-input-number>
</a-form-item>
<a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
<a-radio-group v-model="clientBatchEditModal.delayedStart" button-style="solid">
<a-radio-button :value="null">{{ i18n "pages.client.batchKeep" }}</a-radio-button>
<a-radio-button :value="true">{{ i18n "enable" }}</a-radio-button>
<a-radio-button :value="false">{{ i18n "disabled" }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientBatchEditModal.delayedStart === true">
<a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
</a-form-item>
<a-form-item v-else-if="clientBatchEditModal.delayedStart === false">
<template slot="label">
<a-tooltip>
<template slot="title">
<span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
</template>
{{ i18n "pages.inbounds.expireDate" }}
<a-icon type="question-circle"></a-icon>
</a-tooltip>
</template>
<a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
v-model="clientBatchEditModal.expiryTime"></a-date-picker>
<a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
v-model="clientBatchEditModal.expiryTime">
</a-persian-datepicker>
</a-form-item>
<a-form-item v-if="clientBatchEditModal.expiryTime || clientBatchEditModal.delayedStart === true">
<template slot="label">
<a-tooltip>
<template slot="title">
<span>{{ i18n "pages.client.renewDesc" }}</span>
</template>
{{ i18n "pages.client.renew" }}
<a-icon type="question-circle"></a-icon>
</a-tooltip>
</template>
<a-input-number v-model.number="clientBatchEditModal.reset" :min="0" :placeholder='{{ printf "%q" (i18n "pages.client.batchKeep") }}'></a-input-number>
</a-form-item>
<a-form-item v-if="app.tgBotEnable">
<template slot="label">
<a-tooltip>
<template slot="title">
<span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
</template>
Telegram ChatID
<a-icon type="question-circle"></a-icon>
</a-tooltip>
</template>
<a-input-number :style="{ width: '50%' }" v-model.number="clientBatchEditModal.tgId" :min="0" :placeholder='{{ printf "%q" (i18n "pages.client.batchKeep") }}'></a-input-number>
</a-form-item>
<a-form-item label='{{ i18n "comment" }}'>
<a-input v-model.trim="clientBatchEditModal.comment" :placeholder='{{ printf "%q" (i18n "pages.client.batchKeep") }}'></a-input>
</a-form-item>
</a-form>
</a-modal>
<script>
const clientBatchEditModal = {
visible: false,
confirmLoading: false,
title: '',
okText: '',
confirm: null,
dbInbound: new DBInbound(),
inbound: new Inbound(),
selectedCount: 0,
enable: null,
security: undefined,
flow: undefined,
limitIp: undefined,
totalGB: undefined,
expiryTime: undefined,
delayedStart: null,
reset: undefined,
tgId: undefined,
comment: undefined,
ok() {
const updateData = {};
if (clientBatchEditModal.enable !== null) updateData.enable = clientBatchEditModal.enable;
if (clientBatchEditModal.security !== undefined) updateData.security = clientBatchEditModal.security;
if (clientBatchEditModal.flow !== undefined) updateData.flow = clientBatchEditModal.flow;
if (clientBatchEditModal.limitIp !== undefined && clientBatchEditModal.limitIp !== null) updateData.limitIp = clientBatchEditModal.limitIp;
if (clientBatchEditModal.totalGB !== undefined && clientBatchEditModal.totalGB !== null) {
updateData.totalGB = NumberFormatter.toFixed(clientBatchEditModal.totalGB * SizeFormatter.ONE_GB, 0);
}
if (clientBatchEditModal.delayedStart === true) {
if (clientBatchEditModalApp.delayedExpireDays > 0) {
updateData.expiryTime = -86400000 * clientBatchEditModalApp.delayedExpireDays;
}
} else if (clientBatchEditModal.delayedStart === false && clientBatchEditModal.expiryTime) {
updateData.expiryTime = new Date(clientBatchEditModal.expiryTime).getTime();
}
if (clientBatchEditModal.reset !== undefined && clientBatchEditModal.reset !== null) updateData.reset = clientBatchEditModal.reset;
if (clientBatchEditModal.tgId !== undefined && clientBatchEditModal.tgId !== null) updateData.tgId = clientBatchEditModal.tgId;
if (clientBatchEditModal.comment !== undefined && clientBatchEditModal.comment !== null) updateData.comment = clientBatchEditModal.comment;
if (Object.keys(updateData).length === 0) {
clientBatchEditModalApp.$message.warning('{{ i18n "pages.client.batchEditNoFields" }}');
return;
}
ObjectUtil.execute(clientBatchEditModal.confirm, updateData, clientBatchEditModal.dbInbound.id);
},
show({
title = '',
okText = '{{ i18n "sure" }}',
dbInbound = null,
selectedCount = 0,
confirm = () => { }
}) {
if (!dbInbound) {
return;
}
this.visible = true;
this.title = title;
this.okText = okText;
this.confirm = confirm;
this.selectedCount = selectedCount;
this.dbInbound = new DBInbound(dbInbound);
this.inbound = dbInbound.toInbound();
this.enable = null;
this.security = undefined;
this.flow = undefined;
this.limitIp = undefined;
this.totalGB = undefined;
this.expiryTime = undefined;
this.delayedStart = null;
this.reset = undefined;
this.tgId = undefined;
this.comment = undefined;
},
close() {
clientBatchEditModal.visible = false;
clientBatchEditModal.loading(false);
},
loading(loading = true) {
clientBatchEditModal.confirmLoading = loading;
},
};
const clientBatchEditModalApp = new Vue({
delimiters: ['[[', ']]'],
el: '#client-batch-edit-modal',
data: {
clientBatchEditModal,
get inbound() {
return this.clientBatchEditModal.inbound;
},
get delayedExpireDays() {
return this.clientBatchEditModal.expiryTime < 0 ? this.clientBatchEditModal.expiryTime / -86400000 : 0;
},
get datepicker() {
return app.datepicker;
},
set delayedExpireDays(days) {
this.clientBatchEditModal.expiryTime = -86400000 * days;
},
},
});
</script>
{{end}}