round-tripping

ericmittelhammer · May 2, 2014 · 10c3a45 · 10c3a45
1 parent ae19ae4
commit 10c3a45
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 16 deletions.
diff --git a/app/views/index.scala.html b/app/views/index.scala.html
@@ -1,7 +1,48 @@
-@(message: String)
+@(content: String)
+<!DOCTYPE html>
 
-@main("Welcome to Play") {
+<html>
+    <head>
+        <title>Reactive Tweets</title>
+        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+        <!--link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"-->
+        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/flatly.min.css")">
+        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/main.css")">
 
-    @play20.welcome(message)
+        <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
 
-}
+        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+
+        <script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
+
+        <script src="@routes.Assets.at("javascripts/application.js")" type="text/javascript"></script>
+    </head>
+    <body>
+
+        <script id="message-template" type="text/x-handlebars-template">
+          <li>
+            <div class="message">
+                <p class="author">{{author}}</p>
+                <p class="text">{{message}}</p>
+            </div>
+          </li>
+        </script>
+
+      <div class="header">
+        <div class="container">
+            <h1>Reactive Tweets</h1>
+            <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        </div>
+      </div>
+
+        <div class="container text-center">
+             <form class="form-horizontal">
+                <div class="col-lg-6">
+                    <input type="text" class="form-control col-lg-4" id="inputName" placeholder="Your Name">
+                </div>
+                <button type="button" class="btn btn-default" onclick="RT.connect()">Connect</button>
+            </form>
+          <ul id="messages"></ul>
+        </div> <!-- /container -->
+    </body>
+</html>
diff --git a/conf/application.conf b/conf/application.conf
@@ -7,14 +7,14 @@
 #}
 
 
-messageStream {
-    type = "twitter"
-    url = "https://stream.twitter.com/1.1/statuses/sample.json?filter_level=medium",
-    consumerKey = YOUR_KEY_HERE,
-    consumerSecret = YOUR_SECRET_HERE,
-    accessToken = YOUR_TOKEN_HERE,
-    accessTokenSecret = YUOR_TOKEN_SECRET_HERE,
-}
+#messageStream {
+#    type = "twitter"
+#    url = "https://stream.twitter.com/1.1/statuses/sample.json?filter_level=medium",
+#    consumerKey = YOUR_KEY_HERE,
+#    consumerSecret = YOUR_SECRET_HERE,
+#    accessToken = YOUR_TOKEN_HERE,
+#    accessTokenSecret = YUOR_TOKEN_SECRET_HERE,
+#}
 
 
 # Secret key

diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -0,0 +1,32 @@
+var RT = {
+
+    template : function(){},
+
+    prependListItem : function(listItemHTML){
+        $(listItemHTML)
+            .hide()
+            .css('opacity',0.0)
+            .prependTo('#messages')
+            .slideDown('fast')
+            .animate({opacity: 1.0});
+    },
+
+    connect: function() {
+        var name = $('#inputName').val();
+        var socket = new WebSocket('ws://localhost:9000/socket?name=' + name);
+
+        socket.onmessage = function(event) {
+            var message = JSON.parse(event.data);
+            console.log(message);
+            console.log(RT.template);
+            var html = RT.template(message);
+            RT.prependListItem(html);
+        };
+    }
+};
+
+$(document).ready( function() {
+    var source   = $("#message-template").html();
+    RT.template = Handlebars.compile(source);
+    console.log(RT.template);
+});
diff --git a/public/javascripts/jquery-1.9.0.min.js b/public/javascripts/jquery-1.9.0.min.js
diff --git a/public/stylesheets/flatly.min.css b/public/stylesheets/flatly.min.css
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
@@ -0,0 +1,20 @@
+body {
+    margin-left:0;
+    margin-right: 0;
+}
+
+.header {
+    padding-top: 60px;
+    padding-bottom: 60px;
+    font-size: 24px;
+    text-align: left;
+
+    position: relative;
+    padding: 30px 15px;
+    color: #fff;
+    background-color: #2c3e50;
+}
+
+.header p {
+        text-shadow: 0 1px 0 rgba(0,0,0,.1);
+}