Frontend: Prep 'Report an Issue' for backend

Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-30 19:16:25 +00:00
parent 8627f9cd60
commit 64953e57e1
4 changed files with 121 additions and 6 deletions

View File

@ -7,12 +7,20 @@
<meta name="author" content="Frederick Boniface">
<meta name="theme-color" content="#155bb7">
<link rel="stylesheet" type="text/css" href="./styles/main.css"/>
<link rel="stylesheet" type="text/css" href="./styles/issue.css"/>
<link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
<link rel="manifest" type="application/json" href="./manifest.json"/>
<!-- NO SCRIPTS LOADED - NOT REQUIRED AT PRESENT -->
<script src="./js/lib.main.js" defer></script>
<script src="./js/issue.js" defer></script>
<title>OwlBoard - Report</title>
</head>
<body>
<!-- Loading Box -->
<div id="loading">
<div class="spinner">
</div>
<p id="loading_desc">Loading</p>
</div>
<div id="top_button" class="hide_micro">
<button aria-label="Back" class="sidebar_control" onclick="history.back()">&#8678;</button>
</div>
@ -23,13 +31,22 @@
<img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
</picture>
<h2>Report an Issue</h2>
<p>This page's functionality is not yet implemented.</p>
<form>
<p>To help diagnosing an issue, data about your browser and device will be
collected alongside the data that you enter below.</p>
<p>The data will be available publically in the <a href="https://git.fjla.uk/fred.boniface/owlboard/issues">
OwlBoard Issue Tracker</a>. A preview will be shown before the data is sent.</p>
<label for="subject">Subject:</label><br>
<input type="text" name="subject" id="subject" class="text-entry"/><br>
<label for="content">Message:</label><br>
<textarea name="content" id="content" class="text-entry-long"></textarea><br>
<input type="submit" name="submit" id="submit" label="Submit" class="lookup-button">
</form>
<textarea name="message" id="message" class="text-entry-long"></textarea><br>
<input type="submit" name="submit" id="submit" label="Preview" class="lookup-button" onclick="submit()">
<div id="preflight">
<h3>Check & Send</h3>
<h3>---</h3>
<h4 id="pre_subject"></h4>
<p id="pre_message"></p>
<button id="send" class="lookup-button" onclick="send()">Send</button>
<button id="cancel" class="lookup-button" onclick="cancel()">Cancel</button>
</div>
</body>
</html>

77
static/js/issue.js Normal file
View File

@ -0,0 +1,77 @@
init();
async function init() {
hideLoading()
}
async function submit() {
setLoadingDesc("Collecting\nData")
showLoading()
var browserData = await getBrowserData();
setLoadingDesc("Reading\nForm")
var formData = await getFormData();
preflight({browserData: browserData, formData: formData})
}
async function getFormData() {
let data = {}
data.subject = document.getElementById("subject").value
data.message = document.getElementById("message").value
return data
}
async function getBrowserData() {
let data = {}
data.userAgent = navigator.userAgent
data.userAgentData = JSON.stringify(navigator.userAgentData)
data.localStorage = JSON.stringify(await storageAvailable('localStorage'))
data.sessionStorage = JSON.stringify(await storageAvailable('sessionStorage'))
data.viewport = `${window.innerWidth} x ${window.innerHeight}`
return data
}
async function preflight(data) {
document.getElementById("pre_subject").textContent = data.formData.subject
pre_msg = `UserAgent: ${data.browserData.userAgent}
\nUserAgentData: ${data.browserData.userAgentData}
\nlocalStorage Avail: ${data.browserData.localStorage}
\nsessionStorage Avail: ${data.browserData.sessionStorage}
\nViewport size: ${data.browserData.viewport}
\nUser message:\n
${data.formData.message}`
document.getElementById("pre_message").innerText = pre_msg
hideLoading()
document.getElementById("preflight").style = "display: block"
sessionStorage.setItem("preflight_subject", data.formData.subject)
sessionStorage.setItem("preflight_msg", pre_msg)
}
async function cancel() {
document.getElementById("preflight").style = "display: none"
}
async function send() {
setLoadingDesc("Sending\nData")
showLoading()
var subject = sessionStorage.getItem("preflight_subject");
var msg = sessionStorage.getItem("preflight_msg")
if (typeof subject != "string") {
subject = document.getElementById("preflight_subject").innerText
}
if (typeof msg != "string") {
msg = document.getElementById("preflight_msg")
}
var payload = JSON.stringify({subject: subject, msg: msg})
console.log(payload);
let opt = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
redirect: 'follow',
body: payload
}
await fetch("/api/v1/issue", opt)
hideLoading();
}

View File

@ -42,6 +42,7 @@ async function clearQl(){
getQl()
await hideLoading();
await showDone();
navigator.vibrate(500);
await delay(600);
hideDone();
}

20
static/styles/issue.css Normal file
View File

@ -0,0 +1,20 @@
#preflight {
display: none;
border-radius: 20px;
width: 93%;
max-height: 80%;
position: fixed;
z-index: 10;
top: 50px;
left: 0;
margin: 2%;
padding-top: 30px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
margin-bottom: 25px;
background-color: var(--overlay-color);
color: var(--second-text-color);
overflow: auto;
}