Created minimal UI for profiles loaded in filter

css/base.php

@@ -51,6 +51,7 @@ body {
 	border-radius: .5em;
 	box-shadow: 0px 0px .5em #0000004f;
 }
+.gray { color: gray }
 .btn {
 	padding: 1em 3em;
 	border: 1px solid #00000059;
@@ -104,6 +105,13 @@ a {
 	color: inherit;
 }
 
+.software .only {
+	display: none;
+}
+.software.mastodon .only.mastodon {
+	display: inherit !important;
+}
+
 
 /* specific styles */
 #window-home {
@@ -195,6 +203,18 @@ a {
 		padding: .6em;
 	}
 }
+#window-instance #users-all .item img {
+	width: 5em;
+	height: 5em;
+}
+#window-instance #users-all .item .props {
+	max-width: 20em;
+	font-size: .9em;
+	margin-top: .5em;
+}
+#window-instance #users-all .item .props > span {
+	margin-right: 1em;
+}
 
 #window-instance_config {
 	background: <?php echo $clr['background'] ?>;

js/templates/instance/filter-users.html

@@ -1,3 +1,34 @@
+
+<h3>Results: <button id="btncollapse-results-box">hide</button></h3>
+<div id="results-box">
+	<div id="paging"></div><br>
+	<div id="paging-item">
+		<button onclick="{view.js}.execute({prev_page},{items_per_page})">PREV</button>
+		<button onclick="{view.js}.execute({next_page},{items_per_page})">NEXT</button>
+		<span>{current_page} / {total_pages}</span>
+	</div>
+	<div id="users-all"></div>
+	<div id="users-all-item">
+		<div class="card software {software}">
+			<div class="flex">
+				<img data-src="{avatar}"/>
+				<div class="w100" style="padding:0 1em">
+					<b style="font-size: 1.1em">{name}</b>
+					<br>
+					<span class="gray">@{acct}</span>
+					<div class="props flex">
+						<span>{statuses}<br><span class="gray">statuses</span></span>
+						<span>{following}<br><span class="gray">following</span></span>
+						<span>{followers}<br><span class="gray">followers</span></span>
+					</div>
+				</div>
+			</div>
+			<div class="only mastodon">{mastodon:fields}</div>
+		</div>
+	</div>
+</div>
+<br>
+
 <h3><span id="filter-current-name">*New filter</span>:
 	<button id="btncollapse-filters-current">hide</button></h3>
 <div id="filters-current" class="card">
@@ -73,10 +104,3 @@
 	</div>
 	</a>
 </div>
-<br>
-<div id="users-all"></div>
-<div id="users-all-item">
-	<div class="card">
-	{name}
-	</div>
-</div>

views/instance.php

@@ -103,7 +103,7 @@ window.view.instance = {
 				}
 				//else // TODO: load the filter by API
 			},
-			execute: function() {
+			execute: function(page, items_per_page) {
 				const btn = E.elemid('btncollapse-filters-current');
 				if (btn.innerText.trim() === 'hide') btn.click();
 				const btn2 = E.elemid('btncollapse-filters-all');
@@ -114,7 +114,62 @@ window.view.instance = {
 				var payload = data;
 				payload.instance = hargs.instance;
 				payload = JSON_to_URLEncoded(payload);
-				http.get(`api/v1/database/${hargs.software}/accounts/search?${payload}`, data, function(js) {
+
+				page = page === undefined ? 1 : page;
+				items_per_page = items_per_page === undefined ? 10 : items_per_page;
+				if (page === 'null') return;
+				if (page < 0) page = 0;
+				page--;
+
+				http.get(`api/v1/database/${hargs.software}/accounts/search?${payload}&paging=${page},${items_per_page}`, data, function(js) {
+					console.log(typeof js);
+					if (js === undefined) return; // TODO: handle error here
+					E.template('users-all', function(TPL) {
+						var html = '';
+						for (var i = 0; i < js['data'].length; i++) {
+							var tpl = TPL;
+							const it = js['data'][i];
+							tpl = tpl.replaceAll('{software}', hargs.software);
+							tpl = tpl.replaceAll('{name}', html2text(it.acct));
+							tpl = tpl.replaceAll('{acct}', html2text(it.acct));
+							if (it.avatar === null)
+								it.avatar = 'img/noavatar.png';
+							tpl = tpl.replaceAll('{avatar}', it.avatar);
+							tpl = tpl.replaceAll('{statuses}', it.statuses);
+							tpl = tpl.replaceAll('{following}', it.following);
+							tpl = tpl.replaceAll('{followers}', it.followers);
+							if (hargs.software === 'mastodon' && it.fields !== undefined) {
+								var _fields = '<table class="fields"><tbody>';
+								for (var j = 0; j < it.fields.length; j++) {
+									var t = '<tr class="verified"><td>{name}</td><td>{value}</td></tr>';
+									t = t.replaceAll('{name}', it.fields[j].name);
+									t = t.replaceAll('{value}', it.fields[j].value);
+									t = t.replaceAll('{verified}', it.fields[j].verified_at !== undefined ? 'verified' : '');
+									_fields += t;
+								}
+								_fields += '</tbody></table>';
+								tpl = tpl.replaceAll('{mastodon:fields}', _fields);
+							}
+							html += tpl;
+						}
+						return html;
+					});
+					E.template('paging', function(TPL) {
+						var html = '';
+						var tpl = TPL;
+						js['paging']['total_pages']++; page++;
+						var prevpage = page;
+						if (page > 0) prevpage--;
+						var nextpage = page+1;
+						if (page > js['paging']['total_pages'])
+							nextpage = js['paging']['total_pages'];
+						tpl = tpl.replaceAll('{current_page}',			page);
+						tpl = tpl.replaceAll('{prev_page}',				prevpage);
+						tpl = tpl.replaceAll('{next_page}',				nextpage);
+						tpl = tpl.replaceAll('{items_per_page}',		items_per_page);
+						tpl = tpl.replaceAll('{total_pages}',			js['paging']['total_pages']);
+						return tpl;
+					});
 					console.log(js);
 				});
 			},