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

Merge branch 'main' into TweetCSS

Browse Source
This commit is contained in:
Tim Wijma
2022-11-01 14:40:02 +01:00
parent fa47d5866f 91c3a8f5a9
commit bdbf25e241
3 changed files with 117 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
dashboard_static/index.html
View File

@@ -13,8 +13,10 @@
<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>
<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">
@@ -97,25 +99,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>

82
dashboard_static/js/code.js
View File

@@ -23,7 +23,85 @@ function getCSSVariable(name) {
}
function tweetCell(tweet, parent) {
var cell = document.createElement("div")
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>`
parent.append(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"));
}