upd

Author: GyverLibs

README.md

@@ -6,7 +6,7 @@
 
 [![Foo](https://img.shields.io/badge/ПОДПИСАТЬСЯ-НА%20ОБНОВЛЕНИЯ-brightgreen.svg?style=social&logo=telegram&color=blue)](https://t.me/GyverLibs)
 
-# Settings [beta]
+# Settings
 Библиотека для создания простого веб-интерфейса настроек на esp8266/esp32
 - Веб-приложение весит всего 6кб и вшивается в программу в бинарном gzip виде, никакой возни с файлами
 - Удобный билдер панели управления из скетча
@@ -326,14 +326,33 @@ bool Button(size_t id, Text label, sets::Colors color);
 
 // опции разделяются ;
 bool Select(size_t id, Text label, Text options, Text value = Text());
+
+// для активации отправь пустой update на его id
+bool Confirm(size_t id, Text label);
 ```
 
 Здесь `Text` - универсальный текстовый формат, принимает строки в любом виде. При указании `value` отличным от стандартного будет отправлено его значение. Иначе будет отправлено значение из БД, если она подключена. Если в качестве значения нужно число - используйте конструктор `Value`, например `b.Color("col", "Color", Value(my_color));`, где `my_color` это `uint32_t`.
 
+### Updater
+```cpp
+// пустой апдейт (например для вызова Confirm)
+void update(size_t id);
+
+// апдейт с текстом
+void update(size_t id, Text value);
+
+// апдейт с float
+void update(size_t id, float value, uint8_t dec = 2);
+
+// апдейт с числом
+void update(size_t id, <любой численный тип> value);
+```
+
 <a id="versions"></a>
 
 ## Версии
 - v1.0
+- v1.0.2
 
 <a id="install"></a>
 ## Установка

library.properties

@@ -1,5 +1,5 @@
 name=Settings
-version=1.0.1
+version=1.0.2
 author=AlexGyver <[email protected]>
 maintainer=AlexGyver <[email protected]>
 sentence=Simple UI webface builder for esp8266/esp32

src/core/builder.h

@@ -153,6 +153,13 @@ class Builder {
         return Button(id, label, (uint32_t)color);
     }
 
+    // misc
+
+    bool Confirm(size_t id, Text label) {
+        if (_build.isLoad()) _widget(Code::confirm, id, label);
+        return _checkSet(id);
+    }
+
    private:
     Build _build;
     GyverDB* _db = nullptr;

src/core/codes.h

@@ -36,6 +36,7 @@ enum class Code : uint8_t {
     datetime,
     button,
     paragraph,
+    confirm,
 };
 
 }

src/core/updater.h

@@ -9,6 +9,12 @@ class Updater {
    public:
     Updater(Packet& p) : p(p) {}
 
+    void update(size_t id) {
+        p.beginObj();
+        p.addUint(sets::Code::id, id);
+        p.endObj();
+    }
+
     void update(size_t id, Text value) {
         p.beginObj();
         p.addUint(sets::Code::id, id);

src/web/settings.h

@@ -1,6 +1,6 @@
 {
   "name": "settings",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "index.js",
   "scripts": {
     "build": "webpack --config ./webpack.single.js & webpack --config ./webpack.index.js",

web/package.json

@@ -2,6 +2,7 @@
 @import 'style/widget.css';
 @import 'style/ui.css';
 @import 'style/popup.css';
+@import 'style/dialog.css';
 @import 'style/widget/switch.css';
 @import 'style/widget/inputs.css';
 @import 'style/widget/slider.css';

web/src/index.css

@@ -31,6 +31,7 @@ const codes = [
     'datetime',
     'button',
     'paragraph',
+    'confirm',
 ];
 
 export default function decodeBson(b) {

web/src/script/bson.js

@@ -0,0 +1,78 @@
+import { Component } from "@alexgyver/component";
+
+export function BaseDialog(label, content, actionOK, actionCancel) {
+    let ctx = {};
+    Component.make('div', {
+        context: ctx,
+        class: 'dialog_back',
+        var: 'back',
+        parent: document.body,
+        child: {
+            tag: 'div',
+            class: 'dialog_cont',
+            child: {
+                tag: 'div',
+                class: 'dialog',
+                children: [
+                    {
+                        tag: 'label',
+                        text: label,
+                    },
+                    content,
+                    {
+                        tag: 'div',
+                        class: 'dialog_btns',
+                        children: [
+                            {
+                                tag: 'div',
+                                class: 'button',
+                                text: 'OK',
+                                events: {
+                                    click: () => {
+                                        actionOK();
+                                        ctx.$back.remove();
+                                    },
+                                },
+                            },
+                            {
+                                tag: 'div',
+                                style: 'width: 20px',
+                            },
+                            {
+                                tag: 'div',
+                                class: 'button',
+                                style: 'background: var(--error)',
+                                text: 'Cancel',
+                                events: {
+                                    click: () => {
+                                        actionCancel();
+                                        ctx.$back.remove();
+                                    },
+                                },
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    });
+}
+
+export function AsyncPrompt(label, value) {
+    return new Promise(resolve => {
+        let area = Component.make('textarea', {
+            text: value,
+            events: {
+                input: () => area.style.height = area.scrollHeight + "px",
+            }
+        });
+        area.style.height = area.scrollHeight + "px";
+        BaseDialog(label, area, () => resolve(area.value), () => resolve(null));
+    });
+}
+
+export function AsyncConfirm(label) {
+    return new Promise(resolve => {
+        BaseDialog(label, null, () => resolve(1), () => resolve(0));
+    });
+}