Skip to content

Commit 997a6db

Browse files
matthiasnmatthiasn
committed
project structure for ReactJS app
1 parent 312139d commit 997a6db

22 files changed

+27037
-7
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,7 @@ activator-sbt-idea-shim.sbt
2828

2929
public/scala-js/
3030

31+
react-js/build/
32+
react-js/dist/
33+
react-js/reports/
34+
react-js/node_modules/

‎app/controllers/BirdWatch.scala

+6-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,12 @@ object BirdWatch extends Controller {
2929
Ok(views.html.index(Conf.getOrEmpty("ga.hostname"), Conf.getOrEmpty("ga.domain"), Conf.getOrEmpty("ga.id")))
3030
}
3131

32-
/** Controller action serving React chat page */
33-
def indexReactScalaJS = Action { Ok(views.html.react()) }
34-
def indexReactScalaJsOpt = Action { Ok(views.html.reactOpt()) }
32+
/** Controller action serving ReactJS page */
33+
def indexReactJs = Action { Ok(views.html.react_js()) }
34+
35+
/** Controller action serving React ScalaJS page */
36+
def indexReactScalaJS = Action { Ok(views.html.react_scalajs()) }
37+
def indexReactScalaJsOpt = Action { Ok(views.html.react_scalajs_opt()) }
3538

