/** * @file script.js * @version 0.1.0 */ class TerminalCard { constructor(name) { this.name = name; this.data = {status: 'stopped'}; this.$el = $(`[data-name="${name}"]`); // jQuery-объект элемента this.$loadingContent = this.$el.find('.loading-content'); this.$loadedContent = this.$el.find('.loaded-content'); this.$btnStart = this.$el.find('.btn-start'); this.$btnStop = this.$el.find('.btn-stop'); this.$status = this.$el.find('.status') } onStartBefore() { this.$btnStart .prop('disabled', true) .find('i').removeClass('fa-play').addClass('fa-spinner fa-spin'); } onStartAfter() { this.$btnStart.prop('disabled', true).find('i').removeClass('fa-spinner fa-spin').addClass('fa-play'); this.$btnStop.prop('disabled', false); } onStartCancel() { this.$btnStart.prop('disabled', false); } onStopBefore() { this.$btnStop.prop('disabled', true).find('i').removeClass('fa-pause').addClass('fa-spinner fa-spin'); } onStopAfter() { this.$btnStart.prop('disabled', false); this.$btnStop.prop('disabled', true).find('i').removeClass('fa-spinner fa-spin').addClass('fa-pause');; } onStopCancel() { this.$btnStop.prop('disabled', false); } updateData(data) { // Обновляем содержимое карточки if (data.account) { let profitPct = (data.account.profit / data.account.balance) // Обновляем данные в загруженном шаблоне this.$el.find('.account').text(`...` + `${data.account.login}`.slice(-4)) .attr('title', `${data.account.server}: ${data.account.login}`); this.$el.find('.balance').text(new Intl.NumberFormat('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2, useGrouping: true }).format(data.account.balance) + ' USD'); this.$el.find('.equity').text(new Intl.NumberFormat('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2, useGrouping: true }).format(data.account.equity)); this.$el.find('.profit').text(new Intl.NumberFormat('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2, useGrouping: true, signDisplay: 'always' }).format(data.account.profit)) .removeClass('neg') .addClass((a, b) => (data.account.profit < 0 ? 'neg' : '')); this.$el.find('.profit-pct').text( new Intl.NumberFormat('en-EN', { style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2, useGrouping: true, signDisplay: 'always' }).format(profitPct)) .removeClass('neg') .addClass((a, b) => (data.account.profit < 0 ? 'neg' : '')); this.$el.find('.company').addClass(`company-${data.account.server}`) .attr('title', data.account.company); } else { // Обновляем данные в загруженном шаблоне this.$loadedContent.find('.account').text(data.login); this.$loadedContent.find('.server').text(data.server); } if (data.status == 'running') { this.$btnStart.prop('disabled', true); this.$btnStop.prop('disabled', false); } else { this.$btnStart.prop('disabled', false); this.$btnStop.prop('disabled', true); } const icon = this.$status.find('i'); const desc = this.$status.find('.description'); icon.removeClass('fa-circle-check fa-stop fa-circle-exclamation fa-spin'); if (data.last_error.code == 1) { this.$status.removeClass('text-danger text-secondary').addClass('text-success'); icon.addClass('fa-circle-check') } else if (data.last_error.code == 0) { this.$status.removeClass('text-danger text-success').addClass('text-secondary'); icon.addClass('fa-stop') } else { this.$status.removeClass('text-success text-secondary').addClass('text-danger'); icon.addClass('fa-circle-exclamation') } desc.text(data.last_error.description); if (data.status != this.data.status) { this.onStartAfter(); this.onStopAfter(); } this.data = data } showLoadedState() { this.$el.removeClass('loading-card').addClass('loaded-card'); } } const cards = {}; let updateInterval; $(document).ready(function () { // Загрузка данных при открытии страницы terminals.forEach(function (name) { cards[name] = new TerminalCard(name); fetchTerminalInfo(name); }); // Запуск автоматического обновления каждые 10 секунд updateInterval = setInterval(function () { terminals.forEach(function (name) { fetchTerminalInfo(name); }); }, 10000); }); async function fetchTerminalInfo(name) { $.post(`/instances/${name}`, function (data) { if (data.error) { console.error("Ошибка:", data.error); return; } const card = cards[name]; card.updateData(data); card.showLoadedState(); }) .fail(function (xhr, status, error) { console.error("Ошибка при получении данных:", error); // Опционально: показать ошибку }); } function startTerminal(name) { cards[name].onStartBefore(); // Здесь вызов POST /start/{name} $.post(`/start/${name}`, function (data) { // toastr.success(`Terminal ${name} started`); // Обновляем статус кнопки fetchTerminalInfo(name); }) .fail(function () { toastr.error(`Не удалось запустить терминал ${name}`); cards[name].onStartCancel(); }); } function stopTerminal(name) { cards[name].onStopBefore(); $.post(`/stop/${name}`, function (data) { //toastr.success(`Terminal ${name} stopped`); // Обновляем статус кнопки fetchTerminalInfo(name); cards[name].onStopAfter(); }) .fail(function () { toastr.error(`Не удалось запустить терминал ${name}`); cards[name].onStopCancel(); }); } // Остановить обновления при закрытии вкладки (опционально) $(window).on("beforeunload", function () { clearInterval(updateInterval); });