From 229b02534ecb60edc06678c9d08214dfb31c6dce Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Mon, 14 Jan 2019 14:13:18 +0100 Subject: [PATCH] Display user information --- .../Export.html | 28 +++- .../assets/css/main.css | 24 ++- .../assets/js/main.js | 146 +++++++++++++++++- 3 files changed, 195 insertions(+), 3 deletions(-) diff --git a/assets/zip/personnal-data-export-navigator/Export.html b/assets/zip/personnal-data-export-navigator/Export.html index 32df0013..79d920f8 100644 --- a/assets/zip/personnal-data-export-navigator/Export.html +++ b/assets/zip/personnal-data-export-navigator/Export.html @@ -9,6 +9,14 @@ + + @@ -38,7 +46,25 @@
- Loading user information +

User information

+ + + + + + + + + + + + + + + + + +
User ID
First name
Last name
Is page public
Is page open
Virtual directory
Account image
Is friend list public
Personnal website
Public note
Comments forbidden
Allow posts from friends
Account creation time
Background image
Page likes
diff --git a/assets/zip/personnal-data-export-navigator/assets/css/main.css b/assets/zip/personnal-data-export-navigator/assets/css/main.css index e11ae8f6..9c4797a0 100644 --- 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; } \ No newline at end of file diff --git a/assets/zip/personnal-data-export-navigator/assets/js/main.js b/assets/zip/personnal-data-export-navigator/assets/js/main.js index 472f58eb..6e9afce3 100644 --- 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(); \ No newline at end of file +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); \ No newline at end of file