Last step in creating a talk recommender for Pycon.
The rest of the project can be found on github: https://github.com/mikecunha/pycon_reco
In [1]:
%%writefile app/scripts/pytalk.js
function update_related(r) {
$("a.favButton").removeClass("recd");
for(var i=0; i<r.talks.length; i++) {
var obj = r.talks[i];
$("#" + obj ).addClass("recd");
}
//update nav buttons
var rec_count = r.talks.length;
$("#recs").text("Recommended (" + rec_count +")");
return false;
}
$('div').live('pageinit', function(){
$("a.favButton").click(function(){
$(this).toggleClass('favd');
$(this).toggleClass('ui-alt-icon');
var sel_talks="";
var fav_count=0;
$('.favd').each(function() {
sel_talks += "," + this.id;
fav_count += 1;
});
//update nav buttons
$("#favs").text("Favs (" + fav_count +")");
$.ajax({type: "POST",
url: "http://localhost:8181/rec",
data: { t: sel_talks},
cache: false,
success: function(resp){
update_related(resp);
}
});
});
$("li a").click(function(){
$(this).find("p.talk-time").toggle();
$(this).find("p.li-details").toggleClass('expanded');
});
$("#recs").click(function(){
$("a.favButton:not(.recd)").parent().hide();
$(".recd").parent().show();
});
$("#favs").click(function(){
$("a.favButton:not(.favd)").parent().hide();
$(".favd").parent().show();
});
$("#allT").click(function(){
$("li").show();
});
});
In [2]:
%%writefile app/css/pytalk.css
<style>
.ui-btn-no-text_wider {
width: 60px !important;
}
.favd:after {
background-color:yellow !important;
}
/*
ul li .ui-btn:after {
background-color: #4da6ff;
}
*/
ul li h2 {
padding-right: 4em !important;
}
ul li h2, .li-details.expanded {
white-space: pre !important; /* CSS 2.0 */
white-space: pre-wrap !important; /* CSS 2.1 */
white-space: pre-line !important; /* CSS 3.0 */
white-space: -pre-wrap !important; /* Opera 4-6 */
white-space: -o-pre-wrap !important; /* Opera 7 */
white-space: -moz-pre-wrap !important; /* Mozilla */
white-space: -hp-pre-wrap !important; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
</style>
In [3]:
%%writefile app/pytalk.html
<!doctype html>
<html>
<head>
<title>Pycon Talk Reco</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/pytalk.css">
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/pytalk.js"></script>
</head>
<body>
<div data-role="page" id="home">
<!-- default panel -->
<div data-role="panel" id="defaultpanel" data-position-fixed="true">
<h3>Default panel options</h3>
<p>To close, click off the panel, swipe left or right, hit the Esc keyuse the button below:</p>
</div><!-- /default panel -->
<div data-role="header" data-position="fixed">
<h1>Pycon 2015 Talks</h1>
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a id="allT" data-icon="grid" class="ui-btn-active">All Talks</a></li>
<li><a id="favs" data-icon="star">Favs</a></li>
<li><a id="recs" data-icon="gear">Recommended</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-filter="true" class="">
$item_list
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
In [4]:
import fileinput
import pandas as pd
import html
cur_talks = pd.read_csv( 'data/pycon_talks_2015.csv', sep="\t" )
def uni_to_HTML_ent(text):
"""Converts unicode to HTML entities. For example '&' becomes '&'."""
return html.escape(text).encode('ascii', 'xmlcharrefreplace').decode()
item_list = ''
for ind, t in cur_talks.iterrows():
item_list += """<li><a href="">
<h2>""" + uni_to_HTML_ent( t.title ) + """</h2>
<p><strong>""" + uni_to_HTML_ent( t.author ) + """</strong></p>
<p class="li-details">""" + uni_to_HTML_ent( t.desc ) + """</p>
<p class="ui-li-aside talk-time" style="display: none"><strong>""" + t.weekday + """</strong></p>
</a>
<a id=""" +'"'+ str(ind) +'"'+ """ class="ui-btn ui-btn-no-text_wider favButton" data-icon="star"></a></li>
"""
item_list = item_list.strip()
for line in fileinput.input('app/pytalk.html', inplace=True):
print(line.replace('$item_list', item_list), end='')
In [6]:
%%HTML
<iframe src="app/pytalk.html" width=500 height=600></iframe>
In [ ]: