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