Compare commits
No commits in common. "pages" and "main" have entirely different histories.
220
index.html
220
index.html
@ -24,13 +24,20 @@
|
|||||||
.step-list li { position: relative; padding-left: var(--kt-ai-space-10); margin-bottom: var(--kt-ai-space-3); }
|
.step-list li { position: relative; padding-left: var(--kt-ai-space-10); margin-bottom: var(--kt-ai-space-3); }
|
||||||
.step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--kt-ai-primary); color: var(--kt-ai-bg); border-radius: var(--kt-ai-radius-full); text-align: center; line-height: 28px; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); }
|
.step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--kt-ai-primary); color: var(--kt-ai-bg); border-radius: var(--kt-ai-radius-full); text-align: center; line-height: 28px; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); }
|
||||||
.link-hint { color: var(--kt-ai-link); font-size: var(--kt-ai-text-sm); }
|
.link-hint { color: var(--kt-ai-link); font-size: var(--kt-ai-text-sm); }
|
||||||
.no-source { color: var(--kt-ai-fg-muted); font-style: italic; }
|
.empty-state { text-align: center; padding: var(--kt-ai-space-12) var(--kt-ai-space-6); color: var(--kt-ai-fg-muted); }
|
||||||
.category-filter { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); justify-content: center; margin-top: var(--kt-ai-space-6); }
|
.category-filter { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); justify-content: center; margin-top: var(--kt-ai-space-6); }
|
||||||
.filter-chip { cursor: pointer; }
|
.filter-chip { cursor: pointer; }
|
||||||
.ask-form { max-width: 600px; margin: var(--kt-ai-space-8) auto; display: none; padding: var(--kt-ai-space-6); }
|
.filter-chip[data-active="true"] { data-tone: "primary"; }
|
||||||
.ask-form[data-visible="true"] { display: block; }
|
.add-question-form { max-width: 600px; margin: var(--kt-ai-space-8) auto; display: none; }
|
||||||
|
.add-question-form[data-visible="true"] { display: block; }
|
||||||
|
.tabs { display: flex; gap: var(--kt-ai-space-2); border-bottom: 1px solid var(--kt-ai-border); margin-bottom: var(--kt-ai-space-6); }
|
||||||
|
.tab { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--kt-ai-fg-muted); }
|
||||||
|
.tab[data-active="true"] { border-bottom-color: var(--kt-ai-primary); color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); }
|
||||||
|
.my-questions-list { margin-top: var(--kt-ai-space-4); }
|
||||||
|
.my-question-item { display: flex; justify-content: space-between; align-items: center; padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); margin-bottom: var(--kt-ai-space-2); }
|
||||||
.toast { position: fixed; bottom: var(--kt-ai-space-6); right: var(--kt-ai-space-6); background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-radius: var(--kt-ai-radius-xl); box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1000; display: none; }
|
.toast { position: fixed; bottom: var(--kt-ai-space-6); right: var(--kt-ai-space-6); background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-radius: var(--kt-ai-radius-xl); box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1000; display: none; }
|
||||||
.toast[data-visible="true"] { display: block; }
|
.toast[data-visible="true"] { display: block; animation: slideIn 0.3s ease; }
|
||||||
|
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="kt-ai-app" data-kt-data-mode="demo">
|
<body class="kt-ai-app" data-kt-data-mode="demo">
|
||||||
@ -44,7 +51,8 @@
|
|||||||
<span class="kt-ai-spacer"></span>
|
<span class="kt-ai-spacer"></span>
|
||||||
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
||||||
<span class="kt-ai-spacer"></span>
|
<span class="kt-ai-spacer"></span>
|
||||||
<button class="kt-ai-btn" data-variant="primary" id="btnAsk">Задать вопрос</button>
|
<button class="kt-ai-btn" data-variant="ghost" id="btnMyQuestions">Мои вопросы</button>
|
||||||
|
<button class="kt-ai-btn" data-variant="primary" id="btnAddQuestion">Задать вопрос</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@ -53,7 +61,7 @@
|
|||||||
<section class="kt-ai-hero" data-align="center" style="padding:0;margin-bottom:var(--kt-ai-space-8)">
|
<section class="kt-ai-hero" data-align="center" style="padding:0;margin-bottom:var(--kt-ai-space-8)">
|
||||||
<h1>Помощник по сопровождению договоров</h1>
|
<h1>Помощник по сопровождению договоров</h1>
|
||||||
<p class="kt-ai-hero-sub" style="max-width:600px;margin:0 auto">
|
<p class="kt-ai-hero-sub" style="max-width:600px;margin:0 auto">
|
||||||
Найдите готовый ответ или задайте свой вопрос — коллегии помогут
|
Задайте вопрос о создании заявок, согласовании договоров или поиске решений — получите понятные шаги с инструкциями
|
||||||
</p>
|
</p>
|
||||||
<div class="search-box" style="margin-top:var(--kt-ai-space-6)">
|
<div class="search-box" style="margin-top:var(--kt-ai-space-6)">
|
||||||
<input type="text" class="search-input" id="searchInput" placeholder="Например: как создать заявку в портале?">
|
<input type="text" class="search-input" id="searchInput" placeholder="Например: как создать заявку в портале?">
|
||||||
@ -74,35 +82,49 @@
|
|||||||
<span class="kt-ai-chip filter-chip" data-category="other">Другое</span>
|
<span class="kt-ai-chip filter-chip" data-category="other">Другое</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="emptyState" class="kt-ai-empty" style="display:none;text-align:center;padding:var(--kt-ai-space-12) var(--kt-ai-space-6)">
|
<div class="tabs" id="tabs" style="display:none">
|
||||||
|
<div class="tab" data-tab="all" data-active="true">База знаний</div>
|
||||||
|
<div class="tab" data-tab="my">Мои вопросы</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="emptyState" class="empty-state" style="display:none">
|
||||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-fg-faint)" stroke-width="1.5" style="margin-bottom:var(--kt-ai-space-4)">
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-fg-faint)" stroke-width="1.5" style="margin-bottom:var(--kt-ai-space-4)">
|
||||||
<circle cx="11" cy="11" r="8"></circle>
|
<circle cx="11" cy="11" r="8"></circle>
|
||||||
<path d="m21 21-4.35-4.35"></path>
|
<path d="m21 21-4.35-4.35"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<h3 style="color:var(--kt-ai-fg);margin-bottom:var(--kt-ai-space-2)">Ничего не найдено</h3>
|
<h3 style="color:var(--kt-ai-fg);margin-bottom:var(--kt-ai-space-2)">Ничего не найдено</h3>
|
||||||
<p style="color:var(--kt-ai-fg-muted)">Попробуйте изменить поисковый запрос или категорию</p>
|
<p>Попробуйте изменить поисковый запрос или категорию</p>
|
||||||
<button class="kt-ai-btn" data-variant="primary" style="margin-top:var(--kt-ai-space-4)" onclick="showAskForm()">Задать свой вопрос</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="qa-grid" id="qaGrid"></div>
|
<div class="qa-grid" id="qaGrid"></div>
|
||||||
|
|
||||||
<form class="kt-ai-card ask-form" id="askForm">
|
<form class="add-question-form kt-ai-card" id="addQuestionForm" style="padding:var(--kt-ai-space-6)">
|
||||||
<h2 style="margin-bottom:var(--kt-ai-space-4)">Новый вопрос</h2>
|
<h2 style="margin-bottom:var(--kt-ai-space-4)">Новый вопрос</h2>
|
||||||
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-4)">Опишите вопрос своими словами — ответ появится в базе после проверки</p>
|
|
||||||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
||||||
<label for="questionTitle">Ваш вопрос</label>
|
<label for="questionTitle">Ваш вопрос</label>
|
||||||
<input type="text" class="kt-ai-input" id="questionTitle" required placeholder="Кратко сформулируйте вопрос">
|
<input type="text" class="kt-ai-input" id="questionTitle" required placeholder="Кратко сформулируйте вопрос">
|
||||||
</div>
|
</div>
|
||||||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
||||||
<label for="questionDetails">Подробности</label>
|
<label for="questionCategory">Категория</label>
|
||||||
<textarea class="kt-ai-textarea" id="questionDetails" rows="4" placeholder="Опишите вашу ситуацию"></textarea>
|
<select class="kt-ai-select" id="questionCategory">
|
||||||
|
<option value="create">Создание заявки</option>
|
||||||
|
<option value="approve">Согласование</option>
|
||||||
|
<option value="find">Поиск решений</option>
|
||||||
|
<option value="other">Другое</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
||||||
|
<label for="questionDetails">Подробности (необязательно)</label>
|
||||||
|
<textarea class="kt-ai-textarea" id="questionDetails" rows="4" placeholder="Опишите вашу ситуацию подробнее"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:flex;gap:var(--kt-ai-space-3)">
|
<div style="display:flex;gap:var(--kt-ai-space-3)">
|
||||||
<button type="submit" class="kt-ai-btn" data-variant="primary">Отправить вопрос</button>
|
<button type="submit" class="kt-ai-btn" data-variant="primary">Отправить вопрос</button>
|
||||||
<button type="button" class="kt-ai-btn" data-variant="ghost" id="btnCancel">Отмена</button>
|
<button type="button" class="kt-ai-btn" data-variant="ghost" id="btnCancelAdd">Отмена</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
<div class="my-questions-list" id="myQuestionsList" style="display:none"></div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||||||
@ -120,69 +142,66 @@ const DEMO_DATA = [
|
|||||||
id: 1,
|
id: 1,
|
||||||
category: 'create',
|
category: 'create',
|
||||||
question: 'Как создать заявку в портале?',
|
question: 'Как создать заявку в портале?',
|
||||||
answer: '<ol class="step-list"><li>Войдите в портал</li><li>Нажмите кнопку «Создать заявку»</li><li>Заполните поля: тип договора, контрагент, сумма</li><li>Прикрепите документы</li><li>Нажмите «Отправить на согласование»</li></ol>',
|
answer: '<ol class="step-list"><li>Войдите в портал по ссылке <a href="#" class="link-hint">portal.kazakhtelecom.kz</a></li><li>Нажмите кнопку «Создать заявку» в верхнем меню</li><li>Заполните обязательные поля: тип договора, контрагент, сумма</li><li>Прикрепите скан-копии документов</li><li>Нажмите «Отправить на согласование»</li></ol><p class="link-hint" style="margin-top:var(--kt-ai-space-3)">📄 <a href="#">Полная инструкция (PDF, 2.4 МБ)</a></p>',
|
||||||
hasSource: true
|
link: 'portal.kazakhtelecom.kz/new'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
category: 'create',
|
category: 'create',
|
||||||
question: 'Какие документы нужны для создания заявки?',
|
question: 'Какие документы нужны для создания заявки?',
|
||||||
answer: '<ol class="step-list"><li>Устав контрагента</li><li>Свидетельство о регистрации (ОГРН)</li><li>Приказ о назначении руководителя</li><li>Доверенность (если подписывает не руководитель)</li><li>Коммерческое предложение или счёт</li></ol>',
|
answer: '<ol class="step-list"><li>Устав контрагента (действующая редакция)</li><li>Свидетельство о регистрации (ОГРН)</li><li>Приказ о назначении руководителя</li><li>Доверенность (если подписывает не руководитель)</li><li>Коммерческое предложение или счёт</li></ol><p class="link-hint" style="margin-top:var(--kt-ai-space-3)">📄 <a href="#">Чек-лист документов (PDF)</a></p>',
|
||||||
hasSource: true
|
link: null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
category: 'approve',
|
category: 'approve',
|
||||||
question: 'Кого добавить в согласование?',
|
question: 'Кого добавить в согласование?',
|
||||||
answer: '<p style="color:var(--kt-ai-fg-muted)">Инструкции пока нет. Обратитесь к руководителю департамента.</p>',
|
answer: '<ol class="step-list"><li>Руководитель вашего департамента (обязательно)</li><li>Юридический департамент — для договоров свыше 1 млн ₸</li><li>Финансовый департамент — если есть оплата</li><li>Департамент безопасности — для доступа к инфраструктуре</li></ol><p style="margin-top:var(--kt-ai-space-3);color:var(--kt-ai-fg-muted)">Маршрут согласования формируется автоматически по сумме и типу договора.</p>',
|
||||||
hasSource: false
|
link: null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
category: 'approve',
|
category: 'approve',
|
||||||
question: 'Сколько времени занимает согласование?',
|
question: 'Сколько времени занимает согласование?',
|
||||||
answer: '<p style="color:var(--kt-ai-fg-muted)">Инструкции пока нет. Нормативные сроки уточняйте в юридическом департаменте.</p>',
|
answer: '<p>Нормативные сроки:</p><ul class="step-list"><li>До 500 тыс. ₸ — 3 рабочих дня</li><li>От 500 тыс. до 5 млн ₸ — 5 рабочих дней</li><li>Свыше 5 млн ₸ — 10 рабочих дней</li></ul><p class="link-hint" style="margin-top:var(--kt-ai-space-3)">⏱ <a href="#">Отследить статус заявки</a></p>',
|
||||||
hasSource: false
|
link: 'portal.kazakhtelecom.kz/status'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
category: 'find',
|
category: 'find',
|
||||||
question: 'Где найти решение по договору?',
|
question: 'Где найти решение по договору?',
|
||||||
answer: '<ol class="step-list"><li>Откройте раздел «Мои заявки»</li><li>Найдите договор по номеру</li><li>Перейдите на вкладку «Решения»</li><li>Скачайте файл</li></ol>',
|
answer: '<ol class="step-list"><li>Откройте портал в разделе «Мои заявки»</li><li>Найдите нужный договор по номеру или названию</li><li>Кликните на строку заявки</li><li>Перейдите на вкладку «Решения»</li><li>Скачайте файл с подписью и печатью</li></ol><p class="link-hint" style="margin-top:var(--kt-ai-space-3)">📂 <a href="#">Перейти к моим заявкам</a></p>',
|
||||||
hasSource: true
|
link: 'portal.kazakhtelecom.kz/my'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
category: 'find',
|
category: 'find',
|
||||||
question: 'Как посмотреть историю изменений договора?',
|
question: 'Как посмотреть историю изменений договора?',
|
||||||
answer: '<p style="color:var(--kt-ai-fg-muted)">Инструкции пока нет. Попробуйте найти договор в архиве.</p>',
|
answer: '<ol class="step-list"><li>Откройте карточку договора</li><li>Нажмите вкладку «История» вверху</li><li>Увидите все изменения с датами и авторами</li><li>Можно скачать любую версию документа</li></ol>',
|
||||||
hasSource: false
|
link: null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 7,
|
id: 7,
|
||||||
category: 'other',
|
category: 'other',
|
||||||
question: 'Что делать, если заявка возвращена на доработку?',
|
question: 'Что делать, если заявка возвращена на доработку?',
|
||||||
answer: '<ol class="step-list"><li>Откройте уведомление</li><li>Прочитайте комментарий</li><li>Исправьте замечания</li><li>Нажмите «Отправить повторно»</li></ol>',
|
answer: '<ol class="step-list"><li>Откройте уведомление о возврате</li><li>Прочитайте комментарий согласующего</li><li>Исправьте замечания в заявке</li><li>Нажмите «Отправить повторно»</li></ol><p style="margin-top:var(--kt-ai-space-3);color:var(--kt-ai-fg-muted)">Заявка останется в том же маршруте согласования, срок обнулится.</p>',
|
||||||
hasSource: true
|
link: null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 8,
|
id: 8,
|
||||||
category: 'other',
|
category: 'other',
|
||||||
question: 'Как отозвать заявку на согласовании?',
|
question: 'Как отозвать заявку на согласовании?',
|
||||||
answer: '<p style="color:var(--kt-ai-fg-muted)">Инструкции пока нет. Свяжитесь с согласующим.</p>',
|
answer: '<ol class="step-list"><li>Найдите заявку в разделе «Мои заявки»</li><li>Убедитесь, что статус «На согласовании»</li><li>Нажмите кнопку «Отозвать»</li><li>Укажите причину отзыва (обязательно)</li><li>Подтвердите отзыв</li></ol><p style="margin-top:var(--kt-ai-space-3);color:var(--kt-ai-fg-muted)">После отзыва заявка перейдёт в статус «Черновик».</p>',
|
||||||
hasSource: false
|
link: null
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
// === Состояние приложения ===
|
// === Состояние приложения ===
|
||||||
const FILTERS = [
|
|
||||||
{ id: 'category', label: 'Категория', affects: ['table'] }
|
|
||||||
];
|
|
||||||
|
|
||||||
let state = {
|
let state = {
|
||||||
|
currentTab: 'all',
|
||||||
currentCategory: 'all',
|
currentCategory: 'all',
|
||||||
searchQuery: '',
|
searchQuery: '',
|
||||||
userQuestions: JSON.parse(localStorage.getItem('userQuestions') || '[]')
|
myQuestions: JSON.parse(localStorage.getItem('myQuestions') || '[]')
|
||||||
};
|
};
|
||||||
|
|
||||||
// === Инициализация ===
|
// === Инициализация ===
|
||||||
@ -196,14 +215,7 @@ function renderQA() {
|
|||||||
const grid = document.getElementById('qaGrid');
|
const grid = document.getElementById('qaGrid');
|
||||||
const emptyState = document.getElementById('emptyState');
|
const emptyState = document.getElementById('emptyState');
|
||||||
|
|
||||||
let data = [...DEMO_DATA, ...state.userQuestions.map((q, i) => ({
|
let data = DEMO_DATA;
|
||||||
id: 'user-' + i,
|
|
||||||
category: q.category || 'other',
|
|
||||||
question: q.title,
|
|
||||||
answer: '<p style="color:var(--kt-ai-fg-muted)">Вопрос на рассмотрении</p>',
|
|
||||||
hasSource: false,
|
|
||||||
isUser: true
|
|
||||||
}))];
|
|
||||||
|
|
||||||
// Фильтр по категории
|
// Фильтр по категории
|
||||||
if (state.currentCategory !== 'all') {
|
if (state.currentCategory !== 'all') {
|
||||||
@ -214,7 +226,8 @@ function renderQA() {
|
|||||||
if (state.searchQuery) {
|
if (state.searchQuery) {
|
||||||
const query = state.searchQuery.toLowerCase();
|
const query = state.searchQuery.toLowerCase();
|
||||||
data = data.filter(q =>
|
data = data.filter(q =>
|
||||||
q.question.toLowerCase().includes(query)
|
q.question.toLowerCase().includes(query) ||
|
||||||
|
q.answer.toLowerCase().includes(query)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -225,13 +238,8 @@ function renderQA() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
emptyState.style.display = 'none';
|
emptyState.style.display = 'none';
|
||||||
grid.innerHTML = data.map(q => {
|
grid.innerHTML = data.map(q => `
|
||||||
const answerHtml = q.isUser
|
<div class="kt-ai-card qa-card" data-id="${q.id}" data-expanded="false" onclick="toggleCard(${q.id})">
|
||||||
? q.answer
|
|
||||||
: q.answer;
|
|
||||||
|
|
||||||
return `
|
|
||||||
<div class="kt-ai-card qa-card" data-id="${q.id}" data-expanded="false" onclick="toggleCard('${q.id}')">
|
|
||||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:var(--kt-ai-space-3)">
|
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:var(--kt-ai-space-3)">
|
||||||
<h3 style="margin:0;color:var(--kt-ai-fg)">${q.question}</h3>
|
<h3 style="margin:0;color:var(--kt-ai-fg)">${q.question}</h3>
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-fg-muted)" stroke-width="2" style="flex-shrink:0;transition:transform 0.3s" class="chevron">
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-fg-muted)" stroke-width="2" style="flex-shrink:0;transition:transform 0.3s" class="chevron">
|
||||||
@ -239,17 +247,43 @@ function renderQA() {
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="qa-answer">
|
<div class="qa-answer">
|
||||||
${answerHtml}
|
${q.answer}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}).join('');
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// === Рендеринг моих вопросов ===
|
||||||
|
function renderMyQuestions() {
|
||||||
|
const list = document.getElementById('myQuestionsList');
|
||||||
|
|
||||||
|
if (state.myQuestions.length === 0) {
|
||||||
|
list.innerHTML = '<div class="empty-state"><p style="color:var(--kt-ai-fg-muted)">Вы ещё не задали ни одного вопроса</p></div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
list.innerHTML = state.myQuestions.map((q, idx) => `
|
||||||
|
<div class="my-question-item">
|
||||||
|
<div>
|
||||||
|
<strong style="color:var(--kt-ai-fg)">${q.title}</strong>
|
||||||
|
<span class="kt-ai-chip" style="margin-left:var(--kt-ai-space-2)" data-tone="gray">${getCategoryName(q.category)}</span>
|
||||||
|
${q.details ? `<p style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm);margin-top:var(--kt-ai-space-1)">${q.details}</p>` : ''}
|
||||||
|
</div>
|
||||||
|
<span class="kt-ai-chip" data-tone="orange">На рассмотрении</span>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCategoryName(cat) {
|
||||||
|
const names = { create: 'Создание', approve: 'Согласование', find: 'Поиск', other: 'Другое' };
|
||||||
|
return names[cat] || cat;
|
||||||
}
|
}
|
||||||
|
|
||||||
// === Переключение карточки ===
|
// === Переключение карточки ===
|
||||||
function toggleCard(id) {
|
function toggleCard(id) {
|
||||||
const cards = document.querySelectorAll('.qa-card');
|
const cards = document.querySelectorAll('.qa-card');
|
||||||
cards.forEach(card => {
|
cards.forEach(card => {
|
||||||
if (card.dataset.id !== String(id)) {
|
if (parseInt(card.dataset.id) !== id) {
|
||||||
card.dataset.expanded = 'false';
|
card.dataset.expanded = 'false';
|
||||||
} else {
|
} else {
|
||||||
card.dataset.expanded = card.dataset.expanded === 'true' ? 'false' : 'true';
|
card.dataset.expanded = card.dataset.expanded === 'true' ? 'false' : 'true';
|
||||||
@ -257,20 +291,6 @@ function toggleCard(id) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function showAskForm() {
|
|
||||||
document.getElementById('askForm').dataset.visible = 'true';
|
|
||||||
document.getElementById('qaGrid').style.display = 'none';
|
|
||||||
document.getElementById('categoryFilter').style.display = 'none';
|
|
||||||
document.getElementById('emptyState').style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideAskForm() {
|
|
||||||
document.getElementById('askForm').dataset.visible = 'false';
|
|
||||||
document.getElementById('qaGrid').style.display = 'grid';
|
|
||||||
document.getElementById('categoryFilter').style.display = 'flex';
|
|
||||||
renderQA();
|
|
||||||
}
|
|
||||||
|
|
||||||
// === Обработчики событий ===
|
// === Обработчики событий ===
|
||||||
function setupEventListeners() {
|
function setupEventListeners() {
|
||||||
// Поиск
|
// Поиск
|
||||||
@ -290,25 +310,69 @@ function setupEventListeners() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Кнопка "Задать вопрос"
|
// Кнопка "Задать вопрос"
|
||||||
document.getElementById('btnAsk').addEventListener('click', showAskForm);
|
document.getElementById('btnAddQuestion').addEventListener('click', () => {
|
||||||
|
document.getElementById('addQuestionForm').dataset.visible = 'true';
|
||||||
|
document.getElementById('qaGrid').style.display = 'none';
|
||||||
|
document.getElementById('tabs').style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
// Отмена
|
// Отмена добавления
|
||||||
document.getElementById('btnCancel').addEventListener('click', hideAskForm);
|
document.getElementById('btnCancelAdd').addEventListener('click', () => {
|
||||||
|
document.getElementById('addQuestionForm').dataset.visible = 'false';
|
||||||
|
document.getElementById('qaGrid').style.display = 'grid';
|
||||||
|
document.getElementById('tabs').style.display = 'flex';
|
||||||
|
});
|
||||||
|
|
||||||
// Отправка формы
|
// Отправка формы
|
||||||
document.getElementById('askForm').addEventListener('submit', (e) => {
|
document.getElementById('addQuestionForm').addEventListener('submit', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const title = document.getElementById('questionTitle').value;
|
const title = document.getElementById('questionTitle').value;
|
||||||
|
const category = document.getElementById('questionCategory').value;
|
||||||
const details = document.getElementById('questionDetails').value;
|
const details = document.getElementById('questionDetails').value;
|
||||||
|
|
||||||
state.userQuestions.push({ title, details, date: new Date().toISOString() });
|
state.myQuestions.push({ title, category, details, date: new Date().toISOString() });
|
||||||
localStorage.setItem('userQuestions', JSON.stringify(state.userQuestions));
|
localStorage.setItem('myQuestions', JSON.stringify(state.myQuestions));
|
||||||
|
|
||||||
document.getElementById('askForm').reset();
|
document.getElementById('addQuestionForm').reset();
|
||||||
hideAskForm();
|
document.getElementById('addQuestionForm').dataset.visible = 'false';
|
||||||
|
document.getElementById('qaGrid').style.display = 'grid';
|
||||||
|
document.getElementById('tabs').style.display = 'flex';
|
||||||
|
|
||||||
showToast('Вопрос отправлен. Коллеги ответят в чате.');
|
showToast('Вопрос отправлен! Мы ответим в течение 2 рабочих дней');
|
||||||
|
renderMyQuestions();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Кнопка "Мои вопросы"
|
||||||
|
document.getElementById('btnMyQuestions').addEventListener('click', () => {
|
||||||
|
state.currentTab = state.currentTab === 'my' ? 'all' : 'my';
|
||||||
|
updateTabs();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Табы
|
||||||
|
document.querySelectorAll('.tab').forEach(tab => {
|
||||||
|
tab.addEventListener('click', () => {
|
||||||
|
state.currentTab = tab.dataset.tab;
|
||||||
|
updateTabs();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTabs() {
|
||||||
|
const tabs = document.querySelectorAll('.tab');
|
||||||
|
tabs.forEach(t => t.dataset.active = t.dataset.tab === state.currentTab ? 'true' : 'false');
|
||||||
|
|
||||||
|
if (state.currentTab === 'all') {
|
||||||
|
document.getElementById('qaGrid').style.display = 'grid';
|
||||||
|
document.getElementById('myQuestionsList').style.display = 'none';
|
||||||
|
document.getElementById('categoryFilter').style.display = 'flex';
|
||||||
|
document.getElementById('searchInput').parentElement.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
document.getElementById('qaGrid').style.display = 'none';
|
||||||
|
document.getElementById('myQuestionsList').style.display = 'block';
|
||||||
|
document.getElementById('categoryFilter').style.display = 'none';
|
||||||
|
document.getElementById('searchInput').parentElement.style.display = 'none';
|
||||||
|
renderMyQuestions();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showToast(message) {
|
function showToast(message) {
|
||||||
@ -320,8 +384,8 @@ function showToast(message) {
|
|||||||
}, 4000);
|
}, 4000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Сделать функцию доступной глобально
|
||||||
window.toggleCard = toggleCard;
|
window.toggleCard = toggleCard;
|
||||||
window.showAskForm = showAskForm;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user