olinpin/twitter-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged from main

Browse Source
This commit is contained in:
Oliver Hnát
2022-11-02 12:10:05 +01:00
parent abb8c77e3f abb93024a2
commit 73182cb41a
8 changed files with 109 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
__pycache__/dashboard.cpython-310.pyc Normal file
View File

Binary file not shown.

34
dashboard_static/index.html
View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter sports dashboard</title> <title>Twitter sports dashboard</title>
<link rel="stylesheet" href="./style/style.css"> <link rel="stylesheet" href="./style/style.css">
<link rel="stylesheet" href="./style/responsive.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,400&display=swap" rel="stylesheet">
@@ -13,10 +14,9 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="./media/logo.png"> <link rel="icon" type="image/x-icon" href="./media/logo.png">
</head> </head>
<body> <body>
<div id="tweet" style="height: 200px;"></div> <!-- <div id="tweet" style="height: 200px;"></div> -->
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="logo"> <div class="logo">
@@ -61,7 +61,7 @@
<div class="main"> <div class="main">
<div class="maintable"> <div class="maintable">
<div class="leftcol column"> <div class="leftcol column">
<h1 class="colheader">LATEST CLUCCS</h1> <span class="colheader">Latest Cluccs</span>
<div class="tweetcontainer"> <div class="tweetcontainer">
<div class="tweet"> <div class="tweet">
<img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture"> <img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
@@ -90,16 +90,18 @@
</div> </div>
</div> </div>
<div class="centercol column"> <div class="centercol column">
<h1 class="colheader">FILTERED CLUCCS</h1> <span class="colheader">Filtered Cluccs</span>
</div> </div>
<div class="searchcontainer column"> <div class="rightcol column">
<input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS..."> <div class="searchcontainer column">
<button class = "button">SORT BY</button> <input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
<button class = "button">BLOCKED WORDS</button> <button class = "button">SORT BY</button>
<button class = "button">POPULARITY FILTER</button> <button class = "button">BLOCKED WORDS</button>
</div> <button class = "button">POPULARITY FILTER</button>
<div class="popchart column"> </div>
<h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1> <div class="popchart column">
<h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -113,10 +115,10 @@
<script src="./js/code.js"></script> <script src="./js/code.js"></script>
<script src="./js/connection.js"></script> <script src="./js/connection.js"></script>
<script> <script>
block("#tweet").tweets({ // block("#tweet").tweets({
memory: 20 // memory: 20
}); // });
events.connect("tweet", "#tweet"); // events.connect("tweet", "#tweet");
// // create a rolling chart block // // create a rolling chart block
// block('#graph').rolling_chart({ // block('#graph').rolling_chart({

82
dashboard_static/js/code.js
View File

