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-03 16:56:16 +01:00
parent 21064b3d24 e1506d8883
commit c8caf730ee
6 changed files with 79 additions and 25 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.

2
dashboard.py
View File

@@ -13,7 +13,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="tweet", time_factor=0.1)
start_offline_tweets('sports1.txt', event_name="tweet", time_factor=0.01)
ctx.count = 0
# fire('sample', {'previous': 0.0})

6
dashboard_static/index.html
View File

@@ -99,15 +99,17 @@
<div class="searchcontainer column">
<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="button sort-btn">
<span class="sortby">Sort By <span class="material-symbols-outlined">arrow_drop_down</span></span>
<div class="sort-by">
<span class="sort-by-title">Sort By</span>
<div class="sort-dropdown">
<ul class="sort-dropdown-list">
<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>

9
dashboard_static/js/code.js
View File

@@ -24,14 +24,19 @@ function showFeeds() {
}
function tweetCell(tweet) {
const date = new Date(tweet.created_at);
console.log(new Intl.DateTimeFormat('en-GB').format(date));
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>
<div class="tweet-content">
<div class="tweet-name">
<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>
<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-date"><em>${date.getHours()}:${date.getMinutes()}</em></span>
</div>
<span class="tweet-text">${tweet.text}</span>
<div class="tweet-interactions">

22
dashboard_static/js/events.js
View File

@@ -38,15 +38,6 @@ $(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()
})
let root = document.querySelector(":root")
$(".logo").on("click", function() {
@@ -89,6 +80,19 @@ $(window).on("filter", function() {
}
})
$(".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

65
dashboard_static/style/style.css
View File

@@ -93,6 +93,7 @@ body {
.tweet {
display: flex;
gap: 10px;
background-color: var(--tweet-color);
border-radius: 16px;
padding: 16px;
@@ -108,6 +109,17 @@ body {
.tweet-content {
padding-left: 16px;
width: 100%;
}
.tweet-name {
display: flex;
gap: 1.5%;
justify-content: space-between;
}
.tweet-date {
align-self: flex-end;
}
.tweet-interactions {
@@ -150,6 +162,13 @@ body {
opacity: 0.8;
}
.tweet-date {
color: var(--main-light);
text-decoration: none;
justify-self: flex-end;
opacity: 0.8;
}
.filters-search input {
height: 28px;
width: 100%;
@@ -248,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;
}