Created
October 15, 2023 22:38
-
-
Save bmcculley/86fbe41aa7ebe85b19305b23f0f52792 to your computer and use it in GitHub Desktop.
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>List Files</title> | |
| <style type="text/css"> | |
| .table { | |
| /* Remove spacing between table cells (from Normalize.css) */ | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| empty-cells: show; | |
| border: 1px solid #cbcbcb; | |
| } | |
| .table caption { | |
| color: #000; | |
| font: italic 85%/1 arial, sans-serif; | |
| padding: 1em 0; | |
| text-align: center; | |
| } | |
| .table td, | |
| .table th { | |
| border-left: 1px solid #cbcbcb;/* inner column border */ | |
| border-width: 0 0 0 1px; | |
| font-size: inherit; | |
| margin: 0; | |
| overflow: visible; /*to make ths where the title is really long work*/ | |
| padding: 6px 12px; /* cell padding */ | |
| } | |
| .table td:first-child, | |
| .table th:first-child { | |
| border-left-width: 0; | |
| } | |
| .table thead { | |
| background: #e0e0e0; | |
| color: #000; | |
| text-align: left; | |
| vertical-align: bottom; | |
| } | |
| .table td { | |
| background-color: transparent; | |
| } | |
| .table-odd td { | |
| background-color: #f2f2f2; | |
| } | |
| /* nth-child selector for modern browsers */ | |
| .table-striped tr:nth-child(2n-1) td { | |
| background-color: #f2f2f2; | |
| } | |
| /* BORDERED TABLES */ | |
| .table-bordered td { | |
| border-bottom: 1px solid #cbcbcb; | |
| } | |
| .table-bordered tbody > tr:last-child td, | |
| .table-horizontal tbody > tr:last-child td { | |
| border-bottom-width: 0; | |
| } | |
| /* HORIZONTAL BORDERED TABLES */ | |
| .table-horizontal td, | |
| .table-horizontal th { | |
| border-width: 0 0 1px 0; | |
| border-bottom: 1px solid #cbcbcb; | |
| } | |
| .table-horizontal tbody > tr:last-child td { | |
| border-bottom-width: 0; | |
| } | |
| </style> | |
| </head> | |
| <body onload="setFSWidth()"> | |
| <fieldset id="fs-servers"> | |
| <legend for="servers">Choose Target</legend> | |
| <select name="servers" id="servers"> | |
| <option value="prd" selected>Production</option> | |
| <option value="tst">Test</option> | |
| </select> | |
| </fieldset> | |
| <br/> | |
| <table id="files-table" class="table table-striped"> | |
| <thead> | |
| <th>Name</th> | |
| <th>Size</th> | |
| <th>Last Modified</th> | |
| <th>Action</th> | |
| </thead> | |
| <tbody id="file-list"> | |
| </tbody> | |
| </table> | |
| <script type="text/javascript"> | |
| class File { | |
| constructor(name, dir, size, lastmod) { | |
| this.name = name; | |
| this.dir = dir; | |
| this.size = size; | |
| this.lastmod = lastmod; | |
| } | |
| /** | |
| * Format bytes as human-readable text. | |
| * Taken from: https://stackoverflow.com/a/14919494 | |
| * | |
| * @param bytes Number of bytes. | |
| * @param si True to use metric (SI) units, aka powers of 1000. False to use | |
| * binary (IEC), aka powers of 1024. | |
| * @param dp Number of decimal places to display. | |
| * | |
| * @return Formatted string. | |
| */ | |
| humanFileSize(bytes, si=false, dp=1) { | |
| const thresh = si ? 1000 : 1024; | |
| if (Math.abs(bytes) < thresh) { | |
| return bytes + ' B'; | |
| } | |
| const units = si | |
| ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] | |
| : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']; | |
| let u = -1; | |
| const r = 10**dp; | |
| do { | |
| bytes /= thresh; | |
| ++u; | |
| } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1); | |
| return bytes.toFixed(dp) + ' ' + units[u]; | |
| } | |
| /** | |
| * Format a time string as a human-readable timestamp. | |
| * | |
| * @param dateStr a date string | |
| * | |
| * @return Formatted string | |
| */ | |
| humanLocalDate(dateStr) { | |
| const d = new Date(dateStr); | |
| return d.toLocaleDateString() + ' ' + d.toLocaleTimeString(); | |
| } | |
| /** | |
| * Format file information to HTML | |
| * | |
| * @return HTML formatted file information | |
| */ | |
| fileHTML() { | |
| return `<td class="name">${this.name}</td> | |
| <td class="size">${this.humanFileSize(this.size)}</td> | |
| <td class="lastmod">${this.humanLocalDate(this.lastmod)}</td> | |
| <td class="copy"><button onclick="copyFile('${this.name}')">Copy</button></td> | |
| ` | |
| } | |
| /** | |
| * Create and append a new file node to the list. | |
| * | |
| */ | |
| append(docId) { | |
| const fileElement = document.createElement("tr"); | |
| fileElement.innerHTML = this.fileHTML(); | |
| document.getElementById(docId).appendChild(fileElement); | |
| } | |
| } | |
| function copyFile(name) { | |
| let target = document.getElementById('servers').value; | |
| console.log(`Copy file ${name} to ${target}`); | |
| } | |
| function setFSWidth() { | |
| let tableWidth = document.getElementById('files-table').offsetWidth; | |
| document.getElementById('fs-servers').style.width = `${tableWidth}px`; | |
| } | |
| // api call | |
| let jd = '{"files":[{"name":"0b57a3ce44.txt","dir":false,"size":1866465280,"lastmod":"2023-10-15T18:21:43.295889116-04:00"},{"name":"5a16320d08.txt","dir":false,"size":1337982976,"lastmod":"2023-10-15T18:21:35.675803973-04:00"},{"name":"create.sh","dir":false,"size":182,"lastmod":"2023-10-15T18:21:23.611669172-04:00"},{"name":"54b436ec03.txt","dir":false,"size":1939865600,"lastmod":"2023-10-15T18:19:27.194368384-04:00"},{"name":"b211b329af.txt","dir":false,"size":1043333120,"lastmod":"2023-10-15T18:19:21.370303309-04:00"},{"name":"79c87d35e1.txt","dir":false,"size":1805647872,"lastmod":"2023-10-15T18:19:18.226268179-04:00"},{"name":"90372af499.txt","dir":false,"size":198180864,"lastmod":"2023-10-15T18:19:12.782207351-04:00"},{"name":"5d6a5af6e9.txt","dir":false,"size":1117782016,"lastmod":"2023-10-15T18:19:12.174200557-04:00"},{"name":"3a88997100.txt","dir":false,"size":252706816,"lastmod":"2023-10-15T18:19:08.80216288-04:00"},{"name":"1efbf99de8.txt","dir":false,"size":1758461952,"lastmod":"2023-10-15T18:19:08.022154165-04:00"},{"name":"d46173993f.txt","dir":false,"size":176160768,"lastmod":"2023-10-15T18:19:02.726094989-04:00"},{"name":"e8e7f36fc9.txt","dir":false,"size":1129316352,"lastmod":"2023-10-15T18:19:02.174088822-04:00"},{"name":"5e3ab8a6af.txt","dir":false,"size":53477376,"lastmod":"2023-10-15T18:18:58.782050921-04:00"},{"name":"hello.html","dir":false,"size":206,"lastmod":"2023-10-15T18:12:43.26985518-04:00"},{"name":"hello.txt","dir":false,"size":14,"lastmod":"2023-10-15T09:19:41.603330456-04:00"}]}'; | |
| var data = JSON.parse(jd); | |
| for (var i = 0; i < data.files.length; i++) { | |
| if (data.files[i].dir === false) { | |
| const file = new File(data.files[i].name, data.files[i].dir, data.files[i].size, data.files[i].lastmod); | |
| file.append("file-list"); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment