diff options
| -rw-r--r-- | app.js | 89 | ||||
| -rw-r--r-- | cgi-bin/getconfig | 6 | ||||
| -rw-r--r-- | index.html | 75 | ||||
| -rw-r--r-- | ka.js | 7 | ||||
| -rw-r--r-- | style.css | 19 |
5 files changed, 131 insertions, 65 deletions
@@ -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 + + @@ -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> @@ -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||{}); @@ -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; |