mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-12-24 18:08:50 +00:00
Display friends information
This commit is contained in:
parent
a0ef614252
commit
a7a36d8665
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
@ -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
205
assets/zip/personnal-data-export-navigator/assets/js/utils.js
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user