Fix(dashboard): Pipeline editing workers

sensorbucket · May 13, 2024 · a37a2cc · a37a2cc
1 parent 226fa2d
commit a37a2cc
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 194 deletions.
diff --git a/pkg/layout/layout.qtpl b/pkg/layout/layout.qtpl
@@ -53,7 +53,7 @@ type BasePage struct {
     <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/uPlot.iife.min.js"></script>
     <script type="text/javascript" src="{%s U("static/uplot.htmx.js") %}"></script>
     <script type="text/javascript" src="{%s U("static/leaflet.htmx.js") %}"></script>
-    <script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
     <script type="text/javascript">
         window.addEventListener("DOMContentLoaded", function(){
             document.body.addEventListener("showSnackbar", function(evt) {

diff --git a/services/dashboard/views/pipelineEditPage.qtpl b/services/dashboard/views/pipelineEditPage.qtpl
@@ -71,16 +71,18 @@
     <div id="workerTable" class="bg-white border rounded-md lg:col-span-3 xl:col-span-3">
         {%= RenderPipelineEditWorkerTable(p.Workers, p.WorkersNextPage) %}
     </div>
-    <div id="sortable-item-staging-template" class="p-2 w-2/4 mt-1.5 mx-auto text-white bg-orange-400 rounded-lg flex justify-between items-center">
-        <input type="hidden"/>
-        <div>
-            <p class="sortable-title text-lg"></p>
-            <p class="sortable-descr text-sm font-thin"></p>
-        </div>
-        <div class="trash-can cursor-pointer h-full w-1/12">
-            <iconify-icon icon="basil:trash-solid" width="100%" height="100%" class="text-white"></iconify-icon>
+    <template id="sortable-item-staging-template">
+        <div class="p-2 w-2/4 mt-1.5 mx-auto text-white bg-orange-400 rounded-lg flex justify-between items-center hidden">
+            <input type="hidden"/>
+            <div>
+                <p class="sortable-title text-lg"></p>
+                <p class="sortable-descr text-sm font-thin"></p>
+            </div>
+            <div class="trash-can cursor-pointer h-full w-1/12">
+                <iconify-icon icon="basil:trash-solid" width="100%" height="100%" class="text-white"></iconify-icon>
+            </div>
         </div>
-    </div>
+    </template>
 </div>
 {% endfunc %}
 
@@ -128,15 +130,15 @@
         function addSortable(workerName, workerId) {
             // Clone the template element and remove the 'hidden' class
             const template = document.getElementById("sortable-item-staging-template");
-            const newItem = template.cloneNode(true);
-            newItem.classList.remove("hidden");
-            newItem.id = "sortable-item-" + workerId;
+            const newItem = template.content.cloneNode(true);
+            newItem.children[0].classList.remove("hidden");
+            newItem.children[0].id = "sortable-item-" + workerId;
 
             const titleElement = newItem.querySelector(".sortable-title");
             titleElement.textContent = workerName;
 
             const trashCanElement = newItem.querySelector(".trash-can");
-            trashCanElement.onclick = function(){ removeFromSortable(workerId); };
+            trashCanElement.addEventListener("click", () => removeFromSortable(workerId));
 
             const sortableForm = document.getElementById("sortableForm");
             const inputElement = newItem.querySelector("input[type='hidden']");
@@ -159,27 +161,16 @@
 
         function getSteps() {
             const form = document.getElementById('sortableForm');
-            console.log(form);
 
             // Create a FormData object from the form
             const formData = new FormData(form);
-            console.log(form.elements);
-            console.log(formData.entries());
-            for (var [key, value] of formData.entries()) { 
-            console.log(key, value);
-            }
-
             let data = {}
             for (var [key, value] of formData.entries()) { 
                 if(!data[key]) {
                     data[key] = [];
                 }
                 data[key].push(value);
-                console.log(key, value, data[key]);
             }
-            console.log(data);
-
-
 
             return data;
         }