mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-22 20:19:21 +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 type="text/css" rel="stylesheet" href="assets/materialize/css/materialize.min.css" media="screen,projection"/>
|
||||||
|
|
||||||
<link rel="stylesheet" href="assets/css/main.css" />
|
<link rel="stylesheet" href="assets/css/main.css" />
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
//Project configuration
|
||||||
|
const SOURCE_URL = "./source.json";
|
||||||
|
const STORAGE_URL = "./files/";
|
||||||
|
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@ -38,7 +46,25 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="user-info" class="category container">
|
<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>
|
||||||
|
|
||||||
<div id="friends-list" class="category container">
|
<div id="friends-list" class="category container">
|
||||||
|
@ -4,7 +4,9 @@
|
|||||||
* @author Pierre HUBERT
|
* @author Pierre HUBERT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Global rules
|
||||||
|
*/
|
||||||
.sidenav.sidenav-fixed {
|
.sidenav.sidenav-fixed {
|
||||||
/*transform: unset;*/
|
/*transform: unset;*/
|
||||||
/*margin-top: 80px;*/
|
/*margin-top: 80px;*/
|
||||||
@ -16,4 +18,24 @@ main {
|
|||||||
|
|
||||||
main .container {
|
main .container {
|
||||||
display: none;
|
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
|
* @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
|
* Refresh tabs visibility accordingly to the hash of
|
||||||
* the current URL
|
* 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
|
* Automatically switch the tab when it
|
||||||
* is required by the user
|
* is required by the user
|
||||||
@ -31,4 +150,29 @@ window.addEventListener("hashchange", RefreshTabsVisibility);
|
|||||||
|
|
||||||
|
|
||||||
//Page initialization
|
//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