1339 lines
59 KiB
JavaScript
1339 lines
59 KiB
JavaScript
import { getCookie } from '/static/js/cookies.js';
|
||
import { apiRequest } from '/static/js/api.js';
|
||
|
||
let accessData;
|
||
let userData;
|
||
let currentToolboxData = null;
|
||
|
||
async function getCookieData() {
|
||
accessData = await getCookie('toolbox_access');
|
||
userData = await getCookie('toolbox_user');
|
||
}
|
||
|
||
async function openTab(event, tabId) {
|
||
// Убираем активный класс со всех вкладок и кнопок
|
||
document.querySelectorAll('.tab-nav-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
btn.querySelector('.nav-icon').classList.remove('text-primary');
|
||
btn.querySelector('.nav-icon').classList.add('text-muted');
|
||
});
|
||
|
||
document.querySelectorAll('.tab-pane').forEach(pane => {
|
||
pane.classList.remove('show', 'active');
|
||
});
|
||
|
||
// Добавляем активный класс выбранной вкладке и кнопке
|
||
event.currentTarget.classList.add('active');
|
||
event.currentTarget.querySelector('.nav-icon').classList.remove('text-muted');
|
||
event.currentTarget.querySelector('.nav-icon').classList.add('text-primary');
|
||
document.getElementById(tabId).classList.add('show', 'active');
|
||
|
||
await uploadTab(tabId);
|
||
}
|
||
|
||
function prepareTabs() {
|
||
let tabsData = {
|
||
'toolbox': {
|
||
title: 'Склад',
|
||
icon: 'bi-box-seam',
|
||
description: 'Управление остатками инструмента на складе'
|
||
},
|
||
'toolkits': {
|
||
title: 'Инструменты',
|
||
icon: 'bi-tools',
|
||
description: 'Каталог инструментов'
|
||
},
|
||
};
|
||
|
||
if (accessData.available_own_toolbox) {
|
||
tabsData['requests'] = {
|
||
title: 'Запросы',
|
||
icon: 'bi-chat-left-text',
|
||
description: 'Управление запросами на инструменты'
|
||
};
|
||
}
|
||
|
||
if (accessData.view_services) {
|
||
tabsData['jurnal_toolkits'] = {
|
||
title: 'Журнал перемещений',
|
||
icon: 'bi-journal-text',
|
||
description: 'Журнал перемещений инструментов'
|
||
};
|
||
}
|
||
|
||
if (accessData.view_requests) {
|
||
tabsData['jurnal_service'] = {
|
||
title: 'Сервисный журнал',
|
||
icon: 'bi-journal-richtext',
|
||
description: 'Журнал сервисных запросов'
|
||
};
|
||
}
|
||
|
||
if (accessData.users_view) {
|
||
tabsData['users'] = {
|
||
title: 'Пользователи',
|
||
icon: 'bi-people',
|
||
description: 'Управление пользователями'
|
||
};
|
||
}
|
||
|
||
const tabs = `
|
||
<div class="container-fluid p-0">
|
||
<!-- Верхняя панель навигации -->
|
||
<div class="row g-0 mb-4">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm" style="width: fit-content; margin: 0 auto;">
|
||
<div class="card-body p-3">
|
||
<div id="mainTabsNavWrapper">
|
||
<nav class="nav nav-pills gap-2" id="mainTabsNav" role="tablist">
|
||
${Object.entries(tabsData).map(([tabId, tabData], index) => `
|
||
<button class="nav-link tab-nav-btn d-flex flex-column align-items-center justify-content-center py-3 px-2"
|
||
id="${tabId}-tab"
|
||
role="tab"
|
||
onclick="openTab(event, '${tabId}')"
|
||
style="min-width: 120px; transition: all 0.3s ease;">
|
||
<i class="${tabData.icon} nav-icon fs-3 mb-2 text-muted" style="transition: all 0.3s ease;"></i>
|
||
<span class="nav-title fw-medium" style="font-size: 0.9rem;">${tabData.title}</span>
|
||
<div class="nav-indicator"></div>
|
||
</button>
|
||
`).join('')}
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Контент вкладок -->
|
||
<div class="row g-0">
|
||
<div class="col-12">
|
||
<div class="tab-content" id="mainTabsContent">
|
||
${Object.entries(tabsData).map(([tabId, tabData]) => `
|
||
<div class="tab-pane fade p-0"
|
||
id="${tabId}"
|
||
role="tabpanel">
|
||
|
||
<div class="card border-0 shadow-sm mb-1">
|
||
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
|
||
|
||
<div class="card-body py-2">
|
||
<div class="d-flex align-items-center">
|
||
<div class="bg-primary bg-opacity-10 p-3 rounded me-3">
|
||
<i class="${tabData.icon} fs-3 text-primary"></i>
|
||
</div>
|
||
<div>
|
||
<h2 class="mb-1">${tabData.title}</h2>
|
||
<p class="text-muted mb-0">${tabData.description}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="${tabId}-tab-optional-content" class="px-4"></div>
|
||
|
||
</div>
|
||
<div id="${tabId}-tab-content" class="px-4">
|
||
<div class="text-center py-5">
|
||
<div class="spinner-border text-primary mb-3" role="status">
|
||
<span class="visually-hidden">Загрузка...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
const mainContainer = document.getElementById('mainContent');
|
||
mainContainer.insertAdjacentHTML('afterbegin', tabs);
|
||
}
|
||
|
||
async function uploadTab(tabId) {
|
||
const cookiesData = { userData, accessData };
|
||
|
||
try {
|
||
const resp = await apiRequest('/', { tabId, cookiesData });
|
||
|
||
if (resp.status == 'ok') {
|
||
fillTab(tabId, resp.data);
|
||
} else {
|
||
throw new Error(resp.message || 'Ошибка загрузки данных');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading tab:', error);
|
||
const tabContent = document.getElementById(`${tabId}-tab-content`);
|
||
tabContent.innerHTML = `
|
||
<div class="alert alert-danger m-4" role="alert">
|
||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||
Ошибка при загрузке данных: ${error.message}
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
function fillTab(tabId, tabData) {
|
||
try {
|
||
switch (tabId) {
|
||
case 'toolbox':
|
||
renderToolboxTab(tabData);
|
||
break;
|
||
case 'requests':
|
||
renderSimpleTab(tabId, tabData, 'Запросы на инструменты');
|
||
break;
|
||
case 'toolkits':
|
||
renderToolkitsTab(tabId, tabData.toolkits, tabData.categories);
|
||
break;
|
||
case 'jurnal_toolkits':
|
||
renderSimpleTab(tabId, tabData, 'Журнал перемещений');
|
||
break;
|
||
case 'jurnal_service':
|
||
renderSimpleTab(tabId, tabData, 'Сервисный журнал');
|
||
break;
|
||
case 'users':
|
||
renderSimpleTab(tabId, tabData, 'Пользователи системы');
|
||
break;
|
||
}
|
||
} catch (error) {
|
||
console.error('Error filling tab:', error);
|
||
const tabContent = document.getElementById(`${tabId}-tab-content`);
|
||
tabContent.innerHTML = `
|
||
<div class="alert alert-danger m-4" role="alert">
|
||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||
Ошибка отображения данных
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
function renderSimpleTab(tabId, tabData, title) {
|
||
const tabContent = document.getElementById(`${tabId}-tab-content`);
|
||
tabContent.innerHTML = `
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body">
|
||
<h5 class="card-title mb-3">${title}</h5>
|
||
<div class="row">
|
||
${Object.entries(tabData).map(([key, value]) => `
|
||
<div class="col-12 col-md-6 mb-3">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body">
|
||
<h6 class="card-title mb-2">${key}</h6>
|
||
<p class="card-text">
|
||
${typeof value === 'object' ? JSON.stringify(value, null, 4) : value}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderToolkitsTab(tabId, toolsArray, categoriesList) {
|
||
const tabContent = document.getElementById(`${tabId}-tab-content`);
|
||
|
||
// Преобразуем объект в массив, если передан объект
|
||
const tools = Array.isArray(toolsArray) ? toolsArray : Object.values(toolsArray);
|
||
|
||
let uniqueCategories = {};
|
||
categoriesList.forEach(cat => {
|
||
uniqueCategories[cat.id] = { id: cat.id, title: cat.title, description: cat.description };
|
||
});
|
||
|
||
tools.forEach(tool => {
|
||
tool['category'] = uniqueCategories[tool.category_id]?.title || '';
|
||
tool['category_desc'] = uniqueCategories[tool.category_id]?.description || '';
|
||
});
|
||
|
||
// Сортируем инструменты: сначала по названию категории, затем по названию
|
||
const sortedTools = [...tools].sort((a, b) => {
|
||
// Получаем названия категорий
|
||
const catA = uniqueCategories[a.category_id]?.title || '';
|
||
const catB = uniqueCategories[b.category_id]?.title || '';
|
||
|
||
// Сначала сравниваем категории
|
||
if (catA < catB) return -1;
|
||
if (catA > catB) return 1;
|
||
|
||
// Если категории одинаковые, сравниваем названия инструментов
|
||
const titleA = a.title || '';
|
||
const titleB = b.title || '';
|
||
return titleA.localeCompare(titleB, 'ru');
|
||
});
|
||
|
||
// Создаем HTML структуру
|
||
tabContent.innerHTML = `
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body">
|
||
<!-- Блок фильтров -->
|
||
<div class="row mb-4">
|
||
<div class="col-12 col-md-8 mb-3 mb-md-0">
|
||
<div class="d-flex flex-wrap gap-2">
|
||
<button class="btn filter-btn active"
|
||
data-category="all">
|
||
Все категории
|
||
</button>
|
||
${Object.values(uniqueCategories).map(category => `
|
||
<button class="btn filter-btn"
|
||
data-category="${category.id}">
|
||
${category.title}
|
||
</button>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<div class="input-group">
|
||
<span class="input-group-text">
|
||
<i class="bi bi-search"></i>
|
||
</span>
|
||
<input type="text"
|
||
class="form-control"
|
||
id="${tabId}-search-input"
|
||
placeholder="Поиск по названию и описанию...">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Контейнер для карточек -->
|
||
<div id="${tabId}-cards-container" class="row g-4">
|
||
<!-- Карточки будут вставлены здесь -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// Рендерим карточки
|
||
renderToolkitCards(tabId, sortedTools, uniqueCategories);
|
||
|
||
// Добавляем обработчики событий для фильтров
|
||
setupFilters(tabId, tools, uniqueCategories);
|
||
}
|
||
|
||
// Функция для рендеринга карточек
|
||
function renderToolkitCards(tabId, tools, categoriesMap, filterText = '', categoryFilter = 'all') {
|
||
const container = document.getElementById(`${tabId}-cards-container`);
|
||
|
||
// Фильтруем инструменты
|
||
const filteredTools = tools.filter(tool => {
|
||
// Фильтр по категории
|
||
const categoryMatch = categoryFilter === 'all' || tool.category_id == categoryFilter;
|
||
|
||
// Фильтр по тексту
|
||
const searchMatch = !filterText ||
|
||
(tool.title && tool.title.toLowerCase().includes(filterText.toLowerCase())) ||
|
||
(tool.description && tool.description.toLowerCase().includes(filterText.toLowerCase()));
|
||
|
||
return categoryMatch && searchMatch;
|
||
});
|
||
|
||
// Рендерим карточки
|
||
if (filteredTools.length === 0) {
|
||
container.innerHTML = `
|
||
<div class="col-12 text-center py-5">
|
||
<div class="alert alert-info mb-0">
|
||
<i class="bi bi-info-circle me-2"></i>
|
||
Ничего не найдено. Попробуйте изменить параметры фильтрации.
|
||
</div>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = filteredTools.map(tool => {
|
||
const categoryName = categoriesMap[tool.category_id]?.title || `Категория ${tool.category_id}`;
|
||
const description = tool.description || 'Описание отсутствует';
|
||
const imageUrl = tool.image?.main || 'static/images/tools/default.png';
|
||
|
||
return `
|
||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||
<div class="card toolkit-card h-100 border-0 shadow-sm"
|
||
data-toolid="${tool.id}">
|
||
<div class="position-relative">
|
||
<img src="${imageUrl}"
|
||
class="card-img-top toolkit-card-img"
|
||
alt="${tool.title || 'Инструмент'}"
|
||
onerror="this.src='static/images/tools/default.png'">
|
||
<span class="position-absolute top-0 end-0 m-2 category-badge bg-primary text-white rounded-pill">
|
||
${categoryName}
|
||
</span>
|
||
</div>
|
||
<div class="card-body d-flex flex-column">
|
||
<h5 class="card-title mb-2">${tool.title || 'Без названия'}</h5>
|
||
<p class="card-text flex-grow-1 toolkit-description text-muted">
|
||
${description}
|
||
</p>
|
||
<div class="mt-2">
|
||
${tool.quantity_min ? `
|
||
<small class="text-muted">
|
||
<i class="bi bi-box me-1"></i>
|
||
Мин: ${tool.quantity_min}
|
||
${tool.quantity_min_extra ? `(<i class="bi bi-exclamation-triangle"></i> ${tool.quantity_min_extra})` : ''}
|
||
</small>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
const cards = container.querySelectorAll('.toolkit-card');
|
||
cards.forEach(card => {
|
||
card.addEventListener('click', async event => {
|
||
const toolId = event.currentTarget.dataset.toolid;
|
||
const tool = tools.find(t => t.id == toolId);
|
||
await showToolkitDetailsModal(tool);
|
||
});
|
||
});
|
||
}
|
||
|
||
// Функция для настройки фильтров
|
||
function setupFilters(tabId, tools, categoriesMap) {
|
||
const container = document.getElementById(`${tabId}-cards-container`);
|
||
const searchInput = document.getElementById(`${tabId}-search-input`);
|
||
const filterButtons = document.querySelectorAll(`#${tabId}-tab-content .filter-btn`);
|
||
|
||
// Текущие значения фильтров
|
||
let currentFilter = {
|
||
category: 'all',
|
||
search: ''
|
||
};
|
||
|
||
// Обработчик для кнопок категорий
|
||
filterButtons.forEach(button => {
|
||
button.addEventListener('click', function () {
|
||
// Убираем активный класс у всех кнопок
|
||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||
// Добавляем активный класс текущей кнопке
|
||
this.classList.add('active');
|
||
|
||
currentFilter.category = this.dataset.category;
|
||
renderToolkitCards(tabId, tools, categoriesMap, currentFilter.search, currentFilter.category);
|
||
});
|
||
});
|
||
|
||
// Обработчик для поля поиска
|
||
if (searchInput) {
|
||
let searchTimeout;
|
||
searchInput.addEventListener('input', function () {
|
||
clearTimeout(searchTimeout);
|
||
searchTimeout = setTimeout(() => {
|
||
currentFilter.search = this.value.trim();
|
||
renderToolkitCards(tabId, tools, categoriesMap, currentFilter.search, currentFilter.category);
|
||
}, 300);
|
||
});
|
||
|
||
// Очистка поиска
|
||
searchInput.insertAdjacentHTML('afterend', `
|
||
<button class="btn btn-outline-secondary d-none"
|
||
type="button"
|
||
id="${tabId}-clear-search">
|
||
<i class="bi bi-x-lg"></i>
|
||
</button>
|
||
`);
|
||
|
||
const clearBtn = document.getElementById(`${tabId}-clear-search`);
|
||
if (clearBtn) {
|
||
clearBtn.addEventListener('click', function () {
|
||
searchInput.value = '';
|
||
currentFilter.search = '';
|
||
renderToolkitCards(tabId, tools, categoriesMap, '', currentFilter.category);
|
||
this.classList.add('d-none');
|
||
});
|
||
|
||
searchInput.addEventListener('input', function () {
|
||
clearBtn.classList.toggle('d-none', !this.value);
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
function renderToolboxTab(tabData) {
|
||
currentToolboxData = tabData;
|
||
const tabContent = document.getElementById(`toolbox-tab-content`);
|
||
const tabOptionalContent = document.getElementById(`toolbox-tab-optional-content`);
|
||
|
||
if (!tabData || tabData.length === 0) {
|
||
tabContent.innerHTML = `
|
||
<div class="text-center py-5">
|
||
<i class="bi bi-inboxes display-1 text-muted mb-3"></i>
|
||
<h4 class="text-muted">Нет доступных складов</h4>
|
||
<p class="text-muted">У вас нет доступа ни к одному складу</p>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
// Создаем навигацию по складам
|
||
const toolboxNav = `
|
||
<div class="d-flex flex-wrap gap-2" id="toolboxNav">
|
||
${tabData.map((toolbox, index) => `
|
||
<button class="btn btn-outline-primary toolbox-nav-btn d-flex align-items-center"
|
||
onclick="selectToolbox(${toolbox.id}, ${index})"
|
||
data-toolbox-id="${toolbox.id}">
|
||
<i class="bi bi-box-seam me-2"></i>
|
||
<span>${toolbox.title}</span>
|
||
<div class="toolbox-nav-indicator"></div>
|
||
</button>
|
||
`).join('')}
|
||
</div>
|
||
`;
|
||
|
||
// Создаем контейнер для содержимого склада
|
||
const toolboxContent = `
|
||
<div class="row mt-2 mb-3">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm toolbox-content-container">
|
||
<div class="card-body d-flex flex-column justify-content-center align-items-center">
|
||
<i class="bi bi-box display-1 text-muted mb-3"></i>
|
||
<h4 class="text-muted mb-2">Выберите склад для просмотра</h4>
|
||
<p class="text-muted text-center">
|
||
Для отображения содержимого склада нажмите на одну из кнопок выше
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
tabOptionalContent.innerHTML = toolboxNav;
|
||
tabContent.innerHTML = toolboxContent;
|
||
}
|
||
|
||
// Функция для выбора склада
|
||
window.selectToolbox = async function (toolboxId, index) {
|
||
// Убираем активный класс со всех кнопок складов
|
||
document.querySelectorAll('.toolbox-nav-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
// Добавляем активный класс выбранной кнопке
|
||
const selectedBtn = document.querySelector(`.toolbox-nav-btn[data-toolbox-id="${toolboxId}"]`);
|
||
if (selectedBtn) {
|
||
selectedBtn.classList.add('active');
|
||
}
|
||
|
||
// Загружаем содержимое склада
|
||
await loadToolboxContent(toolboxId);
|
||
}
|
||
|
||
async function loadToolboxContent(toolboxId) {
|
||
const contentContainer = document.querySelector('.toolbox-content-container');
|
||
|
||
// Показываем индикатор загрузки
|
||
contentContainer.innerHTML = `
|
||
<div class="card-body d-flex flex-column justify-content-center align-items-center">
|
||
<div class="spinner-border text-primary mb-3" role="status">
|
||
<span class="visually-hidden">Загрузка...</span>
|
||
</div>
|
||
<h4 class="text-muted mb-2">Загрузка содержимого склада</h4>
|
||
<p class="text-muted">Пожалуйста, подождите...</p>
|
||
</div>
|
||
`;
|
||
|
||
try {
|
||
const resp = await apiRequest(`/stocks/`, { toolboxId });
|
||
|
||
if (resp.status === 'ok') {
|
||
const toolboxData = resp.data;
|
||
|
||
// Находим информацию о выбранном складе
|
||
const toolboxInfo = currentToolboxData.find(t => t.id === toolboxId);
|
||
const toolboxOwn = toolboxInfo.owner_id === userData.id ? 'Мой склад' : toolboxInfo.owner_id ? 'Склад сотрудника' : 'Общий склад';
|
||
const quantityMonitoring = toolboxInfo.monitoring && accessData.view_all_toolboxes;
|
||
|
||
// Обрабатываем данные в единый список
|
||
const processedData = processToolboxData(toolboxData, toolboxId, quantityMonitoring);
|
||
const totalQuantity = processedData.reduce((sum, item) => sum + item.totalQuantity, 0);
|
||
const totalCost = formatPrice(processedData.reduce((sum, item) => sum + item.totalCost, 0));
|
||
|
||
// Отображаем содержимое склада
|
||
contentContainer.innerHTML = `
|
||
<div class="card-header bg-info border-bottom">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<h5 class="mb-1">${toolboxInfo?.title || 'Склад'}</h5>
|
||
<p class="text-muted mb-0 small">${toolboxInfo?.description || 'Описание отсутствует'}</p>
|
||
</div>
|
||
<span class="badge bg-secondary">${toolboxOwn}</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="border">
|
||
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
||
<div class="d-flex align-items-center">
|
||
<div class="input-group me-2" style="flex: 1; max-width: 500px;">
|
||
<span class="input-group-text"><i class="bi bi-search"></i></span>
|
||
<input type="text" id="toolboxSearch" class="form-control" placeholder="Поиск по всем полям...">
|
||
<button class="btn btn-outline-secondary" type="button" id="resetFilter">
|
||
<i class="bi bi-x-circle"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-center justify-content-between ">
|
||
<span>
|
||
Количество позиций: <span class="fw-bold me-2">${processedData.length}</span>
|
||
Количество инструментов: <span class="fw-bold me-2">${totalQuantity}</span>
|
||
Общая стоимость: <span class="fw-bold me-2">${totalCost}</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-0">
|
||
<div class="table-responsive" style="max-height: 600px;">
|
||
<table class="table table-hover table-striped mb-0" id="toolboxItemsTable">
|
||
<thead class="table-light sticky-top" style="top: 0;">
|
||
<tr>
|
||
<th style="width: 60px;"></th>
|
||
<th data-sort="title">Название <i class="bi bi-arrow-down-up"></i></th>
|
||
<th data-sort="category">Категория <i class="bi bi-arrow-down-up"></i></th>
|
||
<th data-sort="totalQuantity">Количество <i class="bi bi-arrow-down-up"></i></th>
|
||
${quantityMonitoring ? '<th data-sort="indicator">Статус <i class="bi bi-arrow-down-up"></i></th>' : ''}
|
||
<th data-sort="totalCost">Стоимость <i class="bi bi-arrow-down-up"></i></th>
|
||
${toolboxOwn === 'Общий склад' ? `<th data-sort="placement">Расположение <i class="bi bi-arrow-down-up"></i></th>` : ''}
|
||
<th data-sort="lastUpdated">Последнее изменение <i class="bi bi-arrow-down-up"></i></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="toolboxItemsBody">
|
||
<!-- Данные будут загружены динамически -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card-footer">
|
||
<nav aria-label="Навигация по страницам">
|
||
<ul class="pagination pagination-sm justify-content-center mb-0" id="toolboxPagination">
|
||
<!-- Пагинация будет сгенерирована динамически -->
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
|
||
// Инициализация таблицы с данными
|
||
await initializeToolboxTable(processedData, toolboxOwn, quantityMonitoring);
|
||
} else {
|
||
throw new Error(resp.message || 'Ошибка загрузки данных склада');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading toolbox content:', error);
|
||
contentContainer.innerHTML = `
|
||
<div class="card-body d-flex flex-column justify-content-center align-items-center">
|
||
<i class="bi bi-exclamation-triangle display-1 text-danger mb-3"></i>
|
||
<h4 class="text-danger mb-2">Ошибка загрузки</h4>
|
||
<p class="text-muted text-center">
|
||
Не удалось загрузить содержимое склада<br>
|
||
<small class="text-danger">${error.message}</small>
|
||
</p>
|
||
<button class="btn btn-primary mt-3" onclick="selectToolbox(${toolboxId})">
|
||
<i class="bi bi-arrow-clockwise me-2"></i>
|
||
Попробовать снова
|
||
</button>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
// Функция обработки данных склада
|
||
function processToolboxData(toolboxData, toolboxId, quantityMonitoring) {
|
||
const { stocks, toolkits, categories } = toolboxData;
|
||
|
||
// Создаем мапы для быстрого доступа
|
||
const toolkitMap = {};
|
||
const categoryMap = {};
|
||
|
||
toolkits.forEach(toolkit => {
|
||
toolkitMap[toolkit.id] = toolkit;
|
||
});
|
||
|
||
categories.forEach(category => {
|
||
categoryMap[category.id] = category;
|
||
});
|
||
|
||
// Группируем стоки по инструментам
|
||
const groupedStocks = {};
|
||
|
||
stocks.forEach(stock => {
|
||
if (stock.toolbox_id !== toolboxId) return;
|
||
|
||
const toolkitId = stock.toolkit_id;
|
||
if (!groupedStocks[toolkitId]) {
|
||
groupedStocks[toolkitId] = {
|
||
stocks: [],
|
||
placements: new Set()
|
||
};
|
||
}
|
||
|
||
groupedStocks[toolkitId].stocks.push(stock);
|
||
if (stock.placement) {
|
||
groupedStocks[toolkitId].placements.add(stock.placement);
|
||
}
|
||
});
|
||
|
||
// Формируем итоговый массив
|
||
const result = [];
|
||
|
||
Object.keys(groupedStocks).forEach(toolkitId => {
|
||
const toolkit = toolkitMap[toolkitId];
|
||
if (!toolkit) return;
|
||
|
||
const group = groupedStocks[toolkitId];
|
||
const category = categoryMap[toolkit.category_id];
|
||
|
||
// Рассчитываем общие показатели
|
||
const totalQuantity = group.stocks.reduce((sum, stock) => sum + stock.quantity, 0);
|
||
const totalCost = group.stocks.reduce((sum, stock) => sum + (stock.quantity * stock.price), 0);
|
||
|
||
// Определяем статус достаточности
|
||
let indicator = null;
|
||
if (quantityMonitoring) {
|
||
if (totalQuantity >= toolkit.quantity_min) {
|
||
indicator = { text: 'Достаточно', class: 'success' };
|
||
} else if (totalQuantity >= toolkit.quantity_min_extra) {
|
||
indicator = { text: 'Мало', class: 'warning' };
|
||
} else {
|
||
indicator = { text: 'Критически мало', class: 'danger' };
|
||
}
|
||
}
|
||
|
||
// Формируем расположение
|
||
let placement = group.placements.size > 0 ?
|
||
Array.from(group.placements).join(', ') : 'Своб. расположение';
|
||
|
||
// Находим дату последнего изменения
|
||
const lastUpdated = group.stocks.reduce((latest, stock) => {
|
||
const stockDate = new Date(stock.updated_at);
|
||
return stockDate > latest ? stockDate : latest;
|
||
}, new Date(0));
|
||
|
||
result.push({
|
||
id: parseInt(toolkitId),
|
||
toolboxId: toolboxId,
|
||
image: toolkit.image?.main || 'static/images/tools/default.png',
|
||
images: toolkit.image?.additional || [],
|
||
title: toolkit.title,
|
||
category: category?.title || 'Без категории',
|
||
totalQuantity: totalQuantity,
|
||
indicator: indicator,
|
||
totalCost: totalCost, // Сохраняем число, форматируем при выводе
|
||
placement: placement,
|
||
lastUpdated: lastUpdated.toLocaleString('ru-RU'),
|
||
available: totalQuantity, // для проверки при операциях
|
||
toolkitData: toolkit, // для модального окна
|
||
categoryData: category // для модального окна
|
||
});
|
||
});
|
||
|
||
return result;
|
||
}
|
||
|
||
// Функция форматирования стоимости с разделителями тысяч
|
||
function formatPrice(price) {
|
||
return parseFloat(price).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
||
}
|
||
|
||
// Функция инициализации таблицы
|
||
async function initializeToolboxTable(data, toolboxOwn, quantityMonitoring) {
|
||
let currentPage = 1;
|
||
const itemsPerPage = 20;
|
||
let currentSort = { field: 'title', direction: 'asc' };
|
||
let filteredData = [...data];
|
||
|
||
|
||
// Инициализация пагинации
|
||
async function initializePagination() {
|
||
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
|
||
const paginationContainer = document.getElementById('toolboxPagination');
|
||
const tbody = document.getElementById('toolboxItemsBody');
|
||
|
||
// Очищаем текущее содержимое
|
||
paginationContainer.innerHTML = '';
|
||
|
||
// Добавляем кнопки пагинации
|
||
const prevBtn = document.createElement('li');
|
||
prevBtn.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
|
||
prevBtn.innerHTML = `<a class="page-link" href="#">Назад</a>`;
|
||
prevBtn.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
if (currentPage > 1) {
|
||
currentPage--;
|
||
renderTable();
|
||
}
|
||
});
|
||
paginationContainer.appendChild(prevBtn);
|
||
|
||
// Определяем диапазон отображаемых страниц
|
||
let startPage = Math.max(1, currentPage - 2);
|
||
let endPage = Math.min(totalPages, currentPage + 2);
|
||
|
||
for (let i = startPage; i <= endPage; i++) {
|
||
const pageItem = document.createElement('li');
|
||
pageItem.className = `page-item ${i === currentPage ? 'active' : ''}`;
|
||
pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;
|
||
pageItem.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
currentPage = i;
|
||
renderTable();
|
||
});
|
||
paginationContainer.appendChild(pageItem);
|
||
}
|
||
|
||
const nextBtn = document.createElement('li');
|
||
nextBtn.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
|
||
nextBtn.innerHTML = `<a class="page-link" href="#">Вперед</a>`;
|
||
nextBtn.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
if (currentPage < totalPages) {
|
||
currentPage++;
|
||
renderTable();
|
||
}
|
||
});
|
||
paginationContainer.appendChild(nextBtn);
|
||
|
||
// Рендерим данные текущей страницы
|
||
await renderTable();
|
||
}
|
||
|
||
// Функция рендеринга таблицы
|
||
async function renderTable() {
|
||
const tbody = document.getElementById('toolboxItemsBody');
|
||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||
const endIndex = startIndex + itemsPerPage;
|
||
const pageData = filteredData.slice(startIndex, endIndex);
|
||
|
||
tbody.innerHTML = '';
|
||
|
||
pageData.forEach(item => {
|
||
const tr = document.createElement('tr');
|
||
tr.dataset.id = item.id;
|
||
tr.dataset.quantity = item.totalQuantity;
|
||
|
||
// Определяем, какие кнопки показывать
|
||
let actionButtons = '';
|
||
|
||
if (toolboxOwn === 'Мой склад' || toolboxOwn === 'Склад сотрудника') {
|
||
actionButtons = `
|
||
<div class="btn-group btn-group-sm action-buttons">
|
||
<button class="btn btn-outline-primary" data-action="return" data-id="${item.id}" title="Вернуть">
|
||
<i class="bi bi-arrow-left-circle"></i>
|
||
</button>
|
||
<button class="btn btn-outline-danger" data-action="writeoff" data-id="${item.id}" title="Списать">
|
||
<i class="bi bi-trash"></i>
|
||
</button>
|
||
</div>
|
||
`;
|
||
} else if (toolboxOwn === 'Общий склад' && accessData.available_own_toolbox) {
|
||
actionButtons = `
|
||
<div class="btn-group btn-group-sm action-buttons">
|
||
<button class="btn btn-outline-success" data-action="get" data-id="${item.id}" title="Получить">
|
||
<i class="bi bi-box-arrow-in-down"></i> Получить
|
||
</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
tr.innerHTML = `
|
||
<td>
|
||
<a href="#" class="toolkit-image-link" data-id="${item.id}">
|
||
<img src="${item.image}" alt="${item.title}"
|
||
class="img-thumbnail" style="width: 50px; height: 50px; object-fit: cover;">
|
||
</a>
|
||
</td>
|
||
<td>${item.title}<br>${actionButtons}</td>
|
||
<td>${item.category}</td>
|
||
<td>${item.totalQuantity}</td>
|
||
${quantityMonitoring ?
|
||
`<td><span class="badge bg-${item.indicator?.class || 'secondary'}">${item.indicator?.text || '-'}</span></td>` : ''}
|
||
<td>${formatPrice(item.totalCost)} ₽</td>
|
||
${toolboxOwn === 'Общий склад' ? `<td>${item.placement}</td>` : ''}
|
||
<td>${item.lastUpdated}</td>
|
||
`;
|
||
|
||
tbody.appendChild(tr);
|
||
|
||
// Добавляем обработчики для кнопок в строке
|
||
const actionBtn = tr.querySelector('.action-buttons');
|
||
if (actionBtn) {
|
||
actionBtn.querySelectorAll('button[data-action]').forEach(button => {
|
||
button.addEventListener('click', async (e) => {
|
||
e.stopPropagation();
|
||
const action = e.currentTarget.dataset.action;
|
||
const itemId = e.currentTarget.dataset.id;
|
||
const selectedItem = data.find(d => d.id == itemId);
|
||
if (selectedItem) {
|
||
await showOperationModal(action, selectedItem);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
|
||
// Добавляем обработчики для изображений
|
||
document.querySelectorAll('.toolkit-image-link').forEach(link => {
|
||
link.addEventListener('click', async (e) => {
|
||
e.preventDefault();
|
||
const itemId = e.currentTarget.dataset.id;
|
||
const item = data.find(d => d.id == itemId);
|
||
if (item) {
|
||
await showToolkitDetailsModal(item);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
function parseDate(d) {
|
||
// d = "07.12.2025, 13:19:20"
|
||
const [datePart, timePart] = d.split(', ');
|
||
const [day, month, year] = datePart.split('.').map(Number);
|
||
const [hour, minute, second] = timePart.split(':').map(Number);
|
||
|
||
return new Date(year, month - 1, day, hour, minute, second);
|
||
}
|
||
|
||
// Функция сортировки
|
||
function sortData(field, direction) {
|
||
filteredData.sort((a, b) => {
|
||
let aValue = a[field];
|
||
let bValue = b[field];
|
||
|
||
// Для числовых полей
|
||
if (field === 'totalQuantity') {
|
||
aValue = parseFloat(aValue);
|
||
bValue = parseFloat(bValue);
|
||
}
|
||
|
||
// Для стоимости
|
||
if (field === 'totalCost') {
|
||
aValue = parseFloat(a.totalCost);
|
||
bValue = parseFloat(b.totalCost);
|
||
}
|
||
|
||
// Для дат
|
||
if (field === 'lastUpdated') {
|
||
aValue = parseDate(a.lastUpdated);
|
||
bValue = parseDate(b.lastUpdated);
|
||
}
|
||
|
||
// Для статуса
|
||
if (field === 'indicator') {
|
||
const order = { 'danger': 0, 'warning': 1, 'success': 2 };
|
||
aValue = order[a.indicator?.class] || 3;
|
||
bValue = order[b.indicator?.class] || 3;
|
||
}
|
||
|
||
if (direction === 'asc') {
|
||
return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
|
||
} else {
|
||
return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Функция фильтрации
|
||
async function filterData(searchText) {
|
||
if (!searchText.trim()) {
|
||
filteredData = [...data];
|
||
} else {
|
||
const searchLower = searchText.toLowerCase();
|
||
filteredData = data.filter(item =>
|
||
item.title.toLowerCase().includes(searchLower) ||
|
||
item.category.toLowerCase().includes(searchLower) ||
|
||
item.placement.toLowerCase().includes(searchLower) ||
|
||
item.totalQuantity.toString().includes(searchLower) ||
|
||
item.totalCost.toString().includes(searchLower) ||
|
||
(item.indicator?.text && item.indicator.text.toLowerCase().includes(searchLower))
|
||
);
|
||
}
|
||
currentPage = 1;
|
||
sortData(currentSort.field, currentSort.direction);
|
||
await initializePagination();
|
||
}
|
||
|
||
// Инициализация сортировки по заголовкам
|
||
document.querySelectorAll('#toolboxItemsTable th[data-sort]').forEach(th => {
|
||
th.addEventListener('click', async () => {
|
||
const field = th.dataset.sort;
|
||
if (currentSort.field === field) {
|
||
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
|
||
} else {
|
||
currentSort.field = field;
|
||
currentSort.direction = 'asc';
|
||
}
|
||
|
||
// Обновляем иконки сортировки
|
||
document.querySelectorAll('#toolboxItemsTable th i').forEach(icon => {
|
||
icon.className = 'bi bi-arrow-down-up';
|
||
});
|
||
|
||
const currentIcon = th.querySelector('i');
|
||
currentIcon.className = currentSort.direction === 'asc' ?
|
||
'bi bi-arrow-up' : 'bi bi-arrow-down';
|
||
|
||
sortData(currentSort.field, currentSort.direction);
|
||
await initializePagination();
|
||
});
|
||
});
|
||
|
||
// Инициализация поиска
|
||
const searchInput = document.getElementById('toolboxSearch');
|
||
searchInput.addEventListener('input', async (e) => {
|
||
await filterData(e.target.value);
|
||
});
|
||
|
||
// Инициализация кнопки сброса фильтра
|
||
document.getElementById('resetFilter').addEventListener('click', async () => {
|
||
searchInput.value = '';
|
||
await filterData('');
|
||
});
|
||
|
||
// Начальная инициализация
|
||
sortData(currentSort.field, currentSort.direction);
|
||
await initializePagination();
|
||
}
|
||
|
||
async function getToolkitStocks(toolkitId) {
|
||
const userId = userData.id;
|
||
const allToolboxes = accessData.view_all_toolboxes;
|
||
const resp = await apiRequest('/stocks/toolkit/', { toolkitId, userId, allToolboxes });
|
||
return resp.data;
|
||
}
|
||
|
||
// Функция показа модального окна с деталями инструмента
|
||
async function showToolkitDetailsModal(item) {
|
||
const modalId = 'toolkitDetailsModal';
|
||
let modal = document.getElementById(modalId);
|
||
|
||
if (modal) {
|
||
modal.remove();
|
||
}
|
||
|
||
modal = document.createElement('div');
|
||
modal.className = 'modal fade';
|
||
modal.id = modalId;
|
||
modal.tabIndex = -1;
|
||
|
||
let images = [];
|
||
|
||
if (typeof item.image === 'string') {
|
||
images = item.image ?
|
||
[item.image, ...(item.images || [])] :
|
||
[item.image];
|
||
} else {
|
||
images = item.image ?
|
||
[item.image.main, ...(item.image.additional || [])] :
|
||
[item.image.main];;
|
||
}
|
||
let imagesDiv = '';
|
||
|
||
if (images.length > 1) {
|
||
const carouselId = `carousel-${item.id}`;
|
||
imagesDiv = `
|
||
<div class="col-md-4">
|
||
<div id="${carouselId}" class="carousel slide" data-bs-ride="carousel">
|
||
<div class="carousel-inner">
|
||
${images.map((img, index) => `
|
||
<div class="carousel-item ${index === 0 ? 'active' : ''}">
|
||
<a href="${img}" data-lightbox="toolkit-${item.id}" data-title="${item.title}">
|
||
<img src="${img}" alt="${item.title}"
|
||
class="d-block w-100 rounded mb-3"
|
||
style="max-height: 300px; object-fit: contain; cursor: zoom-in;">
|
||
</a>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
<button class="carousel-control-prev" type="button" data-bs-target="#${carouselId}" data-bs-slide="prev"
|
||
style="width: 40px; height: 40px; top: 50%; transform: translateY(-50%); left: 10px; opacity: 0.8; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%;">
|
||
<span class="carousel-control-prev-icon" style="filter: invert(1); width: 20px; height: 20px;"></span>
|
||
<span class="visually-hidden">Предыдущее</span>
|
||
</button>
|
||
<button class="carousel-control-next" type="button" data-bs-target="#${carouselId}" data-bs-slide="next"
|
||
style="width: 40px; height: 40px; top: 50%; transform: translateY(-50%); right: 10px; opacity: 0.8; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%;">
|
||
<span class="carousel-control-next-icon" style="filter: invert(1); width: 20px; height: 20px;"></span>
|
||
<span class="visually-hidden">Следующее</span>
|
||
</button>
|
||
<div class="carousel-indicators" style="bottom: -30px;">
|
||
${images.map((_, index) => `
|
||
<button type="button" data-bs-target="#${carouselId}"
|
||
data-bs-slide-to="${index}"
|
||
class="${index === 0 ? 'active' : ''}"
|
||
aria-label="Slide ${index + 1}"
|
||
style="width: 12px; height: 12px; border-radius: 50%; border: 2px solid #333; background-color: rgba(255, 255, 255, 0.5); margin: 0 3px;"></button>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else {
|
||
imagesDiv = `
|
||
<div class="col-md-4">
|
||
<a href="${images[0]}" data-lightbox="toolkit-${item.id}" data-title="${item.title}">
|
||
<img src="${images[0]}" alt="${item.title}"
|
||
class="img-fluid rounded mb-3"
|
||
style="max-height: 300px; object-fit: contain; cursor: zoom-in;">
|
||
</a>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
const description = item.description || item.toolkitData?.description || 'Нет описания';
|
||
const specifications = item.toolkitData?.specifications || item.specifications || {};
|
||
const external_link = item.external_link || item.toolkitData?.external_link || null;
|
||
const category_desc = item.categoryData?.description || item.category_desc || '';
|
||
const toolkitStocks = await getToolkitStocks(item.id);
|
||
|
||
modal.innerHTML = `
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title"><i class="bi bi-tools me-1"></i>${item.title}</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
${imagesDiv}
|
||
<div class="col-md-8">
|
||
<h6><i class="bi bi-info-circle me-1"></i>Описание:</h6>
|
||
<p>${description}</p>
|
||
|
||
<h6 class="mt-3"><i class="bi bi-list me-1"></i>Категория:</h6>
|
||
<p><strong>${item.category}</strong> - ${category_desc}</p>
|
||
|
||
${specifications ? `
|
||
<h6 class="mt-3"><i class="bi bi-gear me-1"></i>Характеристики:</h6>
|
||
<table class="table table-sm">
|
||
${Object.entries(specifications).map(([key, value]) => `
|
||
<tr>
|
||
<td style="width: 40%"><strong>${key}:</strong></td>
|
||
<td>${value}</td>
|
||
</tr>
|
||
`).join('')}
|
||
</table>
|
||
` : ''}
|
||
|
||
${toolkitStocks ? `
|
||
<h6 class="mt-3"><i class="bi bi-box me-1"></i>Остатки на складах: <strong>${toolkitStocks.count}</strong> шт.</h6>
|
||
<table class="table table-sm">
|
||
${Object.entries(toolkitStocks.toolboxes).map(([key, value]) => `
|
||
<tr>
|
||
<td style="width: 60%"><strong>${key}:</strong></td>
|
||
<td>${value.count} шт.</td>
|
||
<td class="fw-bold">${value.placement || ''}</td>
|
||
</tr>
|
||
`).join('')}
|
||
</table>
|
||
` : ''}
|
||
|
||
${external_link ? `
|
||
<a href="${external_link}" target="_blank" class="btn btn-sm btn-outline-primary">
|
||
<i class="bi bi-box-arrow-up-right me-1"></i>Внешняя ссылка
|
||
</a>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.body.appendChild(modal);
|
||
|
||
const bsModal = new bootstrap.Modal(modal);
|
||
bsModal.show();
|
||
|
||
modal.addEventListener('hidden.bs.modal', () => {
|
||
modal.remove();
|
||
});
|
||
|
||
// После создания модального окна добавьте инициализацию lightbox
|
||
lightbox.option({
|
||
'resizeDuration': 200,
|
||
'wrapAround': true,
|
||
'albumLabel': "Изображение %1 из %2",
|
||
'fadeDuration': 300,
|
||
'imageFadeDuration': 300
|
||
});
|
||
}
|
||
|
||
// Функция показа модального окна для операций
|
||
async function showOperationModal(operation, selectedItem) {
|
||
const modalId = 'operationModal';
|
||
let modal = document.getElementById(modalId);
|
||
|
||
if (modal) {
|
||
modal.remove();
|
||
}
|
||
|
||
modal = document.createElement('div');
|
||
modal.className = 'modal fade';
|
||
modal.id = modalId;
|
||
modal.tabIndex = -1;
|
||
|
||
const operationTitles = {
|
||
'return': 'Возврат инструмента',
|
||
'writeoff': 'Списание инструмента',
|
||
'get': 'Получение инструмента'
|
||
};
|
||
|
||
// Определяем максимальное доступное количество
|
||
|
||
modal.innerHTML = `
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">${operationTitles[operation]}</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p><strong>${selectedItem.title}</strong> (доступно: ${selectedItem.totalQuantity} шт.)</p>
|
||
<div class="mb-3 d-flex flex-column flex-md-row align-items-md-center justify-content-left gap-2">
|
||
<label for="operationQuantity" class="form-label">Количество: ${operation === 'writeoff' || operation === 'get' ? `(макс: ${selectedItem.totalQuantity})` : ''}</label>
|
||
<input type="number" class="form-control" id="operationQuantity" style="max-width: 100px"
|
||
min="1" ${(operation === 'writeoff' || operation === 'get') ? `max="${selectedItem.totalQuantity}"` : ''} value="1">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="operationComment" class="form-label">Обоснование:</label>
|
||
<textarea class="form-control" id="operationComment" rows="2"></textarea>
|
||
</div>
|
||
</div>
|
||
<div id="operationError" class="alert alert-danger d-none mx-3" role="alert">
|
||
<span><i class="bi bi-exclamation-triangle me-2"></i> <span id="operationErrorMessage">Ошибка выполнения операции</span></span>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||
<button type="button" class="btn btn-primary" id="confirmOperation">Подтвердить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.body.appendChild(modal);
|
||
|
||
const bsModal = new bootstrap.Modal(modal);
|
||
bsModal.show();
|
||
|
||
// Валидация ввода количества
|
||
const quantityInput = document.getElementById('operationQuantity');
|
||
quantityInput.addEventListener('change', function () {
|
||
let value = parseInt(this.value);
|
||
|
||
if (value > selectedItem.totalQuantity) {
|
||
this.value = selectedItem.totalQuantity;
|
||
} else if (value < 1) {
|
||
this.value = 1;
|
||
}
|
||
});
|
||
|
||
document.getElementById('confirmOperation').addEventListener('click', async (e) => {
|
||
const btn = e.currentTarget;
|
||
const btnText = btn.innerHTML;
|
||
|
||
// Блокируем кнопку + ставим спиннер
|
||
btn.disabled = true;
|
||
btn.innerHTML = `
|
||
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||
Обработка...
|
||
`;
|
||
|
||
const quantity = parseInt(document.getElementById('operationQuantity').value);
|
||
const comment = document.getElementById('operationComment').value;
|
||
|
||
// Проверка максимального количества для операций списания и получения
|
||
if ((operation === 'writeoff' || operation === 'get') && quantity > selectedItem.totalQuantity) {
|
||
showError(`Максимально доступное количество: ${selectedItem.totalQuantity}`);
|
||
resetButton();
|
||
return;
|
||
}
|
||
|
||
if (comment === '') {
|
||
showError('Введите обоснование');
|
||
resetButton();
|
||
return;
|
||
}
|
||
|
||
const success = await actionRequest(operation, quantity, comment, selectedItem);
|
||
|
||
if (success) {
|
||
bsModal.hide();
|
||
await loadToolboxContent(selectedItem.toolboxId);
|
||
} else {
|
||
showError('Ошибка выполнения операции');
|
||
resetButton();
|
||
}
|
||
|
||
function resetButton() {
|
||
btn.disabled = false;
|
||
btn.innerHTML = btnText;
|
||
}
|
||
|
||
function showError(message) {
|
||
document.getElementById('operationError').classList.remove('d-none');
|
||
document.getElementById('operationErrorMessage').textContent = message;
|
||
}
|
||
});
|
||
|
||
modal.addEventListener('hidden.bs.modal', () => {
|
||
modal.remove();
|
||
});
|
||
}
|
||
|
||
async function actionRequest(operation, quantity, comment, selectedItem) {
|
||
const action = { operation, quantity, comment, selectedItem };
|
||
const sendData = { userData, accessData, action };
|
||
const resp = await apiRequest('/stocks/action/', sendData);
|
||
if (resp.status == 'ok') {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
}
|
||
|
||
function formatKey(key) {
|
||
const keyMap = {
|
||
'id': 'ID',
|
||
'title': 'Название',
|
||
'description': 'Описание',
|
||
'owner_id': 'ID владельца',
|
||
'monitoring': 'Мониторинг',
|
||
'created_at': 'Дата создания',
|
||
'updated_at': 'Дата обновления'
|
||
};
|
||
return keyMap[key] || key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');
|
||
}
|
||
|
||
function formatValue(value) {
|
||
if (value === null || value === undefined) return '—';
|
||
if (typeof value === 'boolean') return value ? 'Да' : 'Нет';
|
||
if (typeof value === 'object') return JSON.stringify(value);
|
||
return value.toString();
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', async () => {
|
||
await getCookieData();
|
||
|
||
if (!accessData || !userData) {
|
||
console.warn('Access data or user data not found');
|
||
return;
|
||
}
|
||
|
||
prepareTabs();
|
||
});
|
||
|
||
window.openTab = openTab; |