Răsfoiți Sursa

admin UI fixes

Danja Vasiliev 10 ani în urmă
părinte
comite
68e41fb108

+ 16 - 11
openwrt/common/opt/lib/cgi/admin2.cgi

@@ -522,6 +522,7 @@ _echo "<!-- obnoxious code below, keep your ports tight -->
 <!doctype html>
 <html>
 <head>
+<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
 <link rel='icon' href='http://${HTTP_HOST}/resources/img/favicon.ico' type='image/x-icon'>
 <title>Superglue server | Control panel</title>
 <link rel='stylesheet' type='text/css' href='http://${HTTP_HOST}/resources/admin/admin.css'>
@@ -656,16 +657,20 @@ wankey=$(doUci get wankey)
   <h2>Dynamic DNS:</h2>
     Register your free domain name (external <a target='_new' href='http://freedns.afraid.org/'>Free DNS</a> service, will open in a new tab)
     <form target='_new' action='http://freedns.afraid.org/subdomain/edit.php'>
-
-    <input type='text' size='15' name='subdomain' placeholder='yourname' class='inline'>
-    <select name='edit_domain_id' class='inline'>
-    <option value='1035903'>spgl.cc</option>
-    <option value='1035903'>spgl.it</option>
-    </select>
-
-    <input type=submit name=submit value="next &gt;&gt;">
-    <input type=hidden name=web_panel value=1>
-    <input type=hidden name=ref value=750930>
+    <div style='display:inline-flex'>
+      <div style='display:inline-block;'>
+        <input type='text' name='subdomain' placeholder='yourname' class='inline'>
+      </div>
+      <div style='display:inline-block;'>
+        <select name='edit_domain_id' class='inline'>
+        <option value='1035903'>spgl.cc</option>
+        <option value='1035903'>spgl.it</option>
+        </select>
+      </div>
+    </div>
+    <input type='submit' name='submit' value="next &gt;&gt;">
+    <input type='hidden' name='web_panel' value='1'>
+    <input type='hidden' name='ref' value='750930'>
     </form>
    
  <span class='help'>help</span>
@@ -735,7 +740,7 @@ wankey=$(doUci get wankey)
   <h2>Firmware upgrade:</h2>
   <form method='post' action='/admin/updatefw' enctype='multipart/form-data'>
   <div id='uploadbox'>
-    <input id='uploadfile' placeholder='Choose file' disabled='disabled'>
+    <input id='uploadfile' placeholder='Select a file..' disabled='disabled'>
     <input id='uploadbtn' name='fwupload' type='file'>
   </div>
     <input type='submit' value='Upload' data-wait='Uploading, do NOT interrupt!'>

+ 36 - 4
openwrt/common/opt/lib/resources/admin/admin.css

@@ -34,6 +34,18 @@ input, select {
   background: #fcfcfc;
 }
 
+select {
+  padding: 4px 5px 4px 5px;
+  background: url('/resources/img/dropdown.svg') no-repeat right center #fcfcfc;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  text-indent: 0.01px;
+  background-size: 12px;
+  background-position: 180px;
+  cursor: pointer;
+}
+
 input {
   text-indent: 4px;
   background: #fcfcfc;
@@ -62,11 +74,13 @@ div#uploadbox {
 input#uploadbtn,
 input#uploadfile {
   position: absolute;
-  top: 0;
+  top: -2px;
   left: 0;
-  height: 33px;
+  bottom: 2px;
+  height: 35px;
   cursor: pointer;
   width: auto;
+  min-width: 405px;
 }
 
 input#uploadbtn {
@@ -204,6 +218,24 @@ span.help:active::after
   background-color: #ddd;
 } */
 
