feat: Favorite swimmer and sidebar collapse

Author: HenryXiaoYang

DjangoConfigs/settings.py

@@ -27,7 +27,7 @@
 SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY')
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = False
+DEBUG = True
 
 ALLOWED_HOSTS = ["*"]
 CSRF_TRUSTED_ORIGINS = []

Swim4LoveV2/models.py

@@ -23,6 +23,7 @@ def exist_student_id(student_id):
 class Volunteer(models.Model):
     student_id = models.CharField(max_length=10, help_text="Please enter your student ID.", primary_key=True)
     name = models.CharField(max_length=100, help_text="Please enter your name.", unique=True)
+    favorites = models.ManyToManyField(Swimmer, related_name='favorited_by', blank=True)
 
     def __str__(self):
         return self.name

Swim4LoveV2/static/css/styles.css

@@ -1,12 +1,18 @@
 html {
     background-size: cover;
     background: #1a73e8 url("../image/ykps_swim_pool.webp") no-repeat fixed center center;
+    height: 100%;
+    overflow: hidden;
 }
 
 html, body {
     min-height: 100%;
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+    height: 100%;
 }
 
 :root {
@@ -32,25 +38,47 @@ html, body {
     width: 95%;
     max-width: 1800px;
     margin: 20px auto;
-    height: calc(100vh - 40px);
+    min-height: calc(100vh - 40px);
     color: var(--text-color);
+    transition: all 0.3s ease;
+}
+
+/* 控制面板收缩时的容器样式 */
+.container.panel-collapsed {
+    grid-template-columns: 0 1fr;
 }
 
 .left-panel {
     display: flex;
     flex-direction: column;
     gap: 12px;
-    height: 100%;
+    height: auto;
+    transition: all 0.3s ease;
+    overflow: visible;
+    padding-right: 5px;
+    margin-bottom: 20px;
+}
+
+.panel-collapsed .left-panel {
+    margin-left: -330px;
+    opacity: 0;
 }
 
 .right-panel {
-    background: rgba(15, 30, 60, 0.75);  /* 稍深一点的背景色 */
+    background: rgba(15, 30, 60, 0.75);
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     overflow-y: auto;
     padding: 20px;
+    margin-bottom: 20px;
+}
+
+.panel-collapsed .right-panel {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
 }
 
 .title {
@@ -484,7 +512,7 @@ td.house-winter {
 }
 
 /* 按钮样式 */
-.edit-button, .delete-button {
+.edit-button, .delete-button, .favorite-button {
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
@@ -518,6 +546,21 @@ td.house-winter {
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
 }
 
+/* 添加收藏按钮的金色样式 */
+.favorite-button.favorited {
+    color: gold; /* 只有星星图标变成金色 */
+}
+
+.favorite-button.favorited:hover {
+    color: gold; /* 悬停时保持金色 */
+    transform: translateY(-3px);
+}
+
+.favorite-button:hover {
+    background-color: rgba(255, 255, 255, 0.25); /* 与其他按钮保持一致的悬停背景 */
+    transform: translateY(-3px);
+}
+
 form {
     display: inline-block;
 }
@@ -1832,4 +1875,62 @@ input[type="checkbox"]:checked + .leaderboard-status {
 
 .minus-button:hover:not(:disabled) {
     background: #f44336;
+}
+
+/* 面板切换按钮样式 */
+.panel-toggle {
+    position: fixed;
+    left: 0;
+    bottom: 20px;
+    width: 30px;
+    height: 36px;
+    background: var(--main-color);
+    color: white;
+    border: none;
+    border-radius: 0 8px 8px 0;
+    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+
+.panel-toggle:hover {
+    background: var(--main-color-dark);
+    width: 35px;
+}
+
+.panel-toggle.collapsed {
+    left: 0;
+}
+
+.panel-toggle.collapsed i {
+    transform: rotate(180deg);
+}
+
+/* 适配切换按钮响应式布局 */
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+    
+    .container.panel-collapsed {
+        grid-template-columns: 1fr;
+    }
+    
+    .left-panel {
+        margin-bottom: 20px;
+    }
+    
+    .panel-collapsed .left-panel {
+        display: none;
+    }
+    
+    .panel-toggle {
+        bottom: 15px;
+        left: 0;
+    }
 }

Swim4LoveV2/templates/index.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block content %}
-    <div class="container">
+    <div class="container" id="mainContainer">
         <!-- 左侧面板 -->
         <div class="left-panel">
             <!-- 用户登录信息 -->
@@ -108,7 +108,7 @@ <h2 class="app-title">Swim4Love</h2>
             <div class="swimmers-section">
                 <h2>Swimmers</h2>
                 {% if have_perm %}
-                    <button class="button" onclick="location.href='{% url 'add_swimmer' %}'; return false;">
+                    <button class="button" id="addSwimmerBtn">
                         <i class="fa-solid fa-plus"></i> Add Swimmer
                     </button>
                 {% endif %}
@@ -208,6 +208,14 @@ <h2>Swimmers</h2>
                                         <button type="submit" class="delete-button"><i class="fa-regular fa-trash-can"></i>
                                         </button>
                                     </form>
+                                    {% if have_perm %}
+                                    <form action="{% url 'toggle_favorite' swimmer.id %}" method="post" class="favorite-form" data-swimmer-id="{{ swimmer.id }}">
+                                        {% csrf_token %}
+                                        <button type="button" class="favorite-button {% if swimmer in current_volunteer.favorites.all %}favorited{% endif %}">
+                                            <i class="fa-solid fa-star"></i>
+                                        </button>
+                                    </form>
+                                    {% endif %}
                                 </div>
                                 {% endif %}
                             </td>
@@ -227,7 +235,7 @@ <h2>Swimmers</h2>
                 <h2>Volunteers</h2>
                 <div class="volunteer-header">
                     {% if have_perm %}
-                        <button class="button" onclick="location.href='{% url 'add_volunteer' %}'; return false;">
+                        <button class="button" id="addVolunteerBtn">
                             <i class="fa-solid fa-plus"></i> Add Volunteer
                         </button>
                     {% endif %}
@@ -249,12 +257,114 @@ <h2>Volunteers</h2>
                 </div>
             </div>
         </div>
+        
+        <!-- 面板切换按钮 -->
+        <button id="panelToggleBtn" class="panel-toggle" title="切换侧栏">
+            <i class="fa-solid fa-chevron-left"></i>
+        </button>
     </div>
-    
+
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            // 注意：此处事件绑定已移至real_time_leaderboard.js
-            // 为避免重复绑定，保留此注释以便后续维护
+            // 添加游泳者和志愿者按钮事件
+            const addSwimmerBtn = document.getElementById('addSwimmerBtn');
+            if (addSwimmerBtn) {
+                addSwimmerBtn.addEventListener('click', function() {
+                    location.href = "{% url 'add_swimmer' %}";
+                    return false;
+                });
+            }
+            
+            const addVolunteerBtn = document.getElementById('addVolunteerBtn');
+            if (addVolunteerBtn) {
+                addVolunteerBtn.addEventListener('click', function() {
+                    location.href = "{% url 'add_volunteer' %}";
+                    return false;
+                });
+            }
+            
+            // Handle favorite button clicks
+            document.querySelectorAll('.favorite-button').forEach(button => {
+                button.addEventListener('click', function() {
+                    const form = this.closest('.favorite-form');
+                    const swimmerId = form.dataset.swimmerId;
+                    const currentStatus = this.classList.contains('favorited');
+                    
+                    fetch(form.action, {
+                        method: 'POST',
+                        headers: {
+                            'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value,
+                            'X-Requested-With': 'XMLHttpRequest'
+                        },
+                        credentials: 'same-origin' // 确保发送和接收cookie
+                    })
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error(`请求失败: ${response.status}`);
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        if (data.success) {
+                            const newStatus = data.is_favorite;
+                            
+                            // 切换收藏状态样式（根据服务器返回的状态更新）
+                            if (newStatus) {
+                                this.classList.add('favorited');
+                            } else {
+                                this.classList.remove('favorited');
+                            }
+                            
+                            // 重排表格行
+                            const tbody = document.querySelector('#swimmersTable tbody');
+                            const rows = Array.from(tbody.querySelectorAll('tr'));
+                            
+                            rows.sort((a, b) => {
+                                const aFavorited = a.querySelector('.favorite-button')?.classList.contains('favorited') || false;
+                                const bFavorited = b.querySelector('.favorite-button')?.classList.contains('favorited') || false;
+                                if (aFavorited === bFavorited) {
+                                    return a.querySelector('td').textContent.localeCompare(b.querySelector('td').textContent);
+                                }
+                                return bFavorited - aFavorited;
+                            });
+                            rows.forEach(row => tbody.appendChild(row));
+                        }
+                    })
+                    .catch(error => {
+                        console.error('请求失败:', error);
+                    });
+                });
+            });
+            
+            // 面板收缩功能
+            const toggleBtn = document.getElementById('panelToggleBtn');
+            const container = document.getElementById('mainContainer');
+            
+            // 检查本地存储中的状态
+            const isPanelCollapsed = localStorage.getItem('panelCollapsed') === 'true';
+            if (isPanelCollapsed) {
+                container.classList.add('panel-collapsed');
+                toggleBtn.classList.add('collapsed');
+                toggleBtn.querySelector('i').classList.remove('fa-chevron-left');
+                toggleBtn.querySelector('i').classList.add('fa-chevron-right');
+            }
+            
+            toggleBtn.addEventListener('click', function() {
+                container.classList.toggle('panel-collapsed');
+                this.classList.toggle('collapsed');
+                
+                // 切换图标
+                const icon = this.querySelector('i');
+                if (container.classList.contains('panel-collapsed')) {
+                    icon.classList.remove('fa-chevron-left');
+                    icon.classList.add('fa-chevron-right');
+                    localStorage.setItem('panelCollapsed', 'true');
+                } else {
+                    icon.classList.remove('fa-chevron-right');
+                    icon.classList.add('fa-chevron-left');
+                    localStorage.setItem('panelCollapsed', 'false');
+                }
+            });
         });
     </script>
 {% endblock %}

Swim4LoveV2/urls.py

@@ -13,4 +13,5 @@
     path("logout/", views.logout_view, name="logout"),
     path("increment_laps/<uuid:pk>/", views.increment_laps, name="increment_laps"),
     path("decrement_laps/<uuid:pk>/", views.decrement_laps, name="decrement_laps"),
+    path("toggle_favorite/<uuid:pk>/", views.toggle_favorite, name="toggle_favorite"),
 ]