Импорт и экспорт настроек в пользовательском (веб) интерфейсе

[mp4treiser]

Не нашёл топика/ответ в документации, как сделать 2 аналогичные кнопки на загрузку и сохранение настроек в веб-интерфейсе?
В курсе про функции SetResourceValue и GetResourceValue, но не могу разобраться.

[mp4treiser]

ап

[mp4treiser]

ап

[Fox]

@mp4treiser said in Импорт и экспорт настроек в пользовательском (веб) интерфейсе:

Не нашёл топика/ответ в документации, как сделать 2 аналогичные кнопки на загрузку и сохранение настроек в веб-интерфейсе?
В курсе про функции SetResourceValue и GetResourceValue, но не могу разобраться.

В веб интерфейсе вы сами вольны создавать любые элементы настроек (инпуты, чекбоксы, textarea, выпадающие списки и т.д.), для сохранения и загрузки ваших собственных полей нет готовых функций, всю логику придётся сделать самостоятельно.

Если вы используете сгенерированный веб интерфейс и ни каких дополнительных полей не создаёте, то для получения данных из полей вы можете использовать функцию "GetResourceValue", но логику сохранения данных в файл (в любом удобном виде) нужно будет также реализовать самостоятельно. Для загрузки данных нужно будет также написать код для чтения файла, а для передачи данных в инпуты ресурсов можно использовать функцию "SetResourceValue"

Сохранять данные не сложно, нужно циклом обойти все инпуты (например по id), сформировать данные в любом удобном виде (я предпочитаю json) и сохранить через файловое api или методы браузера.

---

Что бы стало понятнее опишу на примере. Вот скрипт с тремя ресурсами "Строка", "Список" и "Из файла"

Сгенерированный интерфейс выглядит вот так:

Добавим произвольные инпуты к каждому полю. Для удобства определения кастомные инпуты созданы с уникальным id. Также добавим кнопки "Сохранить" и "Загрузить"

Красоты нам ни к чему, по этому с интерфейсом всё. Теперь нужно написать код для сбора введённых данных. Для удобства создадим массив с именами ресурсов и созданных инпутов и соберём с них данные через цикл.

var res = ["res1", "res2", "res3"];
var custom_input = ["custom-input1", "custom-input2", "custom-input3"];
var settings = [];

res.forEach(name => {
    var value = GetValue(name);
    if (value != "") {
        settings.push({
            _type: "res",
            name: name,
            value: value
        });
    };
});

custom_input.forEach(id => {
    var element = document.getElementById(id);
    if (element) {
        settings.push({
            _type: "custom",
            name: id,
            value: element.value
        })
    }
});

Для сохранения файла можно использовать файловое апи веб интерфейса, но мне больше нравится стандартный браузерный метод сохранения файла

 var res = JSON.stringify(settings);
 var blob = new Blob([res], { type: "text/plain;charset=utf-8" });
 await saveAs(blob, "settings.txt");

и вешаем обработчик на кнопку "Save"

$("#save_settings").on("click", async function () {
   //весь код выше
})

Всё, теперь при клике в интерфейсе на кнопку "Save" будет появляться окно сохранения файла

---

Для загрузки нужно прочитать файл, убедится, что данные в json, и циклом установить значения из файла в инпуты. Полный код:

$("#load_settings").on("click", function (event) {
    var input = document.createElement('input');
    input.type = 'file';
    input.onchange = (event) => {
      var file = event.target.files[0];
      var reader = new FileReader();
      reader.onload = (event) => {
        try {
            var settings = JSON.parse(event.target.result);
            settings.forEach(obj => {
                if (obj._type == "res") {
                    SetValue(obj.name, obj.value)
                } else {
                    var element = document.getElementById(obj.name);
                    if (element) {
                        element.value = obj.value;
                    }
                }
            });
            console.log("Восстановили данные интерфейса из файла")
        } catch (err) {
            console.log("Ошибка восстановления данных из файла: " + err);
        }
      };
      reader.readAsText(file);
    };
    input.click();
});

---

Скрипт: 2901.xml
Экспортированный интерфейс: qw.main.interface.09_01_2024_10_33.txt

[mp4treiser]

@Fox огромное спасибо за помощь!