Skip to content
Browse files

Developed web ui a bit further

  • Loading branch information...
1 parent c76ba91 commit 198ca9b65852a65c0c356c77a08983cd8a989fc5 @Detegr committed
Showing with 112 additions and 10 deletions.
  1. +57 −7 ui/web/index.html
  2. +55 −3 ui/web/js/tapi2p-backbone.js
View
64 ui/web/index.html
@@ -10,6 +10,35 @@
<link rel="stylesheet" href="css/pure-min.css" />
<link rel="stylesheet" href="css/side-menu.css" />
<script src="js/tapi2p-backend.js"></script>
+ <style>
+ html,body,#layout,#main,.content {
+ height: 100%;
+ }
+ .flex {
+ height: 70%;
+
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+
+ display: flex;
+ flex-direction: column;
+ }
+ .flex > form {
+ -webkit-flex: 1 1 20%;
+ flex: 1 1 5%;
+ }
+ #chatwindow {
+ width: 100%;
+ height: 200px;
+ background-color: #eee;
+ border: 1px solid #aaa;
+
+ -webkit-flex: 10 10 80%;
+ flex: 1 1 95%;
+
+ overflow-y: auto;
+ }
+ </style>
</head>
<body>
<script type="text/template" id="tapi2p-main-template">
@@ -18,6 +47,22 @@
<h2>Please use the navigation menu to get started</h2>
</div>
</script>
+ <script type="text/template" id="tapi2p-chat-template">
+ <div class="header">
+ <h1>Chat</h1>
+ <h2>Chat securely with your peers</h2>
+ </div>
+ <div style="margin-top: 1em;" class="flex">
+ <code id="chatwindow">
+ <% for(var i=0; i<chatHistory.length; ++i) { %>
+ <%= chatHistory[i] %><br/>
+ <% } %>
+ </code>
+ <form class="pure-form">
+ <input id="chatinput" type="text" style="width: 100%;" autofocus></input>
+ </form>
+ </div>
+ </script>
<script type="text/template" id="tapi2p-peers-template">
<div class="header">
<h1>Peers</h1>
@@ -25,10 +70,12 @@
</div>
<table class="pure-table pure-table-horizontal peertable">
<thead>
- <th>Nick</th>
- <th>Ip address</th>
- <th>Port</th>
- <th>Additional info</th>
+ <% if(peerList.length > 0) { %>
+ <th>Nick</th>
+ <th>Ip address</th>
+ <th>Port</th>
+ <th>Additional info</th>
+ <% } %>
</thead>
<tbody>
<% for(var i=0; i<peerList.length; ++i) { %>
@@ -55,9 +102,11 @@
</div>
<table class="pure-table pure-table-horizontal peertable">
<thead>
- <th>Filename</th>
- <th>Hash</th>
- <th>Ip address</th>
+ <% if(fileList.length > 0) { %>
+ <th>Filename</th>
+ <th>Hash</th>
+ <th>Ip address</th>
+ <% } %>
</thead>
<tbody>
<% for(var ip in fileList) { %>
@@ -94,6 +143,7 @@ <h2 class="content-subhead">Error details</h2>
<div class="pure-menu pure-menu-open">
<ul>
<li><a class="pure-menu-heading" href="#">tapi2p</a></li>
+ <li><a href="#chat">Chat</a></li>
<li><a href="#peers">Peers</a></li>
<li><a href="#files">Files</a></li>
<li><a href="#downloads">Downloads</a></li>
View
58 ui/web/js/tapi2p-backbone.js
@@ -1,7 +1,7 @@
var FileModel = Backbone.Model.extend({
- updateFiles: function(peer_ip, files) {
+ updateFiles: function(peer_ip, peer_port, files) {
var obj={};
- obj[peer_ip]=files;
+ obj[peer_ip + ":" + peer_port]=files;
this.set(obj);
}
});
@@ -12,6 +12,16 @@ var PeerModel = Backbone.Model.extend({
}
});
+var ChatModel = Backbone.Model.extend({
+ newMessage: function(msg) {
+ this.get("chatHistory").push(msg);
+ this.trigger("newMessage");
+ }
+});
+
+var chatModel = new ChatModel();
+chatModel.set({chatHistory: []});
+
var peerModel = new PeerModel();
peerModel.set({peers: []});
@@ -46,6 +56,38 @@ var MainView = Backbone.View.extend({
}
});
+$(window).on("keypress", function(e)
+{
+ if(e.keyCode==13)
+ {
+ var $chatinput=$("#chatinput");
+ if(!$chatinput.val()) return;
+ chatModel.newMessage("[" + peermap.localhost.nick + "] " + $chatinput.val());
+ backend.sendCommand(backend.Commands.Message, $chatinput.val());
+ $chatinput.val("");
+ }
+});
+
+var ChatView = Backbone.View.extend({
+ el: $("#tapi2p-main"),
+ model: chatModel,
+ tagName: "div",
+ className: "tapi2p-chat",
+ initialize: function() {
+ this.model.on("newMessage", function(p)
+ {// Not exactly sure why this is needed here as well.
+ if(this.$el.is(":visible")) this.render(p);
+ }, this);
+ this.render();
+ },
+ render: function() {
+ if(!this.$el.is(":visible")) return this;
+
+ var template=_.template($("#" + this.className + "-template").html(), {welcome_message: this.welcome, chatHistory: this.model.get("chatHistory")});
+ this.$el.html(template);
+ }
+});
+
var PeerView = Backbone.View.extend({
el: $("#tapi2p-main"),
model: peerModel,
@@ -92,6 +134,7 @@ var DownloadsView = new RenderableTemplate("tapi2p-downloads");
var Router = Backbone.Router.extend({
routes: {
"": "root",
+ "chat" : "chat",
"peers": "peers",
"error": "error",
"files": "files",
@@ -101,6 +144,7 @@ var Router = Backbone.Router.extend({
var r=new Router();
r
+.on("route:chat", render(ChatView))
.on("route:peers", render(PeerView))
.on("route:error", render(ErrorView))
.on("route:downloads", render(DownloadsView))
@@ -130,6 +174,9 @@ function tapi2p_handle_message(e)
switch(d.cmd)
{
case backend.Commands.PeerConnected:
+ {
+ peermap[d.peers.addr] = d.peers.nick;
+ }
case backend.Commands.PeerDisconnected:
{
backend.sendCommand(backend.Commands.ListPeers);
@@ -137,7 +184,7 @@ function tapi2p_handle_message(e)
}
case backend.Commands.FileList:
{
- fileModel.updateFiles(d.addr, d.data.files);
+ fileModel.updateFiles(d.addr, d.port, d.data.files);
break;
}
case backend.Commands.Message:
@@ -152,7 +199,11 @@ function tapi2p_handle_message(e)
});
r.navigate("", {trigger: true, replace: true});
Backbone.history.loadUrl();
+ break;
}
+ var nick=peermap[d.addr];
+ if(!nick) nick=d.addr;
+ chatModel.newMessage("[" + nick + "] " + d.data);
break;
}
case backend.Commands.ListPeers:
@@ -160,6 +211,7 @@ function tapi2p_handle_message(e)
peerModel.updatePeers(d.data.peers);
for(var i=0; i<d.data.peers.length; ++i)
{
+ if(!peermap[d.data.peers[i].addr]) peermap[d.data.peers[i].addr]= d.data.peers[i].nick;
backend.sendCommand(backend.Commands.RequestFileListLocal, null, d.data.peers[i].addr, d.data.peers[i].port);
}
break;

0 comments on commit 198ca9b

Please sign in to comment.
Something went wrong with that request. Please try again.