views/page_search.jade
extends layout
block content
.container(style='width: 85%')
if searchTerm !== ''
.row
h3 Sentiment Summary for '#{searchTerm}'
.col.s12.m3.card-panel(style='height: 23em')
#gaugeChart
br
br
if averageSentiment > 0
p Average Sentiment is <b style='color: green'>positive</b>
else if averageSentiment < 0
p Average Sentiment is <b style='color: darkred'>negative</b>
else
p Average Sentiment is <b style='color: grey'>neutral</b>
.col.s12.m6
.card-panel(style='height: 23em')
p.absolute.grey-text(style='margin-top: -12px')
| Hover over a hexagon to read the associated Tweet.<br>
| Sentiment is represented by color
#chart(style='height: 100%')
.col.s12.m3.card-panel(style='height: 23em')
h4.flow-text Top words used with <i>'#{searchTerm}'</i>
ol
for wordObject in data.keywordData
if wordObject.sentiment > 0
- var color = 'green'
else if wordObject.sentiment < 0
- var color = 'darkred'
else
- var color = 'dimgrey'
li
a(href='/search/#{wordObject.text}', style='color: #{color}; font-size: 1.1em;') #{wordObject.text}
.row
h4.flow-text Tone Identification
.card-panel.auto-overflow
.preloader-wrapper.big.active.center-block#toneLoader
.spinner-layer.spinner-blue-only
.circle-clipper.left
.circle
.gap-patch
.circle
.circle-clipper.right
.circle
.col.s12.m4#toneResults1
.col.s12.m4#toneResults2
.col.s12.m4#toneResults3
a.waves-effect.waves-light.btn.pull-right(href='/tone-analyzer/#{searchTerm}') See More...
.row
h4.flow-text Entity Extraction
.card-panel.auto-overflow
p.grey-text Summary of the most spoken about entities in '<i>#{searchTerm}</i>' Tweets
.preloader-wrapper.big.active.center-block#entityLoader
.spinner-layer.spinner-blue-only
.circle-clipper.left
.circle
.gap-patch
.circle
.circle-clipper.right
.circle
.col.s6.m4#entityResults1
.col.s6.m4#entityResults2
.col.s6.m4#entityResults3
.col.s6.m4#entityResults4
.col.s6.m4#entityResults5
.col.s6.m4#entityResults6
.col.s6.m4#entityResults7
.col.s6.m4#entityResults8
a.waves-effect.waves-light.btn.pull-right(href='/entity-extraction/#{searchTerm}', style='margin-top: 3em') See More...
.row
h4.flow-text Compare '<i>#{searchTerm}</i>' with other topics
.card-panel.auto-overflow
.col.s12.m3
p.flow-text '#{searchTerm}' Average
#chart-0.search-av-chart1
.col.s12.m3.offset-m1
p.flow-text Overall Average for Today
#chart-1.search-av-chart2
.col.s12.m4.offset-m1
p.flow-text Compare with more Twitter results
span Enter up to four brand names, retailers, businesses,
| places, celebrities or objects that you'd like to compare
| peoples opinions on.
br
.input-field
label.active(for='brand-1') First Search Term
input.validate#brand-1(type='text', value='#{searchTerm}', disabled)
.input-field
label.active(for='brand-2') Second Search Term
input.validate#brand-2(type='text')
.input-field(style='display:none')
label.active(for='brand-3') Third Search Term
input.validate#brand-3(type='text')
.input-field(style='display: none')
label.active(for='brand-4') Forth Search Term
input.validate#brand-4(type='text')
a.small#add-new(style='cursor: pointer') Add more search queries
br
br
.waves-effect.waves-light.btn.center-block#get-results(style='width: 12em') Get Results!
.row
.col.s6
h4.flow-text Top Positive Tweets
for tweet in topTweets.topPositive
div.card-panel
div.pull-right
b(style='color: green') #{tweet.sentiment * 100}%
p !{tweet.body}
if tweet.location
i.tiny.material-icons.small-grey.inline location_on
p.small-grey.inline= tweet.location.place_name
div.pull-right
i.tiny.material-icons.small-grey.inline schedule
p.small-grey.inline #{new Date(tweet.date).getHours()}:#{new Date(tweet.date).getMinutes()}
.col.s6
h4.flow-text Top Negative Results
for tweet in topTweets.topNegative
div.card-panel
div.pull-right
b(style='color: darkred') #{tweet.sentiment * 100}%
p !{tweet.body}
if tweet.location
i.tiny.material-icons.small-grey.inline location_on
p.small-grey.inline= tweet.place_name
div.pull-right
i.tiny.material-icons.small-grey.inline schedule
p.small-grey.inline #{new Date(tweet.date).getHours()}:#{new Date(tweet.date).getMinutes()}
a.waves-effect.waves-teal.btn-large.whiteBtn.center-block(style='width: 20em', href='/text-tweets/#{searchTerm}') View more Tweets
.row(style='padding: 1em 2em 1em 1em')
h3 Click on a link below to see the '#{searchTerm}' results data in another format
each page in pages
.col.s12.m4.l3.xl1
a(href='/#{page.page}')
.card.home-card
.card-image.waves-effect.waves-block.waves-light
img(src='/images/thumbnails/thumb_#{page.index}.png')
.card-content
span.card-title.grey-text.text-darken-4= page.title
.row
.row: br
.col.s12.offset-m2.m8.offset-l3.l6
.card-panel
h3.flow-text Make a new search
.input-field
input#txtKeyword.validate(type='text')
label(for='txtKeyword') Enter a keyword, topic, brand, celebrity or search term
block scripts
if searchTerm != ''
script(type='text/javascript').
var results = !{JSON.stringify(data.tweets)};
var average = !{JSON.stringify(averageSentiment)};
var searchTerm = !{JSON.stringify(searchTerm)};
var tweetBody = !{JSON.stringify(tweetBody)};
var showAllCharts = false;
script(type = 'text/javascript', src = '/bower_components/d3/d3.min.js')
script(type = 'text/javascript', src = '/bower_components/hexbin/index.js')
script(type = 'text/javascript', src = '/bower_components/d3tip/index.js')
script(type='text/javascript', src='/bower_components/c3/c3.min.js')
script(type='text/javascript', src='/javascripts/charts/comparer.js')
script(type='text/javascript', src='/javascripts/search-summary.bundle.js')
script(type='text/javascript', src='/javascripts/tone-analysis.bundle.js')
script(type='text/javascript', src='/javascripts/charts/entity-summary.js')
script(type='text/javascript', src='/javascripts/charts/comparison-for-search.js')
else
script.
$('#txtKeyword').keyup(function (e) {if (e.keyCode === 13) {
showLoader();
window.location = '/search/' + $('#txtKeyword').val();
}});