Last active
April 23, 2022 00:08
-
-
Save RossComputerGuy/4af398dd3cb5a1593f3977aaa8226977 to your computer and use it in GitHub Desktop.
CIS233W - Lab 3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <div id="topbar"> | |
| <form method="POST" enctype="multipart/form-data"> | |
| <input type="file" id="upload" name="data" accept=".json" /> | |
| <input type="submit" value="Upload JSON" /> | |
| </form> | |
| </div> | |
| <h3>Raw File</h3> | |
| <code id="raw"> | |
| <?php | |
| if (!is_null($_FILES["data"])) { | |
| $file = fopen($_FILES["data"]["tmp_name"], "r") or die("Failed to read file"); | |
| $contents = fread($file, filesize($_FILES["data"]["tmp_name"])); | |
| echo $contents; | |
| fclose($file); | |
| } | |
| ?> | |
| </code> | |
| <h3>Rendered output</h3> | |
| <div id="render"> | |
| </div> | |
| <script src="main.js"></script> | |
| <script> | |
| function handleError(e) { | |
| alert(`${e.name}: ${e.message}`) | |
| } | |
| window.onload = function() { | |
| const el = document.getElementById('raw') | |
| const r = document.getElementById('render') | |
| const text = el.innerText.length === 0 ? '"No input"' : el.innerText | |
| try { | |
| const p = JSON.parse(text) | |
| const v = render(p) | |
| r.appendChild(v) | |
| } catch (e) { | |
| handleError(e) | |
| console.error(e) | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function renderTableRow(row, isHeading) { | |
| isHeading = typeof isHeading === 'boolean' ? isHeading : false | |
| if (!Array.isArray(row)) throw new Error('Argument 1 is not an array') | |
| const el = document.createElement('tr') | |
| row.map((item) => { | |
| const el = document.createElement(isHeading ? 'th' : 'td') | |
| const r = render(item) | |
| el.appendChild(r) | |
| return el | |
| }).forEach((child) => el.appendChild(child)) | |
| return el | |
| } | |
| function renderTable(children, header) { | |
| if (!Array.isArray(children)) throw new Error('Argument 1 is not an array') | |
| const el = document.createElement('table') | |
| children = children.map((row) => renderTableRow(row)) | |
| header = Array.isArray(header) ? renderTableRow(header, true) : undefined | |
| const elements = [ | |
| header, | |
| ...children | |
| ].filter(v => !!v) | |
| elements.forEach((child) => el.appendChild(child)) | |
| return el | |
| } | |
| function renderList(children, isOrdered) { | |
| isOrdered = typeof isOrdered === 'boolean' ? isOrdered : false | |
| if (!Array.isArray(children)) throw new Error('Argument 1 is not an array') | |
| const el = document.createElement(isOrdered ? 'ol' : 'ul') | |
| children.map((child) => render(child)).forEach((child) => el.appendChild(child)) | |
| return el | |
| } | |
| function render(value) { | |
| const r = ({ | |
| 'number': () => value.toString(), | |
| 'string': () => value, | |
| 'boolean': () => value ? 'True' : 'False', | |
| 'function': () => (value.name.length > 0 ? value.name : 'anonymous function ') + '(' + new Array(value.length).fill(0).map((v, i) => `arg${i}`).join(', ') + ')', | |
| 'object': () => { | |
| if (Array.isArray(value)) { | |
| return renderList(value, true) | |
| } else { | |
| return renderTable(Object.entries(value), [ 'Key', 'Value' ]) | |
| } | |
| }, | |
| 'undefined': () => 'Undefined' | |
| })[typeof value] | |
| if (typeof r !== 'function') throw new Error('Unsupported type') | |
| const ret = r() | |
| if (typeof ret === 'string') { | |
| const el = document.createElement('p') | |
| el.innerText = ret | |
| el.classList.add('typed-' + typeof value) | |
| return el | |
| } | |
| return ret | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment