Comunic/ComunicWeb
1
0
Fork 0
mirror of https://github.com/pierre42100/ComunicWeb synced 2025-11-03 19:54:14 +00:00
Code Issues Projects Releases Wiki Activity

Display friends information

Browse Source
This commit is contained in:
Pierre HUBERT
2019-01-14 14:36:20 +01:00
parent a0ef614252
commit a7a36d8665
4 changed files with 270 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/zip/personnal-data-export-navigator/Export.html
View File

@@ -45,6 +45,7 @@
Please use the navigation bar located at the left of this page to access to the different categories of content.
</div>
<!-- User information -->
<div id="user-info" class="category container">
<h1>User information</h1>
@@ -67,8 +68,17 @@
</table>
</div>
<!-- User friends list -->
<div id="friends-list" class="category container">
Loading friends list
<table id="friends-list-table">
<thead>
<th>Name</th>
<th>Accepted</th>
<th>Last active</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="posts" class="category container">
@@ -104,6 +114,7 @@
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="assets/materialize/js/materialize.min.js"></script>
<script src="assets/js/utils.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

12
assets/zip/personnal-data-export-navigator/assets/css/main.css
View File

@@ -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;
}

133
assets/zip/personnal-data-export-navigator/assets/js/main.js
View File

@@ -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);

205
assets/zip/personnal-data-export-navigator/assets/js/utils.js Normal file
View File

@@ -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;
}