You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

218 lines
6.5KB

  1. <template>
  2. <div id="main">
  3. <div class="first-line">
  4. <v-card class="elevation-5 infos" color="primary">
  5. <v-card-title class="center-text">
  6. <h2>Daemon Infos</h2>
  7. </v-card-title>
  8. <v-card-text>
  9. <ul>
  10. <li><strong>Current Height:</strong> {{ formatValue(infos.height) }}</li>
  11. <li><strong>Topo Height:</strong> {{ formatValue(infos.topoheight) }}</li>
  12. <li><strong>Hashrate:</strong> {{ formatValue((infos.difficulty/(infos.target*1000*1000)).toFixed(2)) }} MH/s</li>
  13. <li><strong>Average Block Time:</strong> {{ infos.averageblocktime50 }}s</li>
  14. <li><strong>Difficulty:</strong> {{ formatValue(infos.difficulty) }} </li>
  15. <li><strong>Median Block Size:</strong> {{ formatValue(infos.median_block_size/1000) }} kB</li>
  16. <li><strong>Current Supply:</strong> {{ formatValue(infos.total_supply) }} DERO</li>
  17. </ul>
  18. </v-card-text>
  19. </v-card>
  20. <v-card class="elevation-5 blocks" :loading="loading" color="primary">
  21. <v-card-title>
  22. <h2>Blocks Found</h2>
  23. <v-spacer></v-spacer>
  24. <v-text-field class="search" v-model="blocksSearch" append-icon="magnify" label="Search" single-line hide-details></v-text-field>
  25. </v-card-title>
  26. <v-data-table v-model="selected" show-select no-data-text="No blocks found" :search="blocksSearch" multi-sort :headers="blocksHeaders" :items="blocks" :items-per-page="5">
  27. </v-data-table>
  28. </v-card>
  29. </div>
  30. <v-card class="elevation-5 miners" :loading="loading" color="primary">
  31. <v-card-title>
  32. <h2>Connected Miners</h2>
  33. <v-spacer></v-spacer>
  34. <v-text-field class="search" v-model="minersSearch" no-data-text="No miners connected" append-icon="magnify" label="Search" single-line hide-details></v-text-field>
  35. </v-card-title>
  36. <v-data-table v-model="selected" show-select :search="minersSearch" multi-sort :headers="headers" :items="miners" :items-per-page="5">
  37. <template v-slot:item.lastJobRequest="{ item }">
  38. <span>{{ formatTime(item.lastJobRequest) }}</span>
  39. </template>
  40. <template v-slot:item.lastBlockSent="{ item }">
  41. <span>{{ item.lastBlockSent != -1 ? formatTime(item.lastBlockSent) : "No block found yet" }}</span>
  42. </template>
  43. <!--<template v-slot:item.alive="{ item }">
  44. <span :style="'color:' + (item.alive ? 'green' : 'red')">{{ item.alive }}</span>
  45. </template>-->
  46. </v-data-table>
  47. <v-card-text v-show="!this.loading" style="text-align: center;"><strong>Currently mining on:</strong> {{ infos.walletAddress }}</v-card-text>
  48. </v-card>
  49. </div>
  50. </template>
  51. <script>
  52. export default {
  53. data() {
  54. return {
  55. loading: true,
  56. minersSearch: "",
  57. blocksSearch: "",
  58. selected: [],
  59. headers: [
  60. {
  61. text: "IP",
  62. align: "start",
  63. value: "ip"
  64. },
  65. {
  66. text: "Last Job Request",
  67. value: "lastJobRequest"
  68. },
  69. {
  70. text: "Last Block Found",
  71. value: "lastBlockSent"
  72. },
  73. {
  74. text: "Blocks Found",
  75. value: "blocksFound"
  76. },
  77. {
  78. text: "Connected",
  79. value: "alive"
  80. }
  81. ],
  82. blocksHeaders: [
  83. {
  84. text: "Miner",
  85. align: "start",
  86. value: "minerIp"
  87. },
  88. {
  89. text: "Block Height",
  90. value: "height"
  91. },
  92. {
  93. text: "Hash",
  94. value: "blid"
  95. },
  96. {
  97. text: "Status",
  98. value: "status"
  99. }
  100. ],
  101. miners: [],
  102. infos: {},
  103. blocks: []
  104. }
  105. },
  106. mounted() {
  107. this.update()
  108. setInterval(() => this.update(), 5000)
  109. },
  110. methods: {
  111. update() {
  112. fetch(this.$api + "/info").then(result => result.json()).then(json => {
  113. this.infos = json
  114. })
  115. fetch(this.$api + "/blocks").then(result => result.json()).then(json => {
  116. json.reverse()
  117. this.blocks = json
  118. })
  119. fetch(this.$api + "/miners").then(result => result.json()).then(json => {
  120. if (this.loading) {
  121. this.loading = false
  122. }
  123. this.miners = json
  124. })
  125. },
  126. formatTime(timestamp) {
  127. let date = new Date(timestamp);
  128. return ("00" + (date.getMonth() + 1)).slice(-2) + "/" +
  129. ("00" + date.getDate()).slice(-2) + "/" +
  130. date.getFullYear() + " " +
  131. ("00" + date.getHours()).slice(-2) + ":" +
  132. ("00" + date.getMinutes()).slice(-2) + ":" +
  133. ("00" + date.getSeconds()).slice(-2);
  134. },
  135. formatValue(value) {
  136. if (!value) return 0
  137. return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
  138. }
  139. }
  140. }
  141. </script>
  142. <style scoped>
  143. #main {
  144. margin: 15%;
  145. margin-top: 5%;
  146. margin-bottom: 5%;
  147. }
  148. .theme--dark.v-data-table {
  149. background-color: var(--v-primary-base);
  150. }
  151. .theme--light.v-data-table {
  152. background-color: var(--v-primary-base);
  153. }
  154. .first-line {
  155. display: flex;
  156. justify-items: center;
  157. align-items: flex-start;
  158. }
  159. .infos {
  160. width: 30%;
  161. text-align: left;
  162. }
  163. ul li {
  164. list-style: none;
  165. padding: 0;
  166. margin-bottom: 2%;
  167. }
  168. .blocks {
  169. margin: auto;
  170. margin-left: 5%;
  171. width: 100%;
  172. padding-left: 1%;
  173. padding-right: 1%;
  174. }
  175. .miners {
  176. margin-top: 5%;
  177. padding-left: 1%;
  178. padding-right: 1%;
  179. width: 100%;
  180. }
  181. .center-text {
  182. text-align: center;
  183. }
  184. @media screen and (max-width: 1280px)
  185. {
  186. #main {
  187. margin: 5%;
  188. }
  189. .first-line {
  190. margin: auto;
  191. flex-direction: column;
  192. }
  193. .infos {
  194. margin: auto;
  195. width: auto;
  196. }
  197. .blocks {
  198. margin: auto;
  199. margin-top: 5%;
  200. margin-bottom: 5%;
  201. }
  202. }
  203. </style>