merged from master

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

.idea/.name

@@ -0,0 +1 @@
+neca.py

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.10" project-jdk-type="Python SDK" />
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/twitter-project.iml" filepath="$PROJECT_DIR$/.idea/twitter-project.iml" />
+    </modules>
+  </component>
+</project>

.idea/twitter-project.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="PyDocumentationSettings">
+    <option name="format" value="PLAIN" />
+    <option name="myDocStringFormat" value="Plain" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

dashboard.py

@@ -46,7 +46,7 @@ def generate_tweet(ctx, e):
     # emit to outside world
     emit('tweet', tweet)
     for w in words(tweet['text']):
-        emit('balk', {
+        emit('pie', {
             'action': 'add',
             'value': (str(w), 1)
         })

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,27 +91,34 @@
                 </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="blockedwords" 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>
+                        <input class="searchbar" onchange="updateSearched(this.value)" type="text" placeholder="Search Cluccs">
+                        <input class="blockedwords" onchange="updateBlocked(this.value)" type="text" placeholder="Blocked words (separated by comma)">
+                        <div class="sort-by">
+                            <span class="sort-by-title">Sort By</span> 
                             <div class="sort-dropdown">
                                 <ul class="sort-dropdown-list">
-                                    <li>Time</li>
-                                    <li>Likes</li>
-                                    <li>Retweets</li>
-                                    <li>Replies</li>
+                                    <li class="current-sort">Time</li>
+                                    <li onclick="updateSort('time')">Time</li>
+                                    <li onclick="updateSort('likes')">Likes</li>
+                                    <li onclick="updateSort('retweets')">Retweets</li>
+                                    <li onclick="updateSort('replies')">Replies</li>
                                 </ul>
+                                <span class="material-symbols-outlined sort-btn">arrow_drop_down</span>
                             </div>
                         </div>
                         <span class="material-symbols-outlined order-btn">arrow_downward</span>
                     </div>
                     <div class="popchart column">
-                        <span class="colheader chartheader">Sports Popularity Chart</span>
-                        <div id="balk" style="height:300px; background-color: white;"></div>
+
+                        <span class="colheader chartheader">Sports Popularity Filter</span>
+                        <div id="pie" style="height:300px; background-color: white;"></div>
+
                     </div>
                 </div>
             </div>
@@ -126,13 +133,14 @@
     <script src="./lib/tweets.js"></script>
     <script src="./js/code.js"></script>
     <script src="./js/events.js"></script>
+    <script src="./lib/jquery.flot.pie.js"></script>
     <script>
-        block("#tweet").tweets({
+        block("#latest").tweets({
             memory: 20
         });
-        block('#balk').barchart();
-        events.connect('balk', '#balk');
-        events.connect("tweet", "#tweet");
+        block('#pie').piechart();
+        events.connect('pie', '#pie');
+        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() {
@@ -30,7 +29,7 @@ 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">
                 <div>
@@ -59,22 +58,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
 }
 
@@ -92,71 +82,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())) {
-                tweets.splice(i, 1)
+            var text = tweet.text.toLowerCase()
+            var word = searchWords[i].toLowerCase()
+            if (text.includes(word)) {
+                filteredTweets.push(tweet)
                 break
             }
         }
     }
-    return tweets
+    return filteredTweets.reverse()
 }
 
