Frontend: Prep 'Report an Issue' for backend
Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
parent
8627f9cd60
commit
64953e57e1
@ -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()">⇦</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
77
static/js/issue.js
Normal 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();
|
||||
}
|
||||
@ -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
20
static/styles/issue.css
Normal 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user