From d5e3e6ad47ec1e79cd7c4a8976b1aa4dcf224840 Mon Sep 17 00:00:00 2001
From: joshuaboud <joshuaboud@hotmail.com>
Date: Tue, 25 May 2021 14:37:59 -0300
Subject: [PATCH] show and stylize properties

---
 navigator/navigator.css | 31 +++++++++++++++++++++++++++++--
 navigator/navigator.js  | 37 +++++++++++++++++++++++++++++++------
 2 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/navigator/navigator.css b/navigator/navigator.css
index 5208956..eae95f5 100644
--- a/navigator/navigator.css
+++ b/navigator/navigator.css
@@ -40,7 +40,7 @@
 .contents-view {
 	height: 100%;
 	flex-basis: 0;
-	flex-grow: 4;
+	flex-grow: 8;
 	background-color: #151515;
 	border: 1px solid #3c3f42;
 	border-radius: 4px;
@@ -112,8 +112,35 @@
 .info-column {
 	background-color: #212427;
 	flex-basis: 0;
-	flex-grow: 1;
+	flex-grow: 3;
 	padding: 1em;
 	border: 1px solid #3c3f42;
 	border-radius: 4px;
 }
+
+.nav-info-column-filename {
+	margin: 0 12px 0 12px;
+	font-weight: bolder;
+	font-size: 150%;
+}
+
+.nav-property-pair {
+	margin: 0 12px 0 12px;
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: baseline;
+}
+
+.nav-property-pair-key {
+	font-weight: bold;
+	flex-basis: 0;
+	flex: 2;
+	padding-right: 5px;
+}
+
+.nav-property-pair-value {
+	font-family:'Courier New', Courier, monospace;
+	font-size: 85%;
+	flex-basis: 0;
+	flex: 3;
+}
\ No newline at end of file
diff --git a/navigator/navigator.js b/navigator/navigator.js
index d16b37b..df3cd32 100644
--- a/navigator/navigator.js
+++ b/navigator/navigator.js
@@ -1,5 +1,27 @@
 
 
+function property_entry_html(key, value) {
+	var html = '<div class="nav-property-pair">';
+	html += '<span class="nav-property-pair-key">' + key + '</span>'
+	html += '<span class="nav-property-pair-value">' + value + '</span>'
+	html += '</div>'
+	return html;
+}
+
+function format_bytes(bytes) {
+	var units = [" B", " KiB", " MiB", " GiB", " TiB", " PiB"];
+	var index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+	var pow = Math.pow(1024, index);
+	var formatted = bytes / pow;
+	return formatted.toFixed(2).toString() + units[index];
+}
+
+function format_time(timestamp) {
+	var date = new Date(timestamp * 1000);
+	console.log(date);
+	return date.toLocaleString();
+}
+
 class NavEntry {
 	constructor(/*string or array*/ path, /*dict*/ stat) {
 		if(typeof path == 'string')
@@ -15,7 +37,7 @@ class NavEntry {
 		this.dom_element.appendChild(icon);
 		this.dom_element.appendChild(title);
 		this.stat = stat;
-		this.dom_element.nav_item_icon.addEventListener("click", this)
+		this.dom_element.addEventListener("click", this)
 	}
 	destroy() {
 		while(this.dom_element.firstChild){
@@ -40,11 +62,14 @@ class NavEntry {
 		return this.stat;
 	}
 	show_properties(){
-		var html =  '<div class="nav-info-column-filename">' + this.filename() + '</div>\n';
-		html += '<div class="nav-property-pair">';
-		html += '<span class="nav-property-pair-key">Mode: </span>'
-		html += '<span class="nav-property-pair-value">' + this.stat["mode-str"] + '</span>'
-		html += '</div>'
+		var html =  '<div class="nav-info-column-filename">' + this.filename() + '</div>';
+		html += property_entry_html("Mode", this.stat["mode-str"]);
+		html += property_entry_html("Owner", this.stat["owner"] + " (" + this.stat["uid"] + ")");
+		html += property_entry_html("Group", this.stat["group"] + " (" + this.stat["gid"] + ")");
+		html += property_entry_html("Size", format_bytes(this.stat["size"]));
+		html += property_entry_html("Accessed", format_time(this.stat["atime"]));
+		html += property_entry_html("Modified", format_time(this.stat["mtime"]));
+		html += property_entry_html("Created", format_time(this.stat["ctime"]));
 		document.getElementById("nav-info-column").innerHTML = html;
 	}
 }