editLecture.html 6.0 KB

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