debugger.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. let socket = null, socketHandler = {},
  2. frontTimer = null, backTimer = null, Timeout = 500,
  3. DevicesAll = {}, DevicesShow = {},
  4. DeviceNow = {
  5. seq: "", online: false, location: "", ppv1: 0, ppv2: 0, ppv3: 0, ppv4: 0
  6. };
  7. const strBase = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789", strLen = 62;
  8. const randStr = len => {
  9. let res = "";
  10. for (let i = 0; i < len; i++) res += strBase[Math.floor(Math.random() * strLen)];
  11. return res;
  12. }, createDeviceNode = (seq, online) => {
  13. let $device = document.createElement("div"),
  14. $seq = document.createElement("span"),
  15. $status = document.createElement("span");
  16. $device.setAttribute("rel", seq);
  17. $device.className = "device " + (online ? "online" : "offline");
  18. $seq.className = "seq";
  19. $seq.innerText = seq;
  20. $status.className = "status";
  21. $status.innerText = online ? "在线" : "离线";
  22. $device.appendChild($seq);
  23. $device.appendChild($status);
  24. return $device;
  25. }, connectSocket = () => {
  26. const did = randStr(16);
  27. socket = new WebSocket(`${Url}/${did}`);
  28. socket.onopen = () => {
  29. setInterval(() => sendEvent("pin", null), 50 * 1000);
  30. sendEvent("listDevices", null);
  31. }
  32. socket.onmessage = data => {
  33. let body = JSON.parse(data.data);
  34. socketHandler[body.event] && socketHandler[body.event](body.data);
  35. }
  36. socket.onclose = () => socket = null;
  37. }, sendEvent = (event, data) => socket.send(JSON.stringify({event, data}));
  38. window.onload = () => {
  39. const $searchIcon = document.getElementById("search-icon"),
  40. $backIcon = document.getElementById("back-icon"),
  41. $detailPage = document.getElementById("detail-page"),
  42. $seqInput = document.getElementById("seq-input"),
  43. $devices = document.getElementById("devices"),
  44. $detailTitle = document.getElementById("seq-text"),
  45. $updateLocBtn = document.getElementById("update-loc"),
  46. $locationInput = document.getElementById("location"),
  47. $ppvs = [
  48. [document.getElementById("ppv1"), document.getElementById("update-ppv1")],
  49. [document.getElementById("ppv2"), document.getElementById("update-ppv2")],
  50. [document.getElementById("ppv3"), document.getElementById("update-ppv3")],
  51. [document.getElementById("ppv4"), document.getElementById("update-ppv4")]
  52. ],
  53. $openFront = document.getElementById("open-front"),
  54. $openBack = document.getElementById("open-back"),
  55. $openDebug = document.getElementById("open-debug"),
  56. $stopDebug = document.getElementById("stop-debug");
  57. const filterAndShow = seq => {
  58. $devices.innerHTML = "";
  59. for(let key in DevicesAll) if (key.includes(seq)) DevicesShow[key] = DevicesAll[key];
  60. for(let key in DevicesShow) {
  61. let $device = createDeviceNode(key, DevicesShow[key].online);
  62. $device.onclick = function () {
  63. DeviceNow = DevicesShow[this.getAttribute("rel")];
  64. $detailTitle.innerText = DeviceNow.seq;
  65. $locationInput.value = DeviceNow.location;
  66. $ppvs[0][0].value = DeviceNow.ppv1;
  67. $ppvs[1][0].value = DeviceNow.ppv2;
  68. $ppvs[2][0].value = DeviceNow.ppv3;
  69. $ppvs[3][0].value = DeviceNow.ppv4;
  70. $detailPage.className = "slide-in";
  71. }
  72. $devices.appendChild($device);
  73. }
  74. };
  75. $searchIcon.setAttribute("src", `${Prefix}/icon/search.svg`);
  76. $backIcon.setAttribute("src", `${Prefix}/icon/back.svg`);
  77. $backIcon.onclick = () => $detailPage.className = "slide-out";
  78. $seqInput.onchange = () => filterAndShow($seqInput.value.trim());
  79. $updateLocBtn.onclick = () => {
  80. let loc = $locationInput.value.trim();
  81. if (loc === "") return alert("location is blank");
  82. sendEvent("setLocation", {seq: DeviceNow.seq, loc: loc});
  83. }
  84. $ppvs.forEach((pair, index) => {
  85. pair[1].onclick = function () {
  86. let val = +pair[0].value;
  87. if (val === undefined || val < 1 || val > 15) return alert("require: 0 < ppv < 16");
  88. console.log({seq: DeviceNow.seq, index: index, value: val});
  89. sendEvent("setPpv", {seq: DeviceNow.seq, index: index, value: val});
  90. }
  91. });
  92. $openFront.onclick = () => {
  93. if (frontTimer !== null) return;
  94. frontTimer = setTimeout(() => {
  95. clearTimeout(frontTimer);
  96. frontTimer = null;
  97. }, Timeout);
  98. sendEvent("openGate", {seq: DeviceNow.seq, kind: "Changing"});
  99. }
  100. $openBack.onclick = () => {
  101. if (backTimer !== null) return;
  102. backTimer = setTimeout(() => {
  103. clearTimeout(backTimer);
  104. backTimer = null;
  105. }, Timeout);
  106. sendEvent("openGate", {seq: DeviceNow.seq, kind: "Fixing"});
  107. }
  108. $openDebug.onclick = () => sendEvent("setDebug", {seq: DeviceNow.seq, debug: true});
  109. $stopDebug.onclick = () => sendEvent("setDebug", {seq: DeviceNow.seq, debug: false});
  110. socketHandler.__Error_Event__ = msg => alert(msg);
  111. socketHandler.devices = data => {
  112. DevicesAll = data;
  113. filterAndShow("");
  114. }
  115. socketHandler.newDevice = device => {
  116. DevicesAll[device.seq] = device;
  117. filterAndShow($seqInput.value.trim());
  118. }
  119. socketHandler.deviceStatusChange = data => {
  120. DevicesAll[data.seq].online = data.online;
  121. filterAndShow($seqInput.value.trim());
  122. }
  123. socketHandler.openResult = data => alert(data.type + (data.result ? "-成功" : "-失败"));
  124. socketHandler.workFinished = data => alert(data);
  125. connectSocket();
  126. }