From a7a36d8665e3558883956d1e2ab0d58759237710 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Mon, 14 Jan 2019 14:36:20 +0100 Subject: [PATCH] Display friends information --- .../Export.html | 13 +- .../assets/css/main.css | 12 +- .../assets/js/main.js | 133 ++++-------- .../assets/js/utils.js | 205 ++++++++++++++++++ 4 files changed, 270 insertions(+), 93 deletions(-) create mode 100644 assets/zip/personnal-data-export-navigator/assets/js/utils.js diff --git a/assets/zip/personnal-data-export-navigator/Export.html b/assets/zip/personnal-data-export-navigator/Export.html index 79d920f8..8e1b7c1c 100644 --- a/assets/zip/personnal-data-export-navigator/Export.html +++ b/assets/zip/personnal-data-export-navigator/Export.html @@ -45,6 +45,7 @@ Please use the navigation bar located at the left of this page to access to the different categories of content. +

User information

@@ -67,8 +68,17 @@
+
- Loading friends list + + + + + + + + +
NameAcceptedLast active
@@ -104,6 +114,7 @@ + \ No newline at end of file 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 9c4797a0..de98fb0f 100644 --- a/assets/zip/personnal-data-export-navigator/assets/css/main.css +++ b/assets/zip/personnal-data-export-navigator/assets/css/main.css @@ -25,6 +25,14 @@ h1 { } +.account-image { + width: 50px; + vertical-align: middle; + margin-right: 5px; +} + + + /** * User information rules */ @@ -32,10 +40,6 @@ h1 { 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 5c7371d1..ad72dba1 100644 --- a/assets/zip/personnal-data-export-navigator/assets/js/main.js +++ b/assets/zip/personnal-data-export-navigator/assets/js/main.js @@ -9,94 +9,7 @@ * 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" -} +var data; /** * Refresh tabs visibility accordingly to the hash of @@ -153,6 +66,49 @@ function ApplyUserInfo() { } +/** + * Apply friends list + */ +function ApplyFriendsList(){ + + let target = document.querySelector("#friends-list-table tbody"); + + data.friends_list.forEach(friend => { + + let friendInfo = getUserInfo(friend.ID_friend); + + let friendTR = createElem2({ + appendTo: target, + type: "tr" + }); + + let friendName = createElem2({ + appendTo: friendTR, + type: "td" + }); + + let friendAccoutImage = createElem2({ + appendTo: friendName, + type: "img" + }); + applyUserAccountImage(friendAccoutImage, friendInfo) + + friendName.innerHTML += friendInfo.full_name; + + let friendAccepted = createElem2({ + appendTo: friendTR, + type: "td", + innerHTML: friend.accepted ? "Yes" : "Not yet" + }); + + let friendLastActive = createElem2({ + appendTo: friendTR, + type: "td", + innerHTML: timeToStr(friend.time_last_activity) + }); + }); +} + /** * Automatically switch the tab when it @@ -185,6 +141,7 @@ xhr.onload = function(){ //Now we can apply specific process for each data block ApplyUserInfo(); + ApplyFriendsList(); } xhr.send(null); \ No newline at end of file diff --git a/assets/zip/personnal-data-export-navigator/assets/js/utils.js b/assets/zip/personnal-data-export-navigator/assets/js/utils.js new file mode 100644 index 00000000..2d816590 --- /dev/null +++ b/assets/zip/personnal-data-export-navigator/assets/js/utils.js @@ -0,0 +1,205 @@ +/** + * Project utilities + * + * @author Pierre HUBERT + */ + +/** + * Create a new HTML node (version2) + * + * @param {Object} infos Informations about the HTML node to create + * @info {String} type The type of the new node + * @info {HTMLElement} appendTo HTML Element that will receive the new node + * @info {HTMLElement} insertBefore Insert before specified HTML element + * @info {HTMLElement} insertAsFirstChild Insert the new HTML Element as the first child of the specified element + * @info {String} class The class of the new element + * @info {String} id The ID of the new element + * @info {String} title The title of the new element + * @info {String} src The src attribute of the new element + * @info {String} href href attribute for the src element + * @info {string} name The name of the new element + * @info {String} elemType The type attribute of the new element + * @info {String} value The value of the new element + * @info {String} placeholder The placeholder of the new element + * @info {String} innerHTML Specify the html content of the newly created element + * @info {String} innerLang Specify the key of the lang to use to fill the element + * @info {String} innerHTMLprefix Specify prefix to add at the begining of the content of the element + * @info {boolean} disabled Set whether the field should be disabled or not (input only) + * @return {HTMLElement} The newly created element + */ +function createElem2(infos){ + + var newElem = document.createElement(infos.type); + + //Append to a specific element + if(infos.appendTo) + infos.appendTo.appendChild(newElem); + + //Append before a specific element + if(infos.insertBefore) + infos.insertBefore.parentNode.insertBefore(newElem, infos.insertBefore); + + //Append as the first child of an element + if(infos.insertAsFirstChild){ + //Check if the element as already a child or not + if(infos.insertAsFirstChild.firstChild) + infos.insertAsFirstChild.insertBefore(newElem, infos.insertAsFirstChild.firstChild); + //Else we can just append the newly created element + else + infos.insertAsFirstChild.appendChild(newElem); + } + + //Specify the class of the element + if(infos.class) + newElem.className = infos.class; + + //Specify the ID of the element + if(infos.id) + newElem.id = infos.id; + + //Specify the title of the new element + if(infos.title) + newElem.title = infos.title; + + //Specify the source of the element + if(infos.src) + newElem.src = infos.src; + if(infos.href) + newElem.href = infos.href; + + //Specify the name of the new element + if(infos.name) + newElem.name = infos.name; + + //Specify element type + if(infos.elemType) + newElem.type = infos.elemType; + + //Specify element value + if(infos.value) + newElem.value = infos.value; + + //Specify element placeholder + if(infos.placeholder) + newElem.placeholder = infos.placeholder; + + //Specify node content + if(infos.innerHTML) + newElem.innerHTML = infos.innerHTML; + + if(infos.innerLang) + newElem.innerHTML = lang(infos.innerLang); + + if(infos.innerHTMLprefix) + newElem.innerHTML = infos.innerHTMLprefix + newElem.innerHTML; + + //Set field state + if(infos.disabled) + infos.disabled = true; + + //Return newly created element + return newElem; +} + +/** + * 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" +} + +/** + * Get information about a single user + * + * @param {Number} id The ID of the user to get + * @return {Object} Information about the user + */ +function getUserInfo(id){ + + let user_info = data.users_info[id]; + + //Make user full name more accessible + user_info.full_name = user_info.firstName + " " + user_info.lastName; + + return user_info; +} \ No newline at end of file