app.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. /* eslint-disable no-console */
  2. /* eslint-disable no-alert */
  3. /* eslint-disable no-undef */
  4. /* eslint-disable no-new */
  5. 'use strict';
  6. function bytes(bytes, decimals, kib, maxunit) {
  7. kib = kib || false;
  8. if (bytes === 0) return '0 B';
  9. if (Number.isNaN(parseFloat(bytes)) && !Number.isFinite(bytes)) return 'NaN';
  10. const k = kib ? 1024 : 1000;
  11. const dm = decimals != null && !Number.isNaN(decimals) && decimals >= 0 ? decimals : 2;
  12. const sizes = kib
  13. ? ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', 'BiB']
  14. : ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB'];
  15. let i = Math.floor(Math.log(bytes) / Math.log(k));
  16. if (maxunit !== undefined) {
  17. const index = sizes.indexOf(maxunit);
  18. if (index !== -1) i = index;
  19. }
  20. // eslint-disable-next-line no-restricted-properties
  21. return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
  22. }
  23. const i18n = new VueI18n({
  24. locale: localStorage.getItem('lang') || 'en',
  25. fallbackLocale: 'en',
  26. messages,
  27. });
  28. new Vue({
  29. el: '#app',
  30. i18n,
  31. data: {
  32. authenticated: null,
  33. authenticating: false,
  34. password: null,
  35. requiresPassword: null,
  36. clients: null,
  37. clientsPersist: {},
  38. clientDelete: null,
  39. clientCreate: null,
  40. clientCreateName: '',
  41. clientEditName: null,
  42. clientEditNameId: null,
  43. clientEditAddress: null,
  44. clientEditAddressId: null,
  45. qrcode: null,
  46. currentRelease: null,
  47. isDark: null,
  48. chartOptions: {
  49. chart: {
  50. background: 'transparent',
  51. type: 'bar',
  52. stacked: false,
  53. toolbar: {
  54. show: false,
  55. },
  56. animations: {
  57. enabled: false,
  58. },
  59. },
  60. colors: [
  61. '#DDDDDD', // rx
  62. '#EEEEEE', // tx
  63. ],
  64. dataLabels: {
  65. enabled: false,
  66. },
  67. plotOptions: {
  68. bar: {
  69. horizontal: false,
  70. },
  71. },
  72. xaxis: {
  73. labels: {
  74. show: false,
  75. },
  76. axisTicks: {
  77. show: true,
  78. },
  79. axisBorder: {
  80. show: true,
  81. },
  82. },
  83. yaxis: {
  84. labels: {
  85. show: false,
  86. },
  87. min: 0,
  88. },
  89. tooltip: {
  90. enabled: false,
  91. },
  92. legend: {
  93. show: false,
  94. },
  95. grid: {
  96. show: false,
  97. padding: {
  98. left: -10,
  99. right: 0,
  100. bottom: -15,
  101. top: -15,
  102. },
  103. column: {
  104. opacity: 0,
  105. },
  106. xaxis: {
  107. lines: {
  108. show: false,
  109. },
  110. },
  111. },
  112. },
  113. },
  114. methods: {
  115. dateTime: (value) => {
  116. return new Intl.DateTimeFormat(undefined, {
  117. year: 'numeric',
  118. month: 'short',
  119. day: 'numeric',
  120. hour: 'numeric',
  121. minute: 'numeric',
  122. }).format(value);
  123. },
  124. async refresh({
  125. updateCharts = false,
  126. } = {}) {
  127. if (!this.authenticated) return;
  128. const clients = await this.api.getClients();
  129. this.clients = clients.map((client) => {
  130. if (client.name.includes('@') && client.name.includes('.')) {
  131. client.avatar = `https://www.gravatar.com/avatar/${sha512(client.name)}?d=blank`;
  132. }
  133. if (!this.clientsPersist[client.id]) {
  134. this.clientsPersist[client.id] = {};
  135. this.clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
  136. this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
  137. this.clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
  138. this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
  139. }
  140. // Debug
  141. // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
  142. // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
  143. if (updateCharts) {
  144. this.clientsPersist[client.id].transferRxCurrent = client.transferRx - this.clientsPersist[client.id].transferRxPrevious;
  145. this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
  146. this.clientsPersist[client.id].transferTxCurrent = client.transferTx - this.clientsPersist[client.id].transferTxPrevious;
  147. this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
  148. this.clientsPersist[client.id].transferRxHistory.push(this.clientsPersist[client.id].transferRxCurrent);
  149. this.clientsPersist[client.id].transferRxHistory.shift();
  150. this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
  151. this.clientsPersist[client.id].transferTxHistory.shift();
  152. }
  153. client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
  154. client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
  155. client.transferTxHistory = this.clientsPersist[client.id].transferTxHistory;
  156. client.transferRxHistory = this.clientsPersist[client.id].transferRxHistory;
  157. client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);
  158. client.hoverTx = this.clientsPersist[client.id].hoverTx;
  159. client.hoverRx = this.clientsPersist[client.id].hoverRx;
  160. return client;
  161. });
  162. },
  163. login(e) {
  164. e.preventDefault();
  165. if (!this.password) return;
  166. if (this.authenticating) return;
  167. this.authenticating = true;
  168. this.api.createSession({
  169. password: this.password,
  170. })
  171. .then(async () => {
  172. const session = await this.api.getSession();
  173. this.authenticated = session.authenticated;
  174. this.requiresPassword = session.requiresPassword;
  175. return this.refresh();
  176. })
  177. .catch((err) => {
  178. alert(err.message || err.toString());
  179. })
  180. .finally(() => {
  181. this.authenticating = false;
  182. this.password = null;
  183. });
  184. },
  185. logout(e) {
  186. e.preventDefault();
  187. this.api.deleteSession()
  188. .then(() => {
  189. this.authenticated = false;
  190. this.clients = null;
  191. })
  192. .catch((err) => {
  193. alert(err.message || err.toString());
  194. });
  195. },
  196. createClient() {
  197. const name = this.clientCreateName;
  198. if (!name) return;
  199. this.api.createClient({ name })
  200. .catch((err) => alert(err.message || err.toString()))
  201. .finally(() => this.refresh().catch(console.error));
  202. },
  203. deleteClient(client) {
  204. this.api.deleteClient({ clientId: client.id })
  205. .catch((err) => alert(err.message || err.toString()))
  206. .finally(() => this.refresh().catch(console.error));
  207. },
  208. enableClient(client) {
  209. this.api.enableClient({ clientId: client.id })
  210. .catch((err) => alert(err.message || err.toString()))
  211. .finally(() => this.refresh().catch(console.error));
  212. },
  213. disableClient(client) {
  214. this.api.disableClient({ clientId: client.id })
  215. .catch((err) => alert(err.message || err.toString()))
  216. .finally(() => this.refresh().catch(console.error));
  217. },
  218. updateClientName(client, name) {
  219. this.api.updateClientName({ clientId: client.id, name })
  220. .catch((err) => alert(err.message || err.toString()))
  221. .finally(() => this.refresh().catch(console.error));
  222. },
  223. updateClientAddress(client, address) {
  224. this.api.updateClientAddress({ clientId: client.id, address })
  225. .catch((err) => alert(err.message || err.toString()))
  226. .finally(() => this.refresh().catch(console.error));
  227. },
  228. toggleTheme() {
  229. if (this.isDark) {
  230. localStorage.theme = 'light';
  231. document.documentElement.classList.remove('dark');
  232. } else {
  233. localStorage.theme = 'dark';
  234. document.documentElement.classList.add('dark');
  235. }
  236. this.isDark = !this.isDark;
  237. },
  238. },
  239. filters: {
  240. bytes,
  241. timeago: (value) => {
  242. return timeago.format(value, i18n.locale);
  243. },
  244. },
  245. mounted() {
  246. this.isDark = false;
  247. if (localStorage.theme === 'dark') {
  248. this.isDark = true;
  249. }
  250. this.api = new API();
  251. this.api.getSession()
  252. .then((session) => {
  253. this.authenticated = session.authenticated;
  254. this.requiresPassword = session.requiresPassword;
  255. this.refresh({
  256. updateCharts: true,
  257. }).catch((err) => {
  258. alert(err.message || err.toString());
  259. });
  260. })
  261. .catch((err) => {
  262. alert(err.message || err.toString());
  263. });
  264. setInterval(() => {
  265. this.refresh({
  266. updateCharts: true,
  267. }).catch(console.error);
  268. }, 1000);
  269. },
  270. });