integrated front and back

frontend/js/logic/settings.js

@@ -1,5 +1,7 @@
-import { state, saveState } from '../state.js';
+import { state, saveState, CLIENT_COLORS, DEFAULT_COLOR, genId, generateUUID } from '../state.js';
 import { showEditExerciseDialog } from '../modals/edit-exercise-modal.js';
+import { showBodyMetricsDialog } from '../modals/metrics-modal.js';
+import { showModal } from '../modals/modal-base.js';
 
 export function showSettings() {
     const app = document.getElementById('app');
@@ -12,6 +14,14 @@ export function showSettings() {
             <h2>⚙️ Настройки</h2>
             <button class="btn btn-small btn-secondary" onclick="App.backToMain()">← Назад</button>
         </div>
+
+        <div class="settings-section">
+            <h3>👥 Клиенты</h3>
+            <p class="text-muted text-small mb-10">Управление клиентами и их замерами. Цвет клиента используется для подсветки тренировок.</p>
+            <button class="btn btn-small mb-10" onclick="SettingsLogic.showAddClientModal()">+ Добавить клиента</button>
+            <div id="clients-list"></div>
+        </div>
+
         <div class="settings-section">
             <h3>📋 Справочник упражнений</h3>
             <p class="text-muted text-small mb-10">Управляйте списком упражнений и привязывайте их к типам тренировок.</p>
@@ -20,30 +30,67 @@ export function showSettings() {
                     <input type="text" id="new-ref-exercise" placeholder="Новое упражнение...">
                     <select id="new-ref-type" style="width: auto; min-width: 120px;">
                         <option value="">тип...</option>
-                        <option value="грудь-руки">грудь-руки</option>
-                        <option value="ноги">ноги</option>
-                        <option value="спина-плечи">спина-плечи</option>
-                        <option value="круговая">круговая</option>
-                        <option value="силовая">силовая</option>
-                        <option value="многоповторная">многоповторная</option>
+                        ${state.workoutTypes.map(wt => `<option value="${wt.name}">${wt.name}</option>`).join('')}
                     </select>
                     <button class="btn btn-small" style="width:auto; padding: 0 20px;" onclick="SettingsLogic.addRefExercise()">+</button>
                 </div>
             </div>
             <div id="ref-exercises-list"></div>
         </div>
+
         <div class="settings-section">
-            <h3>📏 Замеры тела</h3>
+            <h3>📏 Личные замеры</h3>
+            <p class="text-muted text-small mb-10">Замеры без привязки к клиенту (для личного режима).</p>
+            <button class="btn btn-small mb-10" onclick="ML.showBodyMetrics()">+ Добавить личный замер</button>
             <div id="body-metrics-list"></div>
         </div>
+
         <div class="settings-section">
             <h3>🗑 Данные</h3>
             <button class="btn btn-danger" onclick="SettingsLogic.clearAllData()">Очистить все данные</button>
         </div>
     `;
     app.appendChild(screen);
+
+    _renderClientsList();
     _renderRefExercises();
-    _renderBodyMetricsList();
+    _renderPersonalMetricsList();
+}
+
+export function _renderPersonalMetricsList() {
+    const list = document.getElementById('body-metrics-list');
+    if (!list) return;
+
+    const personalMetrics = state.bodyMetrics.filter(m => !m.client_id);
+
+    if (personalMetrics.length === 0) {
+        list.innerHTML = '<p class="text-muted text-small">Нет личных замеров</p>';
+        return;
+    }
+
+    list.innerHTML = personalMetrics.map(m => {
+        const date = new Date(m.date);
+        const dateStr = date.toLocaleDateString('ru-RU') + ' ' + date.toLocaleTimeString('ru-RU', {hour:'2-digit', minute:'2-digit'});
+        const parts = [];
+        if (m.weight) parts.push(`⚖️ ${m.weight} кг`);
+        if (m.chest) parts.push(`📏 ${m.chest} см`);
+        if (m.waist) parts.push(`📏 ${m.waist} см`);
+        if (m.hips) parts.push(`📏 ${m.hips} см`);
+        if (m.arms) parts.push(`💪 ${m.arms} см`);
+        if (m.legs) parts.push(`🦵 ${m.legs} см`);
+        return `
+            <div class="exercise-ref-item">
+                <div>
+                    <div style="font-weight:500;">${dateStr}</div>
+                    <div class="text-small text-muted">${parts.join(' • ') || '—'}</div>
+                </div>
+                <div style="display:flex; gap:4px;">
+                    <button class="icon-btn" onclick="ML.editBodyMetric('${m.id}')">✎</button>
+                    <button class="icon-btn danger" onclick="ML.deleteMetric('${m.id}')">✕</button>
+                </div>
+            </div>
+        `;
+    }).join('');
 }
 
 export function addRefExercise() {
@@ -146,7 +193,6 @@ export function _renderRefExercises() {
     }).join('');
 }
 
-// Добавим отображение типов замеров в настройки (для тренера)
 export function _renderMetricTypes() {
     const container = document.getElementById('metric-types-list');
     if (!container) return;
@@ -196,9 +242,257 @@ export function _renderBodyMetricsList() {
     }).join('');
 }
 
+export function showAddClientModal(editingClient = null) {
+    const isEdit = !!editingClient;
+    const client = editingClient || { full_name: '', birth_date: '', goal: '', color: DEFAULT_COLOR };
+
+    const paletteHtml = CLIENT_COLORS.map(color => `
+        <div class="color-swatch ${client.color === color ? 'selected' : ''}"
+             style="background:${color};"
+             onclick="SettingsLogic.selectClientColor('${color}')"></div>
+    `).join('');
+
+    const html = `
+        <div class="modal-content">
+            <h3 class="modal-title">${isEdit ? '✎ Редактировать' : '👤 Новый'} клиент</h3>
+            <div class="field-group">
+                <label>ФИО</label>
+                <input type="text" id="m-client-name" value="${client.full_name}" placeholder="Иванов Иван Иванович">
+            </div>
+            <div class="field-group">
+                <label>Дата рождения</label>
+                <input type="date" id="m-client-dob" value="${client.birth_date || ''}">
+            </div>
+            <div class="field-group">
+                <label>Цель тренировок</label>
+                <input type="text" id="m-client-goal" value="${client.goal || ''}" placeholder="Набор массы, похудение...">
+            </div>
+            <div class="field-group">
+                <label>Цвет клиента</label>
+                <div class="color-palette" id="m-client-palette">
+                    ${paletteHtml}
+                </div>
+            </div>
+            <div class="btn-row">
+                <button class="btn btn-secondary" onclick="ModalBase.closeModal()">Отмена</button>
+                <button class="btn btn-success" onclick="SettingsLogic.submitClient('${editingClient?.id || ''}')">Сохранить</button>
+            </div>
+        </div>
+    `;
+    showModal(html);
+    window._tempClientColor = client.color;
+}
+
+export function selectClientColor(color) {
+    window._tempClientColor = color;
+    document.querySelectorAll('#m-client-palette .color-swatch').forEach(el => {
+        el.classList.toggle('selected', el.style.background === color ||
+            rgbToHex(el.style.backgroundColor) === color.toLowerCase());
+    });
+}
+
+function rgbToHex(rgb) {
+    if (rgb.startsWith('#')) return rgb.toLowerCase();
+    const match = rgb.match(/\d+/g);
+    if (!match) return rgb;
+    return '#' + match.slice(0, 3).map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
+}
+
+export function submitClient(editingId) {
+    const name = document.getElementById('m-client-name').value.trim();
+    if (!name) { alert('Введите ФИО'); return; }
+
+    const color = window._tempClientColor || DEFAULT_COLOR;
+
+    if (editingId) {
+        // Редактирование
+        const client = state.clients.find(c => c.id == editingId);
+        if (client) {
+            client.full_name = name;
+            client.birth_date = document.getElementById('m-client-dob').value || null;
+            client.goal = document.getElementById('m-client-goal').value.trim();
+            client.color = color;
+        }
+    } else {
+        // Создание
+        const newClient = {
+            id: genId(),
+            sync_id: generateUUID(),
+            full_name: name,
+            birth_date: document.getElementById('m-client-dob').value || null,
+            goal: document.getElementById('m-client-goal').value.trim(),
+            color: color,
+            is_active: 1,
+        };
+        state.clients.push(newClient);
+    }
+
+    saveState();
+    window.ModalBase.closeModal();
+    _renderClientsList();
+    window.renderMainScreen(); // Обновляем цвета тренировок
+}
+
+export function deleteClient(id) {
+    if (!confirm('Удалить клиента? Тренировки останутся, но без привязки.')) return;
+    state.clients = state.clients.filter(c => c.id != id);
+    // Отвязываем тренировки
+    state.workouts.forEach(w => {
+        if (w.client_id == id) w.client_id = null;
+    });
+    // Отвязываем замеры
+    state.bodyMetrics.forEach(m => {
+        if (m.client_id == id) m.client_id = null;
+    });
+    saveState();
+    _renderClientsList();
+    window.renderMainScreen();
+}
+
+export function _renderClientsList() {
+    const list = document.getElementById('clients-list');
+    if (!list) return;
+
+    if (state.clients.length === 0) {
+        list.innerHTML = '<p class="text-muted text-small">Нет клиентов. Добавьте первого!</p>';
+        return;
+    }
+
+    list.innerHTML = state.clients.map(c => {
+        // Считаем замеры этого клиента
+        const clientMetrics = state.bodyMetrics.filter(m => m.client_id == c.id);
+        const lastMetric = clientMetrics[0]; // уже отсортированы по дате
+
+        let metricsPreview = 'Нет замеров';
+        if (lastMetric) {
+            const parts = [];
+            if (lastMetric.weight) parts.push(`⚖️ ${lastMetric.weight} кг`);
+            if (lastMetric.chest) parts.push(`📏 ${lastMetric.chest} см`);
+            metricsPreview = parts.join(' • ') || 'Замеры без значений';
+        }
+
+        // Считаем тренировки
+        const clientWorkouts = state.workouts.filter(w => w.client_id == c.id);
+
+        return `
+            <div class="exercise-ref-item" style="border-left: 4px solid ${c.color || DEFAULT_COLOR}; padding-left: 10px;">
+                <div style="flex:1;">
+                    <div style="font-weight:600;">${c.full_name}</div>
+                    <div class="text-small text-muted">${c.goal || 'Цель не указана'}</div>
+                    <div class="text-small text-muted" style="margin-top:4px;">
+                        🏋️ ${clientWorkouts.length} трен. • 📏 ${clientMetrics.length} замеров
+                    </div>
+                    ${lastMetric ? `<div class="text-small" style="margin-top:2px; color:var(--text-secondary);">Последний: ${metricsPreview}</div>` : ''}
+                </div>
+                <div style="display:flex; gap:4px; flex-direction:column;">
+                    <button class="icon-btn" onclick="SettingsLogic.showClientMetrics('${c.id}')" title="Замеры">📏</button>
+                    <button class="icon-btn" onclick="SettingsLogic.showAddClientModal(state.clients.find(x => x.id == '${c.id}'))" title="Редактировать">✎</button>
+                    <button class="icon-btn danger" onclick="SettingsLogic.deleteClient('${c.id}')" title="Удалить">✕</button>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+export function showClientMetrics(clientId) {
+    const client = state.clients.find(c => c.id == clientId);
+    if (!client) return;
+
+    const clientMetrics = state.bodyMetrics
+        .filter(m => m.client_id == clientId)
+        .sort((a, b) => new Date(b.date) - new Date(a.date));
+
+    const metricsHtml = clientMetrics.length === 0
+        ? '<p class="text-muted text-small">Нет замеров</p>'
+        : clientMetrics.map(m => {
+            const date = new Date(m.date);
+            const dateStr = date.toLocaleDateString('ru-RU') + ' ' + date.toLocaleTimeString('ru-RU', {hour:'2-digit', minute:'2-digit'});
+            const parts = [];
+            if (m.weight) parts.push(`⚖️ ${m.weight} кг`);
+            if (m.chest) parts.push(`📏 ${m.chest} см`);
+            if (m.waist) parts.push(`📏 ${m.waist} см`);
+            if (m.hips) parts.push(`📏 ${m.hips} см`);
+            if (m.arms) parts.push(`💪 ${m.arms} см`);
+            if (m.legs) parts.push(`🦵 ${m.legs} см`);
+            return `
+                <div class="exercise-ref-item">
+                    <div>
+                        <div style="font-weight:500;">${dateStr}</div>
+                        <div class="text-small text-muted">${parts.join(' • ') || '—'}</div>
+                    </div>
+                    <div style="display:flex; gap:4px;">
+                        <button class="icon-btn" onclick="SettingsLogic.editClientMetric('${m.id}', '${clientId}')">✎</button>
+                        <button class="icon-btn danger" onclick="SettingsLogic.deleteClientMetric('${m.id}', '${clientId}')">✕</button>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+    const html = `
+        <div class="modal-content">
+            <h3 class="modal-title">📏 Замеры: ${client.full_name}</h3>
+            <div id="client-metrics-list" style="max-height:50vh; overflow-y:auto;">
+                ${metricsHtml}
+            </div>
+            <div class="btn-row" style="margin-top:16px;">
+                <button class="btn btn-secondary" onclick="ModalBase.closeModal()">Закрыть</button>
+                <button class="btn" onclick="SettingsLogic.addClientMetric('${clientId}')">+ Добавить замер</button>
+            </div>
+        </div>
+    `;
+    showModal(html);
+}
+
+export function addClientMetric(clientId) {
+    showBodyMetricsDialog(
+        state.bodyMetrics.filter(m => m.client_id == clientId),
+        (newMetric) => {
+            if (!newMetric) return;
+            newMetric.id = genId();
+            newMetric.client_id = parseInt(clientId);
+            state.bodyMetrics.unshift(newMetric);
+            state.bodyMetrics.sort((a, b) => new Date(b.date) - new Date(a.date));
+            saveState();
+            showClientMetrics(clientId); // Перерисовываем модалку
+        }
+    );
+}
+
+export function editClientMetric(metricId, clientId) {
+    const metric = state.bodyMetrics.find(m => m.id === metricId);
+    if (!metric) return;
+    showBodyMetricsDialog(
+        state.bodyMetrics,
+        (updatedData) => {
+            if (!updatedData) return;
+            Object.assign(metric, updatedData);
+            state.bodyMetrics.sort((a, b) => new Date(b.date) - new Date(a.date));
+            saveState();
+            showClientMetrics(clientId);
+        },
+        metric
+    );
+}
+
+export function deleteClientMetric(metricId, clientId) {
+    if (!confirm('Удалить замер?')) return;
+    state.bodyMetrics = state.bodyMetrics.filter(m => m.id !== metricId);
+    saveState();
+    showClientMetrics(clientId);
+}
+
+// Обновляем экспорт
 window.SettingsLogic = {
     show: showSettings,
     addRefExercise, deleteRefExercise, updateRefExerciseType,
     editRefExercise, clearAllData,
     _renderRefExercises, _renderBodyMetricsList,
+    // Клиенты:
+    showAddClientModal, submitClient, deleteClient, _renderClientsList,
+    selectClientColor,
+    // Замеры клиента:
+    showClientMetrics, addClientMetric, editClientMetric, deleteClientMetric,
 };
+
+// Делаем state доступным для inline onclick
+window.state = state;