Prettier formatting
This commit is contained in:
Fred Boniface
@@ -1,76 +1,80 @@
|
||||
<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 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';
|
||||
|
||||
const title = "Report Issue";
|
||||
let isLoading = false;
|
||||
let isDone = false;
|
||||
let isError = false;
|
||||
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 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 = `https://owlboard.info/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;
|
||||
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 = `https://owlboard.info/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}
|
||||
@@ -82,88 +86,113 @@
|
||||
{/if}
|
||||
|
||||
{#if !preFlight && !isDone}
|
||||
<p>Any data that you enter here will be visible publicly
|
||||
<a href="https://git.fjla.uk/OwlBoard/backend/issues" target="_blank">here</a>
|
||||
<p>
|
||||
Any data that you enter here will be visible publicly
|
||||
<a href="https://git.fjla.uk/OwlBoard/backend/issues" target="_blank"
|
||||
>here</a
|
||||
>
|
||||
</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}>
|
||||
<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="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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</Island>
|
||||
{/if}
|
||||
<Nav />
|
||||
|
||||
<style>
|
||||
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: 250px;
|
||||
min-width: 100px;
|
||||
}
|
||||
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(--overlay-color);
|
||||
color: white;
|
||||
font-family: urwgothic, sans-serif;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
width: 25%;
|
||||
height: 30px;
|
||||
max-width: 100px;
|
||||
}
|
||||
h2 {color: white;}
|
||||
.dataType {color: white;}
|
||||
.overlayButtons {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
</style>
|
||||
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: 250px;
|
||||
min-width: 100px;
|
||||
}
|
||||
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(--overlay-color);
|
||||
color: white;
|
||||
font-family: urwgothic, sans-serif;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
width: 25%;
|
||||
height: 30px;
|
||||
max-width: 100px;
|
||||
}
|
||||
h2 {
|
||||
color: white;
|
||||
}
|
||||
.dataType {
|
||||
color: white;
|
||||
}
|
||||
.overlayButtons {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user