ftui_check.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. /* FHEM tablet ui */
  6. /*
  7. * UI builder framework for FHEM
  8. *
  9. * Version: 2.6.*
  10. * URL: https://github.com/knowthelist/fhem-tablet-ui
  11. *
  12. * Copyright (c) 2018 Mario Stephan <mstephan@shared-files.de>
  13. * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
  14. *
  15. -->
  16. <link rel="icon" href="favicon.ico" type="image/x-icon" />
  17. <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
  18. <script src="lib/jquery.min.js"></script>
  19. <style>
  20. body {
  21. background-color: #efefef;
  22. color: #222222;
  23. font: normal 16px/18px "Helvetica Neue", Helvetica, sans-serif;
  24. }
  25. h2 {
  26. text-align: left;
  27. padding-left: 20px;
  28. }
  29. .check>div {
  30. background-color: #fff;
  31. padding: 25px;
  32. border-radius: 30px
  33. }
  34. td {
  35. border-bottom: 1px solid #bbb;
  36. }
  37. </style>
  38. <script>
  39. function parseISOLocal(s) {
  40. var b = new Date(s);
  41. return b.toLocaleString();
  42. }
  43. function update() {
  44. var ftui = {
  45. poll: {},
  46. version: JSON.parse(localStorage.getItem('ftui.version')),
  47. subscriptions: JSON.parse(localStorage.getItem('ftui.subscriptions')),
  48. config: JSON.parse(localStorage.getItem('ftui.config')),
  49. deviceStates: JSON.parse(localStorage.getItem('ftui.deviceStates')),
  50. poll: {
  51. short: JSON.parse(localStorage.getItem('ftui.poll.short')),
  52. long: JSON.parse(localStorage.getItem('ftui.poll.long'))
  53. }
  54. };
  55. modules = JSON.parse(localStorage.getItem('modules'));
  56. var strSubs = '<table>',
  57. strMods = '<table>',
  58. strGeneral = '<table>',
  59. strShort = '<table>',
  60. strLong = '<table>',
  61. strVersion = '<table>',
  62. i = 0;
  63. // Subscriptions
  64. for (var key in ftui.subscriptions) {
  65. i++;
  66. var mDev = ftui.subscriptions[key].device;
  67. var mRead = ftui.subscriptions[key].reading;
  68. var mValid = "--unknown--";
  69. if (ftui.deviceStates[mDev]) {
  70. var params = ftui.deviceStates[mDev];
  71. if (params[mRead]) {
  72. mValid = (params[mRead].valid) ? "'" + params[mRead].val + "'" : '--known-but-invalid--';
  73. }
  74. }
  75. var subClass = (mValid === "--unknown--" || mValid === "--known-but-invalid--") ? 'red' : '';
  76. strSubs = strSubs + "<tr class='" + subClass + "'><td>" + i + "</td><td>" + mDev + "</td><td>" + mRead + "</td><td>" + mValid + "</td></tr>";
  77. }
  78. strSubs = strSubs + "</table>";
  79. // Modules
  80. i = 0;
  81. for (var key in modules) {
  82. strMods = strMods + "<tr class=''><td>" + i + "</td><td>" + modules[i].name + "</td><td>" + modules[i].area + "</td></tr>";
  83. i++;
  84. }
  85. strMods = strMods + "</table>";
  86. // Short
  87. strShort = strShort + "<tr><td>lastTimestamp</td><td class=''>" + parseISOLocal(ftui.poll.short.lastTimestamp); + "</td></tr>";
  88. strShort = strShort + "<tr><td>StatusText</td><td class=''>" + ftui.poll.short.request.statusText + "</td></tr>";
  89. strShort = strShort + "<tr><td>Duration</td><td class=''>" + ftui.poll.short.duration + "</td></tr>";
  90. strShort = strShort + "</table>";
  91. strShort = strShort + "<h3>Filter</h3>" + ftui.poll.short.filter;
  92. // Long
  93. strLong = strLong + "<tr><td>longPollType</td><td class=''>" + ftui.config.longPollType + "</td></tr>";
  94. if (ftui.poll.long) {
  95. if (ftui.poll.long.xhr) {
  96. strLong = strLong + "<tr><td>currLine</td><td class=''>" + ftui.poll.long.currLine + "</td></tr>";
  97. strLong = strLong + "<tr><td>readyState</td><td class=''>" + ftui.poll.long.request.readyState + "</td></tr>";
  98. } else if (ftui.poll.long.websocket) {
  99. strLong = strLong + "<tr><td>ready</td><td class=''>true</td></tr>";
  100. } else {
  101. strLong = strLong + "<tr><td>readyState</td><td class=''>no longpoll object created</td></tr>";
  102. }
  103. strLong = strLong + "<tr><td>lastEventTimestamp</td><td class=''>" + parseISOLocal(ftui.poll.long.lastEventTimestamp) + "</td></tr>";
  104. strLong = strLong + "<tr><td>lastUpdateTimestamp</td><td class=''>" + parseISOLocal(ftui.poll.long.lastUpdateTimestamp) + "</td></tr>";
  105. strLong = strLong + "<tr><td>LastDevice</td><td class=''>" + ftui.poll.long.lastDevice + "</td></tr>";
  106. strLong = strLong + "<tr><td>LastReading</td><td class=''>" + ftui.poll.long.lastReading + "</td></tr>";
  107. strLong = strLong + "<tr><td>LastValue</td><td class=''>" + ftui.poll.long.lastValue + "</td></tr>";
  108. strLong = strLong + "</table>";
  109. strLong = strLong + "<h3>Filter</h3>" + ftui.poll.long.filter;
  110. } else {
  111. strLong = strLong + "</table>";
  112. }
  113. // Config
  114. $.each(ftui.config, function(index, key) {
  115. strGeneral = strGeneral + "<tr><td>" + index + "</td><td class=''>" + key + "</td></tr>"
  116. });
  117. strGeneral = strGeneral + "</table>";
  118. // Version
  119. strVersion = strVersion + "<tr><td>Version</td><td class=''>" + ftui.version + "</td></tr></table>"
  120. // render
  121. $('.version').html(strVersion);
  122. $('.general').html(strGeneral);
  123. $('.subs').html(strSubs);
  124. $('.mods').html(strMods);
  125. $('.short').html(strShort);
  126. $('.long').html(strLong);
  127. };
  128. $(document).ready(function() {
  129. $(window).on('storage', function(e) {
  130. update();
  131. });
  132. update();
  133. });
  134. </script>
  135. <title>FTUI-Check</title>
  136. </head>
  137. <body>
  138. <div class="check">
  139. <h1>FTUI Health Check</h1>
  140. <div class="version left-align events"></div>
  141. <h2>Settings</h2>
  142. <div class="general left-align events"></div>
  143. <h2>Subscriptions</h2>
  144. <div class="subs left-align events"></div>
  145. <h2>Modules</h2>
  146. <div class="mods left-align events"></div>
  147. <h2>ShortPoll</h2>
  148. <div class="short left-align events wordwrap"></div>
  149. <h2>LongPoll</h2>
  150. <div class="long left-align events wordwrap"></div>
  151. </div>
  152. </body>
  153. </html>