-input:read-only { 
-    background-color: #ddd;
+input[type="text"]:read-only { 
+  background-color: #ddd;
+  cursor: default;
+}
+
+input[type="text"]:-moz-read-only {
+  background-color: #ddd;
+  cursor: default;
+}
+
+input[type="text"][disabled] {
+   color: #aaa;
+}
+
+input::-webkit-input-placeholder {
+   color: #777;
+}
+
+:-moz-placeholder {
+  color: #555;
 }

+ 38 - 50
openwrt/common/opt/lib/resources/admin/admin.js

@@ -1,7 +1,9 @@
-(function() {
-
 var uploadbtn = document.getElementById('uploadbtn');
 var uploadfile = document.getElementById('uploadfile');
+var wanconf = document.getElementById('wanconf');
+var wanssid = document.getElementById('wanssid');
+var wanwifi = document.getElementById('wanwifi');
+var wanaddr = document.getElementById('wanaddr');
 
 uploadbtn.addEventListener('change', function () {
   uploadfile.value = this.value.replace(/^.*\\/, "");
@@ -11,21 +13,16 @@ uploadbtn.addEventListener('change', function () {
   uploadbtn.style.width = len + "px";
 });
 
-/* onload check wanconf form selects and set accordingly */
-/*  var wanconf = document.getElementById('wanconf');
-var selects = wanconf.getElementsByTagName('select');
-for (i = 0; i < selects.length; i++) { 
-  wanChange(selects[i]);
-}
-*/
+wanconf.addEventListener('change', function(e) { 
+  wanChange(e.target)
+});
 
-var wanconf = document.getElementById('wanconf');
-wanconf.addEventListener('change', function(e) { wanChange(e.target) });
+wanssid.addEventListener('focus', function(e) { 
+  iwScan();
+  e.stopPropagation();
+});
 
 function wanChange(e) {
-  var wanwifi = document.getElementById('wanwifi');
-  var wanaddr = document.getElementById('wanaddr');
-
   switch (e[e.selectedIndex].id) {
     case 'wlan':
       wanwifi.setAttribute('class','show');
@@ -44,17 +41,11 @@ function wanChange(e) {
     //  wanaddr.setAttribute('class','show');
       for (var i = 0; i < wanaddr.children.length; i++) {
         wanaddr.children[i].removeAttribute('readonly');
-}
-      break;
+      }
+    break;
   }
 }
 
-var wanssid = document.getElementById('wanssid');
-wanssid.addEventListener('focus', function(e) { 
-  iwScan();
-  e.stopPropagation();
-});
-
 var submitbtns = document.querySelectorAll('input[type="submit"]');
 for (var i=0; i < submitbtns.length; i++){
   submitbtns[i].addEventListener('click', function(e) {
@@ -66,19 +57,18 @@ for (var i=0; i < submitbtns.length; i++){
 }
 
 /* update uptime output */
-(function uptimeUpdate() {
-  setTimeout(function() {
-    ajaxReq('POST', '/admin/uptime', 'null', function(xmlDoc) {
-      //console.log(xmlDoc['response'])
-      document.getElementById('uptime').innerHTML = xmlDoc['response'];
-    });
-    uptimeUpdate();
-  }, 5000);
-})();
-
-//iwScan();
+function uptimeUpdate() {
+  function run() {
+    ajaxReq('POST', '/admin/uptime', 'null', function(xhr) {
+      if (xhr['response'] != '') {
+        document.getElementById('uptime').innerHTML = xhr['response'];
+      }
+    }); 
+  }
+  return setInterval(run, 5000);
+}
 
-})();
+var uptime = window.uptimeUpdate();
 
 function iwScan() {
   function comp(a,b) {
@@ -88,16 +78,14 @@ function iwScan() {
       return -1;
     return 0;
   }
-  ajaxReq('POST', '/admin/iwscan', 'null', function(xmlDoc) {
-    var res = JSON.parse(xmlDoc['response']);
+  ajaxReq('POST', '/admin/iwscan', 'null', function(xhr) {
+    var res = JSON.parse(xhr['response']);
     var stas = res['results'].sort(comp);
     var wanssid = document.getElementById('wanssid');
     for (var i = 0; i < Object.keys(stas).length; i++) { 
-//      console.log(stas[i]['ssid']);
-//      console.log(stas[i]);
       var sta;
       if (sta = document.getElementById(stas[i]['ssid'])) {
-        console.log('found ' + stas[i]['ssid'] + ' entry');
+        //console.log('found ' + stas[i]['ssid'] + ' entry');
       } else {
         sta = document.createElement('option');
         sta.id = stas[i]['ssid'];
@@ -111,21 +99,21 @@ function iwScan() {
         wanssid.appendChild(sta);
       }
     }
-    //  console.log(res);
   });
 }
 
-function ajaxReq(url, method, data, callback) {
-  var xmlDoc = new XMLHttpRequest();
-  xmlDoc.open(url, method, true);
-  if (method == 'POST') {
-    xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-  }
-  xmlDoc.onreadystatechange = function() {
-    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
-      callback(xmlDoc);
+iwScan()
+
+function ajaxReq(method, url, data, callback) {
+  var xhr = new XMLHttpRequest();
+  xhr.open(method, url, true);
+  xhr.onerror = function() { clearInterval(uptime) }
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4 && xhr.status == 200) { 
+      callback(xhr);
     }
   }
-  xmlDoc.send(data);
+  xhr.send(data);
 }
 

+ 41 - 0
openwrt/common/opt/lib/resources/img/dropdown.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="37.03336"
+   height="22.073"
+   id="svg3884">
+  <defs
+     id="defs3886" />
+  <metadata
+     id="metadata3889">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-298.62617,-578.46849)"
+     id="layer1">
+    <g
+       transform="matrix(0.37792998,0,0,-0.37792998,317.82086,592.75084)"
+       id="g12"
+       style="fill:#2c2c2c;fill-opacity:1">
+      <path
+         d="M 0,0 -1.793,-1.794 -3.586,0 -41.379,37.791 -50.789,28.382 -1.793,-20.614 47.201,28.382 37.793,37.791 0,0 z"
+         id="path14"
+         style="fill:#2c2c2c;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+    </g>
+  </g>
+</svg>