Display user information

2025-10-31 02:04:53 +00:00 · 2019-01-14 14:13:18 +01:00
parent f2ab71cf3f
commit 229b02534e
3 changed files with 195 additions and 3 deletions
--- a/assets/zip/personnal-data-export-navigator/Export.html
+++ b/assets/zip/personnal-data-export-navigator/Export.html
@@ -9,6 +9,14 @@
 	<link type="text/css" rel="stylesheet" href="assets/materialize/css/materialize.min.css"  media="screen,projection"/>

 	<link rel="stylesheet" href="assets/css/main.css" />
+
+	<script>
+			
+		//Project configuration
+		const SOURCE_URL = "./source.json";
+		const STORAGE_URL = "./files/";
+
+	</script>
 </head>
 <body>

@@ -38,7 +46,25 @@
 		</div>

 		<div id="user-info" class="category container">
-			Loading user information
+			<h1>User information</h1>
+
+			<table class="user-information-table">
+				<tr><td>User ID</td><td id="u-uid"></td></tr>
+				<tr><td>First name</td><td id="u-firstname"></td></tr>
+				<tr><td>Last name</td><td id="u-lastname"></td></tr>
+				<tr><td>Is page public</td><td id="u-pagepublic"></td></tr>
+				<tr><td>Is page open</td><td id="u-pageopen"></td></tr>
+				<tr><td>Virtual directory</td><td id="u-virtualdirectory"></td></tr>
+				<tr><td>Account image</td><td><img id="u-accountimage"></td></tr>
+				<tr><td>Is friend list public</td><td id="u-publicfriendslist"></td></tr>
+				<tr><td>Personnal website</td><td id="u-personnalwebsite"></td></tr>
+				<tr><td>Public note</td><td id="u-publicnote"></td></tr>
+				<tr><td>Comments forbidden</td><td id="u-commentsforbidden"></td></tr>
+				<tr><td>Allow posts from friends</td><td id="u-allowpostsfromfriends"></td></tr>
+				<tr><td>Account creation time</td><td id="u-accountcreationtime"></td></tr>
+				<tr><td>Background image</td><td><img id="u-bgimage" class="background-image" /></td></tr>
+				<tr><td>Page likes</td><td id="u-pagelikes"></td></tr>
+			</table>
 		</div>

 		<div id="friends-list" class="category container">
--- a/assets/zip/personnal-data-export-navigator/assets/css/main.css
+++ b/assets/zip/personnal-data-export-navigator/assets/css/main.css
@@ -4,7 +4,9 @@
 * @author Pierre HUBERT
 */

