Initial import of f7support application.
This commit is contained in:
root
@@ -0,0 +1,18 @@
|
|||||||
|
<?xml version="1.0"?>
|
||||||
|
<info>
|
||||||
|
<id>f7support</id>
|
||||||
|
<name>f7support</name>
|
||||||
|
<summary>Support ticket client for F7cloud (F7cloud-compatible)</summary>
|
||||||
|
<description>f7support client app for creating and viewing support tickets.</description>
|
||||||
|
<version>0.1.0</version>
|
||||||
|
<licence>AGPL</licence>
|
||||||
|
<author>f7support team</author>
|
||||||
|
<namespace>F7Support</namespace>
|
||||||
|
<types>
|
||||||
|
<type>filesystem</type>
|
||||||
|
</types>
|
||||||
|
<dependencies>
|
||||||
|
<f7cloud min-version="32" max-version="32"/>
|
||||||
|
</dependencies>
|
||||||
|
</info>
|
||||||
|
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
'routes' => [
|
||||||
|
['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,201 @@
|
|||||||
|
/* f7support UI — вынесено из innerHTML для меньшего парсинга JS и кэширования CSS ядром NC */
|
||||||
|
|
||||||
|
#f7support-app {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app *,
|
||||||
|
#f7support-app *::before,
|
||||||
|
#f7support-app *::after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-main {
|
||||||
|
padding: 16px;
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-error {
|
||||||
|
color: #b00020;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-section-title {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-hint {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 4px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-ticket-list {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-ticket-item {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-modal.f7s-open {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-modal--create {
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-modal--chat {
|
||||||
|
z-index: 1100;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-modal-panel {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #333;
|
||||||
|
padding: 16px;
|
||||||
|
width: min(560px, 92vw);
|
||||||
|
max-height: 85vh;
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-modal-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-modal-head h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-btn-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-btn-icon--lg {
|
||||||
|
font-size: 22px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-input {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-textarea--message {
|
||||||
|
min-height: 72px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-mt-8 {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-chat-shell {
|
||||||
|
background: #fff;
|
||||||
|
width: min(720px, 94vw);
|
||||||
|
max-height: 88vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-chat-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 1px solid #e0e0e0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-chat-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-chat-error {
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px 16px;
|
||||||
|
min-height: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-message-list {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 220px;
|
||||||
|
max-height: 45vh;
|
||||||
|
overflow: auto;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-chat-footer {
|
||||||
|
padding: 12px 16px 16px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-chat-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-msg-row {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-img-wrap {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-msg-img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 260px;
|
||||||
|
object-fit: contain;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-img-err {
|
||||||
|
color: #888;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f7support-app .f7s-attach-row {
|
||||||
|
margin-top: 6px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
+616
@@ -0,0 +1,616 @@
|
|||||||
|
/**
|
||||||
|
* Производительность: список тикетов — после первого кадра (requestIdleCallback / queueMicrotask);
|
||||||
|
* кэш списка в sessionStorage на время вкладки; обновление при возврате фокуса.
|
||||||
|
* Скрипт подключается через Util::addScript — ядро NC уже даёт defer и ?v=… (версия приложения / хэш).
|
||||||
|
* «Живой» чат без опроса — только WebSocket/SSE на apiBase (отдельная задача бэкенда).
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
const root = document.getElementById("f7support-app");
|
||||||
|
if (!root) return;
|
||||||
|
|
||||||
|
const username = root.dataset.username;
|
||||||
|
const serverAddress = root.dataset.serverAddress;
|
||||||
|
const apiBase = root.dataset.supportApiBase;
|
||||||
|
const messagesPollMs = Math.max(2000, parseInt(root.dataset.messagesPollMs, 10) || 5000);
|
||||||
|
|
||||||
|
/** @type {ReturnType<typeof setInterval> | null} */
|
||||||
|
let chatMessagesPollTimer = null;
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
tickets: [],
|
||||||
|
currentTicket: null,
|
||||||
|
messages: [],
|
||||||
|
/** Preview images in the message list (revoked on re-render / close chat). */
|
||||||
|
/** @type {string[]} */
|
||||||
|
previewBlobUrls: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
function clientHeaders(extra) {
|
||||||
|
const h = {
|
||||||
|
"X-F7cloud-User": username,
|
||||||
|
"X-F7cloud-Server": serverAddress,
|
||||||
|
};
|
||||||
|
if (extra && typeof extra === "object") {
|
||||||
|
Object.assign(h, extra);
|
||||||
|
}
|
||||||
|
return h;
|
||||||
|
}
|
||||||
|
|
||||||
|
function revokePreviewBlobs() {
|
||||||
|
for (const u of state.previewBlobUrls) {
|
||||||
|
try {
|
||||||
|
URL.revokeObjectURL(u);
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state.previewBlobUrls = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function formatApiError(response, fallback) {
|
||||||
|
try {
|
||||||
|
const data = await response.clone().json();
|
||||||
|
const d = data?.detail;
|
||||||
|
if (Array.isArray(d)) {
|
||||||
|
return d.map((e) => e.msg || JSON.stringify(e)).join("; ") || fallback;
|
||||||
|
}
|
||||||
|
if (typeof d === "string") return d;
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatBytes(n) {
|
||||||
|
if (n == null || Number.isNaN(n)) return "";
|
||||||
|
const u = ["байт", "КБ", "МБ", "ГБ"];
|
||||||
|
let v = n;
|
||||||
|
let i = 0;
|
||||||
|
while (v >= 1024 && i < u.length - 1) {
|
||||||
|
v /= 1024;
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
return `${v < 10 && i > 0 ? v.toFixed(1) : Math.round(v)} ${u[i]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
root.innerHTML = `
|
||||||
|
<div class="f7s-main">
|
||||||
|
<h2>f7support</h2>
|
||||||
|
<button id="create-ticket-btn" type="button">Создать токен</button>
|
||||||
|
<p id="error-box" class="f7s-error"></p>
|
||||||
|
<h3 class="f7s-section-title">Мои токены</h3>
|
||||||
|
<p id="ticket-hint" class="f7s-hint">Нажмите на токен, чтобы открыть чат. Закройте окно чата, чтобы выбрать другой токен.</p>
|
||||||
|
<ul id="ticket-list" class="f7s-ticket-list"></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="create-ticket-modal" class="f7s-modal f7s-modal--create">
|
||||||
|
<div class="f7s-modal-panel">
|
||||||
|
<div class="f7s-modal-head">
|
||||||
|
<h3>Создание токена</h3>
|
||||||
|
<button type="button" id="close-modal-btn" class="f7s-btn-icon" aria-label="Закрыть">✕</button>
|
||||||
|
</div>
|
||||||
|
<input id="subject-input" class="f7s-input" maxlength="255" placeholder="Тема" />
|
||||||
|
<textarea id="body-input" class="f7s-input f7s-textarea" maxlength="4000" placeholder="Опишите проблему (до 4000 символов)"></textarea>
|
||||||
|
<div class="f7s-chat-actions f7s-mt-8">
|
||||||
|
<input id="create-ticket-attachment-input" type="file" multiple />
|
||||||
|
</div>
|
||||||
|
<button type="button" id="submit-ticket-btn" class="f7s-mt-8">Отправить</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="chat-modal" class="f7s-modal f7s-modal--chat">
|
||||||
|
<div class="f7s-chat-shell" role="dialog" aria-modal="true" aria-labelledby="chat-title">
|
||||||
|
<div class="f7s-chat-head">
|
||||||
|
<h3 id="chat-title" class="f7s-chat-title">Чат</h3>
|
||||||
|
<button type="button" id="close-chat-btn" class="f7s-btn-icon f7s-btn-icon--lg" aria-label="Закрыть чат">✕</button>
|
||||||
|
</div>
|
||||||
|
<p id="chat-error-box" class="f7s-error f7s-chat-error"></p>
|
||||||
|
<div id="message-list" class="f7s-message-list"></div>
|
||||||
|
<div class="f7s-chat-footer">
|
||||||
|
<textarea id="message-input" class="f7s-input f7s-textarea f7s-textarea--message" maxlength="4000" placeholder="Сообщение (до 4000 символов)"></textarea>
|
||||||
|
<div class="f7s-chat-actions">
|
||||||
|
<input id="attachment-input" type="file" />
|
||||||
|
<button type="button" id="send-message-btn">Отправить</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ticketList = document.getElementById("ticket-list");
|
||||||
|
const messageList = document.getElementById("message-list");
|
||||||
|
const chatTitle = document.getElementById("chat-title");
|
||||||
|
const errorBox = document.getElementById("error-box");
|
||||||
|
const chatErrorBox = document.getElementById("chat-error-box");
|
||||||
|
const createModal = document.getElementById("create-ticket-modal");
|
||||||
|
const chatModal = document.getElementById("chat-modal");
|
||||||
|
|
||||||
|
function showError(message) {
|
||||||
|
errorBox.textContent = message || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function showChatError(message) {
|
||||||
|
chatErrorBox.textContent = message || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function isChatOpen() {
|
||||||
|
return chatModal.classList.contains("f7s-open");
|
||||||
|
}
|
||||||
|
|
||||||
|
function openChatModal() {
|
||||||
|
chatModal.classList.add("f7s-open");
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopChatMessagesPoll() {
|
||||||
|
if (chatMessagesPollTimer !== null) {
|
||||||
|
clearInterval(chatMessagesPollTimer);
|
||||||
|
chatMessagesPollTimer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function startChatMessagesPoll() {
|
||||||
|
stopChatMessagesPoll();
|
||||||
|
chatMessagesPollTimer = setInterval(() => {
|
||||||
|
if (document.hidden) return;
|
||||||
|
if (!state.currentTicket || !isChatOpen()) return;
|
||||||
|
void loadMessages(false, false);
|
||||||
|
}, messagesPollMs);
|
||||||
|
}
|
||||||
|
|
||||||
|
function messagesFingerprint(list) {
|
||||||
|
if (!Array.isArray(list)) return "";
|
||||||
|
return list
|
||||||
|
.map((m) => {
|
||||||
|
const attIds = (Array.isArray(m.attachments) ? m.attachments : [])
|
||||||
|
.map((a) => a.id)
|
||||||
|
.join(",");
|
||||||
|
return `${m.id}|${m.created_at ?? ""}|${(m.text || "").length}|${attIds}`;
|
||||||
|
})
|
||||||
|
.join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {boolean} force — всегда перерисовать (после отправки / первое открытие)
|
||||||
|
* @param {boolean} showErrors — показывать ошибку в UI (только при явной загрузке)
|
||||||
|
*/
|
||||||
|
async function loadMessages(force, showErrors) {
|
||||||
|
if (!state.currentTicket) return;
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`${apiBase}/api/client/tickets/${encodeURIComponent(state.currentTicket)}/messages`,
|
||||||
|
{ headers: clientHeaders() }
|
||||||
|
);
|
||||||
|
if (!response.ok) {
|
||||||
|
if (showErrors) throw new Error("Не удалось загрузить сообщения");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const next = await response.json();
|
||||||
|
if (!force && messagesFingerprint(next) === messagesFingerprint(state.messages)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.messages = next;
|
||||||
|
await renderMessages();
|
||||||
|
} catch (e) {
|
||||||
|
if (showErrors) throw e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeChatModal() {
|
||||||
|
stopChatMessagesPoll();
|
||||||
|
revokePreviewBlobs();
|
||||||
|
chatModal.classList.remove("f7s-open");
|
||||||
|
state.currentTicket = null;
|
||||||
|
state.messages = [];
|
||||||
|
messageList.innerHTML = "";
|
||||||
|
const msgInput = document.getElementById("message-input");
|
||||||
|
const fileInput = document.getElementById("attachment-input");
|
||||||
|
if (msgInput) msgInput.value = "";
|
||||||
|
if (fileInput) fileInput.value = "";
|
||||||
|
showChatError("");
|
||||||
|
chatTitle.textContent = "Чат";
|
||||||
|
}
|
||||||
|
|
||||||
|
function ticketsStorageKey() {
|
||||||
|
return `f7support.tickets.v1|${username}|${serverAddress}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function readTicketsCache() {
|
||||||
|
try {
|
||||||
|
const raw = sessionStorage.getItem(ticketsStorageKey());
|
||||||
|
if (!raw) return null;
|
||||||
|
const j = JSON.parse(raw);
|
||||||
|
return Array.isArray(j) ? j : null;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeTicketsCache(list) {
|
||||||
|
try {
|
||||||
|
sessionStorage.setItem(ticketsStorageKey(), JSON.stringify(list));
|
||||||
|
} catch {
|
||||||
|
/* quota / private mode */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyTickets(list) {
|
||||||
|
state.tickets = list;
|
||||||
|
renderTickets();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchTicketsFromNetwork() {
|
||||||
|
const response = await fetch(`${apiBase}/api/client/tickets`, {
|
||||||
|
headers: clientHeaders(),
|
||||||
|
});
|
||||||
|
if (!response.ok) throw new Error("Не удалось получить токены");
|
||||||
|
const list = await response.json();
|
||||||
|
writeTicketsCache(list);
|
||||||
|
applyTickets(list);
|
||||||
|
}
|
||||||
|
|
||||||
|
function scheduleTicketsBootstrap() {
|
||||||
|
const cached = readTicketsCache();
|
||||||
|
if (cached) {
|
||||||
|
applyTickets(cached);
|
||||||
|
}
|
||||||
|
const run = () => {
|
||||||
|
fetchTicketsFromNetwork().catch((e) => {
|
||||||
|
if (!cached) {
|
||||||
|
showError(e.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
if (typeof requestIdleCallback !== "undefined") {
|
||||||
|
requestIdleCallback(run, { timeout: 2500 });
|
||||||
|
} else {
|
||||||
|
queueMicrotask(() => setTimeout(run, 0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTickets() {
|
||||||
|
ticketList.innerHTML = "";
|
||||||
|
for (const ticket of state.tickets) {
|
||||||
|
const li = document.createElement("li");
|
||||||
|
li.className = "f7s-ticket-item";
|
||||||
|
li.textContent = `${ticket.ticket_number} — ${ticket.subject} [${ticket.status}]`;
|
||||||
|
li.onclick = () => {
|
||||||
|
if (isChatOpen()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
void openTicketChat(ticket.ticket_number);
|
||||||
|
};
|
||||||
|
ticketList.appendChild(li);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openTicketChat(ticketNumber) {
|
||||||
|
showError("");
|
||||||
|
state.currentTicket = ticketNumber;
|
||||||
|
chatTitle.textContent = `Чат #${ticketNumber}`;
|
||||||
|
showChatError("");
|
||||||
|
openChatModal();
|
||||||
|
try {
|
||||||
|
await loadMessages(true, true);
|
||||||
|
startChatMessagesPoll();
|
||||||
|
} catch (e) {
|
||||||
|
showChatError(e.message || "Ошибка загрузки");
|
||||||
|
startChatMessagesPoll();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function attachmentDownloadUrl(ticketNumber, attachmentId) {
|
||||||
|
return `${apiBase}/api/client/tickets/${encodeURIComponent(ticketNumber)}/attachments/${encodeURIComponent(String(attachmentId))}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchAttachmentBlob(ticketNumber, attachmentId) {
|
||||||
|
const res = await fetch(attachmentDownloadUrl(ticketNumber, attachmentId), {
|
||||||
|
headers: clientHeaders(),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error("Не удалось загрузить вложение");
|
||||||
|
return res.blob();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function renderMessages() {
|
||||||
|
revokePreviewBlobs();
|
||||||
|
messageList.innerHTML = "";
|
||||||
|
const ticketNo = state.currentTicket;
|
||||||
|
if (!ticketNo) return;
|
||||||
|
|
||||||
|
for (const m of state.messages) {
|
||||||
|
const row = document.createElement("div");
|
||||||
|
row.className = "f7s-msg-row";
|
||||||
|
|
||||||
|
const line = document.createElement("div");
|
||||||
|
const b = document.createElement("b");
|
||||||
|
b.textContent = m.author ?? "";
|
||||||
|
line.appendChild(b);
|
||||||
|
line.appendChild(document.createTextNode(` (${m.author_role ?? ""}): `));
|
||||||
|
const textPart = document.createElement("span");
|
||||||
|
textPart.textContent = m.text ?? "";
|
||||||
|
line.appendChild(textPart);
|
||||||
|
row.appendChild(line);
|
||||||
|
|
||||||
|
const attachments = Array.isArray(m.attachments) ? m.attachments : [];
|
||||||
|
for (const att of attachments) {
|
||||||
|
const mime = typeof att.mime_type === "string" ? att.mime_type : "";
|
||||||
|
const filename = att.filename || "file";
|
||||||
|
const sizePart = att.size_bytes != null ? ` · ${formatBytes(att.size_bytes)}` : "";
|
||||||
|
|
||||||
|
if (mime.startsWith("image/")) {
|
||||||
|
const wrap = document.createElement("div");
|
||||||
|
wrap.className = "f7s-img-wrap";
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.className = "f7s-msg-img";
|
||||||
|
img.alt = filename;
|
||||||
|
wrap.appendChild(img);
|
||||||
|
row.appendChild(wrap);
|
||||||
|
try {
|
||||||
|
const blob = await fetchAttachmentBlob(ticketNo, att.id);
|
||||||
|
const u = URL.createObjectURL(blob);
|
||||||
|
state.previewBlobUrls.push(u);
|
||||||
|
img.src = u;
|
||||||
|
} catch {
|
||||||
|
const err = document.createElement("div");
|
||||||
|
err.className = "f7s-img-err";
|
||||||
|
err.textContent = `Не удалось показать изображение: ${filename}`;
|
||||||
|
wrap.appendChild(err);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const wrap = document.createElement("div");
|
||||||
|
wrap.className = "f7s-attach-row";
|
||||||
|
const label = document.createElement("span");
|
||||||
|
label.textContent = `${filename}${sizePart}`;
|
||||||
|
const btn = document.createElement("button");
|
||||||
|
btn.type = "button";
|
||||||
|
btn.textContent = "Скачать";
|
||||||
|
btn.onclick = async () => {
|
||||||
|
let objectUrl = null;
|
||||||
|
try {
|
||||||
|
const blob = await fetchAttachmentBlob(ticketNo, att.id);
|
||||||
|
objectUrl = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = objectUrl;
|
||||||
|
a.download = filename;
|
||||||
|
a.rel = "noopener";
|
||||||
|
a.style.display = "none";
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
a.remove();
|
||||||
|
setTimeout(() => {
|
||||||
|
try {
|
||||||
|
URL.revokeObjectURL(objectUrl);
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}, 60_000);
|
||||||
|
} catch {
|
||||||
|
showChatError("Не удалось скачать вложение");
|
||||||
|
if (objectUrl) {
|
||||||
|
try {
|
||||||
|
URL.revokeObjectURL(objectUrl);
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
wrap.appendChild(label);
|
||||||
|
wrap.appendChild(btn);
|
||||||
|
row.appendChild(wrap);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
messageList.appendChild(row);
|
||||||
|
}
|
||||||
|
messageList.scrollTop = messageList.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** OpenAPI TicketCreate требует body minLength:1; реальный текст уходит первым сообщением в чат. */
|
||||||
|
const TICKET_CREATE_BODY_PLACEHOLDER = ".";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST текстового сообщения в тикет (как в форме чата).
|
||||||
|
* @returns {Promise<object>} тело ответа API
|
||||||
|
*/
|
||||||
|
async function postMessageToTicket(ticketNumber, text) {
|
||||||
|
const response = await fetch(
|
||||||
|
`${apiBase}/api/client/tickets/${encodeURIComponent(ticketNumber)}/messages`,
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
headers: clientHeaders({ "Content-Type": "application/json" }),
|
||||||
|
body: JSON.stringify({ text }),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (!response.ok) {
|
||||||
|
const msg = await formatApiError(response, "Не удалось отправить сообщение");
|
||||||
|
throw new Error(msg);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST одного файла к сообщению (message_id в query).
|
||||||
|
* @param {string|number} messageId
|
||||||
|
* @param {File} file
|
||||||
|
*/
|
||||||
|
async function uploadAttachmentForMessage(ticketNumber, messageId, file) {
|
||||||
|
const form = new FormData();
|
||||||
|
form.append("file", file);
|
||||||
|
const q = new URLSearchParams({ message_id: String(messageId) });
|
||||||
|
const attRes = await fetch(
|
||||||
|
`${apiBase}/api/client/tickets/${encodeURIComponent(ticketNumber)}/attachments?${q.toString()}`,
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
headers: clientHeaders(),
|
||||||
|
body: form,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (!attRes.ok) {
|
||||||
|
const msg = await formatApiError(attRes, "Вложение не принято");
|
||||||
|
throw new Error(msg);
|
||||||
|
}
|
||||||
|
return attRes;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submitTicketWithRetry(payload) {
|
||||||
|
const maxAttempts = 3;
|
||||||
|
for (let attempt = 1; attempt <= maxAttempts; attempt++) {
|
||||||
|
const duplicate = attempt > 1 ? 1 : 0;
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timeout = setTimeout(() => controller.abort(), 180000);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${apiBase}/api/client/tickets`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ ...payload, duplicate }),
|
||||||
|
signal: controller.signal,
|
||||||
|
});
|
||||||
|
clearTimeout(timeout);
|
||||||
|
if (!response.ok) throw new Error("Send failed");
|
||||||
|
return await response.json();
|
||||||
|
} catch (e) {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
if (attempt === maxAttempts) {
|
||||||
|
throw new Error("Сервер поддержки недоступен, пожалуйста обратитесь к администратору.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
throw new Error("Unknown error");
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("close-chat-btn").onclick = () => {
|
||||||
|
closeChatModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById("create-ticket-btn").onclick = () => {
|
||||||
|
createModal.classList.add("f7s-open");
|
||||||
|
showError("");
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById("close-modal-btn").onclick = () => {
|
||||||
|
document.getElementById("subject-input").value = "";
|
||||||
|
document.getElementById("body-input").value = "";
|
||||||
|
const catt = document.getElementById("create-ticket-attachment-input");
|
||||||
|
if (catt) catt.value = "";
|
||||||
|
createModal.classList.remove("f7s-open");
|
||||||
|
};
|
||||||
|
|
||||||
|
createModal.addEventListener("click", (ev) => {
|
||||||
|
if (ev.target === createModal) {
|
||||||
|
document.getElementById("close-modal-btn").click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
chatModal.addEventListener("click", (ev) => {
|
||||||
|
if (ev.target === chatModal) {
|
||||||
|
closeChatModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("submit-ticket-btn").onclick = async () => {
|
||||||
|
try {
|
||||||
|
const subject = document.getElementById("subject-input").value.trim();
|
||||||
|
const body = document.getElementById("body-input").value.trim();
|
||||||
|
if (!subject || !body) {
|
||||||
|
showError("Тема и обращение обязательны");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const result = await submitTicketWithRetry({
|
||||||
|
server_address: serverAddress,
|
||||||
|
username,
|
||||||
|
subject,
|
||||||
|
body: TICKET_CREATE_BODY_PLACEHOLDER,
|
||||||
|
});
|
||||||
|
const ticketNo = result.ticket_number;
|
||||||
|
let createdMsg;
|
||||||
|
try {
|
||||||
|
createdMsg = await postMessageToTicket(ticketNo, body);
|
||||||
|
} catch (e) {
|
||||||
|
showError(
|
||||||
|
e.message ||
|
||||||
|
`Токен ${ticketNo} создан, но текст обращения не попал в чат. Откройте тикет и напишите сообщение вручную.`
|
||||||
|
);
|
||||||
|
createModal.classList.remove("f7s-open");
|
||||||
|
document.getElementById("subject-input").value = "";
|
||||||
|
document.getElementById("body-input").value = "";
|
||||||
|
const cattFail = document.getElementById("create-ticket-attachment-input");
|
||||||
|
if (cattFail) cattFail.value = "";
|
||||||
|
await fetchTicketsFromNetwork();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const firstMessageId = createdMsg.id ?? createdMsg.message_id;
|
||||||
|
const createAtt = document.getElementById("create-ticket-attachment-input");
|
||||||
|
const createFiles = createAtt && createAtt.files ? Array.from(createAtt.files) : [];
|
||||||
|
if (createFiles.length > 0) {
|
||||||
|
if (firstMessageId == null) {
|
||||||
|
showError(`Токен ${ticketNo} создан, но сервер не вернул id сообщения — вложения не отправлены.`);
|
||||||
|
createAtt.value = "";
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
for (const f of createFiles) {
|
||||||
|
await uploadAttachmentForMessage(ticketNo, firstMessageId, f);
|
||||||
|
}
|
||||||
|
} catch (attErr) {
|
||||||
|
showError(
|
||||||
|
attErr.message ||
|
||||||
|
`Токен ${ticketNo} создан, текст в чате есть, но не все вложения удалось отправить.`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
createAtt.value = "";
|
||||||
|
}
|
||||||
|
createModal.classList.remove("f7s-open");
|
||||||
|
document.getElementById("subject-input").value = "";
|
||||||
|
document.getElementById("body-input").value = "";
|
||||||
|
showError(`Токен создан: ${ticketNo}`);
|
||||||
|
await fetchTicketsFromNetwork();
|
||||||
|
void openTicketChat(ticketNo);
|
||||||
|
} catch (e) {
|
||||||
|
showError(e.message || "Ошибка отправки");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById("send-message-btn").onclick = async () => {
|
||||||
|
if (!state.currentTicket) {
|
||||||
|
showChatError("Сначала выберите токен");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const text = document.getElementById("message-input").value.trim();
|
||||||
|
if (!text) return;
|
||||||
|
showChatError("");
|
||||||
|
let created;
|
||||||
|
try {
|
||||||
|
created = await postMessageToTicket(state.currentTicket, text);
|
||||||
|
} catch (e) {
|
||||||
|
showChatError(e.message || "Не удалось отправить сообщение");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const messageId = created.id ?? created.message_id;
|
||||||
|
const fileInput = document.getElementById("attachment-input");
|
||||||
|
if (fileInput.files && fileInput.files[0]) {
|
||||||
|
if (messageId == null) {
|
||||||
|
showChatError("Сообщение создано, но сервер не вернул id — вложение не отправлено");
|
||||||
|
fileInput.value = "";
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
await uploadAttachmentForMessage(state.currentTicket, messageId, fileInput.files[0]);
|
||||||
|
} catch (e) {
|
||||||
|
showChatError(e.message || "Сообщение отправлено, но вложение не принято");
|
||||||
|
}
|
||||||
|
fileInput.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.getElementById("message-input").value = "";
|
||||||
|
await loadMessages(true, false);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("visibilitychange", () => {
|
||||||
|
if (document.hidden) return;
|
||||||
|
void fetchTicketsFromNetwork().catch(() => {});
|
||||||
|
if (isChatOpen() && state.currentTicket) {
|
||||||
|
void loadMessages(false, false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
scheduleTicketsBootstrap();
|
||||||
|
})();
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
namespace OCA\F7Support;
|
||||||
|
|
||||||
|
use OCP\AppFramework\App;
|
||||||
|
|
||||||
|
class Application extends App {
|
||||||
|
public const APP_ID = 'f7support';
|
||||||
|
|
||||||
|
public function __construct(array $urlParams = []) {
|
||||||
|
parent::__construct(self::APP_ID, $urlParams);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
namespace OCA\F7Support\Controller;
|
||||||
|
|
||||||
|
use OCP\AppFramework\Controller;
|
||||||
|
use OCP\AppFramework\Http\TemplateResponse;
|
||||||
|
use OCP\IRequest;
|
||||||
|
use OCP\IURLGenerator;
|
||||||
|
use OCP\IUserSession;
|
||||||
|
use OCP\Util;
|
||||||
|
|
||||||
|
class PageController extends Controller {
|
||||||
|
public function __construct(
|
||||||
|
string $AppName,
|
||||||
|
IRequest $request,
|
||||||
|
private IUserSession $userSession,
|
||||||
|
private IURLGenerator $urlGenerator
|
||||||
|
) {
|
||||||
|
parent::__construct($AppName, $request);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @NoAdminRequired
|
||||||
|
* @NoCSRFRequired
|
||||||
|
*/
|
||||||
|
public function index(): TemplateResponse {
|
||||||
|
$user = $this->userSession->getUser();
|
||||||
|
$baseUrl = $this->urlGenerator->getBaseUrl();
|
||||||
|
$serverHost = parse_url($baseUrl, PHP_URL_HOST) ?: 'localhost';
|
||||||
|
|
||||||
|
$supportApiBase = 'https://support.f7cloud.ru';
|
||||||
|
$supportParts = parse_url($supportApiBase);
|
||||||
|
$supportApiOrigin = ($supportParts['scheme'] ?? 'https') . '://' . ($supportParts['host'] ?? '');
|
||||||
|
|
||||||
|
Util::addStyle('f7support', 'f7support');
|
||||||
|
Util::addScript('f7support', 'main');
|
||||||
|
|
||||||
|
return new TemplateResponse('f7support', 'main', [
|
||||||
|
'username' => $user ? $user->getUID() : '',
|
||||||
|
'serverAddress' => $serverHost,
|
||||||
|
'supportApiBase' => $supportApiBase,
|
||||||
|
'supportApiOrigin' => $supportApiOrigin,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
<link rel="dns-prefetch" href="<?php p($_['supportApiOrigin']); ?>">
|
||||||
|
<link rel="preconnect" href="<?php p($_['supportApiOrigin']); ?>" crossorigin>
|
||||||
|
<div id="f7support-app"
|
||||||
|
data-username="<?php p($_['username']); ?>"
|
||||||
|
data-server-address="<?php p($_['serverAddress']); ?>"
|
||||||
|
data-support-api-base="<?php p($_['supportApiBase']); ?>"
|
||||||
|
data-messages-poll-ms="5000">
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user