Add the reactive parts

This commit is contained in:
MotorTruck1221 2025-06-14 22:32:10 -06:00
parent e21c051293
commit 411813aa4c
No known key found for this signature in database
GPG key ID: 08F417E2B8B61EA4
2 changed files with 28 additions and 4 deletions

View file

@ -2,12 +2,13 @@
import type { DropdownOptions } from "@utils/types";
interface Props {
id: string;
classes?: string;
options: DropdownOptions[];
}
const { id, options } = Astro.props;
const { id, options, classes } = Astro.props;
---
<select id=`dropdownBox-${id}` class="cursor-pointer flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2">
<select id=`dropdownBox-${id}` class=`${classes} cursor-pointer flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2`>
{options.map((el) =>
<option class="w-full bg-(--accent) rounded-sm p-1" value={el.value}>{el.name}</option>
)}

View file

@ -37,6 +37,15 @@ Object.keys(SearchEngines).forEach((k) =>
<div>
<p> Wisp Server </p>
<Input id="wispServerSwitcher" placeholder="Wisp server URL (EX: wss://radiusproxy.app/wisp/" />
<div class="mt-2 hidden" id="adBlocking">
<p> Ad Blocking </p>
<Dropdown id="adBlocking" options={
[
{ name: 'Enabled', value: 'enabled', default: true },
{ name: 'Disabled', value: 'disabled' }
]
} />
</div>
</div>
<div class="mt-2 mb-2 hidden" id="wispServerInfo">
<p class="text-blue-500" id="wispServerInfo-inner"> Checking URL... </p>
@ -90,9 +99,10 @@ Object.keys(SearchEngines).forEach((k) =>
const wispServerInfoInner = document.getElementById("wispServerInfo-inner") as HTMLParagraphElement;
const wispServerSave = document.getElementById("wispServerSave") as HTMLButtonElement;
const wispServerReset = document.getElementById("wispServerReset") as HTMLButtonElement;
const adBlocking = document.getElementById("adBlocking") as HTMLDivElement;
wispServerSwitcher.value = opts.storageManager.getVal("wispServer");
const resetVal = `${(location.protocol === "https:" ? "wss://" : "ws://")}${location.host}/wisp/`
const reset = (hide: boolean = true) => {
if (hide) wispServerInfo.classList.add("hidden");
wispServerInfoInner.innerText = "Checking URL..."
@ -100,6 +110,16 @@ Object.keys(SearchEngines).forEach((k) =>
wispServerInfoInner.classList.remove("text-green-500");
};
const adBlockingFunc = () => {
if (wispServerSwitcher.value === resetVal) {
adBlocking.classList.remove("hidden");
}
else {
adBlocking.classList.add("hidden");
}
}
adBlockingFunc();
wispServerSave.addEventListener("click", async () => {
const server = wispServerSwitcher.value;
wispServerInfo.classList.remove("hidden");
@ -114,7 +134,9 @@ Object.keys(SearchEngines).forEach((k) =>
reset(false);
wispServerInfoInner.innerText = "Wisp Server Set!";
wispServerInfoInner.classList.add("text-green-500");
//adBlocking.classList.contains("hidden") ? "" : adBlocking.classList.add("hidden");
await opts.sw.wispServer(wispServerSwitcher.value, true);
adBlockingFunc();
}
// We reset this after 4 seconds (any errors OR success)
@ -125,9 +147,10 @@ Object.keys(SearchEngines).forEach((k) =>
wispServerInfo.classList.remove("hidden");
wispServerInfoInner.innerText = "Wisp Server Reset!";
wispServerInfoInner.classList.add("text-green-500");
await opts.sw.wispServer(`${(location.protocol === "https:" ? "wss://" : "ws://")}${location.host}/wisp/`, true);
await opts.sw.wispServer(resetVal, true);
wispServerSwitcher.value = opts.storageManager.getVal("wispServer");
setTimeout(reset, 4000);
adBlockingFunc();
});
}