creating the profile page
This commit is contained in:
sairajzero
parent
69339c8259
commit
7ceccbbf47
173
profile.html
Normal file
173
profile.html
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>FLO Tweeter</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<!-- Font Awesome File -->
|
||||||
|
|
||||||
|
<script type="text/javascript" src="registerID.js"></script>
|
||||||
|
<script type="text/javascript" src="app.js"></script>
|
||||||
|
<script type="text/javascript" src="profile.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body onload = "viewProfile();">
|
||||||
|
|
||||||
|
<div class="navbar navbar-default navbar-static-top">
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar-collapse navbar-collapse-1 collapse" aria-expanded="true">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li>
|
||||||
|
<a href="home.html"><span class="glyphicon glyphicon-home"></span> Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="active">
|
||||||
|
<a href="profile.html"><span class="glyphicon glyphicon-user"></span> Profiles</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="navbar-form navbar-right">
|
||||||
|
<div class="form-group has-feedback">
|
||||||
|
<input type="text" class="form-control-nav" id="search" aria-describedby="search1">
|
||||||
|
<span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-default btn-sm" onclick="logout()">
|
||||||
|
<span class="glyphicon glyphicon-log-out"> </span> Log out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-3">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-body" id="profileInfo">
|
||||||
|
<a href="#"><img class="img-responsive" alt="" src="http://placehold.it/800x500"></a>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-3">
|
||||||
|
<h5>
|
||||||
|
<small>TWEETS</small>
|
||||||
|
<a href="#">1,545</a>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<h5>
|
||||||
|
<small>FOLLOWING</small>
|
||||||
|
<a href="#">251</a>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-5">
|
||||||
|
<h5>
|
||||||
|
<small>FOLLOWERS</small>
|
||||||
|
<a href="#">153</a>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel panel-default panel-custom">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="panel panel-info">
|
||||||
|
|
||||||
|
<div class="panel-body" id="profileBody">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-sm-3">
|
||||||
|
<div class="panel panel-default panel-custom">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="panel-title">
|
||||||
|
Who to follow
|
||||||
|
<small><a href="#">Refresh</a> ● <a href="#">View all</a></small>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<img src="http://placehold.it/32x32" alt="" class="media-object img-rounded">
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Nome e cognome</h4>
|
||||||
|
<a href="#" class="btn btn-default btn-xs">
|
||||||
|
+
|
||||||
|
<span class="glyphicon glyphicon-user"></span>
|
||||||
|
Follow
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<img src="http://placehold.it/32x32" alt="" class="media-object img-rounded">
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Nome e cognome</h4>
|
||||||
|
<a href="#" class="btn btn-default btn-xs">
|
||||||
|
+
|
||||||
|
<span class="glyphicon glyphicon-user"></span>
|
||||||
|
Follow
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<img src="http://placehold.it/32x32" alt="" class="media-object img-rounded">
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Nome e cognome</h4>
|
||||||
|
<a href="#" class="btn btn-default btn-xs">
|
||||||
|
+
|
||||||
|
<span class="glyphicon glyphicon-user"></span>
|
||||||
|
Follow
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
<a href="www.google.it">
|
||||||
|
<span class="glyphicon glyphicon-user"></span>
|
||||||
|
Find people you know
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="well well-sm">
|
||||||
|
<ul class="list-inline">
|
||||||
|
<li>© 2015 Twitter</li>
|
||||||
|
<li><a href="#">About</a></li>
|
||||||
|
<li><a href="#">Help</a></li>
|
||||||
|
<li><a href="#">Terms</a></li>
|
||||||
|
<li><a href="#">Privacy</a></li>
|
||||||
|
<li><a href="#">Cookies</a></li>
|
||||||
|
<li><a href="#">Ads info</a></li>
|
||||||
|
<li><a href="#">Brand</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
<li><a href="#">Status</a></li>
|
||||||
|
<li><a href="#">Apps</a></li>
|
||||||
|
<li><a href="#">Jobs</a></li>
|
||||||
|
<li><a href="#">Advertise</a></li>
|
||||||
|
<li><a href="#">Businesses</a></li>
|
||||||
|
<li><a href="#">Media</a></li>
|
||||||
|
<li><a href="#">Developers</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
210
profile.js
Normal file
210
profile.js
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
|
||||||
|
var profileWebsocket;
|
||||||
|
var profiles;
|
||||||
|
|
||||||
|
function viewProfile(){
|
||||||
|
if(sessionStorage.profiles)
|
||||||
|
profiles = JSON.parse(sessionStorage.profiles)
|
||||||
|
else{
|
||||||
|
alert("Profiles not loaded! redirecting to home!");
|
||||||
|
window.location.href = "home.html";
|
||||||
|
}
|
||||||
|
console.log(profiles);
|
||||||
|
var url = new URL(window.location.href);
|
||||||
|
var floID = url.searchParams.get("floID");
|
||||||
|
if(floID)
|
||||||
|
displayProfile(floID);
|
||||||
|
else
|
||||||
|
listProfiles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function listProfiles(){
|
||||||
|
console.log("listProfiles");
|
||||||
|
var profileBody = document.getElementById("profileBody");
|
||||||
|
profileBody.innerHTML = "";
|
||||||
|
for (p in profiles){
|
||||||
|
var element = document.createElement("div");
|
||||||
|
element.setAttribute("class", "media");
|
||||||
|
element.innerHTML = `<a href="profile.html?floID=${p}"><div class="media-body">
|
||||||
|
<h4 class="media-heading">${profiles[p].name}</h4>
|
||||||
|
@${p}
|
||||||
|
</div></a>
|
||||||
|
<hr/>`
|
||||||
|
profileBody.appendChild(element);
|
||||||
|
}
|
||||||
|
document.getElementById("profileInfo").style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayProfile(floID){
|
||||||
|
if(!validateAddr(floID)){
|
||||||
|
alert("Invalid FLO ID");
|
||||||
|
listProfiles();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(!(floID in profiles)){
|
||||||
|
alert("FLO ID not registered to FLO Tweet");
|
||||||
|
listProfiles();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log("displayProfile");
|
||||||
|
displayTweetFromIDB(floID).then(function(result){
|
||||||
|
connectToX(floID).then(function(result){
|
||||||
|
console.log(result);
|
||||||
|
getTweetsFromX(floID);
|
||||||
|
}).catch(function(error){
|
||||||
|
console.log(error.message);
|
||||||
|
});
|
||||||
|
}).catch(function(error){
|
||||||
|
console.log(error.message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayTweetFromIDB(floID){
|
||||||
|
return new Promise(
|
||||||
|
function(resolve,reject){
|
||||||
|
var idb = indexedDB.open("FLO_Tweet",2);
|
||||||
|
idb.onerror = function(event) {
|
||||||
|
reject("Error in opening IndexedDB!");
|
||||||
|
};
|
||||||
|
idb.onupgradeneeded = function(event) {
|
||||||
|
var objectStore = event.target.result.createObjectStore("tweets",{ keyPath: 'id' });
|
||||||
|
objectStore.createIndex('floID', 'floID', { unique: false });
|
||||||
|
objectStore.createIndex('time', 'time', { unique: false });
|
||||||
|
objectStore.createIndex('data', 'data', { unique: false });
|
||||||
|
var objectStore2 = event.target.result.createObjectStore("lastTweet");
|
||||||
|
};
|
||||||
|
idb.onsuccess = function(event) {
|
||||||
|
var db = event.target.result;
|
||||||
|
var obs = db.transaction("tweets", "readwrite").objectStore("tweets");
|
||||||
|
obs.openCursor().onsuccess = function(event) {
|
||||||
|
var cursor = event.target.result;
|
||||||
|
if(cursor) {
|
||||||
|
console.log(cursor.value)
|
||||||
|
if(cursor.value.floID == floID)
|
||||||
|
createTweetElement(floID,cursor.value.time,cursor.value.data);
|
||||||
|
cursor.continue();
|
||||||
|
}else{
|
||||||
|
resolve("Displayed Tweets from IDB!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
db.close();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTweetElement(floID,time,tweet){
|
||||||
|
var tweetDisplay = document.getElementById("profileBody");
|
||||||
|
var element = document.createElement("div");
|
||||||
|
element.setAttribute("class", "media");
|
||||||
|
element.innerHTML = `
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">${profiles[floID].name} <small>@${floID}</small></h4>
|
||||||
|
<p>${tweet}</p>
|
||||||
|
<ul class="nav nav-pills nav-pills-custom">
|
||||||
|
<li><a href="#"><span class="glyphicon glyphicon-share-alt"></span></a></li>
|
||||||
|
<li><a href="#"><span class="glyphicon glyphicon-retweet"></span></a></li>
|
||||||
|
<li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
|
||||||
|
<li><a href="#"><span class="glyphicon glyphicon-option-horizontal"></span></a></li>
|
||||||
|
<li><span class="timestamp pull-right">${getTime(time)}</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>`;
|
||||||
|
tweetDisplay.insertBefore(element, tweetDisplay.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
function connectToX(floID){
|
||||||
|
return new Promise(
|
||||||
|
function(resolve,reject){
|
||||||
|
profileWebsocket = new WebSocket("ws://"+profiles[floID].onionAddr+"/ws");
|
||||||
|
profileWebsocket.onopen = function(ev){
|
||||||
|
resolve("Connected to Profile Server!");
|
||||||
|
};
|
||||||
|
profileWebsocket.onerror = function(ev) {
|
||||||
|
reject("Profile Server is offline!");
|
||||||
|
};
|
||||||
|
profileWebsocket.onclose = function(ev) {
|
||||||
|
console.log("Disconnected from Profile Server!")
|
||||||
|
};
|
||||||
|
profileWebsocket.onmessage = function(evt){
|
||||||
|
console.log(evt.data);
|
||||||
|
try{
|
||||||
|
var data = JSON.parse(evt.data);
|
||||||
|
var id = data.id;
|
||||||
|
data = data.data;
|
||||||
|
if( floID!=data.floID || !encrypt.verify(data.tweet,data.sign,profiles[floID].pubKey))
|
||||||
|
return
|
||||||
|
storeTweet({floID:floID,time:data.time,data:data.tweet},id);
|
||||||
|
createTweetElement(floID,data.time,data.tweet);
|
||||||
|
}catch(error){
|
||||||
|
console.log(error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function storeTweet(data,id){
|
||||||
|
var idb = indexedDB.open("FLO_Tweet",2);
|
||||||
|
idb.onerror = function(event) {
|
||||||
|
console.log("Error in opening IndexedDB!");
|
||||||
|
};
|
||||||
|
idb.onupgradeneeded = function(event) {
|
||||||
|
var objectStore = event.target.result.createObjectStore("tweets",{ keyPath: 'id' });
|
||||||
|
objectStore.createIndex('floID', 'floID', { unique: false });
|
||||||
|
objectStore.createIndex('time', 'time', { unique: false });
|
||||||
|
objectStore.createIndex('data', 'data', { unique: false });
|
||||||
|
var objectStore2 = event.target.result.createObjectStore("lastTweet");
|
||||||
|
};
|
||||||
|
idb.onsuccess = function(event) {
|
||||||
|
var db = event.target.result;
|
||||||
|
var obs = db.transaction("tweets", "readwrite").objectStore("tweets");
|
||||||
|
data.id = `${data.time}_${data.floID}`;
|
||||||
|
obs.add(data);
|
||||||
|
var obsL = db.transaction("lastTweet", "readwrite").objectStore("lastTweet");
|
||||||
|
obsL.put(id,data.floID);
|
||||||
|
db.close();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTweetsFromX(floID){
|
||||||
|
return new Promise(
|
||||||
|
function (resolve,reject){
|
||||||
|
var idb = indexedDB.open("FLO_Tweet",2);
|
||||||
|
idb.onerror = function(event) {
|
||||||
|
reject("Error in opening IndexedDB!");
|
||||||
|
};
|
||||||
|
idb.onupgradeneeded = function(event) {
|
||||||
|
var objectStore = event.target.result.createObjectStore("tweets",{ keyPath: 'id' });
|
||||||
|
objectStore.createIndex('floID', 'floID', { unique: false });
|
||||||
|
objectStore.createIndex('time', 'time', { unique: false });
|
||||||
|
objectStore.createIndex('data', 'data', { unique: false });
|
||||||
|
var objectStore2 = event.target.result.createObjectStore("lastTweet");
|
||||||
|
};
|
||||||
|
idb.onsuccess = function(event) {
|
||||||
|
var db = event.target.result;
|
||||||
|
//window["wait"] = addrList.length;
|
||||||
|
var lastTweet = db.transaction('lastTweet', "readwrite").objectStore('lastTweet');
|
||||||
|
//addrList.forEach(function(addr){
|
||||||
|
new Promise(
|
||||||
|
function(res,rej){
|
||||||
|
var lastTweetReq = lastTweet.get(floID);
|
||||||
|
lastTweetReq.onsuccess = function(event){
|
||||||
|
var result = event.target.result;
|
||||||
|
if(result === undefined){
|
||||||
|
result = 0;
|
||||||
|
}
|
||||||
|
res(result);
|
||||||
|
}
|
||||||
|
}).then(function(result){
|
||||||
|
console.log(profileWebsocket);
|
||||||
|
profileWebsocket.send(`>${result}`);
|
||||||
|
console.log("sent");
|
||||||
|
resolve('Sent New tweet request to user server!');
|
||||||
|
}).catch(function(error){
|
||||||
|
console.log(error.message);
|
||||||
|
});
|
||||||
|
db.close();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user