API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 8th, 2019
82
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link href="index.css" rel="stylesheet">
  8. <title>Лабораторные рабоы по ксп</title>
  9.  
  10. <!-- Bootstrap -->
  11. <link href="css/bootstrap.css" rel="stylesheet">
  12. </head>
  13. <body>
  14. <header>
  15. <br>
  16. <div class="container">
  17. <ul class="nav nav-tabs">
  18. <li class="nav-item">
  19. <a class="nav-link active" href="#page1" role="tab" data-toggle="tab">Вкладка 1</a>
  20. </li>
  21. <li class="nav-item">
  22. <a class="nav-link" href="#page2" role="tab" data-toggle="tab">Вкладка 2</a>
  23. </li>
  24. <li class="nav-item">
  25. <a class="nav-link" href="#page3" role="tab" data-toggle="tab">Вкладка 3</a>
  26. </li>
  27. </ul>
  28. </div>
  29. </header>
  30. <section class="main-content">
  31. <!-- Tab panes -->
  32. <div class="tab-content">
  33. <div role="tabpanel" class="tab-pane fade show active" id="page1">
  34. <div class="container">
  35. <br>
  36. <p>Работу выполнила: Чепракова Марина Алексеевна</p>
  37. <p>Номер группы: ИКБО-02-17</p>
  38. <p>Номер индивидуального задания: 7</p>
  39. <p>Текст индивидуального задания: Дан текст. Определите <br>
  40. процентное отношение строчных и прописных букв <br>
  41. к общему числу символов в нем. На вход поступает<br>
  42. текст в виде строки.</p><br>
  43. </div>
  44. </div>
  45. <div role="tabpanel" class="tab-pane fade" id="page2">
  46. <div class="container">
  47. <br />
  48. <input type="text" class="form-control" placeholder="" id="request"><br />
  49. <div class="input-group-append">
  50. <button class="btn btn-outline-primary" type="button" id="sendRequestButton" onclick="count()">Отправить</button>
  51. </div><br />
  52. </div>
  53. <div class="container">
  54. <input readonly type="text" class="form-control" id="response"><br />
  55. </div>
  56. <script>
  57. async function count() {
  58. let str = document.getElementById("request").value;
  59. const host = "http://localhost:8080/calculate?str=";
  60. const response = await fetch(`${host + str}`, { method: 'POST' });
  61. const json = await response.json();
  62. document.getElementById("response").value = `${json.value}`;
  63. }
  64. </script>
  65. </div>
  66. <div role="tabpanel" class="tab-pane fade" id="page3">
  67. <br />
  68. <div class="container" id="table">
  69. <button class="btn btn-outline-primary" type="button" id="addButton" onclick="addBook()">Добавить</button>
  70. </div>
  71. <div class="container" id="forAdds">
  72. <script>
  73. const host = "http://localhost:8080/api/students";
  74. let counter = 0;
  75. let revertArr = [];
  76. let canAdd = true;
  77.  
  78. function addRow(book) {
  79. let margin = "margin: 5px;"
  80. let div = document.createElement("div");
  81. div.setAttribute("id", `div${book.id}`);
  82.  
  83. let changeButton = document.createElement("button");
  84. changeButton.innerHTML = "change";
  85. changeButton.setAttribute("id", `ch${book.id}`);
  86. changeButton.setAttribute("onclick", "changeRow(event)");
  87. changeButton.setAttribute("style", margin);
  88. changeButton.setAttribute("class", "btn btn-outline-primary");
  89.  
  90. let deleteButton = document.createElement("button");
  91. deleteButton.innerHTML = "delete";
  92. deleteButton.setAttribute("id", `del${book.id}`);
  93. deleteButton.setAttribute("onclick", "deleteRow(event)");
  94. deleteButton.setAttribute("style", margin);
  95. deleteButton.setAttribute("class", "btn btn-outline-primary");
  96.  
  97. let titleInput = document.createElement("input");
  98. titleInput.setAttribute("id", `tit${book.id}`);
  99. titleInput.setAttribute("readonly", null);
  100. titleInput.setAttribute("style", margin);
  101. titleInput.setAttribute("class", "form-control");
  102. titleInput.value = book.title;
  103.  
  104. let authorInput = document.createElement("input");
  105. authorInput.setAttribute("id", `aut${book.id}`);
  106. authorInput.setAttribute("readonly", null);
  107. authorInput.setAttribute("style", margin);
  108. authorInput.setAttribute("class", "form-control");
  109. authorInput.value = book.author;
  110.  
  111. let releaseYearInput = document.createElement("input");
  112. releaseYearInput.setAttribute("id", `rel${book.id}`);
  113. releaseYearInput.setAttribute("readonly", null);
  114. releaseYearInput.setAttribute("style", margin);
  115. releaseYearInput.setAttribute("class", "form-control");
  116. releaseYearInput.value = book.releaseYear;
  117.  
  118. div.appendChild(titleInput);
  119. div.appendChild(authorInput);
  120. div.appendChild(releaseYearInput);
  121. div.appendChild(changeButton);
  122. div.appendChild(deleteButton);
  123.  
  124. document.getElementById(`forAdds`).append(div);
  125. }
  126.  
  127. function changeRow(event) {
  128. let id = event.target.id.match(/(\d+)/)[0];
  129.  
  130. let changeButton = event.target;
  131. let deleteButton = document.getElementById(`del${id}`);
  132. let titleInput = document.getElementById(`tit${id}`);
  133. let authorInput = document.getElementById(`aut${id}`);
  134. let releaseYearInput = document.getElementById(`rel${id}`);
  135.  
  136. titleInput.removeAttribute("readonly");
  137. authorInput.removeAttribute("readonly");
  138. releaseYearInput.removeAttribute("readonly");
  139.  
  140. deleteButton.innerHTML = "revert"
  141. deleteButton.setAttribute("onclick", "revertRow(event)");
  142.  
  143. changeButton.innerHTML = "update";
  144. changeButton.setAttribute("onclick", "udpateRow(event)");
  145.  
  146. revertArr.push({ id: id, tit: titleInput.value, author: authorInput.value, releaseYear: releaseYearInput.value})
  147. }
  148.  
  149. async function deleteRow(event) {
  150.  
  151. let id = event.target.id.match(/(\d+)/)[0];
  152.  
  153. try {
  154. const response = await fetch(`${host}/${id}`, { method: 'DELETE' });
  155. const status = await response.status;
  156.  
  157. if (status == 200) {
  158. let div = document.getElementById(`div${id}`);
  159.  
  160. div.parentNode.removeChild(div);
  161. } else {
  162. alert('something get wrong');
  163. }
  164. } catch {
  165. alert('server don`t response');
  166. }
  167. }
  168.  
  169. async function updateRow(event) {
  170.  
  171. let id = event.target.id.match(/(\d+)/)[0];
  172.  
  173. let changeButton = event.target;
  174. let deleteButton = document.getElementById(`del${id}`);
  175. let titleInput = document.getElementById(`tit${id}`);
  176. let authorInput = document.getElementById(`aut${id}`);
  177. let releaseYearInput = document.getElementById(`rel${id}`);
  178.  
  179. try {
  180. let book = { id: id, tit: titleInput.value, author: authorInput.value, releaseYear: releaseYearInput.value};
  181. if (notEmpty(book)) {
  182. const response = await fetch(`${host}/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(book) });
  183. const status = await response.status;
  184.  
  185. if (status == 200) {
  186. titleInput.setAttribute("readonly", null);
  187. authorInput.setAttribute("readonly", null);
  188. releaseYearInput.setAttribute("readonly", null);
  189.  
  190. changeButton.innerHTML = "change";
  191. changeButton.setAttribute("onclick", "changeRow(event)");
  192.  
  193. deleteButton.innerHTML = "delete";
  194. deleteButton.setAttribute("onclick", "deleteRow(event)");
  195. } else {
  196. alert('something get wrong');
  197. }
  198. } else {
  199. alert('fill all inputs');
  200. }
  201. }
  202. catch {
  203. alert('server don`t response');
  204. }
  205. }
  206.  
  207. function revertRow(event) {
  208. let id = event.target.id.match(/(\d+)/)[0];
  209.  
  210. revertArr.forEach(
  211. function (element, index) {
  212. if (element.id == id) {
  213. let deleteButton = event.target;
  214. let changeButton = document.getElementById(`ch${id}`);
  215. let titleInput = document.getElementById(`tit${id}`);
  216. let authorInput = document.getElementById(`aut${id}`);
  217. let releaseYearInput = document.getElementById(`rel${id}`);
  218.  
  219. titleInput.setAttribute("readonly", null);
  220. authorInput.setAttribute("readonly", null);
  221. releaseYearInput.setAttribute("readonly", null);
  222.  
  223. titleInput.value = element.title;
  224. authorInput.value = element.author;
  225. releaseYearInput.value = element.releaseYear;
  226.  
  227. changeButton.innerHTML = "change";
  228. changeButton.setAttribute("onclick", "changeRow(event)");
  229.  
  230. deleteButton.innerHTML = "delete";
  231. deleteButton.setAttribute("onclick", "deleteRow(event)");
  232.  
  233. revertArr.splice(index, index);
  234. }
  235. }
  236. )
  237. }
  238.  
  239. async function addBook() {
  240. if (canAdd) {
  241. let margin = "margin: 5px;"
  242. let div = document.createElement("div");
  243. div.setAttribute("id", `newBook`);
  244.  
  245. let acceptButton = document.createElement("button");
  246. acceptButton.innerHTML = "accept";
  247. acceptButton.setAttribute("id", `ac`);
  248. acceptButton.setAttribute("onclick", "accept()");
  249. acceptButton.setAttribute("style", margin);
  250. acceptButton.setAttribute("class", "btn btn-outline-primary");
  251.  
  252. let cancelButton = document.createElement("button");
  253. cancelButton.innerHTML = "cancel";
  254. cancelButton.setAttribute("id", `can`);
  255. cancelButton.setAttribute("onclick", "cancel()");
  256. cancelButton.setAttribute("style", margin);
  257. cancelButton.setAttribute("class", "btn btn-outline-primary");
  258.  
  259. let titleInput = document.createElement("input");
  260. titleInput.setAttribute("id", `tit`);
  261. titleInput.setAttribute("style", margin);
  262. titleInput.setAttribute("class", "form-control");
  263.  
  264. let authorInput = document.createElement("input");
  265. authorInput.setAttribute("id", `aut`);
  266. authorInput.setAttribute("style", margin);
  267. authorInput.setAttribute("class", "form-control");
  268.  
  269. let releaseYearInput = document.createElement("input");
  270. releaseYearInput.setAttribute("id", `rel`);
  271. releaseYearInput.setAttribute("style", margin);
  272. releaseYearInput.setAttribute("class", "form-control");
  273.  
  274. div.appendChild(titleInput);
  275. div.appendChild(authorInput);
  276. div.appendChild(releaseYearInput);
  277. div.appendChild(acceptButton);
  278. div.appendChild(cancelButton);
  279.  
  280. document.body.append(div);
  281. canAdd = false;
  282. }
  283. else {
  284. alert("Accept or cancel the last row");
  285. }
  286. }
  287.  
  288. async function accept() {
  289. let div = document.getElementById(`newBook`);
  290. let acceptButton = document.getElementById(`ac`);
  291. let cancelButton = document.getElementById(`can`);
  292. let titleInput = document.getElementById(`tit`);
  293. let authorInput = document.getElementById(`aut`);
  294. let releaseYearInput = document.getElementById(`rel`);
  295.  
  296. try {
  297. let book = { tit: titleInput.value, author: authorInput.value, releaseYear: releaseYearInput.value};
  298. if (notEmpty(book)) {
  299. const response = await fetch(`${host}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(book) });
  300. const status = await response.status;
  301.  
  302. if (status == 200) {
  303. const json = await response.json();
  304.  
  305. div.setAttribute("id", `div${json.id}`);
  306.  
  307. titleInput.setAttribute("id", `tit${json.id}`);
  308. titleInput.setAttribute("readonly", null);
  309.  
  310. authorInput.setAttribute("id", `aut${json.id}`);
  311. authorInput.setAttribute("readonly", null);
  312.  
  313. releaseYearInput.setAttribute("id", `rel${json.id}`);
  314. releaseYearInput.setAttribute("readonly", null);
  315.  
  316. acceptButton.setAttribute("id", `ch${json.id}`);
  317. acceptButton.innerHTML = "change";
  318. acceptButton.setAttribute("onclick", "changeRow(event)");
  319.  
  320. cancelButton.setAttribute("id", `del${json.id}`);
  321. cancelButton.innerHTML = "delete";
  322. cancelButton.setAttribute("onclick", "deleteRow(event)");
  323. canAdd = true;
  324. } else {
  325. alert('something get wrong');
  326. }
  327. } else {
  328. alert('fill all inputs');
  329. }
  330. }
  331. catch {
  332. alert('server don`t response');
  333. }
  334. }
  335.  
  336. function cancel() {
  337. let div = document.getElementById(`newBook`);
  338.  
  339. div.parentNode.removeChild(div);
  340. canAdd = true;
  341. }
  342.  
  343. async function loadData() {
  344. try {
  345. const response = await fetch(`${host}`);
  346. const json = await response.json();
  347. json.forEach(it => addRow(it));
  348. } catch {
  349. alert('server don`t response');
  350. }
  351. }
  352.  
  353. function notEmpty(book) {
  354. if (book.title == "" || book.author == "" || book.releaseYear == "") {
  355. return false;
  356. }
  357. return true;
  358. }
  359.  
  360. loadData();
  361. </script>
  362. </div>
  363. </div>
  364. </div>
  365. </section>
  366. <footer>
  367. <div class="container-fluid">
  368. <hr>
  369. <div class="row">
  370. <div>
  371. <p class="text-muted pull-right" style="margin-left:215px">© 2019 Чепракова Марина, ИКБО-02-17</p>
  372. </div>
  373. </div>
  374. </div>
  375. </footer>
  376.  
  377. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  378. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  379. <!-- Include all compiled plugins (below), or include individual files as needed -->
  380. <script src="js/bootstrap.js"></script>
  381. </body>
  382. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!