bmcculley/listfiles.html

## listfiles.html
<!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>
	<!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>