3639
/** Controller Action serving Tweets as JSON going backwards in time. Query passed in as JSON */
3740
def search = Action.async(parse.json) {

‎app/views/react_js.scala.html

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>BirdWatch</title>
8+
9+
<!-- Stylesheets -->
10+
<link rel="stylesheet" media="screen" href="/assets/stylesheets/main.css">
11+
<link rel="stylesheet" media="screen" href="/assets/stylesheets/bootstrap-glyphicons.css">
12+
<link rel="stylesheet" media="screen" href="/assets/stylesheets/bootstrap.min.css">
13+
<link rel="stylesheet" media="screen" href="/assets/stylesheets/rickshaw.min.css">
14+
<link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
15+
</head>
16+
17+
<body>
18+
19+
<div>
20+
21+
<!-- Navigation Bar -->
22+
<div class="navbar">
23+
<div class="container">
24+
25+
<span class="navbar-brand">BirdWatch</span>
26+
27+
<!-- Search field in NavBar -->
28+
<div class="navbar-form pull-left col-lg-6 input-group">
29+
<form id="searchForm" class="input-group">
30+
<input type="text" id="searchField" class="form-control"
31+
placeholder="Example search: java (job OR jobs OR hiring)" />
32+
<span class="input-group-btn">
33+
<button class="btn btn-primary" type="button" onclick="BirdWatch.search()">
34+
<span class="glyphicon glyphicon-search"></span>
35+
</button>
36+
</span>
37+
</form>
38+
</div>
39+
40+
<div class="nav-collapse">
41+
42+
<!-- Tweets. Project info -->
43+
<ul class="nav navbar-nav pull-right">
44+
<li class="dropdown">
45+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About
46+
<b class="caret"></b></a>
47+
<ul class="dropdown-menu">
48+
<li><a href="http://matthiasnehlsen.com"
49+
target="_blank">Project Introduction</a></li>
50+
<li><a href="http://matthiasnehlsen.com" target="_blank">Blog</a></li>
51+
<li><a href="https://github.com/matthiasn" target="_blank">Project on GitHub</a></li>
52+
<li><a href="#" ng-click="legalStuff()">Legal stuff</a></li>
53+
</ul>
54+
</li>
55+
</ul>
56+
57+
<!-- Settings -->
58+
<ul class="nav navbar-nav pull-right">
59+
<li class="dropdown">
60+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings
61+
<b class="caret"></b></a>
62+
<ul class="dropdown-menu">
63+
<li><a href="#">Previous Tweets:</a></li>
64+
<li>
65+
<a>
66+
<select class="form-control" id="prev-size">
67+
<option value="5000">5000</option>
68+
<option value="10000">10000</option>
69+
<option value="20000">20000</option>
70+
<option value="50000">50000</option>
71+
<option value="100000">100000</option>
72+
</select>
73+
</a>
74+
</li>
75+
<li><hr></li>
76+
<li><a href="#">Page Size:</a></li>
77+
<li>
78+
<a>
79+
<select class="form-control" id="page-size">
80+
<option value="5">5</option>
81+
<option value="10" selected="selected">10</option>
82+
<option value="25">25</option>
83+
<option value="50">50</option>
84+
<option value="100">100</option>
85+
</select>
86+
</a>
87+
</li>
88+
<li>
89+
<a>
90+
<select class="form-control" id="offset-size">
91+
<option value="0" selected>0</option>
92+
<option value="1">1</option>
93+
<option value="2">2</option>
94+
<option value="3">3</option>
95+
<option value="4">4</option>
96+
<option value="5">5</option>
97+
</select>
98+
</a>
99+
</li>
100+
</ul>
101+
</li>
102+
</ul>
103+
104+
<div class="nav navbar-text col-lg-2 pull-right">Tweet count: <span id="tweet-count"></span></div>
105+
106+
</div>
107+
</div>
108+
</div>
109+
110+
<!-- Tweets column with Pagination -->
111+
<div class="container container-fluid">
112+
<div class="row">
113+
<!-- Pagination -->
114+
<pagination rotate="false" num-pages="cf.numPages(pageSize)" current-page="currentPage" max-size="12"
115+
boundary-links="true"></pagination>
116+
<span class="toggleLive" ng-class="live ? 'toggleActive' : ''" ng-click="toggleLive()">Live</span>
117+
</div>
118+
119+
<div class="btn-group">
120+
<button type="button" class="btn">Sort by</button>
121+
<button type="button" class="btn btn-primary" data-btn-radio="'latest'"
122+
onclick="BirdWatch.sortByLatest()">latest</button>
123+
<button type="button" class="btn btn-primary" data-btn-radio="'followers'"
124+
onclick="BirdWatch.sortByFollowers()">followers</button>
125+
<button type="button" class="btn btn-primary" data-btn-radio="'retweets'"
126+
onclick="BirdWatch.sortByRetweets()">retweets</button>
127+
<button type="button" class="btn btn-primary" data-btn-radio="'favourites'"
128+
onclick="BirdWatch.sortByFavorites()">favorites</button>
129+
</div>
130+
131+
<!-- Main page layout -->
132+
<div class="row">
133+
<!-- Tweet Cards inside frame -->
134+
<div class="col-lg-4" id="tweet-frame"></div>
135+
136+
<!-- Charts column -->
137+
<div class="col-lg-8">
138+
<h6>Word Frequency (Processing queue size: <span id="word-queue-size"></span>)</h6>
139+
<div id="wordBars" class="barchart" ></div>
140+
<hr />
141+
<div id="wordCloud" class="cloud" ></div>
142+
</div>
143+
144+
</div>
145+
</div>
146+
</div>
147+
148+
<!-- Scripts placed at the end of the document so the pages load faster -->
149+
150+
<script src="/assets/javascripts/vendor/jquery-1.10.2.min.js"></script>
151+
<script src="/assets/javascripts/vendor/bootstrap.min.js"></script>
152+
<script src="/assets/javascripts/vendor/d3.v3.js"></script>
153+
<script src="/assets/javascripts/vendor/d3.layout.cloud.js"></script>
154+
<script src="/assets/javascripts/vendor/crossfilter.v1.min.js"></script>
155+
<script src="/assets/javascripts/vendor/rickshaw.min.js"></script>
156+
<script src="/assets/javascripts/vendor/moment.min.js"></script>
157+
<script src="/assets/javascripts/vendor/underscore.min.js"></script>
158+
<script src="/assets/javascripts/vendor/react-0.8.0.min.js"></script>
159+
160+
<script type="text/javascript" src="assets/react-js/birdwatch.js"></script>
161+
162+
</body>
163+
</html>

‎app/views/react.scala.html renamed to ‎app/views/react_scalajs.scala.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ <h6>Word Frequency (Processing queue size: <span id="word-queue-size"></span>)</
154154
<script src="/assets/javascripts/vendor/moment.min.js"></script>
155155
<script src="/assets/javascripts/vendor/underscore.min.js"></script>
156156

157-
<script src="/assets/javascripts/vendor//react-0.8.0.min.js"></script>
157+
<script src="/assets/javascripts/vendor/react-0.8.0.min.js"></script>
158158
<script src="/assets/javascripts/vendor/jsx-transformer-0.8.0.js"></script>
159159

160160
<script type="text/javascript" src="assets/js/react-interop.js"></script>

‎app/views/reactOpt.scala.html renamed to ‎app/views/react_scalajs_opt.scala.html

File renamed without changes.

‎conf/routes

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
# BirdWatch Routes
22

33
GET / controllers.BirdWatch.index
4-
GET /react controllers.BirdWatch.indexReactScalaJS
5-
GET /react-opt controllers.BirdWatch.indexReactScalaJsOpt
4+
GET /react-js controllers.BirdWatch.indexReactJs
5+
GET /react-scalajs controllers.BirdWatch.indexReactScalaJS
6+
GET /react-scalajs-opt controllers.BirdWatch.indexReactScalaJsOpt
67
GET /tweetFeed controllers.BirdWatch.tweetFeed(q: String ?= "*")
78
POST /tweets/search controllers.BirdWatch.search
89

‎public/js/react-interop.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ var BirdWatch = BirdWatch || {};
4747
BirdWatch.addWords(words);
4848
};
4949

50-
/** POST chat message */
50+
/** POST search */
5151
BirdWatch.loadPrevious = function (q, n, chunkSize, offset) {
5252
if (n > 0) {
5353
$.ajax(

0 commit comments

Comments
 (0)