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

Updates to 'apps' from Tasia.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4846 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2024-02-16 00:13:39 +00:00
parent fbc3cfeda4
commit 08a2436b8f
2 changed files with 110 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/apps.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "💻", "emoji": "💻",
"previous": "&33ngNe0YrH3JScss6krlCwddZcXl8C5szonp7DYy4qA=.sha256" "previous": "&RdVEsVscZm3aWzcMrEZS8mskO5tUmvaEUihex2MMfZQ=.sha256"
} }

108
apps/apps/app.js
View File

@ -1,15 +1,31 @@
/**
* Fetches information about the applications
* @param apps Record<appName, blobId>
* @returns an object including the apps' name, emoji, and blobs ids
*/
async function fetch_info(apps) { async function fetch_info(apps) {
let result = {}; let result = {};
// For each app
for (let [key, value] of Object.entries(apps)) { for (let [key, value] of Object.entries(apps)) {
// Get it's blob and parse it
let blob = await ssb.blobGet(value); let blob = await ssb.blobGet(value);
blob = blob ? utf8Decode(blob) : '{}'; blob = blob ? utf8Decode(blob) : '{}';
// Add it to the result object
result[key] = JSON.parse(blob); result[key] = JSON.parse(blob);
} }
return result; return result;
} }
/**
*
*
*/
async function fetch_shared_apps() { async function fetch_shared_apps() {
let messages = {}; let messages = {};
await ssb.sqlAsync(` await ssb.sqlAsync(`
SELECT messages.* SELECT messages.*
FROM messages_fts('"application/tildefriends"') FROM messages_fts('"application/tildefriends"')
@ -29,6 +45,7 @@ async function fetch_shared_apps() {
} }
} }
}); });
let result = {}; let result = {};
for (let app of Object.values(messages).sort((x, y) => y.message.timestamp - x.message.timestamp)) { for (let app of Object.values(messages).sort((x, y) => y.message.timestamp - x.message.timestamp)) {
let app_object = JSON.parse(utf8Decode(await ssb.blobGet(app.blob))); let app_object = JSON.parse(utf8Decode(await ssb.blobGet(app.blob)));
@ -41,18 +58,26 @@ async function fetch_shared_apps() {
} }
async function main() { async function main() {
var apps = await fetch_info(await core.apps()); const apps = await fetch_info(await core.apps());
var core_apps = await fetch_info(await core.apps('core')); const core_apps = await fetch_info(await core.apps('core'));
let shared_apps = await fetch_shared_apps(); const shared_apps = await fetch_shared_apps();
var doc = `<!DOCTYPE html>
<html> const stylesheet = `
<head> body {
<style> color: whitesmoke;
font-family: sans-serif;
margin: 16px;
}
.container { .container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 64px); grid-template-columns: repeat(auto-fill, 64px);
gap: 1em;
justify-content: space-around; justify-content: space-around;
background-color: #ffffff10;
border: 2px solid #073642;
border-radius: 8px;
} }
.app { .app {
height: 96px; height: 96px;
width: 64px; width: 64px;
@ -67,24 +92,42 @@ async function main() {
max-width: 64px; max-width: 64px;
text-overflow: ellipsis ellipsis; text-overflow: ellipsis ellipsis;
overflow: hidden; overflow: hidden;
color: whitesmoke;
} }
</style> `;
</head>
<body style="background: #888"> const body = `
<h1 id="apps_title">Apps</h1> <h1 style="text-shadow: #808080 0 0 10px;">Welcome to Tilde Friends.</h1>
<div id="apps" class="container"></div>
<h1>Shared Apps</h1> <h2>your apps</h2>
<div id="shared_apps" class="container"></div> <div id="apps" class="container"></div>
<h1>Core Apps</h1>
<div id="core_apps" class="container"></div> <h2>shared apps</h2>
</body> <div id="shared_apps" class="container"></div>
<script>
<h2>core apps</h2>
<div id="core_apps" class="container"></div>
`;
const script = `
/*
* Creates a list of apps
* @param id the id of the element to populate
* @param name (a username, 'core' or undefined)
* @param apps Object, a list of apps
*/
function populate_apps(id, name, apps) { function populate_apps(id, name, apps) {
// Our target
var list = document.getElementById(id); var list = document.getElementById(id);
// For each app in the provided list
for (let app of Object.keys(apps).sort()) { for (let app of Object.keys(apps).sort()) {
// Create the item
let div = list.appendChild(document.createElement('div')); let div = list.appendChild(document.createElement('div'));
div.classList.add('app'); div.classList.add('app');
// The app's icon
let href = name ? '/~' + name + '/' + app + '/' : ('/' + apps[app].blob_id + '/'); let href = name ? '/~' + name + '/' + app + '/' : ('/' + apps[app].blob_id + '/');
let icon_a = document.createElement('a'); let icon_a = document.createElement('a');
let icon = document.createElement('div'); let icon = document.createElement('div');
@ -95,6 +138,7 @@ async function main() {
icon_a.target = '_top'; icon_a.target = '_top';
div.appendChild(icon_a); div.appendChild(icon_a);
// The app's name
let a = document.createElement('a'); let a = document.createElement('a');
a.appendChild(document.createTextNode(app)); a.appendChild(document.createTextNode(app));
a.href = href; a.href = href;
@ -102,13 +146,33 @@ async function main() {
div.appendChild(a); div.appendChild(a);
} }
} }
document.getElementById('apps_title').innerText = "~${escape(core.user.credentials?.session?.name || 'guest')}'s Apps";
populate_apps('apps', '${core.user.credentials?.session?.name}', ${JSON.stringify(apps)}); populate_apps('apps', '${core.user.credentials?.session?.name}', ${JSON.stringify(apps)});
populate_apps('core_apps', 'core', ${JSON.stringify(core_apps)}); populate_apps('core_apps', 'core', ${JSON.stringify(core_apps)});
populate_apps('shared_apps', undefined, ${JSON.stringify(shared_apps)}); populate_apps('shared_apps', undefined, ${JSON.stringify(shared_apps)});
</script> `;
</html>`;
app.setDocument(doc); // Build the document
const document = `
<!DOCTYPE html>
<html>
<head>
<style>
${stylesheet}
</style>
</head>
<body>
${body}
</body>
<script>
${script}
</script>
</html>`;
// Send it to the browser
app.setDocument(document);
} }
main(); main();