cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

Add a thing to inspect reactions. #48

Browse Source
This commit is contained in:
Cory McWilliams 2024-04-21 14:18:06 -04:00
parent bd14168627
commit 628716ec28
6 changed files with 64 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&CEeuaRddTxMQkVqXi1GTN9AyqzdyWTAjs3mqSHVTBWY=.sha256" "previous": "&VsajulCFc9qmOy/hTlOD3q4ilEz3MP2a31u6DRnz4aA=.sha256"
} }

3
apps/ssb/index.html
View File

@ -11,7 +11,8 @@
</style> </style>
</head> </head>
<body style="margin: 0; padding: 0"> <body style="margin: 0; padding: 0">
<tf-app /> <tf-app></tf-app>
<tf-reactions-modal id="reactions_modal"></tf-reactions-modal>
<script> <script>
window.litDisableBundleWarning = true; window.litDisableBundleWarning = true;
</script> </script>

1
apps/ssb/script.js
View File

@ -7,6 +7,7 @@ import * as tf_user from './tf-user.js';
import * as tf_compose from './tf-compose.js'; import * as tf_compose from './tf-compose.js';
import * as tf_news from './tf-news.js'; import * as tf_news from './tf-news.js';
import * as tf_profile from './tf-profile.js'; import * as tf_profile from './tf-profile.js';
import * as tf_reactions_modal from './tf-reactions-modal.js';
import * as tf_tab_mentions from './tf-tab-mentions.js'; import * as tf_tab_mentions from './tf-tab-mentions.js';
import * as tf_tab_news from './tf-tab-news.js'; import * as tf_tab_news from './tf-tab-news.js';
import * as tf_tab_news_feed from './tf-tab-news-feed.js'; import * as tf_tab_news_feed from './tf-tab-news-feed.js';

2
apps/ssb/tf-app.js
View File

@ -234,7 +234,9 @@ class TfElement extends LitElement {
by_count.push({count: v.of, id: id}); by_count.push({count: v.of, id: id});
} }
console.log(by_count.sort((x, y) => y.count - x.count).slice(0, 20)); console.log(by_count.sort((x, y) => y.count - x.count).slice(0, 20));
let start_time = new Date();
users = await this.fetch_about(Object.keys(following).sort(), users); users = await this.fetch_about(Object.keys(following).sort(), users);
console.log('about took', (new Date() - start_time) / 1000.0, 'seconds for', Object.keys(users).length, 'users');
this.following = Object.keys(following); this.following = Object.keys(following);
this.users = users; this.users = users;
await tags; await tags;

13
apps/ssb/tf-message.js
View File

@ -1,4 +1,4 @@
import {LitElement, html, unsafeHTML} from './lit-all.min.js'; import {LitElement, html, render, unsafeHTML} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js'; import * as tfrpc from '/static/tfrpc.js';
import * as tfutils from './tf-utils.js'; import * as tfutils from './tf-utils.js';
import * as emojis from './emojis.js'; import * as emojis from './emojis.js';
@ -54,6 +54,12 @@ class TfMessageElement extends LitElement {
); );
} }
show_reactions() {
let modal = document.getElementById('reactions_modal');
modal.users = this.users;
modal.votes = this.message?.votes || [];
}
render_votes() { render_votes() {
function normalize_expression(expression) { function normalize_expression(expression) {
if (expression === 'Like' || !expression) { if (expression === 'Like' || !expression) {
@ -66,7 +72,10 @@ class TfMessageElement extends LitElement {
return expression; return expression;
} }
} }
return html`<div> return html`<div
class="w3-button"
@click=${this.show_reactions}
>
${(this.message.votes || []).map( ${(this.message.votes || []).map(
(vote) => html` (vote) => html`
<span <span

47
apps/ssb/tf-reactions-modal.js Normal file
View File

@ -0,0 +1,47 @@
import {LitElement, html, unsafeHTML} from './lit-all.min.js';
import {styles} from './tf-styles.js';
class TfReactionsModalElement extends LitElement {
static get properties() {
return {
users: {type: Object},
votes: {type: Array},
};
}
static styles = styles;
constructor() {
super();
this.votes = [];
this.users = {};
}
clear() {
this.votes = [];
}
render() {
let self = this;
return this.votes?.length ? html`
<div class="w3-modal w3-animate-opacity" style="display: block">
<div class="w3-modal-content w3-card-4 w3-theme-d1">
<header class="w3-container">
<h2>Reactions</h2>
<span class="w3-button w3-display-topright" @click=${this.clear}>&times;</span>
</header>
<ul class="w3-theme-dark w3-container w3-ul">
${this.votes.map(x => html`
<li class="w3-bar">
<span class="w3-bar-item">${x?.content?.vote?.expression}</span>
<tf-user class="w3-bar-item" id=${x.author} .users=${this.users}></tf-user>
<span class="w3-bar-item w3-right">${new Date(x?.timestamp).toLocaleString()}</span>
</li>
`)}
</ul>
</div>
</div>` : undefined;
}
}
customElements.define('tf-reactions-modal', TfReactionsModalElement);