Working swaping llm icons

views/partials/popover-models.html

@@ -8,15 +8,17 @@
     <div class="dropdown-menu" id="dropdown-menu3" role="menu">
         <div class="dropdown-content">
             <div class="dropdown-item" id="models-list">
-                {% for LLM in LLMs %}
-                <div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
-                    value="{{ LLM.ID.String() }}">
-                    <span class="icon">
-                        <img src="{{ LLM.Model.Company.Icon }}" />
-                    </span>
-                    <span>{{ LLM.Name }}</span>
+                <div id="llm-list">
+                    {% for LLM in LLMs %}
+                    <div class="icon-text has-text unselected" data-id="{{ LLM.ID.String() }}" style="cursor: pointer;"
+                        onclick="toggleSelection(this)">
+                        <span class="icon">
+                            <img src="{{ LLM.Model.Company.Icon }}" />
+                        </span>
+                        <span>{{ LLM.Name }}</span>
+                    </div>
+                    {% endfor %}
                 </div>
-                {% endfor %}
                 <div class="is-flex is-justify-content-space-between mt-4">
                     <button class="button is-small is-danger is-outlined" hx-get="/deleteLLM" hx-swap="outerHTML"
                         hx-target="#models-dropdown" hx-confirm="Are you sure?" hx-trigger="click"
@@ -85,6 +87,26 @@
 </div>
 
 <script>
+    var sortable = new Sortable(document.getElementById('llm-list'), {
+        animation: 150,
+        onEnd: function (evt) {
+            var items = evt.to.children;
+            var updates = [];
+            for (var i = 0; i < items.length; i++) {
+                var id = items[i].getAttribute('data-id');
+                var position = i + 1;
+                updates.push({ id: id, position: position });
+            }
+
+            var xhr = new XMLHttpRequest();
+            xhr.open('POST', '/updateLLMPositionBatch', true);
+            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+            xhr.send(JSON.stringify(updates));
+        }
+    });
+
+
+
     document.getElementById('model-name-input').addEventListener('input', function () {
         document.getElementById('confirm-create-model-button').disabled = this.value === '';
     })
@@ -102,7 +124,6 @@
         document.getElementById('model-cid-input').classList.toggle('is-hidden', !customEndpoint);
     });
 
-
     document.getElementById('temperature-slider').addEventListener('input', function () {
         document.getElementById('temperature-slider-output').innerHTML = this.value;
     })
@@ -124,12 +145,10 @@
     });
 
     document.addEventListener('keyup', function (event) {
-        // If Shift is press and id="chat-input-textarea" not focused
         if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea' && document.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
             document.body.classList.remove('shift-pressed');
             lastSelectedIndex = null;
 
-            // Remove all "shiftselected" classes
             const elements = Array.from(document.getElementsByClassName('icon-text'));
             for (let i = 0; i < elements.length; i++) {
                 elements[i].classList.remove('shiftselected');
@@ -146,58 +165,6 @@
     });
 </script>
 
-{% if not DeleteUpdate %}
-<script>
-    let lastSelectedIndex = null;
-
-    function toggleSelection(element) {
-        const elements = Array.from(document.getElementsByClassName('icon-text'));
-        const index = elements.indexOf(element);
-
-        if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
-            const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
-            let allSelected = true;
-            for (let i = start; i <= end; i++) {
-                if (!elements[i].classList.contains('selected')) {
-                    allSelected = false;
-                    break;
-                }
-            }
-            for (let i = start; i <= end; i++) {
-                if (allSelected) {
-                    elements[i].classList.remove('selected');
-                    elements[i].classList.add('unselected');
-                } else {
-                    elements[i].classList.add('selected');
-                    elements[i].classList.remove('unselected');
-                }
-            }
-            lastSelectedIndex = null;
-
-            const elements2 = Array.from(document.getElementsByClassName('icon-text'));
-            for (let i = 0; i < elements2.length; i++) {
-                elements2[i].classList.remove('shiftselected');
-            }
-        } else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
-            lastSelectedIndex = index;
-            element.classList.toggle('shiftselected');
-        } else {
-            element.classList.toggle('selected');
-            element.classList.toggle('unselected');
-        }
-        toggleSendButton();
-    }
-
-    function getSelectedModelsIDs() {
-        var selectedModelsIDs = [];
-        var selectedModels = document.getElementsByClassName('selected');
-        for (var i = 0; i < selectedModels.length; i++) {
-            selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
-        }
-        return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
-    }
-</script>
-
 <style>
     .selected {
         border: 2px solid #126d0f;
@@ -248,5 +215,4 @@
         background: #ffffff;
         cursor: pointer;
     }
-</style>
-{% endif %}
+</style>