mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-12-24 18:08:50 +00:00
Display user information
This commit is contained in:
parent
f2ab71cf3f
commit
229b02534e
@ -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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
Loading…
Reference in New Issue
Block a user