txlyre
/
3x-ui
mirror of https://github.com/MHSanaei/3x-ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308
							<!DOCTYPE html>
<html lang="en">
{{template "head" .}}
<style>
    @media (min-width: 769px) {
        .ant-layout-content {
            margin: 24px 16px;
        }
    }

    @media (max-width: 768px) {
        .ant-card-body {
            padding: .5rem;
        }
    }

    .ant-col-sm-24 {
        margin: 0.5rem -2rem 0.5rem 2rem;
    }
    tr.hideExpandIcon .ant-table-row-expand-icon {
        display: none;
    }
    .infinite-tag {
        padding: 0 5px;
        border-radius: 2rem;
        min-width: 50px;
    }
    .infinite-bar .ant-progress-inner .ant-progress-bg {
        background-color: #F2EAF1;
        border: #D5BED2 solid 1px;
    }
    .dark .infinite-bar .ant-progress-inner .ant-progress-bg {
        background-color: #3c1536;
        border: #7a316f solid 1px;
    }
    .ant-collapse {
        margin: 5px 0;
    }
    .online-animation .ant-badge-status-dot {
        animation: 1.2s ease infinite normal none running onlineAnimation;
    }
    @keyframes onlineAnimation {
        0%, 50%, 100%   { transform: scale(1);  opacity:  1; }
        10%             { transform: scale(1.5); opacity: .2; }
    }
</style>

