Merge branch 'main' of https://github.com/olinpin/twitter-project into youri

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,19 +91,22 @@
                 </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">
-                        <input class="searchbar" type="text" placeholder="Search Cluccs">
+                        <input class="searchbar" onchange="updateSearched(this.value)" type="text" placeholder="Search Cluccs">
-                        <input class="blockedwords" type="text" placeholder="Blocked words (separated by comma)">
+                        <input class="blockedwords" onchange="updateBlocked(this.value)" type="text" placeholder="Blocked words (separated by comma)">
                         <div class="button sort-btn">
                             <span class="sortby">Sort By <span class="material-symbols-outlined">arrow_drop_down</span></span>
                             <div class="sort-dropdown">
                                 <ul class="sort-dropdown-list">
-                                    <li>Time</li>
+                                    <li onclick="updateSort('time')">Time</li>
-                                    <li>Likes</li>
+                                    <li onclick="updateSort('likes')">Likes</li>
-                                    <li>Retweets</li>
+                                    <li onclick="updateSort('retweets')">Retweets</li>
-                                    <li>Replies</li>
+                                    <li onclick="updateSort('replies')">Replies</li>
                                 </ul>
                             </div>
                         </div>
@@ -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,71 +79,56 @@ 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())) {
+            var text = tweet.text.toLowerCase()
-                tweets.splice(i, 1)
+            var word = searchWords[i].toLowerCase()
+            if (text.includes(word)) {
+                filteredTweets.push(tweet)
                 break
             }
         }
     }
-    return tweets
+    return filteredTweets.reverse()
 }
 
-function filterLikes(likesTop, likesBottom, tweets){
+function sortTweets(tweets, sort){
-    for (let i = 0; i < tweets.length; i++) {
+    if(typeof sort.sortby == 'undefined'){
-        var tweet = tweets[i]
-        if(tweet.favorite_count >= likesTop || tweet.favorite_count <= likesBottom){
-            tweets.splice(i, 1)
-            break
-        }
-    }
         return tweets
     }
-
+    if(typeof sort.order == 'undefined'){
-function filterRetweets(retweetsTop, retweetsBottom, tweets){
+        sort.order = 'asc'
-    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){
+    if(sort.sortby == "likes"){
-    for (let i = 0; i < tweets.length; i++) {
+        if(sort.order == 'asc'){
-        var tweet = tweets[i]
-        if(tweet.reply_count >= repliesTop || tweet.reply_count <= repliesBottom){
-            tweets.splice(i, 1)
-            break
-        }
-    }
-    return tweets
-}
-
-function sortTweets(tweets, likesDes=null, retweetsDes=null, repliesDes=null, dateDes=null){
-    if(likesDes && likesDes!=null){
             tweets.sort(function(a,b){return b.favorite_count-a.favorite_count})
-    } else if (!likesDes && likesDes!=null){
+        } else{
             tweets.sort(function(a,b){return a.favorite_count-b.favorite_count})
         }
-    if(retweetsDes && retweetsDes!=null){
+    }
+    if(sort.sortby == "retweets"){
+        if(sort.order == 'asc'){
             tweets.sort(function(a,b){return b.retweet_count-a.retweet_count})
-    } else if (!retweetsDes && retweetsDes!=null){
+        } else{
             tweets.sort(function(a,b){return a.retweet_count-b.retweet_count})
         }
-    if(repliesDes && repliesDes!=null){
+    }
+    if(sort.sortby == "replies"){
+        if(sort.order == 'asc'){
             tweets.sort(function(a,b){return b.reply_count-a.reply_count})
-    } else if (!repliesDes && repliesDes!=null){
+        } else {
             tweets.sort(function(a,b){return a.reply_count-b.reply_count})
         }
-    if(dateDes && dateDes!=null){
+    }
+    if (sort.sortby == "date"){
+        if(sort.order == 'asc'){
             tweets.sort(function(a,b){return Date(b.created_at)-Date(a.reply_count)})
-    } else if (!dateDes && dateDes!=null){
+        } else{
             tweets.sort(function(a,b){return Date(a.created_at)-Date(b.reply_count)})
         }
+    }
     return tweets
 }

dashboard_static/js/events.js

@@ -1,11 +1,16 @@
 // Selected = is clicked sport selected or not, BOOL
 // 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 +45,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")
@@ -73,10 +72,46 @@ $(".logo").on("click", function() {
     }
 })
 
+$(window).on("filter", function() {
+    var parent = document.querySelector("#filtered")
+    parent.replaceChildren();
+
+    tweets = window.sessionStorage.getItem('tweets');
+    tweets = JSON.parse(tweets);
+    tweets = filterTweets(tweets, filters.blockedWords, filters.searchedWords.concat(filters.sports), filters.sorted, filters.order);
+    tweets = sortTweets(tweets, [filters.sorted, filters.order]);
+    var displayTweets = tweets.reverse().slice(0, 20).reverse();
+    for (i = 0; i < 19; i++){
+        parent.prepend(tweetCell(displayTweets[i]));
+    }
+})
+
+
 $(".order-btn").on("click", function() {
     if($(this).html() == "arrow_downward") {    // Descending to ascending
         $(this).html("arrow_upward")
+        filters.order = 'asc'
     } else {    // Ascending to descending
         $(this).html("arrow_downward")
+        filters.order = 'desc'
     }
+    $(window).trigger("filter")
 })
+
+function updateSearched(searched){
+    searched = searched.split(",");
+    filters.searchedWords = searched;
+    $(window).trigger("filter");
+}
+
+function updateBlocked(blocked){
+    blocked = blocked.split(",");
+    filters.blockedWords = blocked;
+    $(window).trigger("filter");
+}
+
+function updateSort(sort){
+    sortarray = []
+    filters.sorted = sort;
+    $(window).trigger("filter");
+}

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)
+        // remove tweets
-        $list.prepend($item);
+        $list.replaceChildren();
-
+        var displayTweets = tweets.reverse().slice(0, options.memory).reverse();
-        // remove stale tweets
+        for (i = 0; i < options.memory-1; i++){
-        if ($list.children().length > options.memory) {
+            $list.prepend(tweetCell(displayTweets[i]));
-            $list.children().last().remove();
         }
+
     });
 
     return this.$element;