diff options
Diffstat (limited to 'src/public')
-rw-r--r-- | src/public/css/style.css | 127 | ||||
-rw-r--r-- | src/public/js/form.js | 128 |
2 files changed, 121 insertions, 134 deletions
diff --git a/src/public/css/style.css b/src/public/css/style.css index a106926..3165d06 100644 --- a/src/public/css/style.css +++ b/src/public/css/style.css @@ -1,126 +1,117 @@ body { - background-color: black; - color: white; - text-align: center; - vertical-align: middle; - position: relative; + background-color: black; + color: white; + text-align: center; + vertical-align: middle; + position: relative; } .header { - margin: 5px; - font-family: "Times New Roman", Times, serif; + margin: 5px; + font-family: 'Times New Roman', Times, serif; } - /* Customize HTML paragraph element margins */ p { - display: block; - margin-top: 1em; - margin-bottom: 1em; - margin-left: 15%; - margin-right: 15%; + display: block; + margin-top: 1em; + margin-bottom: 1em; + margin-left: 15%; + margin-right: 15%; } - /*-------------------------Buttons-----------------------------------------------------*/ - /* Used for id=button1 */ #actuate-but { - background-color: #0a3f73; - border: solid; - border-color: #d5d6d2; - color: white; - padding: 10px 20px; - text-align: center; - text-decoration: none; - font-family: "Constantia", sans-serif; - border-radius: 10px; - display: inline-block; - font-size: 20px; + background-color: #0a3f73; + border: solid; + border-color: #d5d6d2; + color: white; + padding: 10px 20px; + text-align: center; + text-decoration: none; + font-family: 'Constantia', sans-serif; + border-radius: 10px; + display: inline-block; + font-size: 20px; } - /* Used for id=button1 - What the button looks like when a user puts one's cursor on it */ #actuate-but:hover { - background-color: white; - color: maroon; - cursor: pointer; + background-color: white; + color: maroon; + cursor: pointer; } - a { - color: blue; - text-decoration: none; + color: blue; + text-decoration: none; } - /* Used for the about page*/ .about { - color: white; - text-align: center; - margin: 5px; - font-size: large; + color: white; + text-align: center; + margin: 5px; + font-size: large; } - #Background { - color: #ffbb00; + color: #ffbb00; } #Pendulum_info { - /* #4294cf is similar to a light blue color */ - color: #4294cf; + /* #4294cf is similar to a light blue color */ + color: #4294cf; } - /* Used for id=Start */ #Start { - font-size: 25px; - font-weight: bold; - color: #ffbb00; + font-size: 25px; + font-weight: bold; + color: #ffbb00; } - .navbar { - top: 0; - width: 100%; - list-style-type: none; - margin: 0; - padding: 0; - overflow: hidden; - background-color: #7a0019; + top: 0; + width: 100%; + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #7a0019; } .navbar li { - float: left; + float: left; } .navbar li a { - display: block; - color: white; - text-align: center; - padding: 14px 16px; - font-family: "Raleway", sans-serif; - text-decoration: none; + display: block; + color: white; + text-align: center; + padding: 14px 16px; + font-family: 'Raleway', sans-serif; + text-decoration: none; } .navbar li a:hover { - background-color: #ffcc33; - color: #000000; - /* Remove underlines from links */ - text-decoration: none; + background-color: #ffcc33; + color: #000000; + /* Remove underlines from links */ + text-decoration: none; } h2 { - font-size: larger; + font-size: larger; } .error { - color: red; -}
\ No newline at end of file + color: red; +} diff --git a/src/public/js/form.js b/src/public/js/form.js index 9e926fa..1e9eaca 100644 --- a/src/public/js/form.js +++ b/src/public/js/form.js @@ -1,84 +1,80 @@ // This is split into comments so it doesn't look as gross with the closure tabs window.onload = function () { - document.getElementById('nojs').hidden = true; - document.getElementById('block').hidden = false; + document.getElementById('nojs').hidden = true; + document.getElementById('block').hidden = false; }; // File submit AJAX request // After successful upload, actuate the file by calling actuate() on the successfully uploaded file document.getElementById('upload').onsubmit = function () { - // Reset error message and success message - document.getElementById('upload-err').innerText = ''; - document.getElementById('actuate-err').innerText = ''; - document.getElementById('upload-response').innerText = ''; - document.getElementById('download-link').innerText = ''; - // Make AJAX request - let xhr = new XMLHttpRequest(); - xhr.open('POST', '/api/v1/upload'); - let formData = new FormData(this); - xhr.send(formData); - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - let response = JSON.parse(xhr.responseText); - if (xhr.status === 201) { - // Display upload success message to the user - document.getElementById('upload-response').innerText = response.msg; - actuate(response); - } else { - // Display upload error message to the user - document.getElementById('upload-err').innerText = response.error; - // DEBUG: Print full error if unknown error occurs - if (xhr.status === 500) - console.error(response.error_msg); - } - } - }; - document.getElementById('upload').reset(); - return false; + // Reset error message and success message + document.getElementById('upload-err').innerText = ''; + document.getElementById('actuate-err').innerText = ''; + document.getElementById('upload-response').innerText = ''; + document.getElementById('download-link').innerText = ''; + // Make AJAX request + let xhr = new XMLHttpRequest(); + xhr.open('POST', '/api/v1/upload'); + let formData = new FormData(this); + xhr.send(formData); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + let response = JSON.parse(xhr.responseText); + if (xhr.status === 201) { + // Display upload success message to the user + document.getElementById('upload-response').innerText = response.msg; + actuate(response); + } else { + // Display upload error message to the user + document.getElementById('upload-err').innerText = response.error; + // DEBUG: Print full error if unknown error occurs + if (xhr.status === 500) console.error(response.error_msg); + } + } + }; + document.getElementById('upload').reset(); + return false; }; // Actuate button AJAX request // Should always be called after upload // Implies that upload has been successful since it relies on the upload response -// +// function actuate(file) { - let xhr = new XMLHttpRequest(); - xhr.open('POST', '/api/v1/actuate'); - let data = { - file: file.file - }; - xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); - xhr.setRequestHeader('X-CSRF-TOKEN', file.csrf); - xhr.send(JSON.stringify(data)); - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - let response = JSON.parse(xhr.responseText); - if (xhr.status === 200 || xhr.status === 500) { - createDownload(response.file); - } - if (xhr.status === 500) { - document.getElementById('actuate-err').innerText = response.error; - // DEBUG: Print full error if unknown error occurs - console.error(response.error_msg); - } - - } - return; - }; + let xhr = new XMLHttpRequest(); + xhr.open('POST', '/api/v1/actuate'); + let data = { + file: file.file, + }; + xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); + xhr.setRequestHeader('X-CSRF-TOKEN', file.csrf); + xhr.send(JSON.stringify(data)); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + let response = JSON.parse(xhr.responseText); + if (xhr.status === 200 || xhr.status === 500) { + createDownload(response.file); + } + if (xhr.status === 500) { + document.getElementById('actuate-err').innerText = response.error; + // DEBUG: Print full error if unknown error occurs + console.error(response.error_msg); + } + } + return; + }; } - // Creates the download element function createDownload(response) { - if (!response) - return; - const tempName = response.filename; - const downloadName = response.name.split('.')[ 0 ]; - const downloadLink = document.createElement('a'); - downloadLink.setAttribute('href', `/api/v1/download/?filename=${tempName}`); - downloadLink.setAttribute('download', `${downloadName}.csv`); - downloadLink.innerText = 'Download CSV of results here.'; - document.getElementById('download-link').appendChild(downloadLink); - return; -}
\ No newline at end of file + if (!response) return; + const tempName = response.filename; + const downloadName = response.name.split('.')[0]; + const downloadLink = document.createElement('a'); + downloadLink.setAttribute('href', `/api/v1/download/?filename=${tempName}`); + downloadLink.setAttribute('download', `${downloadName}.csv`); + downloadLink.innerText = 'Download CSV of results here.'; + document.getElementById('download-link').appendChild(downloadLink); + return; +} |