--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/podium-cp-tweets.html Wed Feb 15 18:52:07 2012 +0100
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <title>controlpanel</title>
+ <meta name="description" content="" />
+ <link rel="stylesheet" href="css/base-metric.css" />
+ <link rel="stylesheet" href="css/controlpanel.css" />
+ <style type="text/css">
+ #podium-container {
+ width: 800px;
+ margin: 200px auto 0;
+ }
+ #podium {
+ width: 100%;
+ height: 300px;
+ cursor: pointer;
+ }
+ #podium-labels {
+ float: left;
+ width: 100%;
+ clear: both;
+ margin-top: 20px;
+ }
+ #podium-labels li {
+ float: left;
+ width: 200px;
+ color: #ffffff;
+ text-align: center;
+ font-size: 28px;
+ font-weight: bold;
+ }
+ </style>
+ <script type="text/javascript" src="lib/jquery.min.js"></script>
+ <script type="text/javascript" src="js/podium.js"></script>
+ <script type="text/javascript" src="js/tweetsource.js"></script>
+ <script type="text/javascript">
+ var tzero = new Date();
+ $(function() {
+ setInterval(function() {
+ var _t = Math.floor((new Date() - tzero)/1000),
+ _s = _t % 60,
+ _m = Math.floor(_t/60) % 60,
+ _h = Math.floor(_t/3600);
+ $("#btv-cp-temps").html(
+ _h + ':' + (_m < 10 ? '0' : '') + _m + ':' + (_s < 10 ? '0' : '') + _s
+ )
+ }, 500);
+ var _keywords = ['Sarkozy', 'Hollande', 'candidat', 'politique']
+ myTweetSource = new Btv_TweetSource({
+ keywords: _keywords
+ });
+ myPodium = new Btv_Podium([0,0,0,0]);
+ myTweetSource.setTweetsCallback(function() {
+ $("#btv-cp-nb-tweets").html(this.count());
+ var _counts = [];
+ for (var _i = 0; _i < _keywords.length; _i++) {
+ _counts.push(this.search(_keywords[_i]).count());
+ }
+ myPodium.update(_counts);
+ $('#btv-cp-liste-tweets-tout').html(
+ this.reverse().slice(0,20).map(function(_t) {
+ return '<li onclick="addTweet(\''
+ + _t.id_str
+ + '\'); return false;"><a title="Ajouter à la sélection" href="#"><span class="btv-cp-tweet-date">'
+ + _t.created_at.match(/\d+:\d+:\d+/)[0]
+ + '</span> <span class="btv-cp-tweet-from">@'
+ + _t.from_user
+ + '</span> <span class="btv-cp-tweet-text">'
+ + _t.text
+ + '</span><div class="btv-cp-tweet-button btv-cp-tweet-add"></div></a></li>'
+ }).join('')
+ )
+ });
+ });
+ function addTweet(tweetId) {
+ var _t = myTweetSource.tweetById(tweetId);
+ if (_t) {
+ $("#btv-cp-liste-tweets-selection").prepend(
+ '<li onclick="showTweet(\''
+ + _t.id_str
+ + '\'); return false;"><a title="Afficher sur l\'écran" href="#"><span class="btv-cp-tweet-date">'
+ + _t.created_at.match(/\d+:\d+:\d+/)[0]
+ + '</span> <span class="btv-cp-tweet-from">@'
+ + _t.from_user
+ + '</span> <span class="btv-cp-tweet-text">'
+ + _t.text
+ + '</span><div class="btv-cp-tweet-button btv-cp-tweet-show"></div></a></li>'
+ );
+ }
+ }
+ </script>
+ </head>
+ <body>
+ <div id="btv-cp-container">
+ <div class="btv-cp-line">
+ <div class="btv-cp-element">
+ <h2>Bubble <b>TV</b></h2>
+ </div>
+ <div class="btv-cp-element" id="btv-cp-cont-filtre">
+ <h3>Rechercher/Filtrer</h3>
+ <input id="btv-cp-champ-filtre" />
+ <a href="#" id="btv-cp-clear-filtre">x</a>
+ </div>
+ <div class="btv-cp-element">
+ <h3>Derniers tweets</h3>
+ <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
+ </ul>
+ </div>
+ <div class="btv-cp-element">
+ <h3>Tweets sélectionnés</h3>
+ <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-selection">
+ </ul>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-amont">
+ <h3>Arrivée des tweets</h3>
+ <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-aval">
+ <h3>Purge des colonnes</h3>
+ <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
+ </div>
+ <div class="btv-cp-element btv-cp-compteur">
+ <h3>Nombre de tweets</h3>
+ <h4 id="btv-cp-nb-tweets"></h4>
+ </div>
+ <div class="btv-cp-element btv-cp-compteur">
+ <h3>Temps écoulé</h3>
+ <h4 id="btv-cp-temps">0:00:00</h4>
+ </div>
+ </div>
+ </div>
+ <div id="podium-container">
+ <div id="podium"></div>
+ <ul id="podium-labels">
+ <li>Sarkozy</li>
+ <li>Hollande</li>
+ <li>candidat</li>
+ <li>politique</li>
+ </ul>
+ </div>
+ </body>
+</html>