Merge branch 'bitches' of github.com:olinpin/twitter-project into cssgrid
This commit is contained in:
Drew
BIN
__pycache__/dashboard.cpython-310.pyc
Normal file
BIN
__pycache__/dashboard.cpython-310.pyc
Normal file
Binary file not shown.
19
dashboard.py
19
dashboard.py
@@ -12,7 +12,7 @@ root_content_path = 'dashboard_static'
|
||||
# the action will be called with the context and the event
|
||||
@event('init')
|
||||
def setup(ctx, e):
|
||||
start_offline_tweets('sports1.txt', event_name="sample")
|
||||
start_offline_tweets('sports1.txt', event_name="tweet", time_factor=0.1)
|
||||
ctx.count = 0
|
||||
# fire('sample', {'previous': 0.0})
|
||||
|
||||
@@ -21,21 +21,14 @@ def setup(ctx, e):
|
||||
def clip(lower, value, upper):
|
||||
return max(lower, min(value, upper))
|
||||
|
||||
@event('sample')
|
||||
def generate_sample(ctx, e):
|
||||
ctx.count += 1
|
||||
if ctx.count % 50 == 0:
|
||||
emit('debug', {'text': 'Log message #'+str(ctx.count)+'!'})
|
||||
@event('tweet')
|
||||
def generate_tweet(ctx, e):
|
||||
tweet = e.data
|
||||
# print(tweet)
|
||||
# base sample on previous one
|
||||
# sample = clip(-100, e.data['previous'] + random.uniform(+5.0, -5.0), 100)
|
||||
# emit to outside world
|
||||
emit('sample',{
|
||||
'action': 'add',
|
||||
'value': tweet
|
||||
})
|
||||
emit('tweet', tweet)
|
||||
|
||||
# chain event
|
||||
fire('sample', {'previous': tweet}, delay=0.05)
|
||||
# # chain event
|
||||
# fire('tweet', {'previous': tweet}, delay=0.05)
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Twitter sports dashboard</title>
|
||||
<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.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">
|
||||
@@ -15,6 +16,7 @@
|
||||
<link rel="icon" type="image/x-icon" href="./media/logo.png">
|
||||
</head>
|
||||
<body>
|
||||
<!-- <div id="tweet" style="height: 200px;"></div> -->
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
@@ -59,14 +61,47 @@
|
||||
<div class="main">
|
||||
<div class="maintable">
|
||||
<div class="leftcol column">
|
||||
<h1 class="colheader">LATEST CLUCCS</h1>
|
||||
<span class="colheader">Latest Cluccs</span>
|
||||
<div class="tweetcontainer">
|
||||
<div class="tweet">
|
||||
<img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
|
||||
<div class="tweet-content">
|
||||
<div class="tweet-name">
|
||||
<span class="tweet-nickname">Tim Wijma</span>
|
||||
<span class="tweet-username">@timwijma</span>
|
||||
</div>
|
||||
<span class="tweet-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus velit maiores non deserunt adipisci dicta quam nobis ad. Iste, unde?</span>
|
||||
<div class="tweet-interactions">
|
||||
<div class="tweet-interaction tweet-likes">
|
||||
<span class="material-symbols-outlined">favorite</span>
|
||||
<span>20</span>
|
||||
</div>
|
||||
<div class="tweet-interaction tweet-retweets">
|
||||
<span class="material-symbols-outlined">repeat</span>
|
||||
<span>20</span>
|
||||
</div>
|
||||
<div class="tweet-interaction tweet-replies">
|
||||
<span class="material-symbols-outlined">chat_bubble</span>
|
||||
<span>20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centercol column">
|
||||
<h1 class="colheader">FILTERED CLUCCS</h1>
|
||||
<span class="colheader">Filtered Cluccs</span>
|
||||
</div>
|
||||
<div class="searchbar column"></div>
|
||||
<div class="popchart column">
|
||||
<h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
|
||||
<div class="rightcol column">
|
||||
<div class="searchcontainer column">
|
||||
<input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
|
||||
<button class = "button">SORT BY</button>
|
||||
<button class = "button">BLOCKED WORDS</button>
|
||||
<button class = "button">POPULARITY FILTER</button>
|
||||
</div>
|
||||
<div class="popchart column">
|
||||
<h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
@@ -84,25 +119,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/lib/jquery-2.1.1.min.js"></script>
|
||||
<script src="/lib/jquery.flot.min.js"></script>
|
||||
<script src="/lib/core.js"></script>
|
||||
<script src="/lib/charts.js"></script>
|
||||
<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>
|
||||
// block("#tweet").tweets({
|
||||
// memory: 20
|
||||
// });
|
||||
// events.connect("tweet", "#tweet");
|
||||
|
||||
// // create a rolling chart block
|
||||
// block('#graph').rolling_chart({
|
||||
// memory: 150,
|
||||
// chart: {
|
||||
// yaxis: {
|
||||
// min: -100,
|
||||
// max: 100
|
||||
// },
|
||||
// xaxis: {
|
||||
// show: false
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
// // connect sample event to graph
|
||||
// events.connect('tweet', '#graph');
|
||||
</script>
|
||||
</body>
|
||||
<!-- <script>
|
||||
// create a rolling chart block
|
||||
block('#graph').rolling_chart({
|
||||
memory: 150,
|
||||
chart: {
|
||||
yaxis: {
|
||||
min: -100,
|
||||
max: 100
|
||||
},
|
||||
xaxis: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// connect sample event to graph
|
||||
events.connect('sample', '#graph');
|
||||
</script> -->
|
||||
</html>
|
||||
@@ -16,14 +16,140 @@ $(".sport").on("click", function() {
|
||||
}
|
||||
|
||||
$(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
|
||||
showFeeds()
|
||||
})
|
||||
|
||||
function getCSSVariable(name) {
|
||||
return getComputedStyle(root).getPropertyValue(name)
|
||||
}
|
||||
|
||||
function tweetCell(tweet, parent) {
|
||||
var cell = document.createElement("div")
|
||||
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");
|
||||
cell.innerHTML =
|
||||
"<div>"
|
||||
}
|
||||
`<div class="tweet">
|
||||
<img src="${tweet.user.profile_image_url}" alt="" class="tweet-profilepicture">
|
||||
<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>
|
||||
</div>
|
||||
<span class="tweet-text">${tweet.text}</span>
|
||||
<div class="tweet-interactions">
|
||||
<div class="tweet-interaction tweet-likes">
|
||||
<span class="material-symbols-outlined">favorite</span>
|
||||
<span>${tweet.favorite_count}</span>
|
||||
</div>
|
||||
<div class="tweet-interaction tweet-retweets">
|
||||
<span class="material-symbols-outlined">repeat</span>
|
||||
<span>${tweet.retweet_count}</span>
|
||||
</div>
|
||||
<div class="tweet-interaction tweet-replies">
|
||||
<span class="material-symbols-outlined">chat_bubble</span>
|
||||
<span>${tweet.reply_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
return cell
|
||||
}
|
||||
|
||||
function filter(tweets, bannedWords=[], searchWords=[], likesTop=null, likesBottom=null, retweetsTop=null, retweetsBottom=null, repliesTop=null, repliesBottom=null) {
|
||||
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
|
||||
}
|
||||
|
||||
function filterBannedWords(bannedWords, tweets){
|
||||
for (let i = 0; i < tweets.length; i++) {
|
||||
var tweet = tweets[i]
|
||||
for(let j=0; j < bannedWords.length; j++){
|
||||
if (tweet.text.toLowerCase().includes(bannedWords[j].toLowerCase())){
|
||||
tweets.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
return tweets
|
||||
}
|
||||
|
||||
function searchForWords(searchWords, tweets){
|
||||
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)
|
||||
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
|
||||
}
|
||||
|
||||
@@ -2,4 +2,7 @@
|
||||
// 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([]));
|
||||
});
|
||||
@@ -68,53 +68,24 @@ var process_entities = function(message, entities) {
|
||||
|
||||
block.fn.tweets = function(config) {
|
||||
var options = $.extend({
|
||||
memory: 20
|
||||
memory: 100
|
||||
}, config);
|
||||
|
||||
// create the necessary HTML in the block container
|
||||
this.$element.append('<ol class="tweet-list stream-items"></ol>');
|
||||
|
||||
// store list for later
|
||||
var $list = this.$element.find('ol');
|
||||
|
||||
var $list = $("div.tweetcontainer");
|
||||
|
||||
// register default handler for handling tweet data
|
||||
this.actions(function(e, tweet){
|
||||
var $item = $('<li class="stream-item"></li>');
|
||||
tweets = window.sessionStorage.getItem('tweets');
|
||||
tweets = JSON.parse(tweets);
|
||||
tweets.push(tweet);
|
||||
var localMemory = 100;
|
||||
if(tweets.length >= localMemory) {
|
||||
tweets.shift();
|
||||
}
|
||||
window.sessionStorage.setItem('tweets', JSON.stringify(tweets));
|
||||
|
||||
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> </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
|
||||
var $item = tweetCell(tweet)
|
||||
$list.prepend($item);
|
||||
|
||||
// remove stale tweets
|
||||
|
||||
33
dashboard_static/style/responsive.css
Normal file
33
dashboard_static/style/responsive.css
Normal 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 */
|
||||
@@ -24,6 +24,8 @@ body {
|
||||
background-color: var(--main-bg);
|
||||
color: white;
|
||||
padding: 16px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header, .sports, .logo {
|
||||
@@ -45,11 +47,11 @@ body {
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-size: 40px;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
margin: 0 8px;
|
||||
}
|
||||
@@ -88,19 +90,43 @@ body {
|
||||
|
||||
.tweet {
|
||||
display: flex;
|
||||
background-color: var(--main-dark);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.tweet-profilepicture {
|
||||
border-radius: 100%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
/* padding: 8px; */
|
||||
}
|
||||
|
||||
.tweet-content {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.tweet-interactions {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tweet-interaction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.tweet-interaction .material-symbols-outlined {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.tweet-nickname {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tweet-username {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.filters-search input {
|
||||
@@ -123,44 +149,74 @@ body {
|
||||
/* Three main columns; CSS Grid */
|
||||
.maintable {
|
||||
/*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
|
||||
gap: 48px;
|
||||
grid-template-rows: 1fr;
|
||||
grid-gap: 48px;
|
||||
/* margin:20px; */
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-top: 48px;
|
||||
margin-top: 32px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.column {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.leftcol, .centercol {
|
||||
overflow-y: auto;
|
||||
grid-row: 1/ -1;
|
||||
}
|
||||
|
||||
.leftcol {
|
||||
background-color: red;
|
||||
grid-row: 1/ -1;
|
||||
}
|
||||
|
||||
.centercol {
|
||||
background-color: green;
|
||||
grid-row: 1/ -1;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
.rightcol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.searchcontainer {
|
||||
background-color: blue;
|
||||
height: 400px;
|
||||
/* height: 400px; */
|
||||
}
|
||||
|
||||
.popchart {
|
||||
background-color: rgba(255, 0, 255, 0.344);
|
||||
height: 400px;
|
||||
/* height: 400px; */
|
||||
}
|
||||
|
||||
.colheader {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
font-size: 40px;
|
||||
padding: 8px 16px;
|
||||
font-size: 38px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.searchbar, .button {
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
border-radius: 50px;
|
||||
padding: 10px;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* .button:hover {
|
||||
background-color: ;
|
||||
} */
|
||||
BIN
eca/__pycache__/arff.cpython-310.pyc
Normal file
BIN
eca/__pycache__/arff.cpython-310.pyc
Normal file
Binary file not shown.
BIN
eca/__pycache__/generators.cpython-310.pyc
Normal file
BIN
eca/__pycache__/generators.cpython-310.pyc
Normal file
Binary file not shown.
Reference in New Issue
Block a user