wip: dynamic data

2 files changed, 37 insertions, 6 deletions

diff --git a/index.html b/index.html
index 6376df2..513d5ec 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,7 @@
   <script src="ka.js"></script>
   <script>
       const waiting = app.children[0];
+      let isLoading = 0;
       const routes = {
         "/": () => div(
           h2("Lorem Ipsum"),
@@ -47,8 +48,23 @@
           p("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
           p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "),
         ),
-        //"/network": () => div(),
-        //"/config": () => div(),
+        "/network": () => div(
+          isLoading ? waiting
+          : table(
+            tr(
+              td("IP"),
+              td(input("text").$value("127.0.0.1")),
+            )
+          ).$cls("network"),
+        ),
+        "/config": () => {
+          isLoading = 1;
+          setTimeout(() => {
+            isLoading = 0;
+            app.reload();
+          }, 10000);
+          return div();
+        },
         "/waiting": () => waiting,
         "": () => div(
           h1("Несъществуваща страница"),
diff --git a/ka.js b/ka.js
index 9d5efc9..3aeef69 100644
--- a/ka.js
+++ b/ka.js
@@ -4,7 +4,20 @@ function el$Attr(name, value) {
   this.setAttribute(name, value);
   return this;
 }
-function el$OnClick(callback) {
+function el$Attrs(attrs) {
+  for (const [attr, value] of Object.entries(attrs||{})) {
+    this.$attr(attr, value);
+  }
+  return this;
+}
+function el$Cls(cls) {
+  return this.$attr("class", cls);
+}
+function el$Value(value) {
+  this.value = value;
+  return this;
+}
+function el$Click(callback) {
   this.onclick = callback;
   return this;
 }
@@ -12,7 +25,10 @@ function tag(name, attrs, ...children) {
   const el = doc.createElement(name);
   el.attr = elAttr;
   el.$attr = el$Attr;
-  el.$onclick = el$OnClick;
+  el.$attrs = el$Attrs;
+  el.$cls = el$Cls;
+  el.$value = el$Value;
+  el.$click = el$Click;
   for (const child of children) {
     el.appendChild((typeof(child) === 'string') ? doc.createTextNode(child) : child);
   }
@@ -22,13 +38,12 @@ function tag(name, attrs, ...children) {
   return el;
 }
 
-const TRIVIAL = "h1,h2,h3,p,a,div,span,select";
+const TRIVIAL = "h1,h2,h3,p,a,div,span,select,table,tr,td";
 for (let name of TRIVIAL.split(",")) {
     window[name] = (...children) => tag(name, null, ...children);
 }
 
 var ahref = (href, ...children) => tag("a", {href}, ...children);
-var divcls = (klass, ...children) => tag("div", {class: klass}, ...children);
 var img = (src) => tag("img", {src});
 var input = (type) => tag("input", {type});