all.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <br>
  2. <div class="ui container">
  3. <div class="ui basic segment">
  4. <h2 class="ui header">All Posts</h2>
  5. <table class="ui single line table">
  6. <thead>
  7. <tr>
  8. <th>Post Name</th>
  9. <th>Creation Time</th>
  10. <th>Edit</th>
  11. <th>Delete</th>
  12. </tr>
  13. </thead>
  14. <tbody id="postTableBody">
  15. <tr id="loadingRow">
  16. <td colspan="4" style="text-align: center;">
  17. <div class="ui active inline loader"></div>
  18. </td>
  19. </tr>
  20. <!-- Rows will be dynamically loaded here -->
  21. </tbody>
  22. </table>
  23. <button class="ui green basic button" id="refreshButton">
  24. <i class="ui refresh icon"></i> Refresh
  25. </button>
  26. </div>
  27. <div class="ui basic small modal" id="deleteConfirmModal">
  28. <div class="ui icon header">
  29. <i class="trash alternate outline icon"></i>
  30. Confirm Delete
  31. </div>
  32. <div class="content" align="center">
  33. <p>Are you sure you want to delete the post <span id="deletePostName"></span>?</p>
  34. </div>
  35. <div class="actions">
  36. <div class="ui red ok inverted button" onclick="confirmDelete()" deleteingPostID="">
  37. <i class="trash icon"></i>
  38. Yes
  39. </div>
  40. <div class="ui basic cancel inverted button">
  41. <i class="remove icon"></i>
  42. Cancel
  43. </div>
  44. </div>
  45. </div>
  46. <div class="ui active dimmer" style="display:none;" id="loadingDimmer">
  47. <div class="ui text loader">Loading post contents</div>
  48. </div>
  49. </div>
  50. <script>
  51. /*
  52. Post List
  53. This script will fetch the list of posts from /www/site/posts/*.md
  54. and display them in a table format.
  55. */
  56. function getPosts(){
  57. // Show loading animation
  58. $("#postTableBody").html(`<tr id="loadingRow">
  59. <td colspan="4" style="text-align: center;">
  60. <div class="ui active inline loader"></div>
  61. </td>
  62. </tr>`);
  63. // Fetch the list of posts from the server
  64. $.get("/api/fs/list?dir=/site/posts/", function(data){
  65. console.log(data);
  66. let postList = data.filter(file => file.Filename.endsWith(".md") && !file.IsDir);
  67. postList.sort((a, b) => {
  68. const getTimestamp = filename => parseInt(filename.split('_')[0]);
  69. return getTimestamp(b.Filename) - getTimestamp(a.Filename); // Sort by timestamp in filename
  70. });
  71. //Render the posts in the table
  72. console.log("Post list loaded: ", postList);
  73. $("#postTableBody").empty(); // Clear the table body
  74. postList.forEach(post => {
  75. const postName = post.Filename.split('/').pop().replace('.md', ''); // Extract the post name
  76. const postTime = new Date(post.Filename.split('_')[0] * 1000).toLocaleString(); // Convert timestamp to readable format
  77. $("#postTableBody").append(`
  78. <tr>
  79. <td>${postName.replace(/^\d+_/, '')}</td>
  80. <td>${postTime}</td>
  81. <td><button class="ui basic button edit-button" onclick="editPost('${post.Filename}');"><i class="ui blue edit icon"></i> Edit</button></td>
  82. <td><button class="ui red basic button delete-button" onclick="deletePost('${post.Filename}');"><i class="ui trash icon"></i> Delete</button></td>
  83. </tr>
  84. `);
  85. });
  86. if (postList.length == 0) {
  87. $("#postTableBody").append(`
  88. <tr id="nopost">
  89. <td colspan="4" style="text-align: center;">No posts available</td>
  90. </tr>
  91. `);
  92. }
  93. });
  94. }
  95. //Open post editor
  96. function editPost(postID){
  97. $("#loadingDimmer").show(); // Show loading dimmer
  98. editingPost = postID; // Store the postID for editing
  99. $("#postengine_tab").load("posteng/edit.html");
  100. }
  101. // Delete post
  102. function deletePost(postID) {
  103. const postName = postID.replace(/^\d+_/, ''); // Trim the timestamp prefix
  104. $('#deletePostName').text(postName); // Populate the post name in the modal
  105. $('#deleteConfirmModal .ok.button').attr('deleteingPostID', postID); // Store the postID in the confirm button
  106. $('#deleteConfirmModal').modal('show'); // Show the confirmation modal
  107. }
  108. function confirmDelete() {
  109. const postID = $('#deleteConfirmModal .ok.button').attr('deleteingPostID'); // Retrieve the postID
  110. if (!postID) return;
  111. // Send a delete request to the server
  112. $.ajax({
  113. url: `/api/fs/del?target=/site/posts/${postID}`,
  114. type: 'POSt',
  115. success: function(response) {
  116. updatePostIndex(); // Update the post index
  117. console.log('Post deleted:', response);
  118. $('#deleteConfirmModal').modal('hide'); // Hide the modal
  119. getPosts(); // Refresh the post list
  120. msgbox(`Post "${postID.replace(/^\d+_/, '')}" deleted successfully`, 2000); // Show success message
  121. },
  122. error: function(error) {
  123. console.error('Error deleting post:', error);
  124. msgbox('Failed to delete the post', 2000); // Show error message
  125. }
  126. });
  127. }
  128. // Initial call to load posts
  129. getPosts();
  130. // Event listener for the Refresh button
  131. $('#refreshButton').on('click', function() {
  132. getPosts(); // Reload the table content
  133. msgbox("Post list refreshed", 2000); // Show a message box
  134. });
  135. </script>