-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
+function sortTweets(tweets, sort){
+    if(typeof sort.sortby == 'undefined'){
+        return tweets
+    }
+    if(typeof sort.order == 'undefined'){
+        sort.order = 'asc'
+    }
+
+    if(sort.sortby == "likes"){
+        if(sort.order == 'asc'){
+            tweets.sort(function(a,b){return b.favorite_count-a.favorite_count})
+        } else{
+            tweets.sort(function(a,b){return a.favorite_count-b.favorite_count})
+        }
+    }
+    if(sort.sortby == "retweets"){
+        if(sort.order == 'asc'){
+            tweets.sort(function(a,b){return b.retweet_count-a.retweet_count})
+        } else{
+            tweets.sort(function(a,b){return a.retweet_count-b.retweet_count})
+        }
+    }
+    if(sort.sortby == "replies"){
+        if(sort.order == 'asc'){
+            tweets.sort(function(a,b){return b.reply_count-a.reply_count})
+        } else {
+            tweets.sort(function(a,b){return a.reply_count-b.reply_count})
+        }
+    }
+    if (sort.sortby == "date"){
+        if(sort.order == 'asc'){
+            tweets.sort(function(a,b){return Date(b.created_at)-Date(a.reply_count)})
+        } else{
+            tweets.sort(function(a,b){return Date(a.created_at)-Date(b.reply_count)})
         }
     }
     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
-}
-
-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){
-        tweets.sort(function(a,b){return a.favorite_count-b.favorite_count})
-    }
-    if(retweetsDes && retweetsDes!=null){
-        tweets.sort(function(a,b){return b.retweet_count-a.retweet_count})
-    } else if (!retweetsDes && retweetsDes!=null){
-        tweets.sort(function(a,b){return a.retweet_count-b.retweet_count})
-    }
-    if(repliesDes && repliesDes!=null){
-        tweets.sort(function(a,b){return b.reply_count-a.reply_count})
-    } else if (!repliesDes && repliesDes!=null){
-        tweets.sort(function(a,b){return a.reply_count-b.reply_count})
-    }
-    if(dateDes && dateDes!=null){
-        tweets.sort(function(a,b){return Date(b.created_at)-Date(a.reply_count)})
-    } else if (!dateDes && dateDes!=null){
-        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() {
@@ -21,8 +26,8 @@ $(".sport").on("click", function() {
         selectedSports.push(sportName)  // Add sport to array
     }
 
-    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
     showFeeds()
+    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
 })
 
 $(window).on("resize", function(){
@@ -33,26 +38,13 @@ $(window).on("load", function() {
     showFeeds()
 })
 
-$(".sortby").on("click", function() {
-    $(".sort-dropdown").toggle()
-    // $(".sort-btn").toggleClass("radius-bottom")
-}) 
-
-$(".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")
 
 $(".logo").on("click", function() {
     if (root.style.getPropertyValue("--main-bg") === 'snow') {
         console.log("IM here")
+		var audio = new Audio("../media/Chicken.mp3");
+		audio.play();
         root.style.setProperty('--main-medium-dark', '#1E1E1E');
         root.style.setProperty('--main-bg', '#292929');
         root.style.setProperty('--main-light', ' #ffffff' );
@@ -60,6 +52,8 @@ $(".logo").on("click", function() {
         root.style.setProperty('--tweet-color', '#000000')
         root.style.setProperty('--column-color', '#1E1E1E')
     } else {
+		var audio = new Audio("../media/Rooster.mp3");
+		audio.play();
         root.style.setProperty('--main-medium-dark', '#1D9BF0');
         root.style.setProperty('--main-bg', 'snow');
         root.style.setProperty('--main-light', '#000000');
@@ -69,10 +63,60 @@ $(".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 < Math.min(19, displayTweets.length); i++){
+        tweet = displayTweets[i];
+        parent.prepend(tweetCell(tweet));
+    }
+})
+
+$(".current-sort").on("click", function() {
+    $(".sort-dropdown-list li:not(:first-of-type)").toggle()
+}) 
+
+$(".sort-btn").on("click", function() {
+    $(".sort-dropdown-list li:not(:first-of-type)").toggle()
+}) 
+
+$(".sort-dropdown-list li:not(:first-of-type)").on("click", function() {
+    $(".sort-dropdown-list li:not(:first-of-type)").toggle()
+    $(".current-sort").html($(this).html())
+})
+
+
 $(".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)
-        $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 < Math.min(options.memory-1, displayTweets.length); i++){
+            $list.prepend(tweetCell(displayTweets[i]));
         }
+
     });
 
     return this.$element;

dashboard_static/style/responsive.css

@@ -9,6 +9,7 @@
 @media only screen and (max-width: 850px) {
     .maintable {
         grid-template-columns: 1fr;
+        grid-template-rows: 1fr 100%;
     }
     .header-title {
         display: none;
@@ -22,6 +23,15 @@
     .colheader {
         font-size: 32px;
     }
+    .popchart {
+        display: none;
+    }
+    .leftcol {
+        overflow-y: auto;
+    }
+    .rightcol {
+        grid-row: 1;
+    }
 
 }
 

dashboard_static/style/style.css

@@ -267,33 +267,57 @@ body {
 	user-select: none;
 }
 
-.sort-btn {
+.sort-by {
 	user-select: none;
-	position: relative;
+	display: flex;
+	padding: 8px;
+}
+
+.sort-by-title {
+	font-size: 24px;
+	font-weight: 500;
+	margin-right: 8px;
 }
 
 .sort-dropdown {
-	display: none;
+	display: flex;
+	align-items: flex-start;
+	position: relative;
 }
 
 .sort-dropdown-list {
 	/* position: absolute; */
-	width: 100%;
 	list-style-type: none;
     padding: 0;
     margin: 0;
-	margin-left: -8px;
-	background-color: var(--main-light);
-	border-radius: 0 0 16px 16px;
+	background-color: white;
+	width: 150px;	
+	border-radius: 16px;
+}
+
+.material-symbols-outlined.sort-btn {
+	position: absolute;
+	right: 0;
+	top: 5px;
+	color: black;
+	font-size: 26px;
+}
+
+.sort-dropdown-list li:not(:first-of-type) {
+	display: none;
+}
+
+.sort-dropdown-list li:not(:first-of-type):hover {
+	background-color: rgb(215, 215, 215);
 }
 
 .sort-dropdown-list li {
+	color: #1E1E1E;
 	font-weight: 500;
 	font-size: 22px;
 	padding: 0 8px;
 }
 
-.radius-bottom {
-	border-bottom-left-radius: 16px;
-	border-bottom-right-radius: 16px;
+.current-sort {
+	line-height: 36px;
 }