integrated front and back

frontend/js/render/main-screen.js

@@ -1,28 +1,44 @@
-// Рендеринг главного экрана: список тренировок.
-// Получает данные из state, возвращает DOM.
-
-import { state } from '../state.js';
+import { state, DEFAULT_COLOR } from '../state.js';
 import { renderWorkoutCard } from './workout-card.js';
-import { startWorkout } from '../logic/workout.js';
 
 export function renderMainScreen() {
     const app = document.getElementById('app');
+    if (!app) return;
     app.innerHTML = '';
 
-    if (state.workouts.length === 0) {
+    // В режиме тренера — подсказка сверху
+    if (state.mode === 'trainer') {
+        const hint = document.createElement('div');
+        hint.className = 'card mb-10';
+        hint.style.background = 'rgba(187, 134, 252, 0.1)';
+        hint.style.borderColor = 'var(--primary)';
+        hint.innerHTML = `
+            <div style="display:flex; justify-content:space-between; align-items:center;">
+                <div>
+                    <div style="font-weight:600;">👨‍🏫 Режим тренера</div>
+                    <div class="text-small text-muted">При создании тренировки выберите клиента</div>
+                </div>
+                <button class="btn btn-small" onclick="WL.startWorkout()">▶ Новая тренировка</button>
+            </div>
+        `;
+        app.appendChild(hint);
+    }
+
+    // Все тренировки (в обоих режимах)
+    const workoutsToShow = state.workouts;
+
+    if (workoutsToShow.length === 0) {
         app.innerHTML = `
             <div class="empty-state">
                 <h3>🏋️ Нет тренировок</h3>
-                <p>Начните первую тренировку</p>
-                <button class="btn" id="btn-start-first">▶ Начать тренировку</button>
+                <p>${state.mode === 'trainer' ? 'Создайте первую тренировку для клиента' : 'Начните первую тренировку'}</p>
+                <button class="btn" onclick="WL.startWorkout()">▶ Начать тренировку</button>
             </div>
         `;
-        document.getElementById('btn-start-first').onclick = startWorkout;
         return;
     }
 
-    // Сортировка: активные сверху, завершённые снизу
-    const sorted = [...state.workouts].sort((a, b) => {
+    const sorted = [...workoutsToShow].sort((a, b) => {
         if (!a.endTime && b.endTime) return -1;
         if (a.endTime && !b.endTime) return 1;
         return new Date(b.startTime) - new Date(a.startTime);
@@ -33,7 +49,7 @@ export function renderMainScreen() {
         const btn = document.createElement('button');
         btn.className = 'btn mb-10';
         btn.textContent = '▶ Начать новую тренировку';
-        btn.onclick = startWorkout;
+        btn.onclick = () => window.WL.startWorkout();
         app.appendChild(btn);
     }
 

frontend/js/render/workout-card.js

@@ -8,9 +8,25 @@ export function renderWorkoutCard(w) {
     const isExpanded = state.expandedWorkoutId === w.id;
     const isReadOnly = w.synced && w.endTime;
 
+    // Определяем цвет тренировки
+    let clientColor = null;
+    let clientName = null;
+    if (w.client_id) {
+        const client = state.clients.find(c => c.id == w.client_id);
+        if (client) {
+            clientColor = client.color;
+            clientName = client.full_name;
+        }
+    }
+
     const div = document.createElement('div');
     div.className = 'workout-accordion';
 
+    // Добавляем цветной border-left, если есть клиент
+    if (clientColor) {
+        div.style.borderLeft = `4px solid ${clientColor}`;
+    }
+
     const headerClass = `workout-header ${isActive ? 'active' : 'completed'}`;
     const dateStr = formatDate(w.startTime);
     const typeStr = w.type || 'тип не выбран';
@@ -28,11 +44,17 @@ export function renderWorkoutCard(w) {
            </span>`
         : '';
 
+    // Метка клиента (если есть)
+    const clientLabel = clientName
+        ? `<div class="workout-meta" style="color:${clientColor}; font-weight:600;">👤 ${clientName}</div>`
+        : '';
+
     div.innerHTML = `
         <div class="${headerClass}" onclick="WL.toggleWorkout('${w.id}')">
             <div>
                 <div style="font-weight:600;">${isActive ? '🔥 Тренировка' : '✅ Завершена'}</div>
                 <div class="workout-meta">${dateStr} ${editDateBtn} • ${typeStr}</div>
+                ${clientLabel}
                 <div class="workout-meta">Упр: ${exCount} • Кардио: ${cardioCount}</div>
             </div>
             <div>${statusBadge} <span class="chevron ${isExpanded ? 'open' : ''}">›</span></div>