@@ -16,13 +16,37 @@ $(".sport").on("click", function() {
} }
$(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
showFeeds()
}) })
function getCSSVariable(name) { function getCSSVariable(name) {
return getComputedStyle(root).getPropertyValue(name) return getComputedStyle(root).getPropertyValue(name)
} }
function tweetCell(tweet, parent) { function showFeeds() {
if ($(window).width() < 1280) {
if (selectedSports.length === 0) {
$(".leftcol").show()
$(".centercol").hide()
} else {
$(".leftcol").hide()
$(".centercol").show()
}
} else {
$(".leftcol").show()
$(".centercol").show()
}
}
$(window).on("resize", function(){
showFeeds()
});
$(window).on("load", function() {
showFeeds()
})
function tweetCell(tweet) {
var cell = document.createElement("div"); var cell = document.createElement("div");
cell.innerHTML = cell.innerHTML =
`<div class="tweet"> `<div class="tweet">
@@ -49,61 +73,7 @@ function tweetCell(tweet, parent) {
</div> </div>
</div> </div>
</div>` </div>`
parent.append(cell); return cell
}
var atweet = {
"created_at": "Sat Nov 16 12:51:41 +0000 2019",
"text": "@BobGreenburg @ONeill_Coffee Congrats to the excellent football program at Wilmington. One classy organization!",
"source": "<a href=\"http:\/\/twitter.com\/download\/iphone\" rel=\"nofollow\">Twitter for iPhone<\/a>",
"user": {
"name": "Express Youngstown",
"screen_name": "ExpressProsYO",
"url": "http:\/\/apply.expresspros.com\/",
"profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/775167844921188353\/fWquHsOK_normal.jpg",
},
"quote_count": 0,
"reply_count": 0,
"retweet_count": 0,
"favorite_count": 0,
"entities": {
"hashtags": [
],
"urls": [
],
"user_mentions": [
{
"screen_name": "BobGreenburg",
"name": "Bob Greenburg",
"id": 483881032,
"id_str": "483881032",
"indices": [
0,
13
]
},
{
"screen_name": "ONeill_Coffee",
"name": "O'NeillCoffeeCompany",
"id": 2804543925,
"id_str": "2804543925",
"indices": [
14,
28
]
}
],
"symbols": [
]
},
}
for (let i = 0; i < 2; i++) {
tweetCell(atweet, $(".leftcol"));
} }
function filter(tweets, bannedWords=[], searchWords=[], likesTop=null, likesBottom=null, retweetsTop=null, retweetsBottom=null, repliesTop=null, repliesBottom=null) { function filter(tweets, bannedWords=[], searchWords=[], likesTop=null, likesBottom=null, retweetsTop=null, retweetsBottom=null, repliesTop=null, repliesBottom=null) {

44
dashboard_static/lib/tweets.js
View File

@@ -68,15 +68,11 @@ var process_entities = function(message, entities) {
block.fn.tweets = function(config) { block.fn.tweets = function(config) {
var options = $.extend({ var options = $.extend({
memory: 20 memory: 100
}, config); }, config);
// create the necessary HTML in the block container
this.$element.append('<ol class="tweet-list stream-items"></ol>');
// store list for later // store list for later
var $list = this.$element.find('ol'); var $list = $("div.tweetcontainer");
// register default handler for handling tweet data // register default handler for handling tweet data
this.actions(function(e, tweet){ this.actions(function(e, tweet){
@@ -89,41 +85,7 @@ block.fn.tweets = function(config) {
} }
window.sessionStorage.setItem('tweets', JSON.stringify(tweets)); window.sessionStorage.setItem('tweets', JSON.stringify(tweets));
var $item = $('<li class="stream-item"></li>'); var $item = tweetCell(tweet)
var $tweet = $('<div class="tweet"></div>');
var $content = $('<div class="content"></div>');
var $header = $('<div class="stream-item-header"></div>');
// Build a tag image and header:
var $account = $('<a class="account-group"></a>');
$account.attr("href", "http://twitter.com/" + tweet.user.screen_name);
var $avatar = $("<img>").addClass("avatar");
$avatar.attr("src", tweet.user.profile_image_url);
$account.append($avatar);
$account.append($('<strong class="fullname">' + tweet.user.name + '</strong>'));
$account.append($('<span>&nbsp;</span>'));
$account.append($('<span class="username"><s>@</s><b>' + tweet.user.screen_name + '</b></span>'));
$header.append($account);
// Build timestamp:
var $time = $('<small class="time"></small>');
$time.append($('<span>' + tweet.created_at + '</span>'));
$header.append($time);
$content.append($header);
// Build contents:
var text = process_entities(tweet.text, tweet.entities);
var $text = $('<p class="tweet-text">' + text + '</p>');
$content.append($text);
// Build outer structure of containing divs:
$tweet.append($content);
$item.append($tweet);
// place new tweet in front of list
$list.prepend($item); $list.prepend($item);
// remove stale tweets // remove stale tweets

33
dashboard_static/style/responsive.css Normal file
View File

@@ -0,0 +1,33 @@
@media only screen and (max-width: 1280px) {
.maintable {
grid-template-columns: 1fr 1fr;
grid-gap: 32px;
}
}
@media only screen and (max-width: 850px) {
.maintable {
grid-template-columns: 1fr;
}
.header-title {
display: none;
}
.sport-name {
font-size: 20px;
}
.column {
grid-row: unset;
}
.colheader {
font-size: 32px;
}
}
/* 360x640 414x896
601x962 1280x800 */

46
dashboard_static/style/style.css
View File

@@ -24,6 +24,8 @@ body {
background-color: var(--main-bg); background-color: var(--main-bg);
color: white; color: white;
padding: 16px 48px; padding: 16px 48px;
display: flex;
flex-direction: column;
} }
.header, .sports, .logo { .header, .sports, .logo {
@@ -45,11 +47,11 @@ body {
} }
.logo img { .logo img {
height: 40px; height: 36px;
} }
.logo span { .logo span {
font-size: 40px; font-size: 36px;
font-weight: 500; font-weight: 500;
margin: 0 8px; margin: 0 8px;
} }
@@ -112,7 +114,7 @@ body {
.tweet-interaction { .tweet-interaction {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 32px; margin-right: 24px;
} }
.tweet-interaction .material-symbols-outlined { .tweet-interaction .material-symbols-outlined {
@@ -147,51 +149,61 @@ body {
/* Three main columns; CSS Grid */ /* Three main columns; CSS Grid */
.maintable { .maintable {
/*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */ /*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */
display: grid;
width: 100%; width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr;
grid-gap: 48px;
gap: 48px;
/* margin:20px; */ /* margin:20px; */
} }
.main { .main {
margin-top: 48px; margin-top: 32px;
height: 100%;
} }
.column { .column {
border-radius: 16px; border-radius: 16px;
} }
.leftcol, .centercol {
overflow-y: auto;
grid-row: 1/ -1;
}
.leftcol { .leftcol {
background-color: red; background-color: red;
grid-row: 1/ -1;
} }
.centercol { .centercol {
background-color: green; background-color: green;
grid-row: 1/ -1; }
.rightcol {
display: flex;
flex-direction: column;
} }
.searchcontainer { .searchcontainer {
background-color: blue; background-color: blue;
height: 400px; /* height: 400px; */
} }
.popchart { .popchart {
background-color: rgba(255, 0, 255, 0.344); background-color: rgba(255, 0, 255, 0.344);
height: 400px; /* height: 400px; */
} }
.colheader { .colheader {
display: block;
font-weight: 500;
font-size: 40px;
padding: 8px 16px;
font-size: 38px; font-size: 38px;
padding-left: 30px; padding-left: 30px;
} }
.searchbar {
width: 500px;
}
.searchbar, .button { .searchbar, .button {
font-weight: bold; font-weight: bold;
font-size: 32px; font-size: 32px;
@@ -205,6 +217,6 @@ body {
border: none; border: none;
} }
.button:hover { /* .button:hover {
background-color: ; background-color: ;
} } */

BIN
eca/__pycache__/arff.cpython-310.pyc Normal file
View File

Binary file not shown.

BIN
eca/__pycache__/generators.cpython-310.pyc Normal file
View File

Binary file not shown.