Working selection models

2024-05-21 22:25:54 +02:00
parent 4505d50a11
commit fd4adcc136
4 changed files with 73 additions and 44 deletions
@@ -7,41 +7,55 @@
    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
        <div class="dropdown-content is-small">
            <div class="dropdown-item">
-                <table class="table is-hoverable is-fullwidth is-narrow is-small">
-                    <thead>
-                        <tr>
-                            <th class="is-size-7">Name</th>
-                            <th class="is-size-7">Model</th>
-                            <th class="is-size-7"></th>
-                            <th class="is-size-7"></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for LLM in LLMs %}
-                        <tr>
-                            <td class="is-size-6">{{ LLM.Name }}</td>
-                            <td class="is-size-7">{{ LLM.Model.ModelID }}</td>
-                            <td class="is-size-6">
-                                <button hx-get="/modal" hx-target="body" hx-swap="beforeend"
-                                    class="button is-primary is-small is-inline-block is-outlined">
-                                    <span class="icon">
-                                        <i class="fa-solid fa-gear"></i>
-                                    </span>
-                                </button>
-                            </td>
-                            <td class="is-size-6">
-                                <button class="button is-danger is-small is-inline-block  is-outlined"
-                                    style="min-width: auto;">
-                                    <span class="icon">
-                                        <i class="fa-solid fa-xmark"></i>
-                                    </span>
-                                </button>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+                {% for LLM in LLMs %}
+                <!-- Added "has-text" as a default class -->
+                <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>
+                {% endfor %}
            </div>
        </div>
    </div>
-</div>
+</div>
+
+<script>
+    function toggleSelection(element) {
+        // Check if the element currently has the 'has-text-info' class
+        if (element.classList.contains('selected')) {
+            // It has 'has-text-info', so remove it and add 'has-text'
+            element.classList.add('unselected');
+            element.classList.remove('selected');
+        } else {
+            // It doesn't have 'has-text-info', so add it and remove 'has-text'
+            element.classList.remove('unselected');
+            element.classList.add('selected');
+        }
+    }
+
+    function getSelectedModelsIDs() {
+        var selectedModelsIDs = [];
+        var selectedModels = document.getElementsByClassName('selected');
+        for (var i = 0; i < selectedModels.length; i++) {
+            selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
+        }
+        return JSON.stringify(selectedModelsIDs);
+    }
+</script>
+
+<style>
+    .selected {
+        border: 2px solid #3273dc;
+        /* Bulma's primary color */
+        border-radius: 4px;
+        padding: 2px;
+    }
+
+    .unselected {
+        border-radius: 4px;
+        padding: 4px;
+    }
+</style>