inbounds.html 79 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. {{template "head" .}}
  4. <style>
  5. .ant-table:not(.ant-table-expanded-row .ant-table) {
  6. outline: 1px solid #f0f0f0;
  7. outline-offset: -1px;
  8. border-radius: 1rem;
  9. overflow-x: hidden;
  10. }
  11. .dark .ant-table:not(.ant-table-expanded-row .ant-table) {
  12. outline-color: var(--dark-color-table-ring);
  13. }
  14. .ant-table .ant-table-content .ant-table-scroll .ant-table-body {
  15. overflow-y: hidden;
  16. }
  17. .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
  18. margin:-10px 22px !important;
  19. }
  20. .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper .ant-table {
  21. border-bottom-left-radius: 1rem;
  22. border-bottom-right-radius: 1rem;
  23. }
  24. .ant-table .ant-table-content .ant-table-tbody tr:last-child tr:last-child td {
  25. border-bottom-color: transparent;
  26. }
  27. .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:first-child {
  28. border-bottom-left-radius: 6px;
  29. }
  30. .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:last-child {
  31. border-bottom-right-radius: 6px;
  32. }
  33. @media (min-width: 769px) {
  34. .ant-layout-content {
  35. margin: 24px 16px;
  36. }
  37. }
  38. @media (max-width: 768px) {
  39. .ant-card-body {
  40. padding: .5rem;
  41. }
  42. .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
  43. margin:-10px 2px !important;
  44. }
  45. }
  46. .ant-col-sm-24 {
  47. margin: 0.5rem -2rem 0.5rem 2rem;
  48. }
  49. tr.hideExpandIcon .ant-table-row-expand-icon {
  50. display: none;
  51. }
  52. .infinite-tag {
  53. padding: 0 5px;
  54. border-radius: 2rem;
  55. min-width: 50px;
  56. min-height: 22px;
  57. }
  58. .infinite-bar .ant-progress-inner .ant-progress-bg {
  59. background-color: #F2EAF1;
  60. border: #D5BED2 solid 1px;
  61. }
  62. .dark .infinite-bar .ant-progress-inner .ant-progress-bg {
  63. background-color: #7a316f !important;
  64. border: #7a316f solid 1px;
  65. }
  66. .ant-collapse {
  67. margin: 5px 0;
  68. }
  69. .info-large-tag {
  70. max-width: 200px;
  71. overflow: hidden;
  72. }
  73. .online-animation .ant-badge-status-dot {
  74. animation: onlineAnimation 1.2s linear infinite;
  75. }
  76. @keyframes onlineAnimation {
  77. 0%,
  78. 50%,
  79. 100% {
  80. transform: scale(1);
  81. opacity: 1;
  82. }
  83. 10% {
  84. transform: scale(1.5);
  85. opacity: .2;
  86. }
  87. }
  88. .tr-table-box {
  89. display: flex;
  90. gap: 4px;
  91. justify-content: center;
  92. align-items: center;
  93. }
  94. .tr-table-rt {
  95. flex-basis: 70px;
  96. min-width: 70px;
  97. text-align: end;
  98. }
  99. .tr-table-lt {
  100. flex-basis: 70px;
  101. min-width: 70px;
  102. text-align: start;
  103. }
  104. .tr-table-bar {
  105. flex-basis: 160px;
  106. min-width: 60px;
  107. }
  108. .tr-infinity-ch {
  109. font-size: 14pt;
  110. max-height: 24px;
  111. display: inline-flex;
  112. align-items: center;
  113. }
  114. .ant-table-expanded-row .ant-table .ant-table-body {
  115. overflow-x: hidden;
  116. }
  117. .ant-table-expanded-row .ant-table-tbody>tr>td {
  118. padding: 10px 2px;
  119. }
  120. .ant-table-expanded-row .ant-table-thead>tr>th {
  121. padding: 12px 2px;
  122. }
  123. </style>
  124. <body>
  125. <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
  126. {{ template "commonSider" . }}
  127. <a-layout id="content-layout">
  128. <a-layout-content>
  129. <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
  130. <transition name="list" appear>
  131. <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
  132. message='{{ i18n "secAlertTitle" }}'
  133. color="red"
  134. description='{{ i18n "secAlertSsl" }}'
  135. show-icon closable>
  136. </a-alert>
  137. </transition>
  138. <transition name="list" appear>
  139. <a-card hoverable>
  140. <a-row>
  141. <a-col :xs="24" :sm="24" :lg="12">
  142. {{ i18n "pages.inbounds.totalDownUp" }}:
  143. <a-tag color="green">[[ sizeFormat(total.up) ]] / [[ sizeFormat(total.down) ]]</a-tag>
  144. </a-col>
  145. <a-col :xs="24" :sm="24" :lg="12">
  146. {{ i18n "pages.inbounds.totalUsage" }}:
  147. <a-tag color="green">[[ sizeFormat(total.up + total.down) ]]</a-tag>
  148. </a-col>
  149. <a-col :xs="24" :sm="24" :lg="12">
  150. {{ i18n "pages.inbounds.inboundCount" }}:
  151. <a-tag color="green">[[ dbInbounds.length ]]</a-tag>
  152. </a-col>
  153. <a-col :xs="24" :sm="24" :lg="12">
  154. <template>
  155. <div>
  156. <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
  157. {{ i18n "clients" }}:
  158. <a-tag color="green">[[ total.clients ]]</a-tag>
  159. <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
  160. <template slot="content">
  161. <p v-for="clientEmail in total.deactive">[[ clientEmail ]]</p>
  162. </template>
  163. <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
  164. </a-popover>
  165. <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
  166. <template slot="content">
  167. <p v-for="clientEmail in total.depleted">[[ clientEmail ]]</p>
  168. </template>
  169. <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
  170. </a-popover>
  171. <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
  172. <template slot="content">
  173. <p v-for="clientEmail in total.expiring">[[ clientEmail ]]</p>
  174. </template>
  175. <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag>
  176. </a-popover>
  177. <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
  178. <template slot="content">
  179. <p v-for="clientEmail in onlineClients">[[ clientEmail ]]</p>
  180. </template>
  181. <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag>
  182. </a-popover>
  183. </div>
  184. </template>
  185. </a-col>
  186. </a-row>
  187. </a-card>
  188. </transition>
  189. <transition name="list" appear>
  190. <a-card hoverable>
  191. <div slot="title">
  192. <a-row>
  193. <a-col :xs="12" :sm="12" :lg="12">
  194. <a-button type="primary" icon="plus" @click="openAddInbound">
  195. <template v-if="!isMobile">{{ i18n "pages.inbounds.addInbound" }}</template>
  196. </a-button>
  197. <a-dropdown :trigger="['click']">
  198. <a-button type="primary" icon="menu">
  199. <template v-if="!isMobile">{{ i18n "pages.inbounds.generalActions" }}</template>
  200. </a-button>
  201. <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
  202. <a-menu-item key="import">
  203. <a-icon type="import"></a-icon>
  204. {{ i18n "pages.inbounds.importInbound" }}
  205. </a-menu-item>
  206. <a-menu-item key="export">
  207. <a-icon type="export"></a-icon>
  208. {{ i18n "pages.inbounds.export" }}
  209. </a-menu-item>
  210. <a-menu-item key="subs" v-if="subSettings.enable">
  211. <a-icon type="export"></a-icon>
  212. {{ i18n "pages.inbounds.export" }} - {{ i18n "pages.settings.subSettings" }}
  213. </a-menu-item>
  214. <a-menu-item key="resetInbounds">
  215. <a-icon type="reload"></a-icon>
  216. {{ i18n "pages.inbounds.resetAllTraffic" }}
  217. </a-menu-item>
  218. <a-menu-item key="resetClients">
  219. <a-icon type="file-done"></a-icon>
  220. {{ i18n "pages.inbounds.resetAllClientTraffics" }}
  221. </a-menu-item>
  222. <a-menu-item key="delDepletedClients" style="color: #FF4D4F;">
  223. <a-icon type="rest"></a-icon>
  224. {{ i18n "pages.inbounds.delDepletedClients" }}
  225. </a-menu-item>
  226. <a-menu-item v-if="subSettings.enable && dbInbounds.length > 0" key="addGroupClient">
  227. <a-icon type="usergroup-add"></a-icon>
  228. {{ i18n "pages.client.groupAdd"}}
  229. </a-menu-item>
  230. </a-menu>
  231. </a-dropdown>
  232. </a-col>
  233. <a-col :xs="12" :sm="12" :lg="12" style="text-align: right;">
  234. <a-select v-model="refreshInterval"
  235. style="width: 65px;"
  236. v-if="isRefreshEnabled"
  237. @change="changeRefreshInterval"
  238. :dropdown-class-name="themeSwitcher.currentTheme">
  239. <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
  240. </a-select>
  241. <a-icon type="sync" :spin="refreshing" @click="manualRefresh" style="margin: 0 5px;"></a-icon>
  242. <a-switch v-model="isRefreshEnabled" @change="toggleRefresh"></a-switch>
  243. </a-col>
  244. </a-row>
  245. </div>
  246. <div :style="isMobile ? '' : 'display: flex; align-items: center; justify-content: flex-start;'">
  247. <a-switch v-model="enableFilter"
  248. :style="isMobile ? 'margin-bottom: .5rem; display: flex;' : 'margin-right: .5rem;'"
  249. @change="toggleFilter">
  250. <a-icon slot="checkedChildren" type="search"></a-icon>
  251. <a-icon slot="unCheckedChildren" type="filter"></a-icon>
  252. </a-switch>
  253. <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus style="max-width: 300px" :size="isMobile ? 'small' : ''"></a-input>
  254. <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid" :size="isMobile ? 'small' : ''">
  255. <a-radio-button value="">{{ i18n "none" }}</a-radio-button>
  256. <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button>
  257. <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button>
  258. <a-radio-button value="expiring">{{ i18n "depletingSoon" }}</a-radio-button>
  259. <a-radio-button value="online">{{ i18n "online" }}</a-radio-button>
  260. </a-radio-group>
  261. </div>
  262. <a-back-top></a-back-top>
  263. <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
  264. :data-source="searchedInbounds"
  265. :scroll="isMobile ? {} : { x: 1000 }"
  266. :pagination=pagination(searchedInbounds)
  267. :expand-icon-as-cell="false"
  268. :expand-row-by-click="false"
  269. :expand-icon-column-index="0"
  270. :indent-size="0"
  271. :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')"
  272. style="margin-top: 10px">
  273. <template slot="action" slot-scope="text, dbInbound">
  274. <a-dropdown :trigger="['click']">
  275. <a-icon @click="e => e.preventDefault()" type="more" style="font-size: 20px; text-decoration: solid;"></a-icon>
  276. <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
  277. <a-menu-item key="edit">
  278. <a-icon type="edit"></a-icon>
  279. {{ i18n "edit" }}
  280. </a-menu-item>
  281. <a-menu-item key="qrcode" v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard">
  282. <a-icon type="qrcode"></a-icon>
  283. {{ i18n "qrCode" }}
  284. </a-menu-item>
  285. <template v-if="dbInbound.isMultiUser()">
  286. <a-menu-item key="addClient">
  287. <a-icon type="user-add"></a-icon>
  288. {{ i18n "pages.client.add"}}
  289. </a-menu-item>
  290. <a-menu-item key="addBulkClient">
  291. <a-icon type="usergroup-add"></a-icon>
  292. {{ i18n "pages.client.bulk"}}
  293. </a-menu-item>
  294. <a-menu-item key="resetClients">
  295. <a-icon type="file-done"></a-icon>
  296. {{ i18n "pages.inbounds.resetInboundClientTraffics"}}
  297. </a-menu-item>
  298. <a-menu-item key="export">
  299. <a-icon type="export"></a-icon>
  300. {{ i18n "pages.inbounds.export"}}
  301. </a-menu-item>
  302. <a-menu-item key="subs" v-if="subSettings.enable">
  303. <a-icon type="export"></a-icon>
  304. {{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}
  305. </a-menu-item>
  306. <a-menu-item key="delDepletedClients" style="color: #FF4D4F;">
  307. <a-icon type="rest"></a-icon>
  308. {{ i18n "pages.inbounds.delDepletedClients" }}
  309. </a-menu-item>
  310. </template>
  311. <template v-else>
  312. <a-menu-item key="showInfo">
  313. <a-icon type="info-circle"></a-icon>
  314. {{ i18n "info"}}
  315. </a-menu-item>
  316. </template>
  317. <a-menu-item key="clipboard">
  318. <a-icon type="copy"></a-icon>
  319. {{ i18n "pages.inbounds.exportInbound" }}
  320. </a-menu-item>
  321. <a-menu-item key="resetTraffic">
  322. <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
  323. </a-menu-item>
  324. <a-menu-item key="clone">
  325. <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.clone"}}
  326. </a-menu-item>
  327. <a-menu-item key="delete">
  328. <span style="color: #FF4D4F">
  329. <a-icon type="delete"></a-icon> {{ i18n "delete"}}
  330. </span>
  331. </a-menu-item>
  332. <a-menu-item v-if="isMobile">
  333. <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
  334. {{ i18n "pages.inbounds.enable" }}
  335. </a-menu-item>
  336. </a-menu>
  337. </a-dropdown>
  338. </template>
  339. <template slot="protocol" slot-scope="text, dbInbound">
  340. <a-tag style="margin:0;" color="purple">[[ dbInbound.protocol ]]</a-tag>
  341. <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
  342. <a-tag style="margin:0;" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag>
  343. <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isTls" color="blue">TLS</a-tag>
  344. <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag>
  345. </template>
  346. </template>
  347. <template slot="clients" slot-scope="text, dbInbound">
  348. <template v-if="clientCount[dbInbound.id]">
  349. <a-tag style="margin:0;" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
  350. <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
  351. <template slot="content">
  352. <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
  353. </template>
  354. <a-tag style="margin:0; padding: 0 2px;" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
  355. </a-popover>
  356. <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
  357. <template slot="content">
  358. <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
  359. </template>
  360. <a-tag style="margin:0; padding: 0 2px;" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
  361. </a-popover>
  362. <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
  363. <template slot="content">
  364. <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
  365. </template>
  366. <a-tag style="margin:0; padding: 0 2px;" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
  367. </a-popover>
  368. <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
  369. <template slot="content">
  370. <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p>
  371. </template>
  372. <a-tag style="margin:0; padding: 0 2px;" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
  373. </a-popover>
  374. </template>
  375. </template>
  376. <template slot="traffic" slot-scope="text, dbInbound">
  377. <a-popover :overlay-class-name="themeSwitcher.currentTheme">
  378. <template slot="content">
  379. <table cellpadding="2" width="100%">
  380. <tr>
  381. <td>↑[[ sizeFormat(dbInbound.up) ]]</td>
  382. <td>↓[[ sizeFormat(dbInbound.down) ]]</td>
  383. </tr>
  384. <tr v-if="dbInbound.total > 0 && dbInbound.up + dbInbound.down < dbInbound.total">
  385. <td>{{ i18n "remained" }}</td>
  386. <td>[[ sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
  387. </tr>
  388. </table>
  389. </template>
  390. <a-tag :color="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
  391. [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
  392. <template v-if="dbInbound.total > 0">
  393. [[ sizeFormat(dbInbound.total) ]]
  394. </template>
  395. <template v-else>
  396. <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
  397. <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" fill="currentColor"></path>
  398. </svg>
  399. </template>
  400. </a-tag>
  401. </a-popover>
  402. </template>
  403. <template slot="enable" slot-scope="text, dbInbound">
  404. <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
  405. </template>
  406. <template slot="expiryTime" slot-scope="text, dbInbound">
  407. <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
  408. <template slot="content" v-if="app.datepicker === 'gregorian'">
  409. [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
  410. </template>
  411. <template v-else slot="content">
  412. [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
  413. </template>
  414. <a-tag style="min-width: 50px;" :color="usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
  415. [[ remainedDays(dbInbound._expiryTime) ]]
  416. </a-tag>
  417. </a-popover>
  418. <a-tag v-else color="purple" class="infinite-tag">
  419. <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
  420. <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" fill="currentColor"></path>
  421. </svg>
  422. </a-tag>
  423. </template>
  424. <template slot="info" slot-scope="text, dbInbound">
  425. <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
  426. <template slot="content">
  427. <table cellpadding="2">
  428. <tr>
  429. <td>{{ i18n "pages.inbounds.protocol" }}</td>
  430. <td>
  431. <a-tag style="margin:0;" color="purple">[[ dbInbound.protocol ]]</a-tag>
  432. <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
  433. <a-tag style="margin:0;" color="blue">[[ dbInbound.toInbound().stream.network ]]</a-tag>
  434. <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isTls" color="green">tls</a-tag>
  435. <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isReality" color="green">reality</a-tag>
  436. </template>
  437. </td>
  438. </tr>
  439. <tr>
  440. <td>{{ i18n "pages.inbounds.port" }}</td>
  441. <td><a-tag>[[ dbInbound.port ]]</a-tag></td>
  442. </tr>
  443. <tr v-if="clientCount[dbInbound.id]">
  444. <td>{{ i18n "clients" }}</td>
  445. <td>
  446. <a-tag style="margin:0;" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
  447. <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
  448. <template slot="content">
  449. <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
  450. </template>
  451. <a-tag style="margin:0; padding: 0 2px;" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
  452. </a-popover>
  453. <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
  454. <template slot="content">
  455. <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
  456. </template>
  457. <a-tag style="margin:0; padding: 0 2px;" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
  458. </a-popover>
  459. <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
  460. <template slot="content">
  461. <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
  462. </template>
  463. <a-tag style="margin:0; padding: 0 2px;" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
  464. </a-popover>
  465. <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
  466. <template slot="content">
  467. <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p>
  468. </template>
  469. <a-tag style="margin:0; padding: 0 2px;" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
  470. </a-popover>
  471. </td>
  472. </tr>
  473. <tr>
  474. <td>{{ i18n "pages.inbounds.traffic" }}</td>
  475. <td>
  476. <a-popover :overlay-class-name="themeSwitcher.currentTheme">
  477. <template slot="content">
  478. <table cellpadding="2" width="100%">
  479. <tr>
  480. <td>↑[[ sizeFormat(dbInbound.up) ]]</td>
  481. <td>↓[[ sizeFormat(dbInbound.down) ]]</td>
  482. </tr>
  483. <tr v-if="dbInbound.total > 0 && dbInbound.up + dbInbound.down < dbInbound.total">
  484. <td>{{ i18n "remained" }}</td>
  485. <td>[[ sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
  486. </tr>
  487. </table>
  488. </template>
  489. <a-tag :color="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
  490. [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
  491. <template v-if="dbInbound.total > 0">
  492. [[ sizeFormat(dbInbound.total) ]]
  493. </template>
  494. <template v-else>
  495. <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
  496. <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" fill="currentColor"></path>
  497. </svg>
  498. </template>
  499. </a-tag>
  500. </a-popover>
  501. </td>
  502. </tr>
  503. <tr>
  504. <td>{{ i18n "pages.inbounds.expireDate" }}</td>
  505. <td>
  506. <a-tag style="min-width: 50px; text-align: center;" v-if="dbInbound.expiryTime > 0"
  507. :color="dbInbound.isExpiry? 'red': 'blue'">
  508. <template v-if="app.datepicker === 'gregorian'">
  509. [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
  510. </template>
  511. <template v-else>
  512. [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
  513. </template>
  514. </a-tag>
  515. <a-tag v-else style="text-align: center;" color="purple" class="infinite-tag">
  516. <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
  517. <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" fill="currentColor"></path>
  518. </svg>
  519. </a-tag>
  520. </td>
  521. </tr>
  522. </table>
  523. </template>
  524. <a-badge>
  525. <a-icon v-if="!dbInbound.enable" slot="count" type="pause-circle" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
  526. <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;">
  527. <a-icon type="info"></a-icon>
  528. </a-button>
  529. </a-badge>
  530. </a-popover>
  531. </template>
  532. <template slot="expandedRowRender" slot-scope="record">
  533. <a-table
  534. :row-key="client => client.id"
  535. :columns="isMobile ? innerMobileColumns : innerColumns"
  536. :data-source="getInboundClients(record)"
  537. :pagination=pagination(getInboundClients(record))
  538. :style="isMobile ? 'margin: -10px 2px -11px;' : 'margin: -10px 22px -11px;'">
  539. {{template "client_table"}}
  540. </a-table>
  541. </template>
  542. </a-table>
  543. </a-card>
  544. </transition>
  545. </a-spin>
  546. </a-layout-content>
  547. </a-layout>
  548. </a-layout>
  549. {{template "js" .}}
  550. <script src="{{ .base_path }}assets/base64/base64.min.js"></script>
  551. <script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
  552. <script src="{{ .base_path }}assets/clipboard/clipboard.min.js?{{ .cur_ver }}"></script>
  553. <script src="{{ .base_path }}assets/uri/URI.min.js?{{ .cur_ver }}"></script>
  554. <script src="{{ .base_path }}assets/js/model/inbound.js?{{ .cur_ver }}"></script>
  555. <script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script>
  556. {{template "component/themeSwitcher" .}}
  557. {{template "component/persianDatepicker" .}}
  558. <script>
  559. const columns = [{
  560. title: "ID",
  561. align: 'right',
  562. dataIndex: "id",
  563. width: 30,
  564. responsive: ["xs"],
  565. }, {
  566. title: '{{ i18n "pages.inbounds.operate" }}',
  567. align: 'center',
  568. width: 30,
  569. scopedSlots: { customRender: 'action' },
  570. }, {
  571. title: '{{ i18n "pages.inbounds.enable" }}',
  572. align: 'center',
  573. width: 30,
  574. scopedSlots: { customRender: 'enable' },
  575. }, {
  576. title: '{{ i18n "pages.inbounds.remark" }}',
  577. align: 'center',
  578. width: 60,
  579. dataIndex: "remark",
  580. }, {
  581. title: '{{ i18n "pages.inbounds.port" }}',
  582. align: 'center',
  583. dataIndex: "port",
  584. width: 40,
  585. }, {
  586. title: '{{ i18n "pages.inbounds.protocol" }}',
  587. align: 'left',
  588. width: 70,
  589. scopedSlots: { customRender: 'protocol' },
  590. }, {
  591. title: '{{ i18n "clients" }}',
  592. align: 'left',
  593. width: 50,
  594. scopedSlots: { customRender: 'clients' },
  595. }, {
  596. title: '{{ i18n "pages.inbounds.traffic" }}',
  597. align: 'center',
  598. width: 60,
  599. scopedSlots: { customRender: 'traffic' },
  600. }, {
  601. title: '{{ i18n "pages.inbounds.expireDate" }}',
  602. align: 'center',
  603. width: 40,
  604. scopedSlots: { customRender: 'expiryTime' },
  605. }];
  606. const mobileColumns = [{
  607. title: "ID",
  608. align: 'right',
  609. dataIndex: "id",
  610. width: 10,
  611. responsive: ["s"],
  612. }, {
  613. title: '{{ i18n "pages.inbounds.operate" }}',
  614. align: 'center',
  615. width: 25,
  616. scopedSlots: { customRender: 'action' },
  617. }, {
  618. title: '{{ i18n "pages.inbounds.remark" }}',
  619. align: 'left',
  620. width: 70,
  621. dataIndex: "remark",
  622. }, {
  623. title: '{{ i18n "pages.inbounds.info" }}',
  624. align: 'center',
  625. width: 10,
  626. scopedSlots: { customRender: 'info' },
  627. }];
  628. const innerColumns = [
  629. { title: '{{ i18n "pages.inbounds.operate" }}', width: 65, scopedSlots: { customRender: 'actions' } },
  630. { title: '{{ i18n "pages.inbounds.enable" }}', width: 30, scopedSlots: { customRender: 'enable' } },
  631. { title: '{{ i18n "online" }}', width: 30, scopedSlots: { customRender: 'online' } },
  632. { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
  633. { title: '{{ i18n "pages.inbounds.traffic" }}', width: 80, align: 'center', scopedSlots: { customRender: 'traffic' } },
  634. { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 80, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
  635. ];
  636. const innerMobileColumns = [
  637. { title: '{{ i18n "pages.inbounds.operate" }}', width: 10, align: 'center', scopedSlots: { customRender: 'actionMenu' } },
  638. { title: '{{ i18n "pages.inbounds.client" }}', width: 90, align: 'left', scopedSlots: { customRender: 'client' } },
  639. { title: '{{ i18n "pages.inbounds.info" }}', width: 10, align: 'center', scopedSlots: { customRender: 'info' } },
  640. ];
  641. const app = new Vue({
  642. delimiters: ['[[', ']]'],
  643. el: '#app',
  644. data: {
  645. siderDrawer,
  646. themeSwitcher,
  647. persianDatepicker,
  648. spinning: false,
  649. inbounds: [],
  650. dbInbounds: [],
  651. searchKey: '',
  652. enableFilter: false,
  653. filterBy: '',
  654. searchedInbounds: [],
  655. expireDiff: 0,
  656. trafficDiff: 0,
  657. defaultCert: '',
  658. defaultKey: '',
  659. clientCount: [],
  660. onlineClients: [],
  661. isRefreshEnabled: localStorage.getItem("isRefreshEnabled") === "true" ? true : false,
  662. refreshing: false,
  663. refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
  664. subSettings: {
  665. enable : false,
  666. subURI : '',
  667. subJsonURI : '',
  668. },
  669. remarkModel: '-ieo',
  670. datepicker: 'gregorian',
  671. tgBotEnable: false,
  672. showAlert: false,
  673. ipLimitEnable: false,
  674. pageSize: 50,
  675. isMobile: window.innerWidth <= 768,
  676. },
  677. methods: {
  678. loading(spinning = true) {
  679. this.spinning = spinning;
  680. },
  681. async getDBInbounds() {
  682. this.refreshing = true;
  683. const msg = await HttpUtil.post('/panel/inbound/list');
  684. if (!msg.success) {
  685. this.refreshing = false;
  686. return;
  687. }
  688. await this.getOnlineUsers();
  689. this.setInbounds(msg.obj);
  690. setTimeout(() => {
  691. this.refreshing = false;
  692. }, 500);
  693. },
  694. async getOnlineUsers() {
  695. const msg = await HttpUtil.post('/panel/inbound/onlines');
  696. if (!msg.success) {
  697. return;
  698. }
  699. this.onlineClients = msg.obj != null ? msg.obj : [];
  700. },
  701. async getDefaultSettings() {
  702. const msg = await HttpUtil.post('/panel/setting/defaultSettings');
  703. if (!msg.success) {
  704. return;
  705. }
  706. with(msg.obj){
  707. this.expireDiff = expireDiff * 86400000;
  708. this.trafficDiff = trafficDiff * 1073741824;
  709. this.defaultCert = defaultCert;
  710. this.defaultKey = defaultKey;
  711. this.tgBotEnable = tgBotEnable;
  712. this.subSettings = {
  713. enable : subEnable,
  714. subURI: subURI,
  715. subJsonURI: subJsonURI
  716. };
  717. this.pageSize = pageSize;
  718. this.remarkModel = remarkModel;
  719. this.datepicker = datepicker;
  720. this.ipLimitEnable = ipLimitEnable;
  721. }
  722. },
  723. setInbounds(dbInbounds) {
  724. this.inbounds.splice(0);
  725. this.dbInbounds.splice(0);
  726. this.clientCount.splice(0);
  727. for (const inbound of dbInbounds) {
  728. const dbInbound = new DBInbound(inbound);
  729. to_inbound = dbInbound.toInbound()
  730. this.inbounds.push(to_inbound);
  731. this.dbInbounds.push(dbInbound);
  732. if ([Protocols.VMESS, Protocols.VLESS, Protocols.TROJAN, Protocols.SHADOWSOCKS].includes(inbound.protocol)) {
  733. if (dbInbound.isSS && (!to_inbound.isSSMultiUser)) {
  734. continue;
  735. }
  736. this.clientCount[inbound.id] = this.getClientCounts(inbound, to_inbound);
  737. }
  738. }
  739. if(this.enableFilter){
  740. this.filterInbounds();
  741. } else {
  742. this.searchInbounds(this.searchKey);
  743. }
  744. },
  745. getClientCounts(dbInbound, inbound) {
  746. let clientCount = 0, active = [], deactive = [], depleted = [], expiring = [], online = [];
  747. clients = inbound.clients;
  748. clientStats = dbInbound.clientStats
  749. now = new Date().getTime()
  750. if (clients) {
  751. clientCount = clients.length;
  752. if (dbInbound.enable) {
  753. clients.forEach(client => {
  754. if (client.enable) {
  755. active.push(client.email);
  756. if (this.isClientOnline(client.email)) online.push(client.email);
  757. } else {
  758. deactive.push(client.email);
  759. }
  760. });
  761. clientStats.forEach(client => {
  762. if (!client.enable) {
  763. depleted.push(client.email);
  764. } else {
  765. if ((client.expiryTime > 0 && (client.expiryTime - now < this.expireDiff)) ||
  766. (client.total > 0 && (client.total - (client.up + client.down) < this.trafficDiff))) expiring.push(client.email);
  767. }
  768. });
  769. } else {
  770. clients.forEach(client => {
  771. deactive.push(client.email);
  772. });
  773. }
  774. }
  775. return {
  776. clients: clientCount,
  777. active: active,
  778. deactive: deactive,
  779. depleted: depleted,
  780. expiring: expiring,
  781. online: online,
  782. };
  783. },
  784. searchInbounds(key) {
  785. if (ObjectUtil.isEmpty(key)) {
  786. this.searchedInbounds = this.dbInbounds.slice();
  787. } else {
  788. this.searchedInbounds.splice(0, this.searchedInbounds.length);
  789. this.dbInbounds.forEach(inbound => {
  790. if (ObjectUtil.deepSearch(inbound, key)) {
  791. const newInbound = new DBInbound(inbound);
  792. const inboundSettings = JSON.parse(inbound.settings);
  793. if (inboundSettings.hasOwnProperty('clients')) {
  794. const searchedSettings = { "clients": [] };
  795. inboundSettings.clients.forEach(client => {
  796. if (ObjectUtil.deepSearch(client, key)) {
  797. searchedSettings.clients.push(client);
  798. }
  799. });
  800. newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, searchedSettings);
  801. }
  802. this.searchedInbounds.push(newInbound);
  803. }
  804. });
  805. }
  806. },
  807. filterInbounds() {
  808. if (ObjectUtil.isEmpty(this.filterBy)) {
  809. this.searchedInbounds = this.dbInbounds.slice();
  810. } else {
  811. this.searchedInbounds.splice(0, this.searchedInbounds.length);
  812. this.dbInbounds.forEach(inbound => {
  813. const newInbound = new DBInbound(inbound);
  814. const inboundSettings = JSON.parse(inbound.settings);
  815. if (this.clientCount[inbound.id] && this.clientCount[inbound.id].hasOwnProperty(this.filterBy)){
  816. const list = this.clientCount[inbound.id][this.filterBy];
  817. if (list.length > 0) {
  818. const filteredSettings = { "clients": [] };
  819. inboundSettings.clients.forEach(client => {
  820. if (list.includes(client.email)) {
  821. filteredSettings.clients.push(client);
  822. }
  823. });
  824. newInbound.settings = Inbound.Settings.fromJson(inbound.protocol, filteredSettings);
  825. this.searchedInbounds.push(newInbound);
  826. }
  827. }
  828. });
  829. }
  830. },
  831. toggleFilter(){
  832. if(this.enableFilter) {
  833. this.searchKey = '';
  834. } else {
  835. this.filterBy = '';
  836. this.searchedInbounds = this.dbInbounds.slice();
  837. }
  838. },
  839. generalActions(action) {
  840. switch (action.key) {
  841. case "import":
  842. this.importInbound();
  843. break;
  844. case "export":
  845. this.exportAllLinks();
  846. break;
  847. case "subs":
  848. this.exportAllSubs();
  849. break;
  850. case "resetInbounds":
  851. this.resetAllTraffic();
  852. break;
  853. case "resetClients":
  854. this.resetAllClientTraffics(-1);
  855. break;
  856. case "delDepletedClients":
  857. this.delDepletedClients(-1)
  858. break;
  859. case "addGroupClient":
  860. this.openGroupAddClient()
  861. break;
  862. }
  863. },
  864. clickAction(action, dbInbound) {
  865. switch (action.key) {
  866. case "qrcode":
  867. this.showQrcode(dbInbound.id);
  868. break;
  869. case "showInfo":
  870. this.showInfo(dbInbound.id);
  871. break;
  872. case "edit":
  873. this.openEditInbound(dbInbound.id);
  874. break;
  875. case "addClient":
  876. this.openAddClient(dbInbound.id)
  877. break;
  878. case "addBulkClient":
  879. this.openAddBulkClient(dbInbound.id)
  880. break;
  881. case "export":
  882. this.inboundLinks(dbInbound.id);
  883. break;
  884. case "subs":
  885. this.exportSubs(dbInbound.id);
  886. break;
  887. case "clipboard":
  888. this.copyToClipboard(dbInbound.id);
  889. break;
  890. case "resetTraffic":
  891. this.resetTraffic(dbInbound.id);
  892. break;
  893. case "resetClients":
  894. this.resetAllClientTraffics(dbInbound.id);
  895. break;
  896. case "clone":
  897. this.openCloneInbound(dbInbound);
  898. break;
  899. case "delete":
  900. this.delInbound(dbInbound.id);
  901. break;
  902. case "delDepletedClients":
  903. this.delDepletedClients(dbInbound.id)
  904. break;
  905. }
  906. },
  907. openCloneInbound(dbInbound) {
  908. this.$confirm({
  909. title: '{{ i18n "pages.inbounds.cloneInbound"}} \"' + dbInbound.remark + '\"',
  910. content: '{{ i18n "pages.inbounds.cloneInboundContent"}}',
  911. okText: '{{ i18n "pages.inbounds.cloneInboundOk"}}',
  912. class: themeSwitcher.currentTheme,
  913. cancelText: '{{ i18n "cancel" }}',
  914. onOk: () => {
  915. const baseInbound = dbInbound.toInbound();
  916. dbInbound.up = 0;
  917. dbInbound.down = 0;
  918. this.cloneInbound(baseInbound, dbInbound);
  919. },
  920. });
  921. },
  922. async cloneInbound(baseInbound, dbInbound) {
  923. const data = {
  924. up: dbInbound.up,
  925. down: dbInbound.down,
  926. total: dbInbound.total,
  927. remark: dbInbound.remark + " - Cloned",
  928. enable: dbInbound.enable,
  929. expiryTime: dbInbound.expiryTime,
  930. listen: '',
  931. port: RandomUtil.randomIntRange(10000, 60000),
  932. protocol: baseInbound.protocol,
  933. settings: Inbound.Settings.getSettings(baseInbound.protocol).toString(),
  934. streamSettings: baseInbound.stream.toString(),
  935. sniffing: baseInbound.sniffing.toString(),
  936. allocate: baseInbound.allocate.toString(),
  937. };
  938. await this.submit('/panel/inbound/add', data, inModal);
  939. },
  940. openAddInbound() {
  941. inModal.show({
  942. title: '{{ i18n "pages.inbounds.addInbound"}}',
  943. okText: '{{ i18n "pages.inbounds.create"}}',
  944. cancelText: '{{ i18n "close" }}',
  945. confirm: async (inbound, dbInbound) => {
  946. await this.addInbound(inbound, dbInbound, inModal);
  947. },
  948. isEdit: false
  949. });
  950. },
  951. openEditInbound(dbInboundId) {
  952. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  953. const inbound = dbInbound.toInbound();
  954. inModal.show({
  955. title: '{{ i18n "pages.inbounds.modifyInbound"}}',
  956. okText: '{{ i18n "pages.inbounds.update"}}',
  957. cancelText: '{{ i18n "close" }}',
  958. inbound: inbound,
  959. dbInbound: dbInbound,
  960. confirm: async (inbound, dbInbound) => {
  961. await this.updateInbound(inbound, dbInbound);
  962. },
  963. isEdit: true
  964. });
  965. },
  966. async addInbound(inbound, dbInbound) {
  967. const data = {
  968. up: dbInbound.up,
  969. down: dbInbound.down,
  970. total: dbInbound.total,
  971. remark: dbInbound.remark,
  972. enable: dbInbound.enable,
  973. expiryTime: dbInbound.expiryTime,
  974. listen: inbound.listen,
  975. port: inbound.port,
  976. protocol: inbound.protocol,
  977. settings: inbound.settings.toString(),
  978. };
  979. if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
  980. data.sniffing = inbound.sniffing.toString();
  981. data.allocate = inbound.allocate.toString();
  982. await this.submit('/panel/inbound/add', data, inModal);
  983. },
  984. async updateInbound(inbound, dbInbound) {
  985. const data = {
  986. up: dbInbound.up,
  987. down: dbInbound.down,
  988. total: dbInbound.total,
  989. remark: dbInbound.remark,
  990. enable: dbInbound.enable,
  991. expiryTime: dbInbound.expiryTime,
  992. listen: inbound.listen,
  993. port: inbound.port,
  994. protocol: inbound.protocol,
  995. settings: inbound.settings.toString(),
  996. };
  997. if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
  998. data.sniffing = inbound.sniffing.toString();
  999. data.allocate = inbound.allocate.toString();
  1000. await this.submit(`/panel/inbound/update/${dbInbound.id}`, data, inModal);
  1001. },
  1002. openGroupAddClient() {
  1003. clientModal.show({
  1004. title: '{{ i18n "pages.client.groupAdd"}}',
  1005. okText: '{{ i18n "pages.client.submitAdd"}}',
  1006. dbInbounds: this.dbInbounds,
  1007. confirm: async (clients, dbInboundIds) => {
  1008. await this.addGroupClient(clients, dbInboundIds, clientModal).then((res) => {
  1009. if(res){
  1010. this.showQrcode(dbInboundIds[0],clients[0], true)
  1011. }
  1012. });
  1013. },
  1014. isEdit: false
  1015. });
  1016. },
  1017. openAddClient(dbInboundId) {
  1018. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1019. clientModal.show({
  1020. title: '{{ i18n "pages.client.add"}}',
  1021. okText: '{{ i18n "pages.client.submitAdd"}}',
  1022. dbInbound: dbInbound,
  1023. confirm: async (clients, dbInboundId) => {
  1024. await this.addClient(clients, dbInboundId, clientModal).then((res) => {
  1025. if(res){
  1026. this.showQrcode(dbInboundId,clients)
  1027. }
  1028. });
  1029. },
  1030. isEdit: false
  1031. });
  1032. },
  1033. openAddBulkClient(dbInboundId) {
  1034. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1035. clientsBulkModal.show({
  1036. title: '{{ i18n "pages.client.bulk"}} ' + dbInbound.remark,
  1037. okText: '{{ i18n "pages.client.bulk"}}',
  1038. dbInbound: dbInbound,
  1039. confirm: async (clients, dbInboundId) => {
  1040. await this.addClient(clients, dbInboundId, clientsBulkModal);
  1041. },
  1042. });
  1043. },
  1044. openEditClient(dbInboundId, client) {
  1045. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1046. clients = this.getInboundClients(dbInbound);
  1047. index = this.findIndexOfClient(dbInbound.protocol, clients, client);
  1048. clientModal.show({
  1049. title: '{{ i18n "pages.client.edit"}}',
  1050. okText: '{{ i18n "pages.client.submitEdit"}}',
  1051. dbInbounds: this.dbInbounds,
  1052. dbInbound: dbInbound,
  1053. index: index,
  1054. confirm: async (client, dbInboundId, clientId) => {
  1055. clientModal.loading();
  1056. await this.updateClient(client, dbInboundId, clientId);
  1057. clientModal.close();
  1058. },
  1059. isEdit: true
  1060. });
  1061. },
  1062. findIndexOfClient(protocol, clients, client) {
  1063. switch (protocol) {
  1064. case Protocols.TROJAN:
  1065. case Protocols.SHADOWSOCKS:
  1066. return clients.findIndex(item => item.password === client.password && item.email === client.email);
  1067. default: return clients.findIndex(item => item.id === client.id && item.email === client.email);
  1068. }
  1069. },
  1070. async addClient(clients, dbInboundId, modal) {
  1071. const data = {
  1072. id: dbInboundId,
  1073. settings: '{"clients": [' + clients.toString() + ']}',
  1074. };
  1075. await this.submit(`/panel/inbound/addClient`, data, modal);
  1076. },
  1077. async addGroupClient(clients, dbInboundIds, modal) {
  1078. const data = []
  1079. dbInboundIds.forEach((dbInboundId, index) => {
  1080. data.push({
  1081. id: dbInboundId,
  1082. settings: '{"clients": [' + clients[index].toString() + ']}',
  1083. })
  1084. })
  1085. return await this.submit(`/panel/inbound/addGroupClient`, data, modal, true)
  1086. },
  1087. async updateClient(client, dbInboundId, clientId) {
  1088. if (Array.isArray(client) && Array.isArray(dbInboundId) && Array.isArray(clientId)){
  1089. const data = []
  1090. client.forEach((client, index) => {
  1091. data.push({
  1092. clientId: clientId[index],
  1093. inbound: {
  1094. id: dbInboundId[index],
  1095. settings: '{"clients": [' + client.toString() + ']}',
  1096. }
  1097. })
  1098. })
  1099. await this.submit(`/panel/inbound/updateClients`, data, clientModal, true);
  1100. }else{
  1101. const data = {
  1102. id: dbInboundId,
  1103. settings: '{"clients": [' + client.toString() + ']}',
  1104. };
  1105. await this.submit(`/panel/inbound/updateClient/${clientId}`, data, clientModal);
  1106. }
  1107. },
  1108. resetTraffic(dbInboundId) {
  1109. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1110. this.$confirm({
  1111. title: '{{ i18n "pages.inbounds.resetTraffic"}}' + ' #' + dbInboundId,
  1112. content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
  1113. class: themeSwitcher.currentTheme,
  1114. okText: '{{ i18n "reset"}}',
  1115. cancelText: '{{ i18n "cancel"}}',
  1116. onOk: () => {
  1117. const inbound = dbInbound.toInbound();
  1118. dbInbound.up = 0;
  1119. dbInbound.down = 0;
  1120. this.updateInbound(inbound, dbInbound);
  1121. },
  1122. });
  1123. },
  1124. delInbound(dbInboundId) {
  1125. this.$confirm({
  1126. title: '{{ i18n "pages.inbounds.deleteInbound"}}' + ' #' + dbInboundId,
  1127. content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
  1128. class: themeSwitcher.currentTheme,
  1129. okText: '{{ i18n "delete"}}',
  1130. cancelText: '{{ i18n "cancel"}}',
  1131. onOk: () => this.submit('/panel/inbound/del/' + dbInboundId),
  1132. });
  1133. },
  1134. async delClientHandler(dbInboundId, currentClient, clients = []) {
  1135. if (clients.length > 0) {
  1136. const deleteRequestData = [];
  1137. for (const client of clients) {
  1138. const dbInbound = this.dbInbounds.find(inbound => inbound.id === client.inboundId);
  1139. if (dbInbound) {
  1140. const inbound = dbInbound.toInbound();
  1141. if (inbound && inbound.clients && inbound.clients.length === 1) {
  1142. let newClient = Inbound.Settings.getSettings(inbound.protocol).toString();
  1143. newClient = JSON.parse(newClient);
  1144. newClient = newClient && newClient.clients && newClient.clients.length > 0 ? JSON.stringify(newClient.clients[0], null, 2) : null;
  1145. if (newClient) {
  1146. const data = {
  1147. id: client.inboundId,
  1148. settings: '{"clients": [' + newClient + ']}',
  1149. };
  1150. await this.submit(`/panel/inbound/addClient`, data, null);
  1151. }
  1152. }
  1153. deleteRequestData.push({
  1154. inboundId: client.inboundId,
  1155. clientId: client.clientId,
  1156. });
  1157. }
  1158. }
  1159. await this.submit('/panel/inbound/delGroupClients', deleteRequestData, null, true);
  1160. } else {
  1161. const dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1162. const clientId = this.getClientId(dbInbound.protocol, currentClient);
  1163. await this.submit(`/panel/inbound/${dbInboundId}/delClient/${clientId}`);
  1164. }
  1165. },
  1166. delClient(dbInboundId, currentClient, confirmation = true) {
  1167. const subGroup = this.subSettings.enable ? this.getSubGroupClients(this.dbInbounds, currentClient) : [];
  1168. const clients = subGroup && subGroup.clients && subGroup.clients.length > 1 ? subGroup.clients : [];
  1169. if (confirmation){
  1170. const clientEmails = clients.length > 0 ? clients.map(item => item.email) : currentClient.email
  1171. this.$confirm({
  1172. title: '{{ i18n "pages.inbounds.deleteClient"}}' + ' ' + clientEmails,
  1173. content: '{{ i18n "pages.inbounds.deleteClientContent"}}',
  1174. class: themeSwitcher.currentTheme,
  1175. okText: '{{ i18n "delete"}}',
  1176. cancelText: '{{ i18n "cancel"}}',
  1177. onOk: () => this.delClientHandler(dbInboundId, currentClient, clients),
  1178. });
  1179. } else {
  1180. this.delClientHandler(dbInboundId, currentClient, clients)
  1181. }
  1182. },
  1183. getSubGroupClients(dbInbounds, currentClient) {
  1184. const response = {
  1185. inbounds: [],
  1186. clients: [],
  1187. editIds: []
  1188. }
  1189. if (dbInbounds && dbInbounds.length > 0 && currentClient) {
  1190. dbInbounds.forEach((dbInboundItem) => {
  1191. const dbInbound = new DBInbound(dbInboundItem);
  1192. if (dbInbound) {
  1193. const inbound = dbInbound.toInbound();
  1194. if (inbound) {
  1195. const clients = inbound.clients;
  1196. if (clients.length > 0) {
  1197. clients.forEach((client) => {
  1198. if (client['subId'] === currentClient['subId']) {
  1199. client['inboundId'] = dbInboundItem.id
  1200. client['clientId'] = this.getClientId(dbInbound.protocol, client)
  1201. response.inbounds.push(dbInboundItem.id)
  1202. response.clients.push(client)
  1203. response.editIds.push(client['clientId'])
  1204. }
  1205. })
  1206. }
  1207. }
  1208. }
  1209. })
  1210. }
  1211. return response;
  1212. },
  1213. getClientId(protocol, client) {
  1214. switch (protocol) {
  1215. case Protocols.TROJAN: return client.password;
  1216. case Protocols.SHADOWSOCKS: return client.email;
  1217. default: return client.id;
  1218. }
  1219. },
  1220. checkFallback(dbInbound) {
  1221. newDbInbound = new DBInbound(dbInbound);
  1222. if (dbInbound.listen.startsWith("@")){
  1223. rootInbound = this.inbounds.find((i) =>
  1224. i.isTcp &&
  1225. ['trojan','vless'].includes(i.protocol) &&
  1226. i.settings.fallbacks.find(f => f.dest === dbInbound.listen)
  1227. );
  1228. if (rootInbound) {
  1229. newDbInbound.listen = rootInbound.listen;
  1230. newDbInbound.port = rootInbound.port;
  1231. newInbound = newDbInbound.toInbound();
  1232. newInbound.stream.security = rootInbound.stream.security;
  1233. newInbound.stream.tls = rootInbound.stream.tls;
  1234. newInbound.stream.externalProxy = rootInbound.stream.externalProxy;
  1235. newDbInbound.streamSettings = newInbound.stream.toString();
  1236. }
  1237. }
  1238. return newDbInbound;
  1239. },
  1240. showQrcode(dbInboundId, client, isJustSub = false) {
  1241. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1242. newDbInbound = this.checkFallback(dbInbound);
  1243. qrModal.show('{{ i18n "qrCode"}}', newDbInbound, client, isJustSub);
  1244. },
  1245. showInfo(dbInboundId, client) {
  1246. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1247. index=0;
  1248. if (dbInbound.isMultiUser()){
  1249. inbound = dbInbound.toInbound();
  1250. clients = inbound.clients;
  1251. index = this.findIndexOfClient(dbInbound.protocol, clients, client);
  1252. }
  1253. newDbInbound = this.checkFallback(dbInbound);
  1254. infoModal.show(newDbInbound, index);
  1255. },
  1256. switchEnable(dbInboundId,state) {
  1257. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1258. dbInbound.enable = state;
  1259. this.submit(`/panel/inbound/update/${dbInboundId}`, dbInbound);
  1260. },
  1261. async switchEnableClient(dbInboundId, client) {
  1262. this.loading()
  1263. const subGroup = this.subSettings.enable ? this.getSubGroupClients(this.dbInbounds, client) : [];
  1264. if (subGroup && subGroup.clients && subGroup.clients.length > 0){
  1265. await this.updateClient(subGroup.clients.map(item => {
  1266. item.enable = !item.enable
  1267. return item
  1268. }), subGroup.inbounds, subGroup.editIds);
  1269. }else{
  1270. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1271. inbound = dbInbound.toInbound();
  1272. clients = inbound.clients;
  1273. index = this.findIndexOfClient(dbInbound.protocol, clients, client);
  1274. clients[index].enable = !clients[index].enable;
  1275. clientId = this.getClientId(dbInbound.protocol, clients[index]);
  1276. await this.updateClient(clients[index], dbInboundId, clientId);
  1277. }
  1278. this.loading(false);
  1279. },
  1280. async submit(url, data, model, isJson = false) {
  1281. const msg = isJson ? await HttpUtil.postWithModalJson(url, data, model) : await HttpUtil.postWithModal(url, data, model);
  1282. if (msg.success) {
  1283. await this.getDBInbounds();
  1284. }
  1285. return msg
  1286. },
  1287. getInboundClients(dbInbound) {
  1288. return dbInbound.toInbound().clients;
  1289. },
  1290. resetClientTrafficHandler(client, dbInboundId, clients = []) {
  1291. if (clients.length > 0){
  1292. const resetRequests = clients
  1293. .filter(client => {
  1294. const inbound = this.dbInbounds.find(inbound => inbound.id === client.inboundId);
  1295. return inbound && this.hasClientStats(inbound, client.email);
  1296. }).map(client => ({ inboundId: client.inboundId, email: client.email}));
  1297. this.submit('/panel/inbound/resetGroupClientTraffic', resetRequests, null, true)
  1298. }else {
  1299. this.submit('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email);
  1300. }
  1301. },
  1302. resetClientTraffic(client, dbInboundId, confirmation = true) {
  1303. const subGroup = this.subSettings.enable ? this.getSubGroupClients(this.dbInbounds, client) : [];
  1304. const clients = subGroup && subGroup.clients && subGroup.clients.length > 1 ? subGroup.clients : [];
  1305. if (confirmation){
  1306. const clientEmails = clients.length > 0 ? clients.map(item => item.email) : client.email
  1307. this.$confirm({
  1308. title: '{{ i18n "pages.inbounds.resetTraffic"}}' + ' ' + clientEmails,
  1309. content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
  1310. class: themeSwitcher.currentTheme,
  1311. okText: '{{ i18n "reset"}}',
  1312. cancelText: '{{ i18n "cancel"}}',
  1313. onOk: () => this.resetClientTrafficHandler(client, dbInboundId, clients),
  1314. })
  1315. } else {
  1316. this.resetClientTrafficHandler(client, dbInboundId, clients);
  1317. }
  1318. },
  1319. resetAllTraffic() {
  1320. this.$confirm({
  1321. title: '{{ i18n "pages.inbounds.resetAllTrafficTitle"}}',
  1322. content: '{{ i18n "pages.inbounds.resetAllTrafficContent"}}',
  1323. class: themeSwitcher.currentTheme,
  1324. okText: '{{ i18n "reset"}}',
  1325. cancelText: '{{ i18n "cancel"}}',
  1326. onOk: () => this.submit('/panel/inbound/resetAllTraffics'),
  1327. });
  1328. },
  1329. resetAllClientTraffics(dbInboundId) {
  1330. this.$confirm({
  1331. title: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficTitle"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficTitle"}}',
  1332. content: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficContent"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficContent"}}',
  1333. class: themeSwitcher.currentTheme,
  1334. okText: '{{ i18n "reset"}}',
  1335. cancelText: '{{ i18n "cancel"}}',
  1336. onOk: () => this.submit('/panel/inbound/resetAllClientTraffics/' + dbInboundId),
  1337. })
  1338. },
  1339. delDepletedClients(dbInboundId) {
  1340. this.$confirm({
  1341. title: '{{ i18n "pages.inbounds.delDepletedClientsTitle"}}',
  1342. content: '{{ i18n "pages.inbounds.delDepletedClientsContent"}}',
  1343. class: themeSwitcher.currentTheme,
  1344. okText: '{{ i18n "delete"}}',
  1345. cancelText: '{{ i18n "cancel"}}',
  1346. onOk: () => this.submit('/panel/inbound/delDepletedClients/' + dbInboundId),
  1347. })
  1348. },
  1349. isExpiry(dbInbound, index) {
  1350. return dbInbound.toInbound().isExpiry(index);
  1351. },
  1352. hasClientStats(dbInbound, email) {
  1353. if (email.length == 0) return 0;
  1354. return !!dbInbound.clientStats.find(stats => stats.email === email);
  1355. },
  1356. getUpStats(dbInbound, email) {
  1357. if (email.length == 0) return 0;
  1358. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1359. return clientStats ? clientStats.up : 0;
  1360. },
  1361. getDownStats(dbInbound, email) {
  1362. if (email.length == 0) return 0;
  1363. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1364. return clientStats ? clientStats.down : 0;
  1365. },
  1366. getSumStats(dbInbound, email) {
  1367. if (email.length == 0) return 0;
  1368. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1369. return clientStats ? clientStats.up + clientStats.down : 0;
  1370. },
  1371. getRemStats(dbInbound, email) {
  1372. if (email.length == 0) return 0;
  1373. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1374. if (!clientStats) return 0;
  1375. remained = clientStats.total - (clientStats.up + clientStats.down);
  1376. return remained>0 ? remained : 0;
  1377. },
  1378. clientStatsColor(dbInbound, email) {
  1379. if (email.length == 0) return clientUsageColor();
  1380. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1381. return clientUsageColor(clientStats, app.trafficDiff)
  1382. },
  1383. statsProgress(dbInbound, email) {
  1384. if (email.length == 0) return 100;
  1385. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1386. if (!clientStats) return 0;
  1387. if (clientStats.total == 0) return 100;
  1388. return 100*(clientStats.down + clientStats.up)/clientStats.total;
  1389. },
  1390. expireProgress(expTime, reset) {
  1391. now = new Date().getTime();
  1392. remainedSeconds = expTime < 0 ? -expTime/1000 : (expTime-now)/1000;
  1393. resetSeconds = reset * 86400;
  1394. if (remainedSeconds >= resetSeconds) return 0;
  1395. return 100*(1-(remainedSeconds/resetSeconds));
  1396. },
  1397. remainedDays(expTime){
  1398. if (expTime == 0) return null;
  1399. if (expTime < 0) return formatSecond(expTime/-1000);
  1400. now = new Date().getTime();
  1401. if (expTime < now) return '{{ i18n "depleted" }}';
  1402. return formatSecond((expTime-now)/1000);
  1403. },
  1404. statsExpColor(dbInbound, email){
  1405. if (email.length == 0) return '#7a316f';
  1406. clientStats = dbInbound.clientStats.find(stats => stats.email === email);
  1407. if (!clientStats) return '#7a316f';
  1408. statsColor = usageColor(clientStats.down + clientStats.up, this.trafficDiff, clientStats.total);
  1409. expColor = usageColor(new Date().getTime(), this.expireDiff, clientStats.expiryTime);
  1410. switch (true) {
  1411. case statsColor == "red" || expColor == "red":
  1412. return "#cf3c3c"; // Red
  1413. case statsColor == "orange" || expColor == "orange":
  1414. return "#f37b24"; // Orange
  1415. case statsColor == "green" || expColor == "green":
  1416. return "#008771"; // Green
  1417. default:
  1418. return "#7a316f"; // purple
  1419. }
  1420. },
  1421. isClientEnabled(dbInbound, email) {
  1422. clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null;
  1423. return clientStats ? clientStats['enable'] : true;
  1424. },
  1425. isClientOnline(email) {
  1426. return this.onlineClients.includes(email);
  1427. },
  1428. isRemovable(dbInboundId) {
  1429. return this.getInboundClients(this.dbInbounds.find(row => row.id === dbInboundId)).length > 1;
  1430. },
  1431. inboundLinks(dbInboundId) {
  1432. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1433. newDbInbound = this.checkFallback(dbInbound);
  1434. txtModal.show('{{ i18n "pages.inbounds.export"}}', newDbInbound.genInboundLinks(this.remarkModel), newDbInbound.remark);
  1435. },
  1436. exportSubs(dbInboundId) {
  1437. const dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1438. const clients = this.getInboundClients(dbInbound);
  1439. let subLinks = []
  1440. if (clients != null){
  1441. clients.forEach(c => {
  1442. if (c.subId && c.subId.length>0){
  1443. subLinks.push(this.subSettings.subURI + c.subId)
  1444. }
  1445. })
  1446. }
  1447. txtModal.show(
  1448. '{{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}',
  1449. [...new Set(subLinks)].join('\n'),
  1450. dbInbound.remark + "-Subs");
  1451. },
  1452. importInbound() {
  1453. promptModal.open({
  1454. title: '{{ i18n "pages.inbounds.importInbound" }}',
  1455. type: 'textarea',
  1456. value: '',
  1457. okText: '{{ i18n "pages.inbounds.import" }}',
  1458. confirm: async (dbInboundText) => {
  1459. await this.submit('/panel/inbound/import', {data: dbInboundText}, promptModal);
  1460. },
  1461. });
  1462. },
  1463. exportAllSubs() {
  1464. let subLinks = []
  1465. for (const dbInbound of this.dbInbounds) {
  1466. const clients = this.getInboundClients(dbInbound);
  1467. if (clients != null){
  1468. clients.forEach(c => {
  1469. if (c.subId && c.subId.length>0){
  1470. subLinks.push(this.subSettings.subURI + c.subId)
  1471. }
  1472. })
  1473. }
  1474. }
  1475. txtModal.show(
  1476. '{{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}',
  1477. [...new Set(subLinks)].join('\r\n'),
  1478. 'All-Inbounds-Subs');
  1479. },
  1480. exportAllLinks() {
  1481. let copyText = [];
  1482. for (const dbInbound of this.dbInbounds) {
  1483. copyText.push(dbInbound.genInboundLinks(this.remarkModel));
  1484. }
  1485. txtModal.show('{{ i18n "pages.inbounds.export"}}', copyText.join('\r\n'), 'All-Inbounds');
  1486. },
  1487. copyToClipboard(dbInboundId) {
  1488. dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
  1489. txtModal.show('{{ i18n "pages.inbounds.inboundData" }}', JSON.stringify(dbInbound, null, 2));
  1490. },
  1491. async startDataRefreshLoop() {
  1492. while (this.isRefreshEnabled) {
  1493. try {
  1494. await this.getDBInbounds();
  1495. } catch (e) {
  1496. console.error(e);
  1497. }
  1498. await PromiseUtil.sleep(this.refreshInterval);
  1499. }
  1500. },
  1501. toggleRefresh() {
  1502. localStorage.setItem("isRefreshEnabled", this.isRefreshEnabled);
  1503. if (this.isRefreshEnabled) {
  1504. this.startDataRefreshLoop();
  1505. }
  1506. },
  1507. changeRefreshInterval() {
  1508. localStorage.setItem("refreshInterval", this.refreshInterval);
  1509. },
  1510. async manualRefresh() {
  1511. if (!this.refreshing) {
  1512. this.spinning = true;
  1513. await this.getDBInbounds();
  1514. this.spinning = false;
  1515. }
  1516. },
  1517. pagination(obj){
  1518. if (this.pageSize > 0 && obj.length>this.pageSize) {
  1519. // Set page options based on object size
  1520. sizeOptions = [];
  1521. for (i=this.pageSize;i<=obj.length;i=i+this.pageSize) {
  1522. sizeOptions.push(i.toString());
  1523. }
  1524. // Add option to see all in one page
  1525. sizeOptions.push(i.toString());
  1526. p = {
  1527. showSizeChanger: true,
  1528. size: 'small',
  1529. position: 'bottom',
  1530. pageSize: this.pageSize,
  1531. pageSizeOptions: sizeOptions
  1532. };
  1533. return p;
  1534. }
  1535. return false
  1536. },
  1537. onResize() {
  1538. this.isMobile = window.innerWidth <= 768;
  1539. }
  1540. },
  1541. watch: {
  1542. searchKey: debounce(function (newVal) {
  1543. this.searchInbounds(newVal);
  1544. }, 500)
  1545. },
  1546. mounted() {
  1547. if (window.location.protocol !== "https:") {
  1548. this.showAlert = true;
  1549. }
  1550. window.addEventListener('resize', this.onResize);
  1551. this.onResize();
  1552. this.loading();
  1553. this.getDefaultSettings();
  1554. if (this.isRefreshEnabled) {
  1555. this.startDataRefreshLoop();
  1556. }
  1557. else {
  1558. this.getDBInbounds();
  1559. }
  1560. this.loading(false);
  1561. },
  1562. computed: {
  1563. total() {
  1564. let down = 0, up = 0;
  1565. let clients = 0, deactive = [], depleted = [], expiring = [];
  1566. this.dbInbounds.forEach(dbInbound => {
  1567. down += dbInbound.down;
  1568. up += dbInbound.up;
  1569. if (this.clientCount[dbInbound.id]) {
  1570. clients += this.clientCount[dbInbound.id].clients;
  1571. deactive = deactive.concat(this.clientCount[dbInbound.id].deactive);
  1572. depleted = depleted.concat(this.clientCount[dbInbound.id].depleted);
  1573. expiring = expiring.concat(this.clientCount[dbInbound.id].expiring);
  1574. }
  1575. });
  1576. return {
  1577. down: down,
  1578. up: up,
  1579. clients: clients,
  1580. deactive: deactive,
  1581. depleted: depleted,
  1582. expiring: expiring,
  1583. };
  1584. }
  1585. },
  1586. });
  1587. </script>
  1588. {{template "inboundModal"}}
  1589. {{template "promptModal"}}
  1590. {{template "qrcodeModal"}}
  1591. {{template "textModal"}}
  1592. {{template "inboundInfoModal"}}
  1593. {{template "clientsModal"}}
  1594. {{template "clientsBulkModal"}}
  1595. </body>
  1596. </html>