forked from cory/tildefriends
		
	Updates to 'apps' from Tasia.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4846 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
		| @@ -1,5 +1,5 @@ | |||||||
| { | { | ||||||
|   "type": "tildefriends-app", |   "type": "tildefriends-app", | ||||||
|   "emoji": "💻", |   "emoji": "💻", | ||||||
|   "previous": "&33ngNe0YrH3JScss6krlCwddZcXl8C5szonp7DYy4qA=.sha256" |   "previous": "&RdVEsVscZm3aWzcMrEZS8mskO5tUmvaEUihex2MMfZQ=.sha256" | ||||||
| } | } | ||||||
							
								
								
									
										154
									
								
								apps/apps/app.js
									
									
									
									
									
								
							
							
						
						
									
										154
									
								
								apps/apps/app.js
									
									
									
									
									
								
							| @@ -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,48 +92,87 @@ 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"> |  | ||||||
| <h1 id="apps_title">Apps</h1> |  | ||||||
| <div id="apps" class="container"></div> |  | ||||||
| <h1>Shared Apps</h1> |  | ||||||
| <div id="shared_apps" class="container"></div> |  | ||||||
| <h1>Core Apps</h1> |  | ||||||
| <div id="core_apps" class="container"></div> |  | ||||||
| </body> |  | ||||||
| <script> |  | ||||||
| 	function populate_apps(id, name, apps) { |  | ||||||
| 		var list = document.getElementById(id); |  | ||||||
| 		for (let app of Object.keys(apps).sort()) { |  | ||||||
| 			let div = list.appendChild(document.createElement('div')); |  | ||||||
| 			div.classList.add('app'); |  | ||||||
|  |  | ||||||
| 			let href = name ? '/~' + name + '/' + app + '/' : ('/' + apps[app].blob_id + '/'); | 	const body = ` | ||||||
| 			let icon_a = document.createElement('a'); | 		<h1 style="text-shadow: #808080 0 0 10px;">Welcome to Tilde Friends.</h1> | ||||||
| 			let icon = document.createElement('div'); |  | ||||||
| 			icon.appendChild(document.createTextNode(apps[app].emoji || '📦')); |  | ||||||
| 			icon.style.fontSize = 'xxx-large'; |  | ||||||
| 			icon_a.appendChild(icon); |  | ||||||
| 			icon_a.href = href; |  | ||||||
| 			icon_a.target = '_top'; |  | ||||||
| 			div.appendChild(icon_a); |  | ||||||
|  |  | ||||||
| 			let a = document.createElement('a'); | 		<h2>your apps</h2> | ||||||
| 			a.appendChild(document.createTextNode(app)); | 		<div id="apps" class="container"></div> | ||||||
| 			a.href = href; |  | ||||||
| 			a.target = '_top'; | 		<h2>shared apps</h2> | ||||||
| 			div.appendChild(a); | 		<div id="shared_apps" class="container"></div> | ||||||
|  |  | ||||||
|  | 		<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) { | ||||||
|  | 			// Our target | ||||||
|  | 			var list = document.getElementById(id); | ||||||
|  |  | ||||||
|  | 			// For each app in the provided list | ||||||
|  | 			for (let app of Object.keys(apps).sort()) { | ||||||
|  |  | ||||||
|  | 				// Create the item | ||||||
|  | 				let div = list.appendChild(document.createElement('div')); | ||||||
|  | 				div.classList.add('app'); | ||||||
|  |  | ||||||
|  | 				// The app's icon | ||||||
|  | 				let href = name ? '/~' + name + '/' + app + '/' : ('/' + apps[app].blob_id + '/'); | ||||||
|  | 				let icon_a = document.createElement('a'); | ||||||
|  | 				let icon = document.createElement('div'); | ||||||
|  | 				icon.appendChild(document.createTextNode(apps[app].emoji || '📦')); | ||||||
|  | 				icon.style.fontSize = 'xxx-large'; | ||||||
|  | 				icon_a.appendChild(icon); | ||||||
|  | 				icon_a.href = href; | ||||||
|  | 				icon_a.target = '_top'; | ||||||
|  | 				div.appendChild(icon_a); | ||||||
|  |  | ||||||
|  | 				// The app's name | ||||||
|  | 				let a = document.createElement('a'); | ||||||
|  | 				a.appendChild(document.createTextNode(app)); | ||||||
|  | 				a.href = href; | ||||||
|  | 				a.target = '_top'; | ||||||
|  | 				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>`; | 	// Build the document | ||||||
| 	app.setDocument(doc); | 	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(); | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user