task_config.templ 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. package app
  2. import (
  3. "github.com/seaweedfs/seaweedfs/weed/admin/maintenance"
  4. )
  5. templ TaskConfig(data *maintenance.TaskConfigData) {
  6. <div class="container-fluid">
  7. <div class="row mb-4">
  8. <div class="col-12">
  9. <div class="d-flex justify-content-between align-items-center">
  10. <h2 class="mb-0">
  11. <i class={data.TaskIcon + " me-2"}></i>
  12. {data.TaskName} Configuration
  13. </h2>
  14. <div class="btn-group">
  15. <a href="/maintenance/config" class="btn btn-outline-secondary">
  16. <i class="fas fa-arrow-left me-1"></i>
  17. Back to Configuration
  18. </a>
  19. <a href="/maintenance" class="btn btn-outline-primary">
  20. <i class="fas fa-list me-1"></i>
  21. View Queue
  22. </a>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="row">
  28. <div class="col-12">
  29. <div class="card">
  30. <div class="card-header">
  31. <h5 class="mb-0">
  32. <i class={data.TaskIcon + " me-2"}></i>
  33. {data.TaskName} Settings
  34. </h5>
  35. </div>
  36. <div class="card-body">
  37. <p class="text-muted mb-4">{data.Description}</p>
  38. <!-- Task-specific configuration form -->
  39. <form method="POST">
  40. <div class="task-config-form">
  41. @templ.Raw(string(data.ConfigFormHTML))
  42. </div>
  43. <hr class="my-4">
  44. <div class="d-flex gap-2">
  45. <button type="submit" class="btn btn-primary">
  46. <i class="fas fa-save me-1"></i>
  47. Save Configuration
  48. </button>
  49. <button type="button" class="btn btn-secondary" onclick="resetForm()">
  50. <i class="fas fa-undo me-1"></i>
  51. Reset to Defaults
  52. </button>
  53. <a href="/maintenance/config" class="btn btn-outline-secondary">
  54. <i class="fas fa-times me-1"></i>
  55. Cancel
  56. </a>
  57. </div>
  58. </form>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <!-- Task Information -->
  64. <div class="row mt-4">
  65. <div class="col-12">
  66. <div class="card">
  67. <div class="card-header">
  68. <h5 class="mb-0">
  69. <i class="fas fa-info-circle me-2"></i>
  70. Task Information
  71. </h5>
  72. </div>
  73. <div class="card-body">
  74. <div class="row">
  75. <div class="col-md-6">
  76. <h6 class="text-muted">Task Type</h6>
  77. <p class="mb-3">
  78. <span class="badge bg-secondary">{string(data.TaskType)}</span>
  79. </p>
  80. </div>
  81. <div class="col-md-6">
  82. <h6 class="text-muted">Display Name</h6>
  83. <p class="mb-3">{data.TaskName}</p>
  84. </div>
  85. </div>
  86. <div class="row">
  87. <div class="col-12">
  88. <h6 class="text-muted">Description</h6>
  89. <p class="mb-0">{data.Description}</p>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <script>
  98. function resetForm() {
  99. if (confirm('Are you sure you want to reset all settings to their default values?')) {
  100. // Find all form inputs and reset them
  101. const form = document.querySelector('form');
  102. if (form) {
  103. form.reset();
  104. }
  105. }
  106. }
  107. // Auto-save form data to localStorage for recovery
  108. document.addEventListener('DOMContentLoaded', function() {
  109. const form = document.querySelector('form');
  110. if (form) {
  111. const taskType = '{string(data.TaskType)}';
  112. const storageKey = 'taskConfig_' + taskType;
  113. // Load saved data
  114. const savedData = localStorage.getItem(storageKey);
  115. if (savedData) {
  116. try {
  117. const data = JSON.parse(savedData);
  118. Object.keys(data).forEach(key => {
  119. const input = form.querySelector(`[name="${key}"]`);
  120. if (input) {
  121. if (input.type === 'checkbox') {
  122. input.checked = data[key];
  123. } else {
  124. input.value = data[key];
  125. }
  126. }
  127. });
  128. } catch (e) {
  129. console.warn('Failed to load saved configuration:', e);
  130. }
  131. }
  132. // Save data on input change
  133. form.addEventListener('input', function() {
  134. const formData = new FormData(form);
  135. const data = {};
  136. for (let [key, value] of formData.entries()) {
  137. data[key] = value;
  138. }
  139. localStorage.setItem(storageKey, JSON.stringify(data));
  140. });
  141. // Clear saved data on successful submit
  142. form.addEventListener('submit', function() {
  143. localStorage.removeItem(storageKey);
  144. });
  145. }
  146. });
  147. </script>
  148. }