Add the reactive parts
This commit is contained in:
parent
e21c051293
commit
411813aa4c
2 changed files with 28 additions and 4 deletions
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue