Revelav3/src/pages/[lang]/settings/pr.astro

---
import SettingsCard from "@components/settings/SettingsCard.astro";
import Toast from "@components/toasts/Toast.svelte";
import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
import Layout from "@layouts/Layout.astro";
import SettingsLayout from "@layouts/SettingsLayout.astro";
import SettingsSection from "@layouts/SettingsSection.astro";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
export function getStaticPaths() {
    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
    return STATIC_PATHS;
}
export const prerender = true;
---

<Layout title="Settings">
  <SettingsLayout title={t("settings.proxy")}>
  <SettingsSection title="Proxy" subtitle="A wide variety of settings for the proxy/rewriter itself.">
    <div class="w-full h-full flex flex-col items-center justify-center flex-wrap md:flex-row md:items-start md:justify-start gap-4">
        <SettingsCard 
            title="Proxy"
            description="Choose the proxy/rewriter that fits your needs"
            input={{input:false}}
            button={{name: 'Change', id: 'setproxy'}}
            select={{
                select: true,
                name: 'proxy',
                options: [
                    {name: 'Automatic', value: 'automatic', disabled: false},
                    {name: 'Ultraviolet', value: 'uv', disabled: false},
                    {name: 'Rammerhead', value: 'rh', disabled: false}
                ]
            }}
        />
        <SettingsCard
            title="Open in"
            description="Choose how to open your sites"
            input={{input:false}}
            button={{name: 'Set', id: 'setopenin'}}
            select={{
                select: true,
                name: 'openin',
                options: [
                    {name: 'Embed', value: 'embed', disabled: false},
                    {name: 'Direct', value: 'direct', disabled: false},
                    {name: 'About:Blank', value: 'a:b', disabled: false},
                    {name: 'Blob', value: 'blob', disabled: false}
                ]
            }}
        />
        <SettingsCard
            title="Search Engine"
            description="Choose your search engine"
            input={{input: false}}
            button={{name: 'Set Search Engine', id: 'setsearchengine'}}
            select={{
                select: true,
                name: 'searchengine',
                options: [
                    {name: 'DuckDuckGo', value: 'ddg', disabled: false},
                    {name: 'Google', value: 'google', disabled: false},
                    {name: 'Bing', value: 'bing', disabled: false}
                ]
            }}
        />
        <SettingsCard
            title="Wisp Server"
            description="Choose the wisp server you feel is the fastest"
            input={{input: false}}
            button={{name: 'Select', id: 'setwispurl'}}
            select={{
                select: true,
                name: 'wispurl',
                options: [
                    {name: 'Default', value: 'default', disabled: false},
                    {name: 'Ruby Network (US)', value: 'ruby', disabled: false}
                ]
            }}
        />
        <SettingsCard
            title="Transport"
            description="Select the transport to use"
            input={{input: false}}
            button={{name: 'Set transport', id: 'settransport'}}
            select={{
                select: true,
                name: 'transport',
                options: [
                    {name: 'Epoxy', value: 'epoxy', disabled: false},
                    {name: 'Libcurl', value: 'libcurl', disabled: false}
                ]
            }}
        />
      </div>
    </SettingsSection>
  </SettingsLayout>
  <ToastWrapper client:load>
    <Toast toastProp={{
            toastType: 'success',
            text: 'Successfully changed proxy!',
            class: 'proxyMessage'
        }}
    client:load />
    <Toast toastProp={{
        toastType: 'success',
        text: 'Saved selection!',
        class: 'openInMessage'
        }}
    client:load />
    <Toast toastProp={{
        toastType: 'success',
        text: 'Saved Search Engine Selection!',
        class: 'searchEngineMessage'
        }}
    client:load />
    <Toast toastProp={{
        toastType: 'success',
        text: 'Wisp server selected!',
        class: 'wispUrlMessage'
        }}
    client:load />
    <Toast toastProp={{
        toastType: 'success',
        text: 'Transport set!',
        class: 'transportMessage'
        }}
    client:load />
  </ToastWrapper>
</Layout>
<script>
    import { toast } from "@utils/toast.ts";
    import { settings, Settings as SettingsEnum } from "@utils/settings/index";
    function setup(proxySelectVal: HTMLSelectElement, openInVal: HTMLSelectElement, searchEngineVal: HTMLSelectElement, wispServerVal: HTMLSelectElement, transportVal: HTMLSelectElement) {
        proxySelectVal.value = localStorage.getItem(SettingsEnum.ProxySettings.proxy) as string;
        openInVal.value = localStorage.getItem(SettingsEnum.ProxySettings.openIn) as string;
        searchEngineVal.value = localStorage.getItem(SettingsEnum.ProxySettings.searchEngine) as string;
        wispServerVal.value = localStorage.getItem(SettingsEnum.ProxySettings.wispServerURL) as string;
        transportVal.value = localStorage.getItem(SettingsEnum.ProxySettings.transport) as string;
    }
    document.addEventListener("astro:page-load", () => {
        try {
            const proxyButton = document.getElementById("setproxy") as HTMLButtonElement;
            const proxySelectVal = document.getElementById('proxy') as HTMLSelectElement;
            const openInButton = document.getElementById('setopenin') as HTMLButtonElement;
            const openInVal = document.getElementById('openin') as HTMLSelectElement;
            const searchEngineButton = document.getElementById('setsearchengine') as HTMLButtonElement;
            const searchEngineVal = document.getElementById('searchengine') as HTMLSelectElement;
            const wispServerButton = document.getElementById('setwispurl') as HTMLButtonElement;
            const wispServerVal = document.getElementById('wispurl') as HTMLSelectElement;
            const transportButton = document.getElementById('settransport') as HTMLButtonElement;
            const transportVal = document.getElementById('transport') as HTMLSelectElement;
            setup(proxySelectVal, openInVal, searchEngineVal, wispServerVal, transportVal);
            proxyButton.addEventListener("click", () => {
                settings.proxySettings.changeProxy(proxySelectVal.value);
                toast('.proxyMessage');
            });
            openInButton.addEventListener("click", () => {
                settings.proxySettings.openIn(openInVal.value)
                toast('.openInMessage');
            });
            searchEngineButton.addEventListener('click', () => {
                settings.proxySettings.setSearchEngine(searchEngineVal.value);
                toast('.searchEngineMessage');
            });
            wispServerButton.addEventListener('click', () => {
                settings.proxySettings.setWispURL(wispServerVal.value);
                toast('.wispUrlMessage');
            });
            transportButton.addEventListener('click', () => {
                settings.proxySettings.setTransport(transportVal.value);
                toast('.transportMessage');
            });
        }
        catch(_) {/* Don't return anything on purpose */}
    })
</script>