update: support AS information, show the database version

assets/js/main.js

@@ -20,6 +20,9 @@ $(document).ready(function() {
             errorIP();
         }
     });
+    $("#output").dblclick(function() {
+        getVersion();
+    });
 });
 
 $(document).keydown(function(event) {
@@ -41,7 +44,6 @@ function getInfo() {
         $("button").text("Search");
         $("table").show(1000);
         $("#ip").text(data.ip);
-        data.as = (data.as == null) ? "Unknow" : data.as;
         data.city = (data.city == null) ? "Unknow" : data.city;
         data.region = (data.region == null) ? "Unknow" : data.region;
         data.country = (data.country == null) ? "Unknow" : data.country;
@@ -49,7 +51,6 @@ function getInfo() {
         data.isp = (data.isp == null) ? "Unknow" : data.isp;
         data.scope = (data.scope == null) ? "Unknow" : data.scope;
         data.detail = (data.detail == null || data.detail == ' ') ? "Unknow" : data.detail;
-        $("#as").text(data.as);
         $("#city").text(data.city);
         $("#region").text(data.region);
         $("#country").text(data.country);
@@ -57,17 +58,37 @@ function getInfo() {
         $("#isp").text(data.isp);
         $("#scope").text(data.scope);
         $("#detail").text(data.detail);
+        if (data.as == null) {
+            $("#as").text("Unknow");
+        } else {
+            $("#as").text(data.as);
+            var asUri = "https://bgpview.io/asn/" + data.as.substr(2);
+            $("#as").html('<a href="' + asUri + '" target="_blank" title="AS information">' + data.as + '</a>');
+        }
         if (data.loc == null) {
             $("#loc").text("Unknow");
             clear();
         } else {
             var earthUri = "https://earth.google.com/web/@" + data.loc + ",0a,398836d,1y,0h,0t,0r";
-            $("#loc").html('<a id="loc" href="' + earthUri + '" target="_blank" title="View on Google Earth">' + data.loc + '</a>');
+            $("#loc").html('<a href="' + earthUri + '" target="_blank" title="View on Google Earth">' + data.loc + '</a>');
             draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[1]));
         }
     });
 }
 
+function getVersion() {
+    $.get("/version", function(data) {
+        console.log(data);
+        data.qqwry = data.qqwry.slice(0, 4) + "-" + data.qqwry.slice(4, 6) + "-" + data.qqwry.slice(6, 8);
+        data.ipip = data.ipip.slice(0, 4) + "-" + data.ipip.slice(4, 6) + "-" + data.ipip.slice(6, 8);
+        var data_ver = "";
+        data_ver += "echoIP: " + data.echoip + "\n";
+        data_ver += "纯真数据库: " + data.qqwry + "\n";
+        data_ver += "IPIP.net数据库: " + data.ipip;
+        alert(data_ver);
+    });
+}
+
 function trim(str) {
     return str.replace(/(^\s*)|(\s*$)/g, "");
 }

backend/queryInfo.php

@@ -165,8 +165,8 @@ function getVersion() { // 获取自身及数据库版本号
     $version['echoip'] = $myVersion;
     $qqwry = new QQWry('qqwry.dat');
     $IPIP = new IPDB('ipipfree.ipdb');
-    $version['qqwry.dat'] = $qqwry->getVersion();
+    $version['qqwry'] = $qqwry->getVersion();
-    $version['ipip.net'] = $IPIP->getVersion();
+    $version['ipip'] = $IPIP->getVersion();
     return $version;
 }
 
@@ -195,8 +195,8 @@ function routeParam() {
         $version = getVersion();
         if ($_GET['cli'] == "true") { // 命令行模式
             echo "echoip -> " . $version['echoip'] . PHP_EOL;
-            echo "qqwry.dat -> " . formatDate($version['qqwry.dat']) . PHP_EOL;
+            echo "qqwry.dat -> " . formatDate($version['qqwry']) . PHP_EOL;
-            echo "ipip.net -> " . formatDate($version['ipip.net']) . PHP_EOL;
+            echo "ipip.net -> " . formatDate($version['ipip']) . PHP_EOL;
         } else {
             header('Content-Type: application/json; charset=utf-8');
             echo json_encode($version); // 返回JSON数据

index.html

@@ -9,9 +9,6 @@
 </head>
 
 <script src="https://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script>
-<!-- <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script> -->
-<!-- <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' /> -->
-
 <script src='assets/mapbox/mapbox-gl.js'></script>
 <link href='assets/mapbox/mapbox-gl.min.css' rel='stylesheet' />
 <link href="assets/css/main.min.css" rel="stylesheet" />
@@ -23,13 +20,19 @@
         padding: 0;
     }
     
-    #loc {
+    .table {
+        color: #282828;
+    }
+
+    #loc a,
+    #as a {
         text-decoration: none;
-        color: #363636;
+        color: #282828;
         transition: all 0.6s;
     }
     
-    #loc:hover {
+    #loc a:hover,
+    #as a:hover {
         color: #2d87ee;
     }
     
@@ -45,20 +48,18 @@
         display: none !important;
     }
     
-    #sub-title {
+    #title {
         margin-top: 0px;
         margin-bottom: 20px;
     }
     
-    #sub-title,
+    #title a {
-    a {
         text-decoration: none;
         color: #555;
         transition: all 0.6s;
     }
     
-    #sub-title,
+    #title a:hover {
-    a:hover {
         color: #5165db;
     }
     
@@ -94,7 +95,7 @@
         <div id="main-hero" class="hero-body" style="padding: 0;">
             <div class="has-text-centered is-subheader-caption positioncontrol" style="padding-bottom: 0;">
                 <div id="output" class="contact-page-form flex-card">
-                    <h3 id="sub-title">
+                    <h3 id="title">
                         <a href="https://github.com/dnomd343/echoIP" target="_blank" title="Source code on Github">echoIP</a>
                     </h3>
                     <div class="columns is-multiline">