updated logs and players page

2025-06-29 16:37:59 +03:00
parent f20a606183
commit 73c41303a9
22 changed files with 847 additions and 57 deletions
--- a/templates/manage_group.html
+++ b/templates/manage_group.html
@@ -29,6 +29,26 @@
                margin-bottom: 1rem;
            }
        }
+
+        .sortable-list li {
+            cursor: move;
+            transition: background-color 0.2s ease;
+        }
+
+        .sortable-list li.dragging {
+            opacity: 0.5;
+            background-color: #f8f9fa;
+        }
+
+        .drag-handle {
+            cursor: grab;
+            color: #aaa;
+            font-size: 1.2rem;
+        }
+
+        .drag-over {
+            border-top: 2px solid #0d6efd;
+        }
    </style>
 </head>
 <body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
@@ -71,9 +91,18 @@
            </div>
            <div class="card-body">
                {% if content %}
-                    <ul class="list-group">
+                    <ul class="list-group sortable-list" id="groupMediaList">
                        {% for media in content %}
-                            <li class="list-group-item d-flex align-items-center {{ 'dark-mode' if theme == 'dark' else '' }}">
+                            <li class="list-group-item d-flex align-items-center {{ 'dark-mode' if theme == 'dark' else '' }}" 
+                                draggable="true"
+                                data-id="{{ media.id }}"
+                                data-position="{{ loop.index0 }}">
+                                <!-- Drag handle -->
+                                <div class="drag-handle me-2" title="Drag to reorder">
+                                    <i class="bi bi-grip-vertical"></i>
+                                    &#9776;
+                                </div>
+                                
                                <div class="flex-grow-1">
                                    <p class="mb-0"><strong>Media Name:</strong> {{ media.file_name }}</p>
                                </div>
@@ -90,6 +119,8 @@
                            </li>
                        {% endfor %}
                    </ul>
+                    <!-- Add a save button for the reordering -->
+                    <button id="saveGroupOrder" class="btn btn-success mt-3">Save Playlist Order</button>
                {% else %}
                    <p class="text-center">No media uploaded for this group.</p>
                {% endif %}
@@ -106,5 +137,89 @@
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+document.addEventListener('DOMContentLoaded', function() {
+    const groupMediaList = document.getElementById('groupMediaList');
+    let draggedItem = null;
+    
+    // Initialize drag events for all items
+    const items = groupMediaList.querySelectorAll('li');
+    items.forEach(item => {
+        // Drag start
+        item.addEventListener('dragstart', function(e) {
+            draggedItem = item;
+            setTimeout(() => {
+                item.classList.add('dragging');
+            }, 0);
+        });
+        
+        // Drag end
+        item.addEventListener('dragend', function() {
+            item.classList.remove('dragging');
+            draggedItem = null;
+            updatePositions();
+        });
+        
+        // Drag over
+        item.addEventListener('dragover', function(e) {
+            e.preventDefault();
+            if (item !== draggedItem) {
+                const rect = item.getBoundingClientRect();
+                const y = e.clientY - rect.top;
+                const height = rect.height;
+                
+                if (y < height / 2) {
+                    groupMediaList.insertBefore(draggedItem, item);
+                } else {
+                    groupMediaList.insertBefore(draggedItem, item.nextSibling);
+                }
+            }
+        });
+    });
+    
+    // Save button click handler
+    document.getElementById('saveGroupOrder').addEventListener('click', function() {
+        // Collect new order
+        const newOrder = [];
+        groupMediaList.querySelectorAll('li').forEach((item, index) => {
+            newOrder.push({
+                id: item.dataset.id,
+                position: index
+            });
+        });
+        
+        // Send to server
+        fetch('{{ url_for("update_group_content_order", group_id=group.id) }}', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': '{{ csrf_token() if csrf_token else "" }}'
+            },
+            body: JSON.stringify({items: newOrder})
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                alert('Playlist order updated successfully!');
+                console.log('Group playlist update successful:', data);
+            } else {
+                alert('Error updating playlist order: ' + (data.error || 'Unknown error'));
+                console.error('Failed to update group playlist:', data);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('An error occurred while updating the playlist order.');
+        });
+    });
+    
+    // Update positions in the UI
+    function updatePositions() {
+        groupMediaList.querySelectorAll('li').forEach((item, index) => {
+            item.dataset.position = index;
+        });
+    }
+});
+</script>
 </body>
 </html>