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="author" content="Frederick Boniface">
|
||||||
<meta name="theme-color" content="#155bb7">
|
<meta name="theme-color" content="#155bb7">
|
||||||
<link rel="stylesheet" type="text/css" href="./styles/main.css"/>
|
<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="icon" type="image/svg+xml" href="./images/icon.svg"/>
|
||||||
<link rel="manifest" type="application/json" href="./manifest.json"/>
|
<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>
|
<title>OwlBoard - Report</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- Loading Box -->
|
||||||
|
<div id="loading">
|
||||||
|
<div class="spinner">
|
||||||
|
</div>
|
||||||
|
<p id="loading_desc">Loading</p>
|
||||||
|
</div>
|
||||||
<div id="top_button" class="hide_micro">
|
<div id="top_button" class="hide_micro">
|
||||||
<button aria-label="Back" class="sidebar_control" onclick="history.back()">⇦</button>
|
<button aria-label="Back" class="sidebar_control" onclick="history.back()">⇦</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -23,13 +31,22 @@
|
||||||
<img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
|
<img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
|
||||||
</picture>
|
</picture>
|
||||||
<h2>Report an Issue</h2>
|
<h2>Report an Issue</h2>
|
||||||
<p>This page's functionality is not yet implemented.</p>
|
<p>To help diagnosing an issue, data about your browser and device will be
|
||||||
<form>
|
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>
|
<label for="subject">Subject:</label><br>
|
||||||
<input type="text" name="subject" id="subject" class="text-entry"/><br>
|
<input type="text" name="subject" id="subject" class="text-entry"/><br>
|
||||||
<label for="content">Message:</label><br>
|
<label for="content">Message:</label><br>
|
||||||
<textarea name="content" id="content" class="text-entry-long"></textarea><br>
|
<textarea name="message" id="message" class="text-entry-long"></textarea><br>
|
||||||
<input type="submit" name="submit" id="submit" label="Submit" class="lookup-button">
|
<input type="submit" name="submit" id="submit" label="Preview" class="lookup-button" onclick="submit()">
|
||||||
</form>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -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()
|
getQl()
|
||||||
await hideLoading();
|
await hideLoading();
|
||||||
await showDone();
|
await showDone();
|
||||||
|
navigator.vibrate(500);
|
||||||
await delay(600);
|
await delay(600);
|
||||||
hideDone();
|
hideDone();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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