Собственно немного углубился в тему. Воспользовался идеей от
Сергей delphinpro и подсмотрел кусочки кода от
Олег .
Т.к. я использую bootstrap, там всё на row,col,div и тд. Я немного изменив свой шаблон, начал генерировать динамически код для каждой колонки. Т.к. у меня есть API для этой страницы, и предварительно мне всё равно в этом API нужно настраиваться свои колонки, то у меня получилась примерно следующая логика загрузки страницы:
Загружается страница -> запускается JS -> обращение к API -> получение массива колонок с текущими параметрами -> далее срабатывает динамическая генерация. Код имеет такой вид
<script>
const apiUrl = 'http://127.0.0.1:1818/alice';
const actionUrl = 'http://127.0.0.1:1818/action';
// Функция для обновления данных агента
function updateAlice() {
$.get(apiUrl, function(data) {
if (data && data.length > 0) {
$('#alice_columns').empty(); // Очищаем старые данные
data.forEach(alice=> {
// Создаем новую колонку для колонки
const aliceColumn = `...куча html кода...'
Кнопки избавил от form, привел к обычному виду, избавился от form.
<button id="stop_${alice.room}" class="btn" data-bs-toggle="tooltip" type="button" title="Остановить воспроизведение">
При помощи this, при нажатии на кнопку получаю данные именно нужной кнопки в нужной колонке. . Пришлось немного заморочиться с back, т.к. пришлось развернуть sql и там хранить данные. по всем колонкам, которые отдаются при загрузке страницы, но в целом когда настроил, добавил свою логику для добавления новых устройств, работать стало в разы проще и удобнее. По сути код вместо
800+ строк стал около 120, и в случае изменения шаблона col колонки, мне достаточно внести изменения в одном месте. Так что свою задачу я решил, всем спасибо за участие и правильные советы, которые позволили мне прийти к нужному понимаю.
P.S. WS к этому делу прикрутил, пришлось немного заморочиться с проверкой, какие данные нужно обновлять, использую 2 таблицы, a - actual, b - history. сравниваю их между собой, отличия отправляю по ws, в b записываю все данные из a. Данные с колонок поступают в хаотичном порядке, с интервалом от 0.5 - 2 секунд. Эти данные записываются в "a", далее срабатывает скрипт сравнения, если есть отличия между a и b, они отправляются в браузер пользователя. Т.е. таким образом, в браузер отправляются только измененные данные, те данные, которые браузер уже получил - не будут отправлены, тем самым минимизирую сетевую нагрузку и отправляю только то, что нужно обновить.
msg.b = RED.util.cloneMessage(global.get("b"));
msg.a = RED.util.cloneMessage(global.get("a"));
msg.c = {};
for (let key in msg.a) {
if (msg.b.hasOwnProperty(key)) {
// Проверяем, если ключ существует в обоих объектах и значения различаются
if (msg.a[key] !== msg.b[key]) {
msg.c[key] = msg.a[key]; // Добавляем в msg.c ключи с различиями
msg.b[key] = msg.a[key]; // Обновляем значения в msg.b
}
} else {
// Если ключ есть только в msg.a, то добавляем его в msg.c и msg.b
msg.c[key] = msg.a[key];
msg.b[key] = msg.a[key];
}
}
// Сохраняем обновленный объект msg.b в глобальную переменную
global.set("b", msg.b);
// Устанавливаем msg.c в payload для возврата различий
msg.payload = msg.c;
return msg;
P.P.S. Не знаю как, не знаю почему, у меня эта ПУ опубликована на моем домене в
https://site.ru/home/site/alice, но каким то образом кто-то нашел мой сайт и начал делать различные действия с колонками, пришлось добавить проверку cookies. Если в кукисах нет пароля, то ничего не срабатывает и выводится окно для ввода пароля. Т.е. в режиме read only посмотреть сайт можно, а вот что-то сделать - будь добр введи пароль) Если хацкер от сюда, то знай что пароль 1234)
Простой