Нет описания

index.html 7.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <main id="app" class="bd-masthead" id="content" role="main">
  2. <div class="container navbar-shift spacer-md">
  3. <div class="dashhead">
  4. <div class="dashhead-titles">
  5. <h6 class="dashhead-subtitle">Automation System</h6>
  6. <h3 class="dashhead-title">Overview </i></h3>
  7. </div>
  8. <div class="dashhead-toolbar">
  9. </div>
  10. </div>
  11. <hr class="dashhead-line">
  12. <div class="row spacer-sm">
  13. <div class="col-sm-4">
  14. <div class="statcard statcard-divided">
  15. <div class="statcard-header">
  16. <i class="fa fa-microchip icon-header" aria-hidden="true"></i>
  17. <h3 class="statcard-number">ACTIVE</h3>
  18. <span class="statcard-title">Automation Server</span>
  19. </div>
  20. <div class="statcard-content">
  21. <dl class="row">
  22. <dt class="col-sm-3">CPU</dt>
  23. <dd class="col-sm-9">45%</dd>
  24. <dt class="col-sm-3">RAM</dt>
  25. <dd class="col-sm-9">560M of 1024M</dd>
  26. <dt class="col-sm-3 text-truncate">Disk</dt>
  27. <dd class="col-sm-9">13.5Gb of 100Gb</dd>
  28. </dl>
  29. <div class="row spacer-sm">
  30. <div class="col-12">
  31. <button type="button" class="btn btn-outline-secondary btn-sm btn-block disabled"><i class="fa fa-refresh" aria-hidden="true"></i> Reboot Server</button>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="col-sm-4">
  38. <div class="statcard statcard-divided">
  39. <div class="statcard-header">
  40. <i class="fa fa-wifi icon-header" aria-hidden="true"></i>
  41. <h3 class="statcard-number" style="text-transform: uppercase;">{{wifi_routers_status.global}}</h3>
  42. <span class="statcard-title">Wifi Routers</span>
  43. </div>
  44. <div class="statcard-content">
  45. <dl class="row">
  46. <dt class="col-sm-8">Number of devices</dt>
  47. <dd class="col-sm-4">2</dd>
  48. <dt class="col-sm-8">Router Main</dt>
  49. <dd class="col-sm-4">{{wifi_routers_status.main_router}}</dd>
  50. <dt class="col-sm-8 text-truncate">Repeater 1</dt>
  51. <dd class="col-sm-4">{{wifi_routers_status.repeater_1}}</dd>
  52. </dl>
  53. <div class="row spacer-sm">
  54. <div class="col-6">
  55. <button type="button" v-on:click="restartRouter02()" class="btn btn-outline-secondary btn-sm btn-block"><i class="fa fa-refresh" aria-hidden="true"></i> Main Router</button>
  56. </div>
  57. <div class="col-6">
  58. <button type="button" class="btn btn-outline-secondary btn-sm btn-block disabled"><i class="fa fa-refresh" aria-hidden="true"></i> Repeater 1</button>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <div class="col-sm-4">
  65. <div class="statcard statcard-divided">
  66. <div class="statcard-header">
  67. <i class="fa fa-wifi icon-header" aria-hidden="true"></i>
  68. <h3 class="statcard-number" style="text-transform: uppercase;">{{wifi_routers_status.satelite}}</h3>
  69. <span class="statcard-title">Sattelite Connection</span>
  70. </div>
  71. <div class="statcard-content">
  72. <dl class="row">
  73. <dt class="col-sm-8">Connection Status</dt>
  74. <dd class="col-sm-4">Operacional</dd>
  75. <dt class="col-sm-8">Bandwith (day)</dt>
  76. <dd class="col-sm-4">0%</dd>
  77. <dt class="col-sm-8 text-truncate">Bandwith (night)</dt>
  78. <dd class="col-sm-4">15%</dd>
  79. </dl>
  80. <div class="row spacer-sm">
  81. <div class="col-12">
  82. <button type="button" v-on:click="restartRouter01()" class="btn btn-outline-secondary btn-sm btn-block"><i class="fa fa-refresh" aria-hidden="true"></i> Reconect</button>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="row spacer-sm">
  90. <div class="col-sm-4">
  91. <div class="statcard">
  92. <i class="fa fa-lightbulb-o icon-header" aria-hidden="true"></i>
  93. <button type="button" class="btn btn-outline-secondary " v-on:click="switchLight01(false)" style="float: right; margin-top: 2px;">{{light01_btn}}</button>
  94. <h3 class="statcard-number">{{light01}}</h3>
  95. <span class="statcard-title">Light</span>
  96. </div>
  97. </div>
  98. <div class="col-sm-4">
  99. <div class="statcard">
  100. <i class="fa fa-thermometer-quarter icon-header" aria-hidden="true"></i>
  101. <h3 class="statcard-number">{{temperature_external}}</h3>
  102. <span class="statcard-title">External Temperature</span>
  103. </div>
  104. </div>
  105. <!-- <div class="col-sm-4">
  106. <div class="statcard ">
  107. <i class="fa fa-thermometer-half icon-header" aria-hidden="true"></i>
  108. <h3 class="statcard-number">24ºC</h3>
  109. <span class="statcard-title">Internal Temp.</span>
  110. </div>
  111. </div>
  112. <div class="col-sm-4">
  113. <div class="statcard ">
  114. <i class="fa fa-tint icon-header" aria-hidden="true"></i>
  115. <h3 class="statcard-number">60%</h3>
  116. <span class="statcard-title">Humidity</span>
  117. </div>
  118. </div> -->
  119. </div>
  120. </div>
  121. </main>
  122. <script src="/socket.io/socket.io.js"></script>
  123. <script>
  124. var socket = io.connect('/');
  125. var http_post = function(url, data){
  126. var xhr = new XMLHttpRequest();
  127. xhr.open("POST", url, true);
  128. xhr.setRequestHeader('Content-Type', 'application/json');
  129. xhr.send(JSON.stringify(data));
  130. }
  131. var app = new Vue({
  132. el: "#app",
  133. data: {
  134. temperature_external: "--",
  135. light01 : "--",
  136. light01_status : undefined,
  137. light01_btn : "",
  138. wifi_routers_status : {
  139. global : "Unkown",
  140. main_router : "--",
  141. repeater_1 : "--",
  142. satelite: "Unkown"
  143. }
  144. },
  145. methods: {
  146. switchLight01: function(){
  147. var status;
  148. if(app.light01_status == true){
  149. status = false;
  150. } else {
  151. status = true;
  152. }
  153. http_post("/switch_relay", { code: "L01", status: status})
  154. },
  155. restartRouter01: function(){
  156. http_post("/switch_relay", { code: "R01", status: true})
  157. },
  158. restartRouter02: function(){
  159. http_post("/switch_relay", { code: "R02", status: true})
  160. }
  161. }
  162. })
  163. socket.on('temperature_external', function (data) {
  164. var temp = Math.round( data.temperature * 10 ) / 10;
  165. app.temperature_external = temp + "ºC";
  166. });
  167. socket.on('wifi_routers', function (data) {
  168. console.log(data);
  169. app.wifi_routers_status.satelite = data[0].status;
  170. app.wifi_routers_status.main_router = data[1].status;
  171. app.wifi_routers_status.repeater_1 = data[2].status;
  172. if(data[1].status == "Unkown" || data[2].status == "Unkown") {
  173. app.wifi_routers_status.global = "Unkown"
  174. } else if(data[1].status == "Inactive" && data[2].status == "Inactive") {
  175. app.wifi_routers_status.global = "Offline"
  176. } else if(data[1].status == "Inactive" || data[2].status == "Inactive") {
  177. app.wifi_routers_status.global = "Degraded"
  178. } else if(data[1].status == "Restarting" || data[2].status == "Restarting") {
  179. app.wifi_routers_status.global = "Degraded"
  180. } else {
  181. app.wifi_routers_status.global = "Active"
  182. }
  183. });
  184. socket.on('relay_switch', function (data) {
  185. console.log(data)
  186. var status = "ON";
  187. var btn = "Turn Off"
  188. if(data.status == false){
  189. status = "OFF"
  190. btn = "Turn On"
  191. }
  192. switch (data.code) {
  193. case "L01":
  194. app.light01 = status;
  195. app.light01_status = data.status
  196. app.light01_btn = btn
  197. break;
  198. }
  199. });
  200. socket.emit('relay_switch_update', {});
  201. setInterval(function () {
  202. socket.emit('relay_switch_update', {});
  203. }, 3000000);
  204. socket.emit('wifi_routers_update', {});
  205. setInterval(function () {
  206. socket.emit('wifi_routers_update', {});
  207. }, 30000);
  208. </script>