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"; import type { DropdownOptions } from "@utils/types";
interface Props { interface Props {
id: string; id: string;
classes?: string;
options: DropdownOptions[]; 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) => {options.map((el) =>
<option class="w-full bg-(--accent) rounded-sm p-1" value={el.value}>{el.name}</option> <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> <div>
<p> Wisp Server </p> <p> Wisp Server </p>
<Input id="wispServerSwitcher" placeholder="Wisp server URL (EX: wss://radiusproxy.app/wisp/" /> <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>
<div class="mt-2 mb-2 hidden" id="wispServerInfo"> <div class="mt-2 mb-2 hidden" id="wispServerInfo">
<p class="text-blue-500" id="wispServerInfo-inner"> Checking URL... </p> <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 wispServerInfoInner = document.getElementById("wispServerInfo-inner") as HTMLParagraphElement;
const wispServerSave = document.getElementById("wispServerSave") as HTMLButtonElement; const wispServerSave = document.getElementById("wispServerSave") as HTMLButtonElement;
const wispServerReset = document.getElementById("wispServerReset") as HTMLButtonElement; const wispServerReset = document.getElementById("wispServerReset") as HTMLButtonElement;
const adBlocking = document.getElementById("adBlocking") as HTMLDivElement;
wispServerSwitcher.value = opts.storageManager.getVal("wispServer"); wispServerSwitcher.value = opts.storageManager.getVal("wispServer");
const resetVal = `${(location.protocol === "https:" ? "wss://" : "ws://")}${location.host}/wisp/`
const reset = (hide: boolean = true) => { const reset = (hide: boolean = true) => {
if (hide) wispServerInfo.classList.add("hidden"); if (hide) wispServerInfo.classList.add("hidden");
wispServerInfoInner.innerText = "Checking URL..." wispServerInfoInner.innerText = "Checking URL..."
@ -100,6 +110,16 @@ Object.keys(SearchEngines).forEach((k) =>
wispServerInfoInner.classList.remove("text-green-500"); 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 () => { wispServerSave.addEventListener("click", async () => {
const server = wispServerSwitcher.value; const server = wispServerSwitcher.value;
wispServerInfo.classList.remove("hidden"); wispServerInfo.classList.remove("hidden");
@ -114,7 +134,9 @@ Object.keys(SearchEngines).forEach((k) =>
reset(false); reset(false);
wispServerInfoInner.innerText = "Wisp Server Set!"; wispServerInfoInner.innerText = "Wisp Server Set!";
wispServerInfoInner.classList.add("text-green-500"); wispServerInfoInner.classList.add("text-green-500");
//adBlocking.classList.contains("hidden") ? "" : adBlocking.classList.add("hidden");
await opts.sw.wispServer(wispServerSwitcher.value, true); await opts.sw.wispServer(wispServerSwitcher.value, true);
adBlockingFunc();
} }
// We reset this after 4 seconds (any errors OR success) // We reset this after 4 seconds (any errors OR success)
@ -125,9 +147,10 @@ Object.keys(SearchEngines).forEach((k) =>
wispServerInfo.classList.remove("hidden"); wispServerInfo.classList.remove("hidden");
wispServerInfoInner.innerText = "Wisp Server Reset!"; wispServerInfoInner.innerText = "Wisp Server Reset!";
wispServerInfoInner.classList.add("text-green-500"); 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"); wispServerSwitcher.value = opts.storageManager.getVal("wispServer");
setTimeout(reset, 4000); setTimeout(reset, 4000);
adBlockingFunc();
}); });
} }