editLecture.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Lee Morgan</title>
  6. <link rel="icon" type="img/ico" href="/images/favicon">
  7. <style>
  8. form{
  9. display: flex;
  10. flex-direction: column;
  11. }
  12. #deleteButton{
  13. background: red;
  14. color: white;
  15. margin-top: 100px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <form id="form" method="post" enctype="multipart/form-data">
  21. <label>Uploader
  22. <input name="uploader" type="text" required>
  23. </label>
  24. <label>Password
  25. <input name="password" type="password" required>
  26. </label>
  27. <label>Title
  28. <input id="titleInput" name="title" type="text" required>
  29. </label>
  30. <label>Video
  31. <input id="videoInput" name="video" type="text" required>
  32. </label>
  33. <label>Description
  34. <textarea id="descriptionInput" name="description"></textarea>
  35. </label>
  36. <h2>Further Reading</h2>
  37. <button id="readingButton" type="button">Add Link</button>
  38. <div id="reading">
  39. <template id="readingItem">
  40. <div class="readingItem">
  41. <input type="text">
  42. <input type="text">
  43. <button type="button">remove</button>
  44. </div>
  45. </template>
  46. </div>
  47. <h2>Exercises</h2>
  48. <button id="exercisesButton" type="button">Add Exercise</button>
  49. <div id="exercises">
  50. <template id="exercisesItem">
  51. <div class="exercisesItem">
  52. <textarea></textarea>
  53. <button type="button">remove</button>
  54. </div>
  55. </template>
  56. </div>
  57. <input id="readingHidden" name="furtherReading" type="hidden">
  58. <input id="exerciseHidden" name="exercises" type="hidden">
  59. <input id="dateInput" name="date" type="hidden">
  60. <input type="submit" value="Submit">
  61. </form>
  62. <button id="deleteButton">DELETE</button>
  63. <script>
  64. let id = window.location.href.split("/");
  65. id = id[id.length-1];
  66. fetch(`/learn/lectures/json/one/${id}`)
  67. .then(response => response.json())
  68. .then((response)=>{
  69. document.getElementById("titleInput").value = response.title;
  70. document.getElementById("videoInput").value = response.video;
  71. document.getElementById("descriptionInput").innerText = response.description;
  72. let readingDiv = document.getElementById("reading");
  73. let readingTemplate = document.getElementById("readingItem").content.children[0];
  74. for(let i = 0; i < response.furtherReading.length; i++){
  75. let div = readingTemplate.cloneNode(true);
  76. div.children[0].value = response.furtherReading[i].text;
  77. div.children[1].value = response.furtherReading[i].link;
  78. div.children[2].onclick = ()=>{div.parentElement.removeChild(div)};
  79. readingDiv.appendChild(div);
  80. }
  81. let exerciseDiv = document.getElementById("exercises");
  82. let exerciseTemplate = document.getElementById("exercisesItem").content.children[0];
  83. for(let i = 0; i < response.exercises.length; i++){
  84. let div = exerciseTemplate.cloneNode(true);
  85. div.children[0].innerText = response.exercises[i];
  86. div.children[1].onclick = ()=>{div.parentElement.removeChild(div)};
  87. exerciseDiv.appendChild(div);
  88. }
  89. document.getElementById("readingButton").onclick = ()=>{
  90. let div = readingTemplate.cloneNode(true);
  91. div.children[2].onclick = ()=>{div.parentElement.removeChild(div)};
  92. readingDiv.appendChild(div);
  93. };
  94. document.getElementById("exercisesButton").onclick = ()=>{
  95. let div = exerciseTemplate.cloneNode(true);
  96. div.children[1].onclick = ()=>{div.parentElement.removeChild(div)};
  97. exerciseDiv.appendChild(div);
  98. };
  99. })
  100. .catch((err)=>{});
  101. let form = document.getElementById("form");
  102. form.onsubmit = ()=>{
  103. event.preventDefault();
  104. let readingDiv = document.getElementById("reading").children;
  105. let readingText = "";
  106. for(let i = 1; i < readingDiv.length; i++){
  107. readingText += `${readingDiv[i].children[0].value}\n${readingDiv[i].children[1].value}\n`;
  108. }
  109. document.getElementById("readingHidden").value = readingText;
  110. let exerciseDivs = document.getElementById("exercises").children;
  111. let exerciseText = "";
  112. for(let i = 1; i < exerciseDivs.length; i++){
  113. exerciseText += `${exerciseDivs[i].children[0].value}\n`;
  114. }
  115. document.getElementById("exerciseHidden").value = exerciseText;
  116. document.getElementById("dateInput").value = new Date();
  117. form.submit();
  118. }
  119. document.getElementById("deleteButton").onclick = ()=>{
  120. fetch(`/learn/lectures/${id}`,{
  121. method: "delete"
  122. })
  123. .then((response)=>{
  124. window.location.href;
  125. })
  126. .catch((err)=>{});
  127. }
  128. </script>
  129. </body>
  130. </html>