Приветствую.
Делаю для супруги управлялку для управления яндекс станциями. Фронт делаю на bootstrap.
Изначально я оформил тупо в виде кнопок, но со временем решил красиво оформить и сделать уже красивую управлялку для умного дома, т.к. супруга не особо хочет залезать в умный дом алисы или HA, то решил вынести это в отдельную управлялку. Одна из страниц этой управлялки сейчас работает для управления некоторыми из станций.
Собственно чтобы не сильно заморачиваться и не писать огромную портянку кода слушателя под каждую кнопку, я решил все кнопки запихнуть в и повесил слушателя на js, который ловит нажатия на кнопки форм
Код слушателя//При нажатии submit (кнопки) выполняем функцию
$('form').submit(function (e) {
e.preventDefault();
var formID = $(this).attr('id');
var data = $('#' + formID).serializeArray();
$.ajax({
type: "POST",
url: 'action',
data: data,
success: function(response){
$('#successresult').html(response);
},
});});
Собственно всё чудесно работает. Далее на скриншоте, на примере одной колонки я выделил красным все , т.е. каждый красный элемент представляет из себя в которой есть и есть еще несколько
Код на примере кнопки паузы
<div class="col-4 col-xl-4">
<form id="aliceplaystop">
<button class="btn" type="submit">
<svg >....</svg>
</button>
<input class="form-control" type="hidden" id="text-1" name="text" value="Пауза">
<input class="form-control" type="hidden" id="Action-1" name="Action" value="Command">
<input class="form-control" type="hidden" id="Room-1" name="Room" value="Детская">
</form>
</div>
Собственно дальше уже срабатывает JS слушатель форм, по ajax он отправляет данный на бэк, далее я уже маршрутизирую эти запросы на основе полученных hidden полей и выполняю нужные мне действия, но вопрос немного в ином. Иногда, я могу полностью переделать внешний вид блока с колонкой, поменять местами элементы, добавить новые кнопки и тд. Сейчас подключено 4 колонки, фактически на этой странице их будет 6. Когда я вношу изменения, я делаю так -
1. вношу изменения в первую колонку, которая в детской
2. потом копирую целиком весь блок колонки, и вставляю его на нужные места. Меняю название комнаты, меняю картинку, меняю название колонки, меняю названия переменных и так по каждой колонке.
Когда было всего 2, это было не долго и не сильно накладно. Сейчас же 11 форм на одну колонку, и то я планирую увеличить до 15 на колонку, и я еще не все колонки на эту страницу подключил.
Вот тут у меня родился вопрос, можно ли сделать например так, чтобы задать для Column или Div колонки какой нибудь ID или допустим class, и использовать его и вносить его значение в нужные мне места, как это можно сделать?
В общем, хочу себе как то упростить работу, чтобы в случае с переделками не сильно заморачиваться и затрачивать много усилий для корректировки каждой колонки. Расскажите как Вы работаете над такими однотипными блоками, буду рад даже логической цепочке. просто за 3 дня я уже полностью 2 раза переделал внешний вид отображения, и где то после каждой переделки, еще по часу сижу, меняю названия переменных.
А дальше еще вебсокеты подключать, чтобы динамически данные обновлять...
