owlboard-svelte/src/routes/more/report/+page.svelte

<script>
    import Header from "$lib/navigation/header.svelte";
    import Island from "$lib/islands/island.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import { onMount } from "svelte";
    import Loading from "$lib/navigation/loading.svelte";
    import Done from "$lib/navigation/done.svelte";
    import { getApiUrl } from "$lib/scripts/upstream";

    const title = "Report Issue";
    let isLoading = false;
    let isDone = false;
    let isError = false;

    let reportType = "",
        reportSubject = "",
        reportMsg = "",
        reportCollected;
    onMount(async () => {
        reportCollected = {
            userAgent: navigator.userAgent,
            browser: navigator.appName,
            version: navigator.appVersion,
            platform: navigator.platform,
            viewport: `${window.innerWidth} x ${window.innerHeight}`,
        };
    });

    let preFlight = false;

    async function submit() {
        console.log(reportType, reportSubject, reportMsg);
        preFlight = true;
    }

    async function send() {
        console.log("SEND DATA REQUESTED");
        isLoading = true;
        const formData = JSON.stringify({
            label: reportType,
            subject: reportSubject,
            msg:
                `User Agent: ${reportCollected.userAgent}\n` +
                `Browser: ${reportCollected.browser}\n` +
                `BrowserVersion: ${reportCollected.version}\n` +
                `Platform: ${reportCollected.platform}\n` +
                `Viewport: ${reportCollected.viewport}\n\n\n` +
                `User Message:\n` +
                `${reportMsg}`,
        });
        const url = `${getApiUrl()}/misc/issue`;
        const options = {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: formData,
        };
        const res = await fetch(url, options);
        if (res.status == 200) {
            isLoading = false;
            isDone = true;
            await new Promise((r) => setTimeout(r, 2000));
            window.location.href = "/";
        } else {
            isLoading = false;
            isError = true;
        }
    }

    async function cancel() {
        preFlight = false;
        isLoading = false;
        isDone = false;
        isError = false;
    }
</script>

<Header {title} />

{#if isLoading}
    <Loading />
{/if}

{#if isDone}
    <Done />
{/if}

{#if !preFlight && !isDone}
    <p>Get help on the <a href="https://www.facebook.com/owlboard.support">OwlBoard Support Facebook Page</a></p>
    <p>
        Or submit an issue, you can check for existing reports
        <a href="https://git.fjla.uk/OwlBoard/backend/issues" target="_blank">here</a>
        before submitting a new issue.
    </p>
    <p>You will be shown all of the collected data before the form is submitted.</p>
    <form on:submit={submit}>
        <select class="formInputs" name="type" bind:value={reportType} placeholder="Choose Category">
            <option value="" disabled selected>Choose an Issue Type</option>
            <option value="bug">Problem</option>
            <option value="enhancement">Feature Request</option>
            <option value="question">Question</option>
            <option value="user-support">Unable to sign up</option>
        </select>
        <br />
        <input class="formInputs" type="text" bind:value={reportSubject} placeholder="Subject" />
        <br />
        <textarea class="formInputs" bind:value={reportMsg} placeholder="Enter your message..." />
        <br />
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </form>
{:else}
    <Island>
        <h2>Device Data:</h2>
        <p><span class="dataType">User Agent: </span>{reportCollected.userAgent}</p>
        <p>
            <span class="dataType">Browser: </span>{reportCollected.browser} - {reportCollected.version}
        </p>
        <p><span class="dataType">Platform: </span>{reportCollected.platform}</p>
        <p><span class="dataType">Viewport: </span> {reportCollected.viewport}</p>
        <h2>Reported Data:</h2>
        <p><span class="dataType">Report Type: </span>{reportType}</p>
        <p>{reportSubject}</p>
        <p>{reportMsg}</p>
        <button class="overlayButtons" on:click={send}>Send</button>
        <button class="overlayButtons" on:click={cancel}>Cancel</button>
    </Island>
{/if}
<Nav />

<style>
    p {
        margin-left: 10px;
        margin-right: 10px;
    }
    select {
        text-align: center;
        border: none;
        border-radius: 50px;
        height: 30px;
        background-color: white;
    }
    .formInputs {
        margin: 10px;
        font-family: urwgothic, sans-serif;
        font-size: 16px;
        border: none;
        width: 50%;
        max-width: 450px;
        min-width: 250px;
    }
    input {
        text-align: center;
        border-radius: 50px;
        height: 30px;
    }
    textarea {
        text-align: left;
        border-radius: 10px;
        padding-left: 5px;
        padding-right: 5px;
        height: 30vh;
        min-height: 150px;
        max-height: 400px;
    }
    button {
        background-color: var(--island-bg-color);
        color: var(--main-text-color);
        font-family: urwgothic, sans-serif;
        font-size: 16px;
        border: none;
        border-radius: 50px;
        width: 25%;
        height: 30px;
        max-width: 100px;
        box-shadow: var(--box-shadow);
    }
    h2 {
        color: white;
    }
    .dataType {
        color: white;
    }
    .overlayButtons {
        background-color: var(--main-bg-color);
    }
</style>