Finish report issue page

This commit is contained in:
Fred Boniface 2023-06-26 21:02:59 +01:00
parent 50f07bb32c
commit 60d6aa50fa
2 changed files with 56 additions and 3 deletions

View File

@ -0,0 +1,31 @@
<div id="container">
<p id="tick">&#10004;</p>
<p>Done</p>
</div>
<style>
#tick {
font-size: 45px;
margin: 0;
padding: 0;
}
#container {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:auto;
background-color:var(--overlay-color);
border-radius:15px;
padding:20px;
padding-bottom:1px;
min-width:90px;
max-width:90px
}
p {
padding-top:0px;
font-weight:bolder;
overflow-wrap:normal;
color: white;
}
</style>

View File

@ -4,9 +4,12 @@
import Nav from "$lib/navigation/nav.svelte"; import Nav from "$lib/navigation/nav.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import Loading from "$lib/navigation/loading.svelte"; import Loading from "$lib/navigation/loading.svelte";
import Done from "$lib/navigation/done.svelte";
const title = "Report Issue"; const title = "Report Issue";
let isLoading = false; let isLoading = false;
let isDone = false;
let isError = false;
let reportType = "", reportSubject = "", reportMsg = "", reportCollected let reportType = "", reportSubject = "", reportMsg = "", reportCollected
onMount(async () => { onMount(async () => {
@ -30,7 +33,7 @@
console.log("SEND DATA REQUESTED") console.log("SEND DATA REQUESTED")
isLoading = true isLoading = true
const formData = JSON.stringify({ const formData = JSON.stringify({
labels: [reportType], label: reportType,
subject: reportSubject, subject: reportSubject,
msg: `User Agent: ${reportCollected.userAgent}\n` + msg: `User Agent: ${reportCollected.userAgent}\n` +
`Browser: ${reportCollected.browser}\n` + `Browser: ${reportCollected.browser}\n` +
@ -43,14 +46,28 @@
const url = `https://owlboard.info/misc/issue` const url = `https://owlboard.info/misc/issue`
const options = { const options = {
method: "POST", method: "POST",
headers: {
"Content-Type": "application/json"
},
body: formData body: formData
} }
const res = await fetch(url, options) const res = await fetch(url, options)
console.log(formData) 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() { async function cancel() {
preFlight = false; preFlight = false;
isLoading = false;
isDone = false;
isError = false;
} }
</script> </script>
@ -60,13 +77,18 @@
<Loading /> <Loading />
{/if} {/if}
{#if !preFlight} {#if isDone}
<Done />
{/if}
{#if !preFlight && !isDone}
<p>Any data that you enter here will be visible publicly <p>Any data that you enter here will be visible publicly
<a href="https://git.fjla.uk/OwlBoard/backend/issues" target="_blank">here</a> <a href="https://git.fjla.uk/OwlBoard/backend/issues" target="_blank">here</a>
</p> </p>
<p>You will be shown all of the collected data before the form is submitted.</p> <p>You will be shown all of the collected data before the form is submitted.</p>
<form on:submit={submit}> <form on:submit={submit}>
<select class="formInputs" name="type" bind:value={reportType} placeholder="Choose Category"> <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="bug">Problem</option>
<option value="enhancement">Feature Request</option> <option value="enhancement">Feature Request</option>
<option value="question">Question</option> <option value="question">Question</option>