The esp8266 portion of the project
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.

121 lines
5.3 KiB

  1. <!-- <!DOCTYPE html> -->
  2. <html>
  3. <head>
  4. <title>Manual Mode</title>
  5. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
  6. <link rel="icon" type="image/png" sizes="144x144" href="/favicon-144x144.png">
  7. <link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico">
  8. <link rel="manifest" href="manifest.json">
  9. <meta name="theme-color" content="#00878f">
  10. <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
  11. <meta charset="utf-8">
  12. <script src="loadMenu.js" defer></script>
  13. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  17. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.js" type="module"></script>
  18. <link href='main.css' rel='stylesheet' type='text/css'>
  19. <link rel="stylesheet" href="colors.css">
  20. </head>
  21. <body>
  22. <div id="navigation"></div>
  23. <div class="container">
  24. <div class="shadow-lg p-3 mb-5 bg-white rounded">
  25. <header>
  26. <div class="container">
  27. <div class="row">
  28. <div class="col">
  29. <div class="mt-3 pt-5">
  30. <h2 class="display-4 text-center">
  31. Manual Settings
  32. </h2>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. </header>
  38. <section>
  39. <div class="container">
  40. <div class="row">
  41. <div class="col-lg-6 offset-lg-3">
  42. <div class="card text-white bg-ternary mb-3 card-form rounded mx-auto" id="manual-card">
  43. <div class="card-body">
  44. <div class="card-text text-center">
  45. <form id="manual-form">
  46. <div class="mb-4 mt-2">
  47. <div class="form-check form-check-inline">
  48. <input class="form-check-input" id="yes" type="radio" name="manual" value="True">
  49. <label class="form-check-label" for="yes">Yes</label>
  50. </div>
  51. <div class="form-check form-check-inline">
  52. <input class="form-check-input" id="no" type="radio" name="manual" value="False" checked>
  53. <label class="form-check-label" for="no">No</label>
  54. </div>
  55. </div>
  56. <div class="form-group">
  57. <button class="form-control" class="button">Submit</button>
  58. </div>
  59. </form>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </section>
  67. </div>
  68. </div>
  69. <script type="text/javascript">
  70. var myForm = document.getElementById('manual-form');
  71. myForm.addEventListener('submit', function(e) {
  72. e.preventDefault();
  73. //var data = JSON.stringify(formData(myForm));
  74. loadJSON(formData(myForm));
  75. })
  76. function formData(form) {
  77. // var el = form.querySelectorAll('input[type="text"]');
  78. // var manualRadios = document.getElementsByName('manual').value;
  79. var manualValue = document.querySelector('input[name="manual"]:checked').value;;
  80. var myData = '';
  81. myData += 'manual' + '=' + manualValue;
  82. // for (var x = 0; x < el.length; x++) {
  83. // var name = el[x].name;
  84. // var value = el[x].value;
  85. // //myData[name] = value;
  86. // myData += name + '=' + value + '&'
  87. // }
  88. // return myData.slice(0, -1);
  89. return myData;
  90. }
  91. function loadJSON(data) {
  92. const url = 'manualMode.html';
  93. console.log(data)
  94. const myData = data
  95. fetch(url, {
  96. method: 'post',
  97. headers: {
  98. "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
  99. },
  100. body: myData
  101. })
  102. // .then(function (response) {
  103. // return response.json()
  104. // }).then(function (data) {
  105. // console.log(data)
  106. // })
  107. .catch(error => console.log(error))
  108. }
  109. </script>
  110. </body>
  111. </html>