From 2254ffb1d050b5d730794d892f9f2d0cdeeea0c5 Mon Sep 17 00:00:00 2001 From: Guanran Wang Date: Sat, 26 Oct 2024 14:20:54 +0800 Subject: [PATCH] chore(ui): use typescript --- tsconfig.json | 12 ++++ ui/script.js | 172 +++++++++++++++++++++++++++----------------------- ui/script.ts | 85 +++++++++++++++++++++++++ 3 files changed, 189 insertions(+), 80 deletions(-) create mode 100644 tsconfig.json create mode 100644 ui/script.ts diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..e92e9d4 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "target": "es2016", + "lib": ["es2020", "dom"], + "module": "commonjs", + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "skipLibCheck": true, + "rootDir": "./ui" + } +} diff --git a/ui/script.js b/ui/script.js index 11ff977..9d9d0f1 100644 --- a/ui/script.js +++ b/ui/script.js @@ -1,85 +1,97 @@ -async function main() { - const [ny4, ipsb, speedtestcn, ipapiis] = await Promise.allSettled([ - fetchAsync("https://ip.ny4.dev/api/v1/ip"), - fetchAsync("https://api.ip.sb/geoip"), - fetchAsync("https://api-v3.speedtest.cn/ip"), - fetchAsync("https://api.ipapi.is/"), - ]); - - if (ny4.status === "fulfilled") { - updateDom("check-ny4-ip", ny4.value.ip); - updateDom("check-ny4-location", [ - ny4.value.city, - ny4.value.region, - ny4.value.country, - ny4.value.organization, - ]); - } else { - updateDom("check-ny4-ip", "Fetch Failed"); - updateDom("check-ny4-location", "Fetch Failed"); - console.log("Fetch failed:", ny4.reason); - } - - if (ipsb.status === "fulfilled") { - updateDom("check-ipsb-ip", ipsb.value.ip); - updateDom("check-ipsb-location", [ - ipsb.value.city, - ipsb.value.region, - ipsb.value.country, - ipsb.value.isp, - ]); - } else { - updateDom("check-ipsb-ip", "Fetch Failed"); - updateDom("check-ipsb-location", "Fetch Failed"); - console.log("Fetch failed:", ipsb.reason); - } - - if (speedtestcn.status === "fulfilled") { - updateDom("check-speedtestcn-ip", speedtestcn.value.data.ip); - updateDom("check-speedtestcn-location", [ - speedtestcn.value.data.city, - speedtestcn.value.data.province, - speedtestcn.value.data.country, - speedtestcn.value.data.isp, - ]); - } else { - updateDom("check-speedtestcn-ip", "Fetch Failed"); - updateDom("check-speedtestcn-location", "Fetch Failed"); - console.log("Fetch failed:", speedtestcn.reason); - } - - if (ipapiis.status === "fulfilled") { - updateDom("check-ipapiis-ip", ipapiis.value.ip); - updateDom("check-ipapiis-location", [ - ipapiis.value.location.city, - ipapiis.value.location.state, - ipapiis.value.location.country, - ipapiis.value.company.name, - ]); - } else { - updateDom("check-ipapiis-ip", "Fetch Failed"); - updateDom("check-ipapiis-location", "Fetch Failed"); - console.log("Fetch failed:", ipapiis.reason); - } +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +function main() { + return __awaiter(this, void 0, void 0, function* () { + const [ny4, ipsb, speedtestcn, ipapiis] = yield Promise.allSettled([ + fetchAsync("https://ip.ny4.dev/api/v1/ip"), + fetchAsync("https://api.ip.sb/geoip"), + fetchAsync("https://api-v3.speedtest.cn/ip"), + fetchAsync("https://api.ipapi.is/"), + ]); + if (ny4.status === "fulfilled") { + updateDom("check-ny4-ip", ny4.value.ip); + updateDom("check-ny4-location", [ + ny4.value.city, + ny4.value.region, + ny4.value.country, + ny4.value.organization, + ]); + } + else { + updateDom("check-ny4-ip", "Fetch Failed"); + updateDom("check-ny4-location", "Fetch Failed"); + console.log("Fetch failed:", ny4.reason); + } + if (ipsb.status === "fulfilled") { + updateDom("check-ipsb-ip", ipsb.value.ip); + updateDom("check-ipsb-location", [ + ipsb.value.city, + ipsb.value.region, + ipsb.value.country, + ipsb.value.isp, + ]); + } + else { + updateDom("check-ipsb-ip", "Fetch Failed"); + updateDom("check-ipsb-location", "Fetch Failed"); + console.log("Fetch failed:", ipsb.reason); + } + if (speedtestcn.status === "fulfilled") { + updateDom("check-speedtestcn-ip", speedtestcn.value.data.ip); + updateDom("check-speedtestcn-location", [ + speedtestcn.value.data.city, + speedtestcn.value.data.province, + speedtestcn.value.data.country, + speedtestcn.value.data.isp, + ]); + } + else { + updateDom("check-speedtestcn-ip", "Fetch Failed"); + updateDom("check-speedtestcn-location", "Fetch Failed"); + console.log("Fetch failed:", speedtestcn.reason); + } + if (ipapiis.status === "fulfilled") { + updateDom("check-ipapiis-ip", ipapiis.value.ip); + updateDom("check-ipapiis-location", [ + ipapiis.value.location.city, + ipapiis.value.location.state, + ipapiis.value.location.country, + ipapiis.value.company.name, + ]); + } + else { + updateDom("check-ipapiis-ip", "Fetch Failed"); + updateDom("check-ipapiis-location", "Fetch Failed"); + console.log("Fetch failed:", ipapiis.reason); + } + }); } - -async function fetchAsync(url) { - try { - const response = await fetch(url); - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - return await response.json(); - } catch (error) { - console.log("Fetch error:", error); - throw error; - } +function fetchAsync(url) { + return __awaiter(this, void 0, void 0, function* () { + try { + const response = yield fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return yield response.json(); + } + catch (error) { + console.log("Fetch error:", error); + throw error; + } + }); } - function updateDom(elementId, content) { - document.getElementById(elementId).innerHTML = Array.isArray(content) - ? content.join(", ") - : content; + document.getElementById(elementId).innerHTML = Array.isArray(content) + ? content.join(", ") + : content; } - window.onload = main; diff --git a/ui/script.ts b/ui/script.ts new file mode 100644 index 0000000..17f8547 --- /dev/null +++ b/ui/script.ts @@ -0,0 +1,85 @@ +async function main() { + const [ny4, ipsb, speedtestcn, ipapiis] = await Promise.allSettled([ + fetchAsync("https://ip.ny4.dev/api/v1/ip"), + fetchAsync("https://api.ip.sb/geoip"), + fetchAsync("https://api-v3.speedtest.cn/ip"), + fetchAsync("https://api.ipapi.is/"), + ]); + + if (ny4.status === "fulfilled") { + updateDom("check-ny4-ip", ny4.value.ip); + updateDom("check-ny4-location", [ + ny4.value.city, + ny4.value.region, + ny4.value.country, + ny4.value.organization, + ]); + } else { + updateDom("check-ny4-ip", "Fetch Failed"); + updateDom("check-ny4-location", "Fetch Failed"); + console.log("Fetch failed:", ny4.reason); + } + + if (ipsb.status === "fulfilled") { + updateDom("check-ipsb-ip", ipsb.value.ip); + updateDom("check-ipsb-location", [ + ipsb.value.city, + ipsb.value.region, + ipsb.value.country, + ipsb.value.isp, + ]); + } else { + updateDom("check-ipsb-ip", "Fetch Failed"); + updateDom("check-ipsb-location", "Fetch Failed"); + console.log("Fetch failed:", ipsb.reason); + } + + if (speedtestcn.status === "fulfilled") { + updateDom("check-speedtestcn-ip", speedtestcn.value.data.ip); + updateDom("check-speedtestcn-location", [ + speedtestcn.value.data.city, + speedtestcn.value.data.province, + speedtestcn.value.data.country, + speedtestcn.value.data.isp, + ]); + } else { + updateDom("check-speedtestcn-ip", "Fetch Failed"); + updateDom("check-speedtestcn-location", "Fetch Failed"); + console.log("Fetch failed:", speedtestcn.reason); + } + + if (ipapiis.status === "fulfilled") { + updateDom("check-ipapiis-ip", ipapiis.value.ip); + updateDom("check-ipapiis-location", [ + ipapiis.value.location.city, + ipapiis.value.location.state, + ipapiis.value.location.country, + ipapiis.value.company.name, + ]); + } else { + updateDom("check-ipapiis-ip", "Fetch Failed"); + updateDom("check-ipapiis-location", "Fetch Failed"); + console.log("Fetch failed:", ipapiis.reason); + } +} + +async function fetchAsync(url: string) { + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return await response.json(); + } catch (error) { + console.log("Fetch error:", error); + throw error; + } +} + +function updateDom(elementId: string, content: string | Array) { + document.getElementById(elementId)!.innerHTML = Array.isArray(content) + ? content.join(", ") + : content; +} + +window.onload = main;