Created minimal UI for profiles loaded in filter
This commit is contained in:
parent
a3e44fc699
commit
0e6aa33f8a
20
css/base.php
20
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'] ?>;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue