css filters and event

dashboard_static/index.html

@@ -90,13 +90,13 @@
                     </div>
                 </div>
                 <div class="centercol column">
-                    <span class="colheader">Filtered Cluccs</span>
+                    <h1 class="colheader">FILTERED CLUCCS</h1>
                 </div>
                 <div class="rightcol column">
                     <div class="searchcontainer column">
                         <input class="searchbar" type="text" placeholder="SEARCH CLUCCS...">
-                        <div class="button">
-                            <span>SORT BY <span class="material-symbols-outlined">arrow_drop_down</span></span>
+                        <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>
@@ -114,6 +114,19 @@
                     </div>
                 </div>
             </div>
+            -->
+            <div class = "maintable">
+                <div class = "leftcol">
+                    <h1 class = 'colheader'>LATEST CLUCCS</h1>
+                </div>
+                <div class="centercol">
+                    <h1 class = 'colheader'>FILTERED CLUCCS</h1>
+                </div>
+                <div class = "searchbar"></div>
+                <div class = "popchart">
+                    <h1 class = 'colheader'>SPORTS POPULARITY CHART</h1>
+                </div>
+            </div>
         </div> 
     </div>
     <script src="/lib/jquery-2.1.1.min.js"></script>
@@ -123,7 +136,7 @@
     <script src="/lib/log.js"></script>
     <script src="./lib/tweets.js"></script>
     <script src="./js/code.js"></script>
-    <script src="./js/connection.js"></script>
+    <script src="./js/events.js"></script>
     <script>
         block("#tweet").tweets({
             memory: 20

dashboard_static/js/code.js

@@ -1,28 +1,3 @@
-let root = document.documentElement // Used for css variables
-
-let selectedSports = []
-
-$(".sport").on("click", function() {
-    $(this).toggleClass("selected")
-
-    let sportName = $(this).children()[1].innerHTML // 2nd element, which is the sport name
-
-    
-    let index = selectedSports.indexOf(sportName)
-    if (index > -1 ) {  // If element is found in array
-        selectedSports.splice(index, 1) // Remove sport at index
-    } else {
-        selectedSports.push(sportName)  // Add sport to array
-    }
-
-    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
-    showFeeds()
-})
-
-function getCSSVariable(name) {
-    return getComputedStyle(root).getPropertyValue(name)
-}
-
 function showFeeds() {
     if ($(window).width() < 1280) {
         if (selectedSports.length === 0) {
@@ -38,23 +13,15 @@ function showFeeds() {
     }
 }
 
-$(window).on("resize", function(){
-    showFeeds()
-});
-
-$(window).on("load", function() {
-    showFeeds()
-})
-
 function tweetCell(tweet) {
     var cell = document.createElement("div");
     cell.innerHTML =
     `<div class="tweet">
-        <img src="${tweet.user.profile_image_url}" alt="" class="tweet-profilepicture">
+        <a href ="https://www.twitter.com/${tweet.user.screen_name}"><img src="${tweet.user.profile_image_url}" alt="" class="tweet-profilepicture"></a>
         <div class="tweet-content"> 
             <div class="tweet-name">
-                <span class="tweet-nickname">${tweet.user.name}</span>
-                <span class="tweet-username">@${tweet.user.screen_name}</span>
+                <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>
             </div>
             <span class="tweet-text">${tweet.text}</span>
             <div class="tweet-interactions">
@@ -76,7 +43,7 @@ function tweetCell(tweet) {
     return cell
 }
 
-function filter(tweets, bannedWords=[], searchWords=[], likesTop=null, likesBottom=null, retweetsTop=null, retweetsBottom=null, repliesTop=null, repliesBottom=null) {
+function filterTweets(tweets, bannedWords=[], searchWords=[], likesTop=null, likesBottom=null, retweetsTop=null, retweetsBottom=null, repliesTop=null, repliesBottom=null) {
     if(bannedWords.length > 0){
         tweets = filterBannedWords(bannedWords, tweets)
     }
@@ -153,3 +120,24 @@ function filterReplies(repliesTop, repliesBottom, tweets){
     }
     return tweets
 }
+
+function sortTweets(tweets, likesDes=null, retweets=null, replies=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(retweets && retweets!=null){
+        tweets.sort(function(a,b){return b.retweet_count-a.retweet_count})
+    } else if (!retweets && retweets!=null){
+        tweets.sort(function(a,b){return a.retweet_count-b.retweet_count})
+    }
+    if(replies && replies!=null){
+        tweets.sort(function(a,b){return b.reply_count-a.reply_count})
+    } else if (!replies && replies!=null){
+        tweets.sort(function(a,b){return a.reply_count-b.reply_count})
+    }
+    return tweets
+}
+
+var tweets = [{"likes": 2},{"likes": 3},{"likes": 5},{"likes": 1}]

dashboard_static/js/connection.js

@@ -1,8 +0,0 @@
-// Selected = is clicked sport selected or not, BOOL
-// Sports = all selected sports, ARRAY
-$(".sport").on("selected", function(e, selected, sports) {
-    console.log(selected, sports);
-})
-window.addEventListener('DOMContentLoaded', (event) => {
-    window.sessionStorage.setItem('tweets', JSON.stringify([]));
-});

dashboard_static/js/events.js

@@ -0,0 +1,47 @@
+// Selected = is clicked sport selected or not, BOOL
+// Sports = all selected sports, ARRAY
+$(".sport").on("selected", function(e, selected, sports) {
+    console.log(selected, sports);
+})
+
+window.addEventListener('DOMContentLoaded', (event) => {
+    window.sessionStorage.setItem('tweets', JSON.stringify([]));
+});
+
+
+let selectedSports = []
+
+$(".sport").on("click", function() {
+    $(this).toggleClass("selected")
+
+    let sportName = $(this).children()[1].innerHTML // 2nd element, which is the sport name
+
+    
+    let index = selectedSports.indexOf(sportName)
+    if (index > -1 ) {  // If element is found in array
+        selectedSports.splice(index, 1) // Remove sport at index
+    } else {
+        selectedSports.push(sportName)  // Add sport to array
+    }
+
+    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
+    showFeeds()
+})
+
+$(window).on("resize", function(){
+    showFeeds()
+});
+
+$(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()
+    
+})

dashboard_static/style/style.css

@@ -122,10 +122,20 @@ body {
 }
 
 .tweet-nickname {
+	color: white;
+	text-decoration: none;
+	font-weight: bold;
+}
+
+.tweet-nickname:active {
+	color: white;
+	text-decoration: underline;
 	font-weight: bold;
 }
 
 .tweet-username {
+	color: white;
+	text-decoration: none;
 	opacity: 0.8;
 }
 
@@ -215,7 +225,7 @@ body {
 	font-weight: bold;
 	font-size: 24px;
 	border-radius: 50px;
-	padding: 10px;
+	padding: 8px;
 	margin: 4px 8px;
 	border: none;
 }
@@ -224,18 +234,41 @@ body {
 	color: black;
 	cursor: pointer;
 	background-color: white;
-	border-radius: 50px;
+	border-radius: 30px;
 	border: none;
 }
 
-/* .button:hover {
-	background-color: ;
-} */
+.sort-btn {
+	user-select: none;
+	position: relative;
+}
 
 .sort-dropdown {
-
+	display: none;
 }
 
-.sort-drop-list {
-	
+.sort-dropdown-list {
+	position: absolute;
+	width: 100%;
+	list-style-type: none;
+    padding: 0;
+    margin: 0;
+	margin-left: -8px;
+	background-color: white;
+	border-radius: 0 0 16px 16px;
+}
+
+.sort-dropdown-list li {
+	font-weight: 500;
+	font-size: 22px;
+	padding: 0 8px;
+}
+
+.sort-dropdown-list li:hover {
+	background-color: #dddddd;
+}
+
+.radius-bottom {
+	border-bottom-left-radius: 16px;
+	border-bottom-right-radius: 16px;
 }