Merge pull request #23 from olinpin/feat/filter-feed

Feat/filter feed

dashboard_static/index.html

@@ -62,7 +62,7 @@
             <div class="maintable">
                 <div class="leftcol column">
                     <span class="colheader">Latest Cluccs</span>
-                    <div class="tweetcontainer" id="tweet">
+                    <div class="tweetcontainer latest" id="latest">
                         <div class="tweet">
                             <img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
                             <div class="tweet-content">
@@ -91,6 +91,9 @@
                 </div>
                 <div class="centercol column">
                     <span class="colheader">Filtered Cluccs</span>
+                    <div class="filtered" id="filtered">
+
+                    </div>
                 </div>
                 <div class="rightcol column">
                     <div class="searchcontainer column">
@@ -130,12 +133,12 @@
     <script src="./js/events.js"></script>
     <script src="./lib/jquery.flot.pie.js"></script>
     <script>
-        block("#tweet").tweets({
+        block("#latest").tweets({
             memory: 20
         });
         block('#pie').piechart();
         events.connect('pie', '#pie');
-        events.connect("tweet", "#tweet");
+        events.connect("tweet", "#latest");
 
         // // create a rolling chart block
         // block('#graph').rolling_chart({

dashboard_static/js/code.js

@@ -1,12 +1,11 @@
 let selectedSports = []
 
 let filters = {
-    selectedSports: selectedSports,
     searchedWords: [],
     blockedWords: [],
-    popularityFilter: {},
     sorted: "time",
-    order: "desc"
+    order: "desc",
+    sports: []
 }
 
 function showFeeds() {
@@ -28,11 +27,13 @@ function tweetCell(tweet) {
     var cell = document.createElement("div");
     cell.innerHTML =
     `<div class="tweet">
-        <a href ="https://www.twitter.com/${tweet.user.screen_name}"><img src="${tweet.user.profile_image_url}" onerror="this.src='media/logo.png'" class="tweet-profilepicture"></a>
+        <a href ="https://www.twitter.com/${tweet.user.screen_name}"><img src="${tweet.user.profile_image_url}" onerror="this.src='media/logo.png';" class="tweet-profilepicture"></a>
         <div class="tweet-content"> 
             <div class="tweet-name">
                 <a class="tweet-nickname" href = "https://www.twitter.com/${tweet.user.screen_name}" target = "_blank">${tweet.user.name}</a>
                 <a class="tweet-username" href = "https://www.twitter.com/${tweet.user.screen_name}" target = "_blank">@${tweet.user.screen_name}</a>
+                <!-- add tweet date called created_at-->
+                <p class="tweet-date">${tweet.created_at}</p>
             </div>
             <span class="tweet-text">${tweet.text}</span>
             <div class="tweet-interactions">
@@ -54,22 +55,13 @@ function tweetCell(tweet) {
     return cell
 }
 
-function filterTweets(tweets, bannedWords=[], searchWords=[], likesTop=null, likesBottom=null, retweetsTop=null, retweetsBottom=null, repliesTop=null, repliesBottom=null) {
+function filterTweets(tweets, bannedWords=[], searchWords=[], sorted, order) {
     if(bannedWords.length > 0){
         tweets = filterBannedWords(bannedWords, tweets)
     }
     if(searchWords.length > 0){
         tweets = searchForWords(searchWords, tweets)
     }
-    if(likesTop != null || likesBottom != null){
-        tweets = filterLikes(likesTop, likesBottom, tweets)
-    }
-    if(retweetsTop != null || retweetsBottom != null){
-        tweets = filterRetweets(retweetsTop, retweetsBottom, tweets)
-    }
-    if(repliesTop != null || repliesBottom != null){
-        tweets = filterReplies(repliesTop, repliesBottom, tweets)
-    }
     return tweets
 }
 
@@ -87,49 +79,19 @@ function filterBannedWords(bannedWords, tweets){
 }
 
 function searchForWords(searchWords, tweets){
+    var filteredTweets = []
     for (let i = 0; i < tweets.length; i++) {
         var tweet = tweets[i]
         for(let i=0; i < searchWords.length; i++){
-            if (!tweet.text.toLowerCase().includes(searchWords[i].toLowerCase())) {
-                tweets.splice(i, 1)
+            var text = tweet.text.toLowerCase()
+            var word = searchWords[i].toLowerCase()
+            if (text.includes(word)) {
+                filteredTweets.push(tweet)
                 break
             }
         }
     }
-    return tweets
-}
-
-function filterLikes(likesTop, likesBottom, tweets){
-    for (let i = 0; i < tweets.length; i++) {
-        var tweet = tweets[i]
-        if(tweet.favorite_count >= likesTop || tweet.favorite_count <= likesBottom){
-            tweets.splice(i, 1)
-            break
-        }
-    }
-    return tweets
-}
-
-function filterRetweets(retweetsTop, retweetsBottom, tweets){
-    for (let i = 0; i < tweets.length; i++) {
-        var tweet = tweets[i]
-        if(tweet.retweet_count >= retweetsTop || tweet.retweet_count <= retweetsBottom){
-            tweets.splice(i, 1)
-            break
-        }
-    }
-    return tweets
-}
-
-function filterReplies(repliesTop, repliesBottom, tweets){
-    for (let i = 0; i < tweets.length; i++) {
-        var tweet = tweets[i]
-        if(tweet.reply_count >= repliesTop || tweet.reply_count <= repliesBottom){
-            tweets.splice(i, 1)
-            break
-        }
-    }
-    return tweets
+    return filteredTweets.reverse()
 }
 
 function sortTweets(tweets, likesDes=null, retweetsDes=null, repliesDes=null, dateDes=null){

dashboard_static/js/events.js

@@ -2,10 +2,16 @@
 // Sports = all selected sports, ARRAY
 $(".sport").on("selected", function(e, selected, sports) {
     console.log(selected, sports);
+    filters.sports = sports;
+    $(window).trigger("filter");
 })
 
 window.addEventListener('DOMContentLoaded', (event) => {
     window.sessionStorage.setItem('tweets', JSON.stringify([]));
+    // run code every 5 seconds
+    setInterval(function() {
+        $(window).trigger("filter");
+    }, 1000);
 });
 
 $(".sport").on("click", function() {
@@ -40,12 +46,6 @@ $(".sortby").on("click", function() {
 
 $(".sort-dropdown-list li").on("click", function() {
     $(".sort-dropdown").toggle()
-    filters.sorted = $(this).val()
-    $(window).trigger("test", filters)
-})
-
-$(window).on("test", function(e, filter) {
-    console.log(filter);
 })
 
 let root = document.querySelector(":root")
@@ -69,10 +69,35 @@ $(".logo").on("click", function() {
     }
 })
 
+$(window).on("filter", function() {
+    console.log("called")
+    var parent = document.querySelector("#filtered")
+    parent.replaceChildren();
+
+    console.log(filters);
+
+    tweets = window.sessionStorage.getItem('tweets');
+    tweets = JSON.parse(tweets);
+    console.log(tweets.length)
+    tweets = filterTweets(tweets, filters.blockedWords, filters.searchedWords.concat(filters.sports), filters.sorted, filters.order);
+    tweets = sortTweets(tweets);
+    var displayTweets = tweets.reverse().slice(0, 20).reverse();
+    for (i = 0; i < 19; i++){
+        console.log("FDS")
+        parent.prepend(tweetCell(displayTweets[i]));
+        console.log("FDS 2")
+    }
+})
+
+
 $(".order-btn").on("click", function() {
     if($(this).html() == "arrow_downward") {    // Descending to ascending
         $(this).html("arrow_upward")
+        // trigger an event called ascending
+        $(window).trigger("ascending")
     } else {    // Ascending to descending
         $(this).html("arrow_downward")
+        // trigger an event called descending
+        $(window).trigger("descending")
     }
 })

dashboard_static/lib/tweets.js

@@ -68,11 +68,13 @@ var process_entities = function(message, entities) {
 
 block.fn.tweets = function(config) {
     var options = $.extend({
-        memory: 100
+        memory: 20
     }, config);
 
     // store list for later
-    var $list = $("div.tweetcontainer");
+    // var $list = $("div.tweetcontainer");
+    var $list = document.querySelector("#latest")
+    window.sessionStorage.setItem('tweets', JSON.stringify([]));
 
     // register default handler for handling tweet data
     this.actions(function(e, tweet){
@@ -85,13 +87,13 @@ block.fn.tweets = function(config) {
         }
         window.sessionStorage.setItem('tweets', JSON.stringify(tweets));
 
-        var $item = tweetCell(tweet)
-        $list.prepend($item);
-
-        // remove stale tweets
-        if ($list.children().length > options.memory) {
-            $list.children().last().remove();
+        // remove tweets
+        $list.replaceChildren();
+        var displayTweets = tweets.reverse().slice(0, options.memory).reverse();
+        for (i = 0; i < options.memory-1; i++){
+            $list.prepend(tweetCell(displayTweets[i]));
         }
+
     });
 
     return this.$element;