From 441c1fb21029b159904c743eceea3a645816540f Mon Sep 17 00:00:00 2001 From: Dnomd343 Date: Sat, 24 Apr 2021 12:21:59 +0800 Subject: [PATCH] fix: frontend optimization --- assets/js/main.js | 39 +++++++++++++++++++++++++++++++++++---- assets/js/main.min.js | 2 +- index.html | 4 ++-- 3 files changed, 38 insertions(+), 7 deletions(-) diff --git a/assets/js/main.js b/assets/js/main.js index 4898e6e..0a37646 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -13,6 +13,7 @@ $(document).ready(function() { }); $("button").text("Searching..."); $("table").hide(1000); + $("input").val(trim($("input").val())); if (checkIP($("input").val()) == "ok") { getInfo(); } else { @@ -23,7 +24,7 @@ $(document).ready(function() { $(document).keydown(function(event) { if (event.keyCode == 13) { - $("button").click(); + $("button").focus(); } }); @@ -40,26 +41,44 @@ 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; + data.timezone = (data.timezone == null) ? "Unknow" : data.timezone; + 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); $("#timezone").text(data.timezone); - var earthUri = "https://earth.google.com/web/@" + data.loc + ",0a,398836d,1y,0h,0t,0r"; - $("#loc").html('' + data.loc + ''); $("#isp").text(data.isp); $("#scope").text(data.scope); $("#detail").text(data.detail); - draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[1])); + 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('' + data.loc + ''); + draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[1])); + } }); } +function trim(str) { + return str.replace(/(^\s*)|(\s*$)/g, ""); +} + function errorIP() { $("button").text("Illegal IP"); $("button").css({ 'border-color': '#ff406f', 'background-color': '#ff406f' }); + $("input").focus(); } function checkIP(ipStr) { @@ -89,6 +108,18 @@ function getQuery(name) { mapboxgl.accessToken = 'pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg'; +function clear() { + var map = new mapboxgl.Map({ + container: 'map', + style: 'mapbox://styles/mapbox/streets-v11', + center: [0, 0], + zoom: 1 + }); + map.on('load', function() { + console.log("reset map"); + }); +}; + function draw(x, y) { var map = new mapboxgl.Map({ container: 'map', diff --git a/assets/js/main.min.js b/assets/js/main.min.js index d086197..4ec3768 100644 --- a/assets/js/main.min.js +++ b/assets/js/main.min.js @@ -1 +1 @@ -function getInfo(){$.get("/info/"+$("input").val(),(function(data){if(console.log(data),"F"!=data.status){$("input").val()||$("input").val(data.ip),$("button").text("Search"),$("table").show(1e3),$("#ip").text(data.ip),$("#as").text(data.as),$("#city").text(data.city),$("#region").text(data.region),$("#country").text(data.country),$("#timezone").text(data.timezone);var earthUri="https://earth.google.com/web/@"+data.loc+",0a,398836d,1y,0h,0t,0r";$("#loc").html(''+data.loc+""),$("#isp").text(data.isp),$("#scope").text(data.scope),$("#detail").text(data.detail),draw(parseFloat(data.loc.split(",")[0]),parseFloat(data.loc.split(",")[1]))}else errorIP()}))}function errorIP(){$("button").text("Illegal IP"),$("button").css({"border-color":"#ff406f","background-color":"#ff406f"})}function checkIP(ipStr){if(null===ipStr)return"error";var regIPv4=/^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/,regIPv6=/^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:)|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}(:[0-9A-Fa-f]{1,4}){1,2})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){1,3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){1,4})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){1,5})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){1,6})|(:(:[0-9A-Fa-f]{1,4}){1,7})|(([0-9A-Fa-f]{1,4}:){6}(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){5}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){0,4}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(:(:[0-9A-Fa-f]{1,4}){0,5}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3}))$/,V4=ipStr.match(regIPv4),V6=ipStr.match(regIPv6);return null===V4&&null===V6?"error":"ok"}function getQuery(name){var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)"),result=window.location.search.substr(1).match(reg);return null!=result?unescape(result[2]):null}function draw(x,y){var map=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[y,x],zoom:3}),size=100,pulsingDot={width:100,height:100,data:new Uint8Array(4e4),onAdd:function(){var canvas=document.createElement("canvas");canvas.width=this.width,canvas.height=this.height,this.context=canvas.getContext("2d")},render:function(){var duration=1e3,t=performance.now()%1e3/1e3,radius=15,outerRadius=35*t+15,context=this.context;return context.clearRect(0,0,this.width,this.height),context.beginPath(),context.arc(this.width/2,this.height/2,outerRadius,0,2*Math.PI),context.fillStyle="rgba(255, 200, 200,"+(1-t)+")",context.fill(),context.beginPath(),context.arc(this.width/2,this.height/2,15,0,2*Math.PI),context.fillStyle="rgba(255, 100, 100, 1)",context.strokeStyle="white",context.lineWidth=2+4*(1-t),context.fill(),context.stroke(),this.data=context.getImageData(0,0,this.width,this.height).data,map.triggerRepaint(),!0}};map.on("load",(function(){map.addImage("pulsing-dot",pulsingDot,{pixelRatio:2}),map.addLayer({id:"points",type:"symbol",source:{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[y,x]}}]}},layout:{"icon-image":"pulsing-dot"}})}))}$(document).ready((function(){null===getQuery("ip")?getInfo():($("input").val(getQuery("ip")),getInfo()),$("table").hide(),$("button").click((function(){$("button").css({"border-color":"","background-color":""}),$("button").text("Searching..."),$("table").hide(1e3),"ok"==checkIP($("input").val())?getInfo():errorIP()}))})),$(document).keydown((function(event){13==event.keyCode&&$("button").click()})),mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg"; \ No newline at end of file +function getInfo(){$.get("/info/"+$("input").val(),(function(data){if(console.log(data),"F"!=data.status)if($("input").val()||$("input").val(data.ip),$("button").text("Search"),$("table").show(1e3),$("#ip").text(data.ip),data.as=null==data.as?"Unknow":data.as,data.city=null==data.city?"Unknow":data.city,data.region=null==data.region?"Unknow":data.region,data.country=null==data.country?"Unknow":data.country,data.timezone=null==data.timezone?"Unknow":data.timezone,data.isp=null==data.isp?"Unknow":data.isp,data.scope=null==data.scope?"Unknow":data.scope,data.detail=null==data.detail||" "==data.detail?"Unknow":data.detail,$("#as").text(data.as),$("#city").text(data.city),$("#region").text(data.region),$("#country").text(data.country),$("#timezone").text(data.timezone),$("#isp").text(data.isp),$("#scope").text(data.scope),$("#detail").text(data.detail),null==data.loc)$("#loc").text("Unknow"),clear();else{var earthUri="https://earth.google.com/web/@"+data.loc+",0a,398836d,1y,0h,0t,0r";$("#loc").html(''+data.loc+""),draw(parseFloat(data.loc.split(",")[0]),parseFloat(data.loc.split(",")[1]))}else errorIP()}))}function trim(str){return str.replace(/(^\s*)|(\s*$)/g,"")}function errorIP(){$("button").text("Illegal IP"),$("button").css({"border-color":"#ff406f","background-color":"#ff406f"}),$("input").focus()}function checkIP(ipStr){if(null===ipStr)return"error";var regIPv4=/^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/,regIPv6=/^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:)|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}(:[0-9A-Fa-f]{1,4}){1,2})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){1,3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){1,4})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){1,5})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){1,6})|(:(:[0-9A-Fa-f]{1,4}){1,7})|(([0-9A-Fa-f]{1,4}:){6}(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){5}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){0,4}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(:(:[0-9A-Fa-f]{1,4}){0,5}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3}))$/,V4=ipStr.match(regIPv4),V6=ipStr.match(regIPv6);return null===V4&&null===V6?"error":"ok"}function getQuery(name){var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)"),result=window.location.search.substr(1).match(reg);return null!=result?unescape(result[2]):null}function clear(){var map;new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[0,0],zoom:1}).on("load",(function(){console.log("reset map")}))}function draw(x,y){var map=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[y,x],zoom:3}),size=100,pulsingDot={width:100,height:100,data:new Uint8Array(4e4),onAdd:function(){var canvas=document.createElement("canvas");canvas.width=this.width,canvas.height=this.height,this.context=canvas.getContext("2d")},render:function(){var duration=1e3,t=performance.now()%1e3/1e3,radius=15,outerRadius=35*t+15,context=this.context;return context.clearRect(0,0,this.width,this.height),context.beginPath(),context.arc(this.width/2,this.height/2,outerRadius,0,2*Math.PI),context.fillStyle="rgba(255, 200, 200,"+(1-t)+")",context.fill(),context.beginPath(),context.arc(this.width/2,this.height/2,15,0,2*Math.PI),context.fillStyle="rgba(255, 100, 100, 1)",context.strokeStyle="white",context.lineWidth=2+4*(1-t),context.fill(),context.stroke(),this.data=context.getImageData(0,0,this.width,this.height).data,map.triggerRepaint(),!0}};map.on("load",(function(){map.addImage("pulsing-dot",pulsingDot,{pixelRatio:2}),map.addLayer({id:"points",type:"symbol",source:{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[y,x]}}]}},layout:{"icon-image":"pulsing-dot"}})}))}$(document).ready((function(){null===getQuery("ip")?getInfo():($("input").val(getQuery("ip")),getInfo()),$("table").hide(),$("button").click((function(){$("button").css({"border-color":"","background-color":""}),$("button").text("Searching..."),$("table").hide(1e3),$("input").val(trim($("input").val())),"ok"==checkIP($("input").val())?getInfo():errorIP()}))})),$(document).keydown((function(event){13==event.keyCode&&$("button").focus()})),mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg"; \ No newline at end of file diff --git a/index.html b/index.html index 8e452f0..d3a74d1 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@ } #loc:hover { - color: #3391ff; + color: #2d87ee; } #map { @@ -82,7 +82,7 @@

- echoIP + echoIP