main.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <meta charset="UTF-8">
  6. <title>tcgui</title>
  7. <link rel="stylesheet" href="{{ url_for('static', filename='pure-min.css') }}">
  8. </head>
  9. <body>
  10. <div style="padding:2em;">
  11. <h1>TCGUI - {{ rules|length }} Available Interfaces</h1>
  12. <ul>
  13. {% for rule in rules %}
  14. <li><a href="#{{ rule['name'] }}">{{ rule['name'] }}</a></li>
  15. {% endfor %}
  16. </ul>
  17. {% for rule in rules %}
  18. <div>
  19. <h2 id="{{ rule['name'] }}">{{ rule['name'] }}</h2>
  20. <form method="POST" action="{{ url_for('new_rule', interface=rule['name']) }}">
  21. <table class="pure-table">
  22. <thead>
  23. <tr>
  24. <th>Name</th>
  25. <th>Current Value</th>
  26. <th>New Value</th>
  27. <th>Variance / Correlation</th>
  28. <th>New Value</th>
  29. </tr>
  30. </thead>
  31. <tbody>
  32. <tr>
  33. <td>Rate</td>
  34. <td class="tcgui-value-cell">{{ rule['rate'] }}</td>
  35. <td class="tcgui-input-cell">
  36. <input type="number" name="Rate" size="5">
  37. <select name="rate_unit">
  38. {% for unit in units %}
  39. <option value="{{ unit }}" {% if unit== standard_unit %} selected{% endif %}>{{ unit }}</option>
  40. {% endfor %}
  41. </select>
  42. </td>
  43. </tr>
  44. <tr>
  45. <td>Delay</td>
  46. <td class="tcgui-value-cell">{{ rule['delay'] }}</td>
  47. <td class="tcgui-input-cell"><input type="number" name="Delay" size="5"> ms</td>
  48. <td class="tcgui-value-cell">±{{ rule['delayVariance'] }}</td>
  49. <td class="tcgui-input-cell">±<input type="number" name="DelayVariance" size="5"> ms</td>
  50. </tr>
  51. <tr>
  52. <td>Loss</td>
  53. <td class="tcgui-value-cell">{{ rule['loss'] }}</td>
  54. <td class="tcgui-input-cell"><input type="number" name="Loss" size="5"> %</td>
  55. <td class="tcgui-value-cell">{{ rule['lossCorrelation'] }}</td>
  56. <td class="tcgui-input-cell"><input type="number" name="LossCorrelation" size="5"> %</td>
  57. </tr>
  58. <tr>
  59. <td>Duplicate</td>
  60. <td class="tcgui-value-cell">{{ rule['duplicate'] }}</td>
  61. <td class="tcgui-input-cell"><input type="number" name="Duplicate" size="5"> %</td>
  62. </tr>
  63. <tr>
  64. <td>Reorder</td>
  65. <td class="tcgui-value-cell">{{ rule['reorder'] }}</td>
  66. <td class="tcgui-input-cell"><input type="number" name="Reorder" size="5"> %</td>
  67. <td class="tcgui-value-cell">{{ rule['reorderCorrelation'] }}</td>
  68. <td class="tcgui-input-cell"><input type="number" name="ReorderCorrelation" size="5"> %</td>
  69. </tr>
  70. <tr>
  71. <td>Corrupt</td>
  72. <td class="tcgui-value-cell">{{ rule['corrupt'] }}</td>
  73. <td class="tcgui-input-cell"><input type="number" name="Corrupt" size="5"> %</td>
  74. </tr>
  75. <tr>
  76. <td>Limit</td>
  77. <td class="tcgui-value-cell">{{ rule['limit'] }}</td>
  78. <td class="tcgui-input-cell"><input type="number" name="Limit" size="5"></td>
  79. </tr>
  80. </tbody>
  81. </table>
  82. <input class="pure-button pure-button-primary" type="submit" value="Apply {{ rule['name'] }} Rules">
  83. </form>
  84. <form method="POST" action="{{ url_for('remove_rule', interface= rule['name']) }}">
  85. <input class="button-remove pure-button" type="submit" value="Remove {{ rule['name'] }} Rules">
  86. </form>
  87. </div>
  88. {% endfor %}
  89. </div>
  90. <script type="text/javascript">
  91. (function() {
  92. /** Get next sibling of specified node or element.
  93. *
  94. * @param {Node|HTMLElement} element Element to search for the next sibling.
  95. * @returns {HTMLElement|null} Next sibling, null it not exists.
  96. */
  97. function nextSiblingElement(element) {
  98. do {
  99. element = element.nextSibling;
  100. } while (element && element.nodeType !== Node.ELEMENT_NODE)
  101. return element;
  102. }
  103. /** Get first child of specified node or element.
  104. *
  105. * @param {Node|HTMLElement} element Element to search for the first child of.
  106. * @returns {HTMLElement|null} First child element, null if not exists.
  107. */
  108. function firstChildElement(element) {
  109. element = element.firstChild;
  110. if (element && element.nodeType !== Node.ELEMENT_NODE)
  111. element = nextSiblingElement(element)
  112. return element;
  113. }
  114. var x = document.getElementsByClassName("tcgui-value-cell");
  115. var i, inputCell, input, select, match;
  116. for (i = 0; i < x.length; i++) {
  117. if (x[i].innerHTML.indexOf("None") === -1) {
  118. x[i].className += " modified";
  119. inputCell = nextSiblingElement(x[i]);
  120. input = firstChildElement(inputCell);
  121. if (input.tagName === "INPUT") {
  122. // Match value cell innerText to extract integer value and optionals units.
  123. match = x[i].innerText.match(/[^\d]*([\d.]+)([%bitpskmg]*)/i);
  124. // Set input field to integer value.
  125. input.value = parseInt(match[1]);
  126. // Units are specified.
  127. if (match[2]) {
  128. // Check if next to text field exists a select, if it exists set selected option to units.
  129. select = nextSiblingElement(input);
  130. if (select && select.tagName === "SELECT")
  131. select.value = match[2].toLowerCase();
  132. }
  133. }
  134. }
  135. }
  136. })();
  137. </script>
  138. <style>
  139. th, td {
  140. text-align: center;
  141. }
  142. .tcgui-input-cell {
  143. text-align: left;
  144. }
  145. .tcgui-value-cell.modified {
  146. background: rgb(121, 168, 255);
  147. }
  148. .button-remove {
  149. color: white;
  150. background: rgb(202, 60, 60);
  151. }
  152. .pure-button {
  153. margin-top: .5em;
  154. }
  155. </style>
  156. </body>
  157. </html>