wip: dynamic data

author: Marin Ivanov <[email protected]> 2024-08-20 12:02:40 +0300
committer: Marin Ivanov <[email protected]> 2024-08-20 12:02:40 +0300
commit: ec34163617e3588a63dc611834a372746f9d4107 (patch)
tree: 3d8220a89b9a0c5bb13bd911084b117d344e8a9f
parent: 08a1acccd6c6e6a11211b065a40629c08312686a (diff)
5 files changed, 131 insertions, 65 deletions
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..889afc0
--- /dev/null
+++ b/app.js
@@ -0,0 +1,89 @@
+let isLoading = 0;
+const loading = (val) => {
+  isLoading = val;
+  loader.$cls(isLoading ? "" : "hidden");
+}
+loader.$click(() => loading(0));
+
+let error = null;
+let data = {};
+function onerror(err) {
+  error = err;
+  console.error(err);
+}
+function parsedata(r) {
+  return Object.fromEntries(r.split("\n").map(x=>x.trim()).filter(x=>x).map(x=>x.split('=')));
+}
+function cmd(url, body) {
+  return fetch(url, {method:body?'POST':'GET', body})
+    .then(r => {
+      if (!r.ok){
+        throw new Error(r.statusText);
+      }
+      return r.text();
+    })
+    .then(r => parsedata(r));
+}; 
+function loaddata() {
+  loading(1);
+  cmd("/cgi-bin/getconfig")
+    .then(x => {
+      data = x;
+      app.reload();
+    })
+    .catch(onerror)
+    .then(() => loading(0))
+}
+
+const routes = {
+  "/": () => div(
+    h2("Lorem Ipsum"),
+    p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "),
+    p("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
+
+    h2("Ipsum Lorem"),
+    p("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
+    p("Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+    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(
+    h1("Мрежови настройки"),
+    table(
+      tr(
+        td("IP"),
+        td(input("text").$value(data["cfg.ip"])),
+      ),
+      tr(
+        td("MAC"),
+        td(
+          input("text").$value(data["cfg.mac"])
+            .$change2state(data, "cfg.mac")
+        ),
+      )
+    ).$cls("network"),
+    input("button").$value("Съхрани")
+  ),
+  "/config": () => {
+    loaddata();
+    return div();
+  },
+  "/waiting": () => {
+    loading(1);
+    setTimeout(() => {
+      loading(0);
+    }, 3000);
+    return div("Пуйчи");
+  },
+  "": () => div(
+    h1("Несъществуваща страница"),
+    p("Страницата не е намерена.")
+  ),
+};
+const onchange = () => {
+  doc.querySelectorAll('nav a').forEach(x => x.$cls((location.href===x.href)?"active":""));
+  loading(isLoading);
+};
+
+router(app, routes, onchange);
+loaddata();
diff --git a/cgi-bin/getconfig b/cgi-bin/getconfig
new file mode 100644
index 0000000..21128a9
--- /dev/null
+++ b/cgi-bin/getconfig
@@ -0,0 +1,6 @@
+cfg.ip=127.0.0.1 
+cfg.mac=11:22:33:44:55:66
+
+cfg.gateway=0.0.0.0
+
+
diff --git a/index.html b/index.html
index 8997249..5332fce 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="utf8">
   <title>WebIF 2.0</title>
   <link rel="stylesheet" href="style.css">
 </head>
@@ -18,70 +19,20 @@
         <a href="#/tools">Инструменти</a>
         <a href="#/waiting">Пуйчи</a>
       </nav>
-      <section>
-        <div id="loader">
-          <div>
-              <div class="loadspin"></div>
-              <p>
-                <noscript>Не</noscript>
-                Зарежда...
-                <noscript>JavaScript не е включен .</noscript>
-              </p>
-            </div>
-        </div>
-        <div id="app"></div>
-      </section>
+      <section id="app"></section>
     </main>
   </div>
+  <div id="loader" title="цъкни да скриеш">
+    <div>
+        <div class="loadspin"></div>
+        <p>
+          <noscript>Не</noscript>
+          Зарежда...
+          <noscript>JavaScript не е включен.</noscript>
+        </p>
+      </div>
+  </div>
   <script src="ka.js"></script>
-  <script>
-      let isLoading = 0;
-      const loading = (val) => {
-        isLoading = val;
-        loader.$cls(isLoading ? "" : "hidden");
-      }
-      loader.$click(() => loading(0));
-      const routes = {
-        "/": () => div(
-          h2("Lorem Ipsum"),
-          p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "),
-          p("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
-
-          h2("Ipsum Lorem"),
-          p("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
-          p("Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
-          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(
-          table(
-            tr(
-              td("IP"),
-              td(input("text").$value("127.0.0.1")),
-            )
-          ).$cls("network"),
-        ),
-        "/config": () => {
-          return div();
-        },
-        "/waiting": () => {
-          loading(1);
-          setTimeout(() => {
-            loading(0);
-            app.reload();
-          }, 3000);
-          return div("Пуйчи");
-        },
-        "": () => div(
-          h1("Несъществуваща страница"),
-          p("Страницата не е намерена.")
-        ),
-      };
-      const onchange = () => {
-        doc.querySelectorAll('nav a').forEach(x => x.$cls((location.href===x.href)?"active":""));
-        loading(isLoading);
-      };
-      router(app, routes, onchange);
-  </script>
+  <script src="app.js"></script>
 </body>
 </html>
diff --git a/ka.js b/ka.js
index fd2bac4..a73bc9f 100644
--- a/ka.js
+++ b/ka.js
@@ -24,6 +24,13 @@ elproto.$click = function(callback) {
   this.onclick = callback;
   return this;
 }
+const getvalue = x => x.value;
+elproto.$change2state = function(state, field, valgetter=getvalue) {
+  this.onchange = () => {
+    state[field] = valgetter(this);
+  };
+  return this;
+}
 function tag(name, attrs, ...children) {
   const el = doc.createElement(name);
   el.$attrs(attrs||{});
diff --git a/style.css b/style.css
index 0e2bb9d..b89d135 100644
--- a/style.css
+++ b/style.css
@@ -23,10 +23,10 @@ section {
 }
 main {
   display: flex;
+  min-height: 400px;
 }
 section {
   flex: 1;
-  position: relative;
 }
 section > div {
   height: 100%;
@@ -34,7 +34,7 @@ section > div {
 
 nav {
   display: inline-block;
-  background-color: #f1f1f1;
+  /*background-color: #f1f1f1;*/
   width: 250px;
 }
 
@@ -73,6 +73,19 @@ nav a:hover:not(.active) {
   color: white;
 }
 
+input[type=button] {
+  background-color: #07a2a0;
+  width: 200px;  
+  height: 40px;
+  display: block;
+  border:0;
+  color:#fff;
+}
+
+input[type=button]:active {
+  background-color: #079290;
+}
+
 #loader {
   position: absolute;
   left: 0;
@@ -82,7 +95,7 @@ nav a:hover:not(.active) {
   display: grid;
   text-align: center;
   align-content: center;
-  background: rgba(0,0,0,0.5);
+  background: rgba(0,0,0,0.05);
 }
 #loader.hidden {
   display: none;
author	Marin Ivanov <[email protected]>	2024-08-20 12:02:40 +0300
committer	Marin Ivanov <[email protected]>	2024-08-20 12:02:40 +0300
commit	ec34163617e3588a63dc611834a372746f9d4107 (patch)
tree	3d8220a89b9a0c5bb13bd911084b117d344e8a9f
parent	08a1acccd6c6e6a11211b065a40629c08312686a (diff)