show_fetched_data.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <html>
  2. <head>
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  4. <style>
  5. table {
  6. font-family: arial, sans-serif;
  7. border-collapse: collapse;
  8. width: 100%;
  9. }
  10. td, th {
  11. border: 1px solid #dddddd;
  12. text-align: left;
  13. padding: 8px;
  14. }
  15. tr:nth-child(even) {
  16. background-color: #dddddd;
  17. }
  18. #umbau {
  19. float:left;
  20. margin-right:40%;
  21. width:140px;
  22. }
  23. #reinigung {
  24. background-color: white;
  25. overflow:hidden;
  26. margin:10px;
  27. border:2px dashed #ccc;
  28. min-height:170px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <h3>The Tool History of <span id="toolID" style="color:red"></span>. Current configuration is <span id="article" style="color:red"></span></h3>
  34. <div id="table"></div>
  35. <div>
  36. <div id="umbau">
  37. <button id="1" onClick="do_after(this.id)">Umbau</button>
  38. </div>
  39. <div id="reinugung">
  40. <button id="2" onClick="do_after(this.id)">Reinigung</button>
  41. </div>
  42. </div>
  43. <form method="GET" action="../services/return_cpee.php">
  44. <input type="text" name="id" id="cbid" required>
  45. <input type="text" name="workerID" id="workerID" required>
  46. <input type="text" name="action" id="action" required>
  47. <p id="afterClick"></p>
  48. <input type="submit" value="Submit" onclick="reloaded(rolle);">
  49. </form>
  50. <script type="text/javascript" src="form.js"></script>
  51. <script type="text/javascript">
  52. var doc = "";
  53. $.ajax({
  54. url: '../callbacks/'+ cbid + '.txt',
  55. async: false,
  56. success: function (data){
  57. doc = data;
  58. }
  59. });
  60. doc = JSON.parse(doc);
  61. eventList = doc[1]["eventList"];
  62. lastArticle = doc[1]["lastArticle"];
  63. toolPart = doc[1]["toolPart"];
  64. var rolle = doc[1]["rolle"];
  65. toolPart = JSON.parse(toolPart);
  66. eventList = JSON.parse(eventList);
  67. count = eventList["ACTION_ID"].length;
  68. var mytable = "<table cellpadding=\"0\" cellspacing=\"0\">";
  69. mytable += "<thead><tr><th>Time</th><th>Article</th><th>Action</th><th>Toolpart</th><th>Request</th><th>Issue/Result</th></tr></thead><tbody><tr>";
  70. for (var i = 0; i < count; i++) {
  71. mytable += "<td>" + eventList["DATE_TIME"][i] + "</td>";
  72. mytable += "<td>" + eventList["ARTICLE_ID"][i] + "</td>";
  73. mytable += "<td>" + eventList["ACTION_ID"][i] + "</td>";
  74. mytable += "<td>" + eventList["TOOLPART_ID"][i] + "</td>";
  75. mytable += "<td>" + eventList["REQUEST"][i] + "</td>";
  76. mytable += "<td>" + eventList["ISSUE_OR_RESULT_ID"][i] + "</td>";
  77. mytable += "</tr><tr>";
  78. }
  79. mytable += "</tr></tbody></table>";
  80. //document.write(mytable);
  81. var forminput = "";
  82. document.getElementById("table").innerHTML = mytable;
  83. document.getElementById("toolID").innerHTML = eventList["TOOL_ID"][0];
  84. document.getElementById("article").innerHTML = lastArticle;
  85. function singleSelectChangeText() {
  86. var selObj = document.getElementById("selectNumber");
  87. var selValue = selObj.options[selObj.selectedIndex].text;
  88. document.getElementById("dropdown").value = selValue;
  89. }
  90. function do_after(id){
  91. if (id ==1) {
  92. forminput = "Article ID: ";
  93. forminput += "<input type=\"text\" name=\"articleID\" id=\"articleID\" required>";
  94. document.getElementById("afterClick").innerHTML = forminput;
  95. document.getElementById("action").value = 1;
  96. } else {
  97. forminput = "<select id=\"selectNumber\" onchange=\"singleSelectChangeText()\"><option>Choose tool part</option></select>";
  98. forminput += "<input type=\"text\" id=\"dropdown\" name=\"toolPart\">";
  99. document.getElementById("afterClick").innerHTML = forminput;
  100. document.getElementById("action").value = 4;
  101. var select = document.getElementById("selectNumber");
  102. for(var i = 0; i < toolPart.length; i++) {
  103. var opt = toolPart[i];
  104. var el = document.createElement("option");
  105. el.textContent = opt;
  106. el.value = opt;
  107. select.appendChild(el);
  108. }
  109. }
  110. };
  111. </script>
  112. </body>
  113. </html>