|
|
@@ -1,68 +1,145 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
|
|
|
- <script type="text/javascript" src="../../script/jquery.min.js"></script>
|
|
|
- <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
|
|
|
- <title>WiFi Info</title>
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
- <style>
|
|
|
-
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <div class="ui container">
|
|
|
- <div class="ui basic segment">
|
|
|
- <h3 class="ui header">
|
|
|
- <i class="wifi icon"></i>
|
|
|
- <div class="content">
|
|
|
- WiFi Information
|
|
|
- <div class="sub header">Current Connected WiFi Information</div>
|
|
|
- </div>
|
|
|
- </h3>
|
|
|
- </div>
|
|
|
- <div class="ui horizontal segments">
|
|
|
- <div class="ui padded segment">
|
|
|
- <h4 class="ui header">
|
|
|
- <i class="signal icon"></i>
|
|
|
- <div class="content">
|
|
|
- <span id="SSID">Loading...</span>
|
|
|
- <div class="sub header">WiFi SSID</div>
|
|
|
- </div>
|
|
|
- </h4>
|
|
|
- </div>
|
|
|
- <div class="ui padded segment">
|
|
|
- <h4 class="ui header">
|
|
|
- <i class="globe icon"></i>
|
|
|
- <div class="content">
|
|
|
- <span id="Interface">Loading...</span>
|
|
|
- <div class="sub header">Interface</div>
|
|
|
- </div>
|
|
|
- </h4>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="ui divider"></div>
|
|
|
- </div>
|
|
|
- <script>
|
|
|
- initWifiInfo();
|
|
|
- function initWifiInfo(){
|
|
|
- $.ajax({
|
|
|
- url: "../../system/network/wifiinfo",
|
|
|
- method:"GET",
|
|
|
- success: function(data){
|
|
|
- if (data.error !== undefined){
|
|
|
- $("#SSID").text("Access Failed");
|
|
|
- $("#Interface").text("loopback");
|
|
|
- }else{
|
|
|
- $("#SSID").text(data.ESSID);
|
|
|
- $("#Interface").text(data.Interface);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
|
|
|
+ <script type="text/javascript" src="../../script/jquery.min.js"></script>
|
|
|
+ <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
|
|
|
+ <script type="text/javascript" src="../../script/ao.css"></script>
|
|
|
+
|
|
|
+ <link href="../../script/aos/aos.css" rel="stylesheet">
|
|
|
+ <script src="../../script/aos/aos.js"></script>
|
|
|
+
|
|
|
+ <title>WiFi Info</title>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
+ <style>
|
|
|
+
|
|
|
+ .gradientbg{
|
|
|
+ border-radius: 12px;
|
|
|
+ background: rgb(253,255,254);
|
|
|
+ background: linear-gradient(104deg, rgba(253,255,254,1) 29%, rgba(240,250,255,1) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .statusIcon{
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 4em !important;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ #status{
|
|
|
+ font-size: 1.2em;
|
|
|
+ color: #1f1f1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ #status.error{
|
|
|
+ color: rgb(245, 86, 86);
|
|
|
+ }
|
|
|
+
|
|
|
+ #status.connected{
|
|
|
+ color: rgb(68, 177, 132);
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <br><br>
|
|
|
+ <div class="ui container gradientbg">
|
|
|
+ <div class="ui stackable grid">
|
|
|
+ <div class="six wide column statusIcon" align="center">
|
|
|
+ <img src="img/wifi.svg">
|
|
|
+ <div id="status">Loading...</div>
|
|
|
+ </div>
|
|
|
+ <div class="ten wide column">
|
|
|
+ <div class="ui container" style="padding: 4em;">
|
|
|
+ <div class="ui segment">
|
|
|
+ <h4 class="ui header">
|
|
|
+ <i class="signal icon"></i>
|
|
|
+ <div class="content">
|
|
|
+ <span id="SSID">Loading...</span>
|
|
|
+ <div class="sub header">WiFi SSID</div>
|
|
|
+ </div>
|
|
|
+ </h4>
|
|
|
+ <h4 class="ui header">
|
|
|
+ <i class="globe icon"></i>
|
|
|
+ <div class="content">
|
|
|
+ <span id="Interface">Loading...</span>
|
|
|
+ <div class="sub header">Interface</div>
|
|
|
+ </div>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--
|
|
|
+ <div class="ui basic segment">
|
|
|
+ <h3 class="ui header">
|
|
|
+ <i class="wifi icon"></i>
|
|
|
+ <div class="content">
|
|
|
+ WiFi Information
|
|
|
+ <div class="sub header">Current Connected WiFi Information</div>
|
|
|
+ </div>
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <div class="ui horizontal segments" data-aos="fade-right">
|
|
|
+ <div class="ui padded segment">
|
|
|
+ <h4 class="ui header">
|
|
|
+ <i class="signal icon"></i>
|
|
|
+ <div class="content">
|
|
|
+ <span id="SSID">Loading...</span>
|
|
|
+ <div class="sub header">WiFi SSID</div>
|
|
|
+ </div>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
+ <div class="ui padded segment">
|
|
|
+ <h4 class="ui header">
|
|
|
+ <i class="globe icon"></i>
|
|
|
+ <div class="content">
|
|
|
+ <span id="Interface">Loading...</span>
|
|
|
+ <div class="sub header">Interface</div>
|
|
|
+ </div>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ui divider"></div>
|
|
|
+ -->
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ AOS.init();
|
|
|
+
|
|
|
+ initWifiInfo();
|
|
|
+ function initWifiInfo(){
|
|
|
+ $.ajax({
|
|
|
+ url: "../../system/network/wifiinfo",
|
|
|
+ method:"GET",
|
|
|
+ success: function(data){
|
|
|
+ if (data.error !== undefined){
|
|
|
+ $("#SSID").text("N/A");
|
|
|
+ $("#Interface").text("loopback");
|
|
|
+ $("#status").text("Access Error");
|
|
|
+ console.log(data.error);
|
|
|
+ }else if (data.ESSID == "" && data.Interface != ""){
|
|
|
+ //Have WiFi interface but not connected to any hostspot
|
|
|
+ $("#SSID").text("N/A");
|
|
|
+ $("#Interface").text(data.Interface);
|
|
|
+ $("#status").text("Standby");
|
|
|
+ }else if (data.Interface == ""){
|
|
|
+ //No WiFi Interface
|
|
|
+ $("#SSID").text("N/A");
|
|
|
+ $("#Interface").text("No WiFi Interface");
|
|
|
+ $("#status").html(`<i class="ui remove icon"></i> Missing WiFi Interface`);
|
|
|
+ $("#status").addClass("error");
|
|
|
+ }else{
|
|
|
+ //Connection Established
|
|
|
+ $("#SSID").text(data.ESSID);
|
|
|
+ $("#Interface").text(data.Interface);
|
|
|
+ $("#status").html(`<i class="ui checkmark icon"></i> Connected`);
|
|
|
+ $("#status").addClass("connected");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
</html>
|
Toby Chui