-
+/**
+ * Global rules
+ */
 .sidenav.sidenav-fixed {
 	/*transform: unset;*/
 	/*margin-top: 80px;*/
@@ -16,4 +18,24 @@ main {

 main .container {
 	display: none;
+}
+
+h1 {
+	font-size: 150%;
+}
+
+
+/**
+ * User information rules
+ */
+.user-information-table td:first-child {
+	font-weight: bold;
+}
+
+.account-image {
+	width: 50px;
+}
+
+.background-image {
+	max-width: 100px;
 }
--- a/assets/zip/personnal-data-export-navigator/assets/js/main.js
+++ b/assets/zip/personnal-data-export-navigator/assets/js/main.js
@@ -4,6 +4,100 @@
 * @author Pierre HUBERT
 */

+/**
+ * This object will contains all the exported data
+ * once it will have been decoded by the JSON parser
+ * of the browser
+ */
+let data;
+
+/**
+ * Get and return an element specified by its ID
+ *
+ * @param {String} id The ID of the element to get
+ * @return {HTMLElement} Target element
+ */
+function byId(id){
+	return document.getElementById(id);
+}
+
+/**
+ * Set the content of an HTML element queried by
+ * its ID
+ *
+ * @param {String} id The ID of the element to get
+ * @param {String} html HTML content to apply
+ */
+function setInnerHTMLById(id, html){
+	byId(id).innerHTML = html;
+}
+
+/**
+ * Set the content of an HTML element queried by
+ * its ID for a specified boolean
+ *
+ * @param {String} id The ID of the element to get
+ * @param {Boolean} bool The boolean to apply
+ */
+function setBoolInnerHTMLById(id, bool){
+	setInnerHTMLById(id, bool == true ? "Yes " : "No")
+}
+
+/**
+ * Display an error
+ * 
+ * @param {String} message The message of the error to display
+ */
+function error(message){
+	  M.toast({html: "Error: " + message, classes: 'rounded', length: 1000});
+}
+
+/**
+ * Get the path to an image
+ *
+ * @param {String} url The original URL of the image
+ * @return {String} Locally accessible path to the image
+ */
+function getImagePath(url){
+	return STORAGE_URL + url.replace("://", "/");
+}
+
+/**
+ * Turn a timestamp into a string date
+ *
+ * @param {Number} time The time to convert
+ * @return {String} Matching date
+ */
+function timeToStr(time){
+	let date = new Date();
+	date.setTime(time*1000);
+	return date.toGMTString();
+}
+
+/**
+ * Apply an orignially remote image to an element
+ * of the page
+ *
+ * @param {HTMLElement} el Image HTML Element that will receive
+ * the image
+ * @param {String} url The original URL of the image
+ */
+function applyURLToImage(el, url){
+	el.src = getImagePath(url);
+	el.className + " responsive-img";
+}
+
+/**
+ * Apply a user image to an image object
+ *
+ * @param {HTMLElement} el Target HTML element
+ * @param {Object} info Information about the related object
+ */
+function applyUserAccountImage(el, info){
+	applyURLToImage(el, info.accountImage);
+	el.className += " circle account-image"
+}
+
 /**
 * Refresh tabs visibility accordingly to the hash of
 * the current URL
@@ -23,6 +117,31 @@ function RefreshTabsVisibility(){

 }

+/**
+ * Apply user information
+ */
+function ApplyUserInfo() {
+
+	let userInfo = data.advanced_info;
+	setInnerHTMLById("u-uid", userInfo.userID);
+	setInnerHTMLById("u-firstname", userInfo.firstName);
+	setInnerHTMLById("u-lastname", userInfo.lastName);
+	setBoolInnerHTMLById("u-pagepublic", userInfo.publicPage);
+	setBoolInnerHTMLById("u-pageopen", userInfo.openPage);
+	setInnerHTMLById("u-virtualdirectory", userInfo.virtualDirectory);
+	applyUserAccountImage(byId("u-accountimage"), userInfo);
+	setBoolInnerHTMLById("u-publicfriendslist", userInfo.friend_list_public);
+	setInnerHTMLById("u-personnalwebsite", userInfo.personnalWebsite);
+	setInnerHTMLById("u-publicnote", userInfo.publicNote);
+	setBoolInnerHTMLById("u-commentsforbidden", userInfo.noCommentOnHisPage);
+	setBoolInnerHTMLById("u-allowpostsfromfriends", userInfo.allowPostFromFriendOnHisPage);
+	setInnerHTMLById("u-accountcreationtime", timeToStr(userInfo.account_creation_time));
+	applyURLToImage(byId("u-bgimage"), userInfo.backgroundImage);
+	setInnerHTMLById("u-pagelikes", timeToStr(userInfo.pageLikes));
+}
+
+
+
 /**
 * Automatically switch the tab when it
 * is required by the user
@@ -31,4 +150,29 @@ window.addEventListener("hashchange", RefreshTabsVisibility);


 //Page initialization
-RefreshTabsVisibility();
+RefreshTabsVisibility();
+
+/**
+ * Get the content of the source file
+ */
+let xhr = new XMLHttpRequest();
+xhr.open("GET", SOURCE_URL);
+
+xhr.onload = function(){
+
+	if(xhr.status != 200)
+		return error("Could not access " + SOURCE_URL + " !");
+
+	//Parse data
+	try {
+		data = JSON.parse(xhr.response);
+	}
+	catch(e){
+		return error("Could not parse " + SOURCE_URL + " !");
+	}
+
+	//Now we can apply specific process for each data block
+	ApplyUserInfo();
+}
+
+xhr.send(null);