diff --git a/src/lib/components/Environment.svelte b/src/lib/components/Environment.svelte index 2959ec3..12bc74b 100644 --- a/src/lib/components/Environment.svelte +++ b/src/lib/components/Environment.svelte @@ -18,6 +18,67 @@ } }; + let connectionType = ''; + let connectionEffectiveType = ''; + + const getNetworkInfomation = async (e) => { + connectionType = navigator.connection.type; + connectionEffectiveType = navigator.connection.effectiveType; + }; + + let batteryCharging = false; + let batteryLevel = 0; + + const getBattery = () => { + navigator + .getBattery() + .then( + ( + /** @type {{ addEventListener: (arg0: string, arg1: { (): void; (): void; (): void; (): void; }) => void; }} */ battery + ) => { + const updateChargeInfo = () => { + batteryCharging = battery.charging; + }; + + const updateLevelInfo = () => { + batteryLevel = battery.level * 100; + }; + + // const updateChargingInfo = () => { + // console.log(`Battery charging time: ${battery.chargingTime} seconds`); + // }; + + // const updateDischargingInfo = () => { + // console.log(`Battery discharging time: ${battery.dischargingTime} seconds`); + // }; + + const updateAllBatteryInfo = () => { + updateChargeInfo(); + updateLevelInfo(); + // updateChargingInfo(); + // updateDischargingInfo(); + }; + updateAllBatteryInfo(); + + battery.addEventListener('chargingchange', () => { + updateChargeInfo(); + }); + + battery.addEventListener('levelchange', () => { + updateLevelInfo(); + }); + + // battery.addEventListener('chargingtimechange', () => { + // updateChargingInfo(); + // }); + + // battery.addEventListener('dischargingtimechange', () => { + // updateDischargingInfo(); + // }); + } + ); + }; + onMount(async () => { let parser = UAParser(navigator.userAgent); environment.cpu = parser.cpu.architecture; @@ -28,12 +89,15 @@ environment.webbrowser = parser.browser.name; environment.browserVersion = parser.browser.version; await getCP(); + await getNetworkInfomation(); + navigator.connection?.addEventListener('change', getNetworkInfomation); + getBattery(); });
{#if environment.cpu} - {#if cpState === 'nominal'} - Nominal{/if} {#if cpState === 'fair'} - Fair{/if} {#if cpState === 'serious'} - {environment.gpu}{/if} + {#if (connectionType && connectionType !== 'none' && connectionType !== 'unknown' && connectionType !== 'other') || connectionEffectiveType} + {#if connectionType.toLowerCase().indexOf('bluetooth') > -1} + {/if} + {#if connectionType.toLowerCase().indexOf('cellular') > -1} + {/if} + {#if connectionType.toLowerCase().indexOf('ethernet') > -1} + + {/if} + {#if connectionType.toLowerCase().indexOf('mixed') > -1} + {/if} + {#if connectionType.toLowerCase().indexOf('wifi') > -1} + {/if} + {#if connectionType.toLowerCase().indexOf('wimax') > -1} + {/if} + + {#if connectionEffectiveType.toLowerCase().indexOf('slow-2g') > -1} + {/if} + {#if connectionEffectiveType.toLowerCase().indexOf('2g') > -1}{/if} + {#if connectionEffectiveType.toLowerCase().indexOf('3g') > -1} + {/if} + {#if connectionEffectiveType.toLowerCase().indexOf('4g') > -1} + {/if} + {#if connectionEffectiveType.toLowerCase().indexOf('5g') > -1} + {/if} + {/if} + + {#if batteryLevel} + {#if batteryCharging} + {#if batteryLevel < 30} + + {:else if batteryLevel >= 30 && batteryLevel < 50} + + {:else if batteryLevel >= 50 && batteryLevel < 60} + {:else if batteryLevel >= 60 && batteryLevel < 80} + {:else if batteryLevel >= 80 && batteryLevel < 90} + + {:else if batteryLevel >= 90 && batteryLevel < 100} + + {:else if batteryLevel == 100} + + {:else} + + {/if} + AC + {:else} + {#if batteryLevel <= 10} + + {:else if batteryLevel > 10 && batteryLevel < 50} + {:else if batteryLevel >= 50 && batteryLevel <= 75} + + {:else if batteryLevel > 75 && batteryLevel < 100} + + {:else if batteryLevel == 100} + + {:else} + + {/if} + DC + {/if} + {/if} + {#if environment.os} {#if environment.os.toLowerCase().indexOf('windows') > -1} - {:else if environment.os.toLowerCase().indexOf('linux') > -1} - {:else if environment.os.toLowerCase().indexOf('cros') > -1} - {:else if environment.os.toLowerCase().indexOf('android') > -1} - -1 || environment.os .toLowerCase() .indexOf('iPhone OS') > -1} - -1 || environment.webbrowser .toLowerCase() .indexOf('chromium') > -1} - {:else if environment.webbrowser.toLowerCase().indexOf('firefox') > -1} - {:else if environment.webbrowser.toLowerCase().indexOf('opera') > -1} - {:else if environment.webbrowser.toLowerCase().indexOf('safari') > -1} - {:else if environment.webbrowser.toLowerCase().indexOf('edge') > -1} - {:else if environment.webbrowser.toLowerCase().indexOf('ie') > -1} - {environment.browserVersion} - .environment svg { display: inline-block; - width: 12px; - height: 12px; - margin-bottom: -1px; + width: 14px; + height: 14px; + margin-bottom: -3px; } .environment #logo_onnx { - width: 48px; + width: 56px; margin-bottom: 0px; }