<body>
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
    {{ template "commonSider" . }}
    <a-layout id="content-layout">
        <a-layout-content>
            <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
                <transition name="list" appear>
                    <a-tag v-if="false" color="red" style="margin-bottom: 10px">
                        Please go to the panel settings as soon as possible to modify the username and password, otherwise there may be a risk of leaking account information
                    </a-tag>
                </transition>
                <transition name="list" appear>
                    <a-card hoverable>
                        <a-row>
                            <a-col :xs="24" :sm="24" :lg="12">
                                {{ i18n "pages.inbounds.totalDownUp" }}:
                                <a-tag color="green">[[ sizeFormat(total.up) ]] / [[ sizeFormat(total.down) ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
                                {{ i18n "pages.inbounds.totalUsage" }}:
                                <a-tag color="green">[[ sizeFormat(total.up + total.down) ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
                                {{ i18n "pages.inbounds.inboundCount" }}:
                                <a-tag color="green">[[ dbInbounds.length ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
                                <template>
                                    <div>
                                        <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
                                        </a-back-top>
                                {{ i18n "clients" }}:
                                <a-tag color="green">[[ total.clients ]]</a-tag>
                                <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                    <template slot="content">
                                        <p v-for="clientEmail in total.deactive">[[ clientEmail ]]</p>
                                    </template>
                                    <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
                                </a-popover>
                                <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                    <template slot="content">
                                        <p v-for="clientEmail in total.depleted">[[ clientEmail ]]</p>
                                    </template>
                                    <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
                                </a-popover>
                                <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                    <template slot="content">
                                        <p v-for="clientEmail in total.expiring">[[ clientEmail ]]</p>
                                    </template>
                                    <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag>
                                </a-popover>
                                <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                    <template slot="content">
                                        <p v-for="clientEmail in onlineClients">[[ clientEmail ]]</p>
                                    </template>
                                    <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag>
                                </a-popover>
                            </div>
                        </template>
                            </a-col>
                        </a-row>
                    </a-card>
                </transition>
                <transition name="list" appear>
                    <a-card hoverable>
                        <div slot="title">
                            <a-row>
                                <a-col :xs="12" :sm="12" :lg="12">
                                    <a-button type="primary" icon="plus" @click="openAddInbound">
                                        <template v-if="!isMobile">{{ i18n "pages.inbounds.addInbound" }}</template>
                                    </a-button>
                                    <a-dropdown :trigger="['click']">
                                        <a-button type="primary" icon="menu">
                                            <template v-if="!isMobile">{{ i18n "pages.inbounds.generalActions" }}</template>
                                        </a-button>
                                        <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
                                            <a-menu-item key="import">
                                                <a-icon type="import"></a-icon>
                                                {{ i18n "pages.inbounds.importInbound" }}
                                            </a-menu-item>
                                            <a-menu-item key="export">
                                                <a-icon type="export"></a-icon>
                                                {{ i18n "pages.inbounds.export" }}
                                            </a-menu-item>
                                            <a-menu-item key="resetInbounds">
                                                <a-icon type="reload"></a-icon>
                                                {{ i18n "pages.inbounds.resetAllTraffic" }}
                                            </a-menu-item>
                                            <a-menu-item key="resetClients">
                                                <a-icon type="file-done"></a-icon>
                                                {{ i18n "pages.inbounds.resetAllClientTraffics" }}
                                            </a-menu-item>
                                            <a-menu-item key="delDepletedClients">
                                                <a-icon type="rest"></a-icon>
                                                {{ i18n "pages.inbounds.delDepletedClients" }}
                                            </a-menu-item>
                                        </a-menu>
                                    </a-dropdown>
                                </a-col>
                                <a-col :xs="12" :sm="12" :lg="12" style="text-align: right;">
                                    <a-select v-model="refreshInterval"
                                              style="width: 65px;"
                                              v-if="isRefreshEnabled"
                                              @change="changeRefreshInterval"
                                              :dropdown-class-name="themeSwitcher.currentTheme">
                                        <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
                                    </a-select>
                                    <a-icon type="sync" :spin="refreshing" @click="manualRefresh" style="margin: 0 5px;"></a-icon>
                                    <a-switch v-model="isRefreshEnabled" @change="toggleRefresh"></a-switch>
                                </a-col>
                            </a-row>
                        </div>
                        <div style="display: flex; align-items: center; justify-content: flex-start;">
                            <a-switch v-model="enableFilter"
                                style="margin-right: .5rem;"
                                @change="toggleFilter">
                                <a-icon slot="checkedChildren" type="search"></a-icon>
                                <a-icon slot="unCheckedChildren" type="filter"></a-icon>
                            </a-switch>
                            <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus style="max-width: 300px" :size="isMobile ? 'small' : ''"></a-input>
                            <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid" :size="isMobile ? 'small' : ''">
                                <a-radio-button value="">{{ i18n "none" }}</a-radio-button>
                                <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button>
                                <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button>
                                <a-radio-button value="expiring">{{ i18n "depletingSoon" }}</a-radio-button>
                                <a-radio-button value="online">{{ i18n "online" }}</a-radio-button>
                            </a-radio-group>
                        </div>
                        <a-back-top></a-back-top>
                        <a-table :columns="isMobile ? mobileColums : columns" :row-key="dbInbound => dbInbound.id"
                                 :data-source="searchedInbounds"
                                 :scroll="isMobile ? {} : { x: 1000 }"
                                 :pagination=pagination(searchedInbounds)
                                 :expand-icon-as-cell="false"
                                 :expand-row-by-click="false"
                                 :expand-icon-column-index="0"
                                 :indent-size="0"
                                 :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')"
                                 style="margin-top: 10px">
                            <template slot="action" slot-scope="text, dbInbound">
                                <a-icon type="edit" style="font-size: 22px" @click="openEditInbound(dbInbound.id);"></a-icon>
                                <a-dropdown :trigger="['click']">
                                    <a @click="e => e.preventDefault()">{{ i18n "pages.inbounds.operate" }}</a>
                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
                                        <a-menu-item key="edit">
                                            <a-icon type="edit"></a-icon>
                                            {{ i18n "edit" }}
                                        </a-menu-item>
                                        <a-menu-item key="qrcode" v-if="dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser">
                                            <a-icon type="qrcode"></a-icon>
                                            {{ i18n "qrCode" }}
                                        </a-menu-item>
                                        <template v-if="dbInbound.isMultiUser()">
                                            <a-menu-item key="addClient">
                                                <a-icon type="user-add"></a-icon>
                                                {{ i18n "pages.client.add"}}
                                            </a-menu-item>
                                            <a-menu-item key="addBulkClient">
                                                <a-icon type="usergroup-add"></a-icon>
                                                {{ i18n "pages.client.bulk"}}
                                            </a-menu-item>
                                            <a-menu-item key="resetClients">
                                                <a-icon type="file-done"></a-icon>
                                                {{ i18n "pages.inbounds.resetInboundClientTraffics"}}
                                            </a-menu-item>
                                            <a-menu-item key="export">
                                                <a-icon type="export"></a-icon>
                                                {{ i18n "pages.inbounds.export"}}
                                            </a-menu-item>
                                            <a-menu-item key="delDepletedClients">
                                                <a-icon type="rest"></a-icon>
                                                {{ i18n "pages.inbounds.delDepletedClients" }}
                                            </a-menu-item>
                                        </template>
                                        <template v-else>
                                            <a-menu-item key="showInfo">
                                                <a-icon type="info-circle"></a-icon>
                                                {{ i18n "info"}}
                                            </a-menu-item>
                                        </template>
                                        <a-menu-item key="clipboard">
                                            <a-icon type="copy"></a-icon>
                                            {{ i18n "pages.inbounds.copyToClipboard" }}
                                        </a-menu-item>
                                        <a-menu-item key="resetTraffic">
                                            <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
                                        </a-menu-item>
                                        <a-menu-item key="clone">
                                            <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.clone"}}
                                        </a-menu-item>
                                        <a-menu-item key="delete">
                                            <span style="color: #FF4D4F">
                                                <a-icon type="delete"></a-icon> {{ i18n "delete"}}
                                            </span>
                                        </a-menu-item>
                                        <a-menu-item v-if="isMobile">
                                            <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id)"></a-switch>
                                            {{ i18n "pages.inbounds.enable" }}
                                        </a-menu-item>
                                    </a-menu>
                                </a-dropdown>
                            </template>
                            <template slot="protocol" slot-scope="text, dbInbound">
                                <a-tag style="margin:0;" color="purple">[[ dbInbound.protocol ]]</a-tag>
                                <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
                                    <a-tag style="margin:0;" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag>
                                    <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isTls" color="blue">TLS</a-tag>
                                    <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isXtls" color="blue">XTLS</a-tag>
                                    <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag>
                                </template>
                            </template>
                            <template slot="clients" slot-scope="text, dbInbound">
                                <template v-if="clientCount[dbInbound.id]">
                                    <a-tag style="margin:0;" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
                                    <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                        <template slot="content">
                                            <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
                                        </template>
                                        <a-tag style="margin:0; padding: 0 2px;" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
                                    </a-popover>
                                    <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                        <template slot="content">
                                            <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
                                        </template>
                                        <a-tag style="margin:0; padding: 0 2px;" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
                                    </a-popover>
                                    <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                        <template slot="content">
                                            <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
                                        </template>
                                        <a-tag style="margin:0; padding: 0 2px;" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
                                    </a-popover>
                                    <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                        <template slot="content">
                                            <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p>
                                        </template>
                                        <a-tag style="margin:0; padding: 0 2px;" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
                                    </a-popover>  
                                </template>
                            </template>
                            <template slot="traffic" slot-scope="text, dbInbound">
                                <a-popover :overlay-class-name="themeSwitcher.currentTheme">
                                    <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="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
                                        [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
                                        <template v-if="dbInbound.total > 0">
                                            [[ sizeFormat(dbInbound.total) ]]
                                        </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>
                                </a-popover>
                            </template>
                            <template slot="enable" slot-scope="text, dbInbound">
                                <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id)"></a-switch>
                            </template>
                            <template slot="expiryTime" slot-scope="text, dbInbound">
                                <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
                                    <template slot="content">
                                        [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
                                    </template>
                                    <a-tag style="min-width: 50px;" :color="usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
                                        [[ remainedDays(dbInbound._expiryTime) ]]
                                    </a-tag>
                                </a-popover>
                                <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
                            </template>
                            <template slot="info" slot-scope="text, dbInbound">
                                <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
                                    <template slot="content">
                                        <table cellpadding="2">
                                            <tr>
                                                <td>{{ i18n "pages.inbounds.protocol" }}</td>
                                                <td>
                                                    <a-tag style="margin:0;" color="purple">[[ dbInbound.protocol ]]</a-tag>
                                                    <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
                                                        <a-tag style="margin:0;" color="blue">[[ dbInbound.toInbound().stream.network ]]</a-tag>
                                                        <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isTls" color="green">tls</a-tag>
                                                        <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isReality" color="green">reality</a-tag>
                                                    </template>                    
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>{{ i18n "pages.inbounds.port" }}</td>
                                                <td><a-tag>[[ dbInbound.port ]]</a-tag></td>
                                            </tr>
                                            <tr v-if="clientCount[dbInbound.id]">
                                                <td>{{ i18n "clients" }}</td>
                                                <td>
                                                    <a-tag style="margin:0;" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
                                                    <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                                        <template slot="content">
                                                            <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
                                                        </template>
                                                        <a-tag style="margin:0; padding: 0 2px;" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
                                                    </a-popover>
                                                    <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                                        <template slot="content">
                                                            <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
                                                        </template>
                                                        <a-tag style="margin:0; padding: 0 2px;" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
                                                    </a-popover>
                                                    <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                                        <template slot="content">
                                                            <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
                                                        </template>
                                                        <a-tag style="margin:0; padding: 0 2px;" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
                                                    </a-popover>
                                                    <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                                        <template slot="content">
                                                            <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p>
                                                        </template>
                                                        <a-tag style="margin:0; padding: 0 2px;" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
                                                    </a-popover>                
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>{{ i18n "pages.inbounds.traffic" }}</td>
                                                <td>
                                                    <a-popover :overlay-class-name="themeSwitcher.currentTheme">
                                                        <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="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
                                                            [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
                                                            <template v-if="dbInbound.total > 0">
                                                                [[ sizeFormat(dbInbound.total) ]]
                                                            </template>
                                                            <template v-else>&infin;</template>
                                                        </a-tag>
                                                    </a-popover>                    
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>{{ i18n "pages.inbounds.expireDate" }}</td>
                                                <td>
                                                    <a-tag style="min-width: 50px; text-align: center;" v-if="dbInbound.expiryTime > 0" :color="dbInbound.isExpiry? 'red': 'blue'">
                                                        [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
                                                    </a-tag>
                                                    <a-tag v-else style="text-align: center;" color="purple" class="infinite-tag">&infin;</a-tag>                    
                                                </td>
                                            </tr>
                                        </table>
                                    </template>
                                    <a-badge>
                                        <a-icon v-if="!dbInbound.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="info"></a-icon>
                                        </a-button>
                                    </a-badge>
                                </a-popover>
                            </template>
                            <template slot="expandedRowRender" slot-scope="record">
                                <a-table
                                :row-key="client => client.id"
                                :columns="isMobile ? innerMobileColumns : innerColumns"
                                :data-source="getInboundClients(record)"
                                :pagination=pagination(getInboundClients(record))
                                :style="isMobile ? 'margin: -16px -5px -17px;' : 'margin-left: 10px;'">
                                    {{template "client_table"}}
                                </a-table>
                            </template>
                        </a-table>
                    </a-card>
                </transition>
            </a-spin>
        </a-layout-content>
    </a-layout>
</a-layout>
{{template "js" .}}
<script src="{{ .base_path }}assets/base64/base64.min.js"></script>
<script src="{{ .base_path }}assets/qrcode/qrious.min.js"></script>
<script src="{{ .base_path }}assets/clipboard/clipboard.min.js"></script>
<script src="{{ .base_path }}assets/uri/URI.min.js"></script>
<script src="{{ .base_path }}assets/js/model/xray.js?{{ .cur_ver }}"></script>
<script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script>
{{template "component/themeSwitcher" .}}
<script>
    const columns = [{
        title: "ID",
        align: 'right',
        dataIndex: "id",
        width: 30,
        responsive: ["xs"],
    }, {
        title: '{{ i18n "pages.inbounds.operate" }}',
        align: 'center',
        width: 40,
        scopedSlots: { customRender: 'action' },
    }, {
        title: '{{ i18n "pages.inbounds.enable" }}',
        align: 'center',
        width: 40,
        scopedSlots: { customRender: 'enable' },
    }, {
        title: '{{ i18n "pages.inbounds.remark" }}',
        align: 'center',
        width: 80,
        dataIndex: "remark",
    }, {
        title: '{{ i18n "pages.inbounds.port" }}',
        align: 'center',
        dataIndex: "port",
        width: 40,
    }, {
        title: '{{ i18n "pages.inbounds.protocol" }}',
        align: 'left',
        width: 90,
        scopedSlots: { customRender: 'protocol' },
    }, {
        title: '{{ i18n "clients" }}',
        align: 'left',
        width: 50,
        scopedSlots: { customRender: 'clients' },
    }, {
        title: '{{ i18n "pages.inbounds.traffic" }}',
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'traffic' },
    }, {
        title: '{{ i18n "pages.inbounds.expireDate" }}',
        align: 'center',
        width: 40,
        scopedSlots: { customRender: 'expiryTime' },
    }];

    const mobileColums = [{
        title: "ID",
        align: 'right',
        dataIndex: "id",
        width: 10,
        responsive: ["s"],
    }, {
        title: '{{ i18n "pages.inbounds.operate" }}',
        align: 'center',
        width: 25,
        scopedSlots: { customRender: 'action' },
    }, {
        title: '{{ i18n "pages.inbounds.remark" }}',
        align: 'left',
        width: 70,
        dataIndex: "remark",
    }, {
        title: '{{ i18n "pages.inbounds.info" }}',
        align: 'center',
        width: 10,
        scopedSlots: { customRender: 'info' },
    }];

    const innerColumns = [
        { title: '{{ i18n "pages.inbounds.operate" }}', width: 50, scopedSlots: { customRender: 'actions' } },
        { title: '{{ i18n "pages.inbounds.enable" }}', width: 20, scopedSlots: { customRender: 'enable' } },
        { title: '{{ i18n "online" }}', width: 20, scopedSlots: { customRender: 'online' } },
        { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 80, align: 'center', scopedSlots: { customRender: 'traffic' } },
        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 80, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
    ];

    const innerMobileColumns = [
        { title: '{{ i18n "pages.inbounds.operate" }}', width: 10, align: 'center', scopedSlots: { customRender: 'actionMenu' } },
        { title: '{{ i18n "pages.inbounds.client" }}', width: 90, align: 'left', scopedSlots: { customRender: 'client' } },
        { title: '{{ i18n "pages.inbounds.info" }}', width: 10, align: 'center', scopedSlots: { customRender: 'info' } },
    ];

    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            siderDrawer,
            themeSwitcher,
            spinning: false,
            inbounds: [],
            dbInbounds: [],
            searchKey: '',
            enableFilter: false,
            filterBy: '',
            searchedInbounds: [],
            expireDiff: 0,
            trafficDiff: 0,
            defaultCert: '',
            defaultKey: '',
            clientCount: [],
            onlineClients: [],
            isRefreshEnabled: localStorage.getItem("isRefreshEnabled") === "true" ? true : false,
            refreshing: false,
            refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
            subSettings: {
                enable : false,
                subURI : ''
            },
            tgBotEnable: false,
            pageSize: 0,
            isMobile: window.innerWidth <= 768,
        },
        methods: {
            loading(spinning = true) {
                this.spinning = spinning;
            },
            async getDBInbounds() {
                this.refreshing = true;
                const msg = await HttpUtil.post('/panel/inbound/list');
                if (!msg.success) {
                    this.refreshing = false;
                    return;
                }
                await this.getOnlineUsers();
                this.setInbounds(msg.obj);
                setTimeout(() => {
                    this.refreshing = false;
                }, 500);
            },
            async getOnlineUsers() {
                const msg = await HttpUtil.post('/panel/inbound/onlines');
                if (!msg.success) {
                    return;
                }
                this.onlineClients = msg.obj != null ? msg.obj : [];
            },
            async getDefaultSettings() {
                const msg = await HttpUtil.post('/panel/setting/defaultSettings');
                if (!msg.success) {
                    return;
                }
                with(msg.obj){
                    this.expireDiff = expireDiff * 86400000;
                    this.trafficDiff = trafficDiff * 1073741824;
                    this.defaultCert = defaultCert;
                    this.defaultKey = defaultKey;
                    this.tgBotEnable = tgBotEnable;
                    this.subSettings = {
                        enable : subEnable,
                        subURI: subURI
                    };
                    this.pageSize = pageSize;
                }
            },
            setInbounds(dbInbounds) {
                this.inbounds.splice(0);
                this.dbInbounds.splice(0);
                this.clientCount.splice(0);
                for (const inbound of dbInbounds) {
                    const dbInbound = new DBInbound(inbound);
                    to_inbound = dbInbound.toInbound()
                    this.inbounds.push(to_inbound);
                    this.dbInbounds.push(dbInbound);
                    if ([Protocols.VMESS, Protocols.VLESS, Protocols.TROJAN, Protocols.SHADOWSOCKS].includes(inbound.protocol)) {
                        if (inbound.protocol === Protocols.SHADOWSOCKS && (!to_inbound.isSSMultiUser)) {
                            continue;
                        }
                        this.clientCount[inbound.id] = this.getClientCounts(inbound, to_inbound);
                    }
                }
                if(this.enableFilter){
                    this.filterInbounds();
                } else {
                    this.searchInbounds(this.searchKey);
                }
            },
            getClientCounts(dbInbound, inbound) {
                let clientCount = 0, active = [], deactive = [], depleted = [], expiring = [], online = [];
                clients = inbound.clients;
                clientStats = dbInbound.clientStats
                now = new Date().getTime()
                if (clients) {
                    clientCount = clients.length;
                    if (dbInbound.enable) {
                        clients.forEach(client => {
                            client.enable ? active.push(client.email) : deactive.push(client.email);
                            if(this.isClientOnline(client.email)) online.push(client.email);
                        });
                        clientStats.forEach(client => {
                            if (!client.enable) {
                                depleted.push(client.email);
                            } else {
                                if ((client.expiryTime > 0 && (client.expiryTime - now < this.expireDiff)) ||
                                    (client.total > 0 && (client.total - (client.up + client.down) < this.trafficDiff))) expiring.push(client.email);
                            }
                        });
                    } else {
                        clients.forEach(client => {
                            deactive.push(client.email);
                        });
                    }
                }
                return {
                    clients: clientCount,
                    active: active,
                    deactive: deactive,
                    depleted: depleted,
                    expiring: expiring,
                    online: online,
                };
            },
            searchInbounds(key) {
                if (ObjectUtil.isEmpty(key)) {
                    this.searchedInbounds = this.dbInbounds.slice();
                } else {
                    this.searchedInbounds.splice(0, this.searchedInbounds.length);
                    this.dbInbounds.forEach(inbound => {
                        if (ObjectUtil.deepSearch(inbound, key)) {
                            const newInbound = new DBInbound(inbound);
                            const inboundSettings = JSON.parse(inbound.settings);
                            if (inboundSettings.hasOwnProperty('clients')) {
                                const searchedSettings = { "clients": [] };
                                inboundSettings.clients.forEach(client => {
                                    if (ObjectUtil.deepSearch(client, key)) {
                                        searchedSettings.clients.push(client);
                                    }
                                });
                                newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, searchedSettings);
                            }
                            this.searchedInbounds.push(newInbound);
                        }
                    });
                }
            },
            filterInbounds() {
                if (ObjectUtil.isEmpty(this.filterBy)) {
                    this.searchedInbounds = this.dbInbounds.slice();
                } else {
                    this.searchedInbounds.splice(0, this.searchedInbounds.length);
                    this.dbInbounds.forEach(inbound => {
                        const newInbound = new DBInbound(inbound);
                        const inboundSettings = JSON.parse(inbound.settings);
                        if (this.clientCount[inbound.id] && this.clientCount[inbound.id].hasOwnProperty(this.filterBy)){
                            const list = this.clientCount[inbound.id][this.filterBy];
                            if (list.length > 0) {
                                const filteredSettings = { "clients": [] };
                                inboundSettings.clients.forEach(client => {
                                    if (list.includes(client.email)) {
                                        filteredSettings.clients.push(client);
                                    }
                                });
                                newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, filteredSettings);
                                this.searchedInbounds.push(newInbound);
                            }
                        }
                    });
                }
            },
            toggleFilter(){
                if(this.enableFilter) {
                    this.searchKey = '';
                } else {
                    this.filterBy = '';
                    this.searchedInbounds = this.dbInbounds.slice();
                }
            },
            generalActions(action) {
                switch (action.key) {
                    case "import":
                        this.importInbound();
                        break;
                    case "export":
                        this.exportAllLinks();
                        break;
                    case "resetInbounds":
                        this.resetAllTraffic();
                        break;
                    case "resetClients":
                        this.resetAllClientTraffics(-1);
                        break;
                    case "delDepletedClients":
                        this.delDepletedClients(-1)
                        break;
                }
            },
            clickAction(action, dbInbound) {
                switch (action.key) {
                    case "qrcode":
                        this.showQrcode(dbInbound.id);
                        break;
                    case "showInfo":
                        this.showInfo(dbInbound.id);
                        break;
                    case "edit":
                        this.openEditInbound(dbInbound.id);
                        break;
                    case "addClient":
                        this.openAddClient(dbInbound.id)
                        break;
                    case "addBulkClient":
                        this.openAddBulkClient(dbInbound.id)
                        break;
                    case "export":
                        this.inboundLinks(dbInbound.id);
                        break;
                    case "clipboard":
                        this.copyToClipboard(dbInbound.id);
                        break;
                    case "resetTraffic":
                        this.resetTraffic(dbInbound.id);
                        break;
                    case "resetClients":
                        this.resetAllClientTraffics(dbInbound.id);
                        break;
                    case "clone":
                        this.openCloneInbound(dbInbound);
                        break;
                    case "delete":
                        this.delInbound(dbInbound.id);
                        break;
                    case "delDepletedClients":
                        this.delDepletedClients(dbInbound.id)
                        break;
                }
            },
            openCloneInbound(dbInbound) {
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.cloneInbound"}} \"' + dbInbound.remark + '\"',
                    content: '{{ i18n "pages.inbounds.cloneInboundContent"}}',
                    okText: '{{ i18n "pages.inbounds.cloneInboundOk"}}',
                    class: themeSwitcher.currentTheme,
                    cancelText: '{{ i18n "cancel" }}',
                    onOk: () => {
                        const baseInbound = dbInbound.toInbound();
                        dbInbound.up = 0;
                        dbInbound.down = 0;
                        this.cloneInbound(baseInbound, dbInbound);
                    },
                });
            },
            async cloneInbound(baseInbound, dbInbound) {
                const data = {
                    up: dbInbound.up,
                    down: dbInbound.down,
                    total: dbInbound.total,
                    remark: dbInbound.remark + " - Cloned",
                    enable: dbInbound.enable,
                    expiryTime: dbInbound.expiryTime,

                    listen: '',
                    port: RandomUtil.randomIntRange(10000, 60000),
                    protocol: baseInbound.protocol,
                    settings: Inbound.Settings.getSettings(baseInbound.protocol).toString(),
                    streamSettings: baseInbound.stream.toString(),
                    sniffing: baseInbound.canSniffing() ? baseInbound.sniffing.toString() : '{}',
                };
                await this.submit('/panel/inbound/add', data, inModal);
            },
            openAddInbound() {
                inModal.show({
                    title: '{{ i18n "pages.inbounds.addInbound"}}',
                    okText: '{{ i18n "pages.inbounds.create"}}',
                    cancelText: '{{ i18n "close" }}',
                    confirm: async (inbound, dbInbound) => {
                        inModal.loading();
                        await this.addInbound(inbound, dbInbound);
                        inModal.close();
                    },
                    isEdit: false
                });
            },
            openEditInbound(dbInboundId) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                const inbound = dbInbound.toInbound();
                inModal.show({
                    title: '{{ i18n "pages.inbounds.modifyInbound"}}',
                    okText: '{{ i18n "pages.inbounds.update"}}',
                    cancelText: '{{ i18n "close" }}',
                    inbound: inbound,
                    dbInbound: dbInbound,
                    confirm: async (inbound, dbInbound) => {
                        inModal.loading();
                        await this.updateInbound(inbound, dbInbound);
                        inModal.close();
                    },
                    isEdit: true
                });
            },
            async addInbound(inbound, dbInbound) {
                const data = {
                    up: dbInbound.up,
                    down: dbInbound.down,
                    total: dbInbound.total,
                    remark: dbInbound.remark,
                    enable: dbInbound.enable,
                    expiryTime: dbInbound.expiryTime,

                    listen: inbound.listen,
                    port: inbound.port,
                    protocol: inbound.protocol,
                    settings: inbound.settings.toString(),
                };
                if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
                if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();

                await this.submit('/panel/inbound/add', data, inModal);
            },
            async updateInbound(inbound, dbInbound) {
                const data = {
                    up: dbInbound.up,
                    down: dbInbound.down,
                    total: dbInbound.total,
                    remark: dbInbound.remark,
                    enable: dbInbound.enable,
                    expiryTime: dbInbound.expiryTime,

                    listen: inbound.listen,
                    port: inbound.port,
                    protocol: inbound.protocol,
                    settings: inbound.settings.toString(),
                };
                if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
                if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();

                await this.submit(`/panel/inbound/update/${dbInbound.id}`, data, inModal);
            },
            openAddClient(dbInboundId) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                clientModal.show({
                    title: '{{ i18n "pages.client.add"}}',
                    okText: '{{ i18n "pages.client.submitAdd"}}',
                    dbInbound: dbInbound,
                    confirm: async (clients, dbInboundId) => {
                        clientModal.loading();
                        await this.addClient(clients, dbInboundId);
                        clientModal.close();
                    },
                    isEdit: false
                });
            },
            openAddBulkClient(dbInboundId) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                clientsBulkModal.show({
                    title: '{{ i18n "pages.client.bulk"}} ' + dbInbound.remark,
                    okText: '{{ i18n "pages.client.bulk"}}',
                    dbInbound: dbInbound,
                    confirm: async (clients, dbInboundId) => {
                        clientsBulkModal.loading();
                        await this.addClient(clients, dbInboundId);
                        clientsBulkModal.close();
                    },
                });
            },
            openEditClient(dbInboundId, client) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                clients = this.getInboundClients(dbInbound);
                index = this.findIndexOfClient(dbInbound.protocol, clients, client);
                clientModal.show({
                    title: '{{ i18n "pages.client.edit"}}',
                    okText: '{{ i18n "pages.client.submitEdit"}}',
                    dbInbound: dbInbound,
                    index: index,
                    confirm: async (client, dbInboundId, clientId) => {
                        clientModal.loading();
                        await this.updateClient(client, dbInboundId, clientId);
                        clientModal.close();
                    },
                    isEdit: true
                });
            },
            findIndexOfClient(protocol, clients, client) {
                switch (protocol) {
                    case Protocols.TROJAN:
                    case Protocols.SHADOWSOCKS:
                        return clients.findIndex(item => item.password === client.password && item.email === client.email);
                    default: return clients.findIndex(item => item.id === client.id && item.email === client.email);
                }
            },
            async addClient(clients, dbInboundId) {
                const data = {
                    id: dbInboundId,
                    settings: '{"clients": [' + clients.toString() + ']}',
                };
                await this.submit(`/panel/inbound/addClient`, data);
            },
            async updateClient(client, dbInboundId, clientId) {
                const data = {
                    id: dbInboundId,
                    settings: '{"clients": [' + client.toString() + ']}',
                };
                await this.submit(`/panel/inbound/updateClient/${clientId}`, data);
            },
            resetTraffic(dbInboundId) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                    content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
                    class: themeSwitcher.currentTheme,
                    okText: '{{ i18n "reset"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => {
                        const inbound = dbInbound.toInbound();
                        dbInbound.up = 0;
                        dbInbound.down = 0;
                        this.updateInbound(inbound, dbInbound);
                    },
                });
            },
            delInbound(dbInboundId) {
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.deleteInbound"}}',
                    content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
                    class: themeSwitcher.currentTheme,
                    okText: '{{ i18n "delete"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => this.submit('/panel/inbound/del/' + dbInboundId),
                });
            },
            delClient(dbInboundId, client,confirmation = true) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                clientId = this.getClientId(dbInbound.protocol, client);
                if (confirmation){
                    this.$confirm({
                        title: '{{ i18n "pages.inbounds.deleteClient"}}',
                        content: '{{ i18n "pages.inbounds.deleteClientContent"}}',
                        class: themeSwitcher.currentTheme,
                        okText: '{{ i18n "delete"}}',
                        cancelText: '{{ i18n "cancel"}}',
                        onOk: () => this.submit(`/panel/inbound/${dbInboundId}/delClient/${clientId}`),
                    });
                } else {
                    this.submit(`/panel/inbound/${dbInboundId}/delClient/${clientId}`);
                }
            },
            getClientId(protocol, client) {
                switch (protocol) {
                    case Protocols.TROJAN: return client.password;
                    case Protocols.SHADOWSOCKS: return client.email;
                    default: return client.id;
                }
            },
            checkFallback(dbInbound) {
                newDbInbound = new DBInbound(dbInbound);
                if (dbInbound.listen.startsWith("@")){
                    rootInbound = this.inbounds.find((i) => 
                        i.isTcp && 
                        ['trojan','vless'].includes(i.protocol) &&
                        i.settings.fallbacks.find(f => f.dest === dbInbound.listen)
                    );
                    if (rootInbound) {
                        newDbInbound.listen = rootInbound.listen;
                        newDbInbound.port = rootInbound.port;
                        newInbound = newDbInbound.toInbound();
                        newInbound.stream.security = rootInbound.stream.security;
                        newInbound.stream.tls = rootInbound.stream.tls;
                        newInbound.stream.externalProxy = rootInbound.stream.externalProxy;
                        newDbInbound.streamSettings = newInbound.stream.toString();
                    }
                }
                return newDbInbound;
            },
            showQrcode(dbInboundId, client) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                newDbInbound = this.checkFallback(dbInbound);
                qrModal.show('{{ i18n "qrCode"}}', newDbInbound, client);
            },
            showInfo(dbInboundId, client) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                index=0;
                if (dbInbound.isMultiUser()){
                    inbound = dbInbound.toInbound();
                    clients = inbound.clients;
                    index = this.findIndexOfClient(dbInbound.protocol, clients, client);
                }
                newDbInbound = this.checkFallback(dbInbound);
                infoModal.show(newDbInbound, index);
            },
            switchEnable(dbInboundId) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                this.submit(`/panel/inbound/update/${dbInboundId}`, dbInbound);
            },
            async switchEnableClient(dbInboundId, client) {
                this.loading()
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                inbound = dbInbound.toInbound();
                clients = inbound.clients;
                index = this.findIndexOfClient(dbInbound.protocol, clients, client);
                clients[index].enable = !clients[index].enable;
                clientId = this.getClientId(dbInbound.protocol, clients[index]);
                await this.updateClient(clients[index], dbInboundId, clientId);
                this.loading(false);
            },
            async submit(url, data) {
                const msg = await HttpUtil.postWithModal(url, data);
                if (msg.success) {
                    await this.getDBInbounds();
                }
            },
            getInboundClients(dbInbound) {
                return dbInbound.toInbound().clients;
            },
            resetClientTraffic(client, dbInboundId, confirmation = true) {
                if (confirmation){
                    this.$confirm({
                        title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                        content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
                        class: themeSwitcher.currentTheme,
                        okText: '{{ i18n "reset"}}',
                        cancelText: '{{ i18n "cancel"}}',
                        onOk: () => this.submit('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email),
                    })
                } else {
                    this.submit('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email);
                }
            },
            resetAllTraffic() {
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.resetAllTrafficTitle"}}',
                    content: '{{ i18n "pages.inbounds.resetAllTrafficContent"}}',
                    class: themeSwitcher.currentTheme,
                    okText: '{{ i18n "reset"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => this.submit('/panel/inbound/resetAllTraffics'),
                });
            },
            resetAllClientTraffics(dbInboundId) {
                this.$confirm({
                    title: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficTitle"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficTitle"}}',
                    content: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficContent"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficContent"}}',
                    class: themeSwitcher.currentTheme,
                    okText: '{{ i18n "reset"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => this.submit('/panel/inbound/resetAllClientTraffics/' + dbInboundId),
                })
            },
            delDepletedClients(dbInboundId) {
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.delDepletedClientsTitle"}}',
                    content: '{{ i18n "pages.inbounds.delDepletedClientsContent"}}',
                    class: themeSwitcher.currentTheme,
                    okText: '{{ i18n "reset"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => this.submit('/panel/inbound/delDepletedClients/' + dbInboundId),
                })
            },
            isExpiry(dbInbound, index) {
                return dbInbound.toInbound().isExpiry(index);
            },
            getUpStats(dbInbound, email) {
                if (email.length == 0) return 0;
                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
                return clientStats ? clientStats.up : 0;
            },
            getDownStats(dbInbound, email) {
                if (email.length == 0) return 0;
                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
                return clientStats ? clientStats.down : 0;
            },
            getSumStats(dbInbound, email) {
                if (email.length == 0) return 0;
                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
                return clientStats ? clientStats.up + clientStats.down : 0;
            },
            getRemStats(dbInbound, email) {
                if (email.length == 0) return 0;
                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
                if (!clientStats) return 0;
                remained = clientStats.total - (clientStats.up + clientStats.down);
                return remained>0 ? remained : 0;
            },
            clientStatsColor(dbInbound, email) {
                if (email.length == 0) return clientUsageColor();
                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
                return clientUsageColor(clientStats, app.trafficDiff)
            },
            statsProgress(dbInbound, email) {
                if (email.length == 0) return 100;
                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
                if (!clientStats) return 0;
                if (clientStats.total == 0) return 100;
                return 100*(clientStats.down + clientStats.up)/clientStats.total;
            },
            expireProgress(expTime, reset) {
                now = new Date().getTime();
                remainedSeconds = expTime < 0 ? -expTime/1000 : (expTime-now)/1000;
                resetSeconds = reset * 86400;
                if (remainedSeconds >= resetSeconds) return 0;
                return 100*(1-(remainedSeconds/resetSeconds));
            },
            remainedDays(expTime){
                if (expTime == 0) return null;
                if (expTime < 0) return formatSecond(expTime/-1000);
                now = new Date().getTime();
                if (expTime < now) return '{{ i18n "depleted" }}';
                return formatSecond((expTime-now)/1000);
            },
            statsExpColor(dbInbound, email){
                if (email.length == 0) return '#7a316f';
                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
                if (!clientStats) return '#7a316f';
                statsColor = usageColor(clientStats.down + clientStats.up, this.trafficDiff, clientStats.total);
                expColor = usageColor(new Date().getTime(), this.expireDiff, clientStats.expiryTime);
                switch (true) {
                    case statsColor == "red" || expColor == "red":
                        return "#E04141";
                    case statsColor == "orange" || expColor == "orange":
                        return "#FFA031";
                    case statsColor == "blue" || expColor == "blue":
                        return "#0e49b5";
                    default:
                        return "#7a316f";
                }
            },
            isClientEnabled(dbInbound, email) {
                clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null;
                return clientStats ? clientStats['enable'] : true;
            },
            isClientOnline(email) {
                return this.onlineClients.includes(email);
            },
            isRemovable(dbInboundId) {
                return this.getInboundClients(this.dbInbounds.find(row => row.id === dbInboundId)).length > 1
            },
            inboundLinks(dbInboundId) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                newDbInbound = this.checkFallback(dbInbound);
                txtModal.show('{{ i18n "pages.inbounds.export"}}', newDbInbound.genInboundLinks, newDbInbound.remark);
            },
            importInbound() {
                promptModal.open({
                    title: '{{ i18n "pages.inbounds.importInbound" }}',
                    type: 'textarea',
                    value: '',
                    okText: '{{ i18n "pages.inbounds.import" }}',
                    confirm: async (dbInboundText) => {
                        await this.submit('/panel/inbound/import', {data: dbInboundText}, promptModal);
                        promptModal.close();
                    },
                });
            },
            exportAllLinks() {
                let copyText = [];
                for (const dbInbound of this.dbInbounds) {
                    copyText.push(dbInbound.genInboundLinks);
                }
                txtModal.show('{{ i18n "pages.inbounds.export"}}', copyText.join('\r\n'), 'All-Inbounds');
            },
            copyToClipboard(dbInboundId) {
                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                txtModal.show('{{ i18n "pages.inbounds.inboundData" }}', JSON.stringify(dbInbound, null, 2));
            },
            async startDataRefreshLoop() {
                while (this.isRefreshEnabled) {
                    try {
                        await this.getDBInbounds();
                    } catch (e) {
                        console.error(e);
                    }
                    await PromiseUtil.sleep(this.refreshInterval);
                }
            },
            toggleRefresh() {
                localStorage.setItem("isRefreshEnabled", this.isRefreshEnabled);
                if (this.isRefreshEnabled) {
                    this.startDataRefreshLoop();
                }
            },
            changeRefreshInterval() {
                localStorage.setItem("refreshInterval", this.refreshInterval);
            },
            async manualRefresh() {
                if (!this.refreshing) {
                    this.spinning = true;
                    await this.getDBInbounds();
                    this.spinning = false;
                }
            },
            pagination(obj){
                if (this.pageSize > 0 && obj.length>this.pageSize) {
                    // Set page options based on object size
                    sizeOptions = []
                    for (i=this.pageSize;i<=obj.length;i=i+this.pageSize) {
                        sizeOptions.push(i.toString());
                    }
                    // Add option to see all in one page
                    sizeOptions.push(i.toString());

                    p = {
                        showSizeChanger: true,
                        size: 'small',
                        position: 'bottom',
                        pageSize: this.pageSize,
                        pageSizeOptions: sizeOptions
                    }
                    return p
                }
                return false
            },
            onResize() {
                this.isMobile = window.innerWidth <= 768;
            }
        },
        watch: {
            searchKey: debounce(function (newVal) {
                this.searchInbounds(newVal);
            }, 500)
        },
        mounted() {
            window.addEventListener('resize', this.onResize);
            this.onResize();
            this.loading();
            this.getDefaultSettings();
            if (this.isRefreshEnabled) {
                this.startDataRefreshLoop();
            }
            else {
                this.getDBInbounds();
            }
            this.loading(false);
        },
        computed: {
            total() {
                let down = 0, up = 0;
                let clients = 0, deactive = [], depleted = [], expiring = [];
                this.dbInbounds.forEach(dbInbound => {
                    down += dbInbound.down;
                    up += dbInbound.up;
                    if (this.clientCount[dbInbound.id]) {
                        clients += this.clientCount[dbInbound.id].clients;
                        deactive = deactive.concat(this.clientCount[dbInbound.id].deactive);
                        depleted = depleted.concat(this.clientCount[dbInbound.id].depleted);
                        expiring = expiring.concat(this.clientCount[dbInbound.id].expiring);
                    }
                });
                return {
                    down: down,
                    up: up,
                    clients: clients,
                    deactive: deactive,
                    depleted: depleted,
                    expiring: expiring,
                };
            }
        },
    });

</script>

{{template "inboundModal"}}
{{template "promptModal"}}
{{template "qrcodeModal"}}
{{template "textModal"}}
{{template "inboundInfoModal"}}
{{template "clientsModal"}}
{{template "clientsBulkModal"}}

</body>
</html>