Skip to content

Commit 05f38e3

Browse files
thecoducerthecoducer
committed
added table filtering
1 parent 9074230 commit 05f38e3

File tree

4 files changed

+96
-6
lines changed

4 files changed

+96
-6
lines changed

‎tsa_app/static/css/home.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,3 +235,31 @@ html {
235235
background-attachment: fixed;
236236
background-size: cover;
237237
}
238+
239+
.bg-positive {
240+
background-color: #a1f0b0;
241+
}
242+
243+
.bg-negative {
244+
background-color: #ff9c9c;
245+
}
246+
247+
.bg-neutral {
248+
background-color: #99ceff;
249+
}
250+
251+
#btn-all-id {
252+
margin-bottom: 8px;
253+
}
254+
255+
#btn-pos-id {
256+
margin-bottom: 8px;
257+
}
258+
259+
#btn-neg-id {
260+
margin-bottom: 8px;
261+
}
262+
263+
#btn-neu-id {
264+
margin-bottom: 8px;
265+
}

‎tsa_app/static/images/filter.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎tsa_app/static/js/home.js‎

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,12 @@ $('#search-form').on('submit', function (event) {
6969
$('#no-data').hide();
7070
$("try-again").hide();
7171
$("#result").hide();
72+
73+
$("#btn-all-id").css({ 'font-size': '1.4rem' });
74+
$("#btn-pos-id").css({ 'font-size': '1rem' });
75+
$("#btn-neg-id").css({ 'font-size': '1rem' });
76+
$("#btn-neu-id").css({ 'font-size': '1rem' });
77+
7278
console.log($("#searchinput-id").val());
7379
console.log($("input:radio[name='option']:checked").val());
7480
getdata();
@@ -83,6 +89,46 @@ function sentiment_to_color(sentiment) {
8389
else return 'tr-neutral';
8490
}
8591

92+
function filter_all() {
93+
$('.tr-positive').show();
94+
$('.tr-negative').show();
95+
$('.tr-neutral').show();
96+
$("#btn-all-id").css({ 'font-size': '1.4rem' });
97+
$("#btn-pos-id").css({ 'font-size': '1rem' });
98+
$("#btn-neg-id").css({ 'font-size': '1rem' });
99+
$("#btn-neu-id").css({ 'font-size': '1rem' });
100+
}
101+
102+
function filter_pos() {
103+
$('.tr-positive').show();
104+
$('.tr-negative').hide();
105+
$('.tr-neutral').hide();
106+
$("#btn-all-id").css({ 'font-size': '1rem' });
107+
$("#btn-pos-id").css({ 'font-size': '1.4rem' });
108+
$("#btn-neg-id").css({ 'font-size': '1rem' });
109+
$("#btn-neu-id").css({ 'font-size': '1rem' });
110+
}
111+
112+
function filter_neg() {
113+
$('.tr-positive').hide();
114+
$('.tr-negative').show();
115+
$('.tr-neutral').hide();
116+
$("#btn-all-id").css({ 'font-size': '1rem' });
117+
$("#btn-pos-id").css({ 'font-size': '1rem' });
118+
$("#btn-neg-id").css({ 'font-size': '1.4rem' });
119+
$("#btn-neu-id").css({ 'font-size': '1rem' });
120+
}
121+
122+
function filter_neu() {
123+
$('.tr-positive').hide();
124+
$('.tr-negative').hide();
125+
$('.tr-neutral').show();
126+
$("#btn-all-id").css({ 'font-size': '1rem' });
127+
$("#btn-pos-id").css({ 'font-size': '1rem' });
128+
$("#btn-neg-id").css({ 'font-size': '1rem' });
129+
$("#btn-neu-id").css({ 'font-size': '1.4rem' });
130+
}
131+
86132
/* AJAX for posting search form data */
87133
function getdata() {
88134

@@ -105,9 +151,13 @@ function getdata() {
105151
$('#table-result').empty();
106152
$('#table-head').empty();
107153
$('#chart-container').empty();
108-
$("#index-label-content").empty();
154+
/* $("#index-label-content").empty(); */
109155
$("#index-label-help").empty();
110156

157+
$('#btn-pos-id').empty();
158+
$('#btn-neg-id').empty();
159+
$('#btn-neu-id').empty();
160+
111161
console.log("inside success");
112162

113163
if (json['user not found'] == 'user not found') {
@@ -136,7 +186,7 @@ function getdata() {
136186
var profile = "https://twitter.com/" + username
137187

138188
$("#table-result").append("<tr class=" + sentiment_to_color(json[i]['sentiment']) + '> <td>' + json[i]['timestamp'] + "</td>" + "<td>" + '<a href="' + url + '" target="_blank">' + json[i]['tidy_tweet'] + "</a></td>" + "<td>" + '<a href="' + profile + '" target="_blank">' + json[i]['username'] + "</a></td>" + '<td class="hidden">' + json[i]['sentiment'] + "</td></tr>");
139-
189+
140190
}
141191
} else {
142192
$("#table-head").append('<tr><th scope="col">Timestamp</th>' + '<th scope="col">Tweets</th>' + '<th class="hidden" scope="col">Sentiment</th></tr>');
@@ -147,7 +197,7 @@ function getdata() {
147197
var url = "https://twitter.com/" + username + "/status/" + id
148198

149199
$("#table-result").append("<tr class=" + sentiment_to_color(json[i]['sentiment']) + "> <td>" + json[i]['timestamp'] + "</td>" + "<td>" + '<a href="' + url + '" target="_blank">' + json[i]['tidy_tweet'] + "</a></td>" + '<td class="hidden">' + json[i]['sentiment'] + "</td> </tr>");
150-
200+
151201
}
152202
}
153203

@@ -174,7 +224,11 @@ function getdata() {
174224
var neglabel = 'Negative (' + negative + '%)';
175225
var neulabel = 'Neutral (' + neutral + '%)';
176226

177-
$("#index-label-content").append('<span class="badge tr-positive">' + poslabel + '</span><span class="badge tr-negative">' + neglabel + '</span><span class="badge tr-neutral">' + neulabel + '</span>');
227+
/* $("#index-label-content").append('<button class="btn bg-warning" onclick="filter_all()">All</button> ' + '<button class="btn bg-positive" onclick="filter_pos()">' + poslabel + '</button> <button class="btn bg-negative" onclick="filter_neg()">' + neglabel + '</button> <button class="btn bg-neutral" onclick="filter_neu()">' + neulabel + '</button> '); */
228+
229+
$('#btn-pos-id').append(poslabel);
230+
$('#btn-neg-id').append(neglabel);
231+
$('#btn-neu-id').append(neulabel);
178232

179233
$('#chart-container').append('<canvas id="myChart"></canvas>')
180234

‎tsa_app/templates/home.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,18 @@ <h4 class="alert-heading">No tweets found.</h4>
118118
<div class="alert alert-success hidden" role="alert" id="display-count">
119119
</div>
120120

121-
<div class="alert hidden" id="index-label">
121+
<div class="alert hidden" id="index-label" style="background-color: #f0f0f0;">
122122
<center>
123+
<p style="margin-bottom: 10px;">Filter by sentiment:</p>
124+
123125
<h4 id="index-label-content">
126+
<button id="btn-all-id" class="btn bg-warning" onclick="filter_all()">All</button>
127+
<button id="btn-pos-id" class="btn bg-positive active" onclick="filter_pos()"></button>
128+
<button id="btn-neg-id" class="btn bg-negative" onclick="filter_neg()"></button>
129+
<button id="btn-neu-id" class="btn bg-neutral" onclick="filter_neu()"></button>
124130
</h4>
125-
<p id="index-label-help">
131+
132+
<p id="index-label-help" style="margin-top: 15px;">
126133
</p>
127134
</center>
128135
</div>

0 commit comments

Comments
 (0)