Implemented filter presets saving/loading + improvements

This commit is contained in:
Bofh 2022-12-05 16:31:15 +01:00
parent 9a2d4a7f9f
commit 755db19ca7
8 changed files with 176 additions and 14 deletions

View File

@ -0,0 +1,3 @@
<?php chdir('../../../../../') ?>
<?php require 'base.php' ?>
<?php require 'api/v1/config/filters/get/mod.php' ?>

View File

@ -0,0 +1,40 @@
<?php
$id = null;
if (isset($_GET['id']) && preg_match('/^[a-z0-9\-]+$/', trim($_GET['id'])))
$id = trim($_GET['id']);
$type = null;
if (isset($_GET['type']))
$type = strtolower(trim($_GET['type']));
if (!in_array($type, ['users','posts']))
apiresult(['error' => 'type argument must be one of users|posts']);
$filters_dir = $GLOBALS['appconf']['data_dir'].'/filters';
if (!file_exists($filters_dir)) {
mkdir($filters_dir);
apiresult([]);
}
$filters_dir = $filters_dir.'/'.$type;
if (!file_exists($filters_dir)) {
mkdir($filters_dir);
apiresult([]);
}
$data = [];
if ($id !== null) {
if (!file_exists($filters_dir.'/'.$id))
apiresult([]);
$data = unserialize(file_get_contents($filters_dir.'/'.$id));
$data['id'] = $id;
} else {
foreach (scandir($filters_dir) as $fid) {
if (in_array($fid,['.','..']))
continue;
$item = unserialize(file_get_contents($filters_dir.'/'.$fid));
$item['id'] = $fid;
$data []= $item;
}
}
apiresult($data);

View File

@ -0,0 +1,26 @@
<?php chdir('../../../../../') ?>
<?php require 'base.php' ?>
<?php
if (!isset($_POST['id']) || !preg_match('/^[a-z0-9\-]+$/', trim($_POST['id'])))
apiresult(['error' => 'id parameter does not match the expected value'], 400);
$type = null;
if (isset($_GET['type']))
$type = strtolower(trim($_GET['type']));
if (!in_array($type, ['users','posts']))
apiresult(['error' => 'type argument must be one of users|posts']);
$filters_dir = $GLOBALS['appconf']['data_dir'].'/filters';
if (!file_exists($filters_dir))
mkdir($filters_dir);
$filters_dir = $filters_dir.'/'.$type;
if (!file_exists($filters_dir))
mkdir($filters_dir);
$id = trim($_POST['id']);
unset($_POST['id']);
file_put_contents($filters_dir.'/'.$id, serialize($_POST));
apiresult(['ok' => 'filter '.$id.' has been succesfully saved']);

View File

@ -53,9 +53,9 @@ body {
}
.btn {
padding: 1em 3em;
border: 1px solid #000000a1;
border: 1px solid #00000059;
border-radius: .6em;
box-shadow: 0px 0px .2em #0009;
box-shadow: 0px 0px .7em #0000001c;
}
.btn:hover {
filter: brightness(95%);

View File

@ -45,7 +45,13 @@ function apcontrol_title(str) {
<script>
function hashProcessor(initial) {
async function hashProcessor(initial) {
console.log(`EVENT hash-changed (no_fire_change: ${window.hash_argument_nofirechange})`);
if (window.hash_argument_nofirechange === true) {
delete window.hash_argument_nofirechange;
return;
}
var args = window.location.hash.substring(1).trim().split('/');
if (args.length > 0 && args[0].trim() === '')
args = [];

View File

@ -152,14 +152,27 @@ function _get_func_params(func) {
return params;
}
function del_hash_argument(key) {
function del_hash_argument(key, fireevent) {
const hargs = get_hash_arguments();
if (hargs[key] === undefined) return;
fireevent = fireevent === undefined ? true : fireevent;
console.log(`DEL hash-argument: ${key} (fireevent: ${fireevent})`);
if (fireevent) delete window.hash_argument_nofirechange;
else window.hash_argument_nofirechange = true;
var hash = window.location.hash;
hash = hash.replace(new RegExp(';?'+key+'=[^;]+'),'');
hash = hash.replace('/;','/');
window.location.hash = hash;
}
function set_hash_argument(key, val) {
function set_hash_argument(key, val, fireevent) {
fireevent = fireevent === undefined ? true : fireevent;
console.log(`SET hash-argument "${key}": ${val} (fireevent: ${fireevent})`);
if (fireevent) delete window.hash_argument_nofirechange;
else window.hash_argument_nofirechange = true;
var hargs = get_hash_arguments();
if (hargs[key] === undefined) {
window.location.hash += ';'+key+'='+val;
@ -205,6 +218,7 @@ function human_field_name(str) {
.trim()
);
}
function sleep(ms){ return new Promise(resolve => setTimeout(resolve, ms)) }
function capitalize(str) { return str[0].toUpperCase() + str.substring(1) }
function printstack() { console.error(new Error().stack) }
function uuidv4() {

View File

@ -1,6 +1,8 @@
<h3><span>New filter</span>: <button id="btncollapse-filters-current">hide</button></h3>
<h3><span id="filter-current-name">*New filter</span>:
<button id="btncollapse-filters-current">hide</button></h3>
<div id="filters-current" class="card">
<div class="input">
<input type="hidden" name="preset_id" value="-1"/>
<label for="preset_name">Preset name:</label>
<input type="text" name="preset_name" placeholder="Preset name" value="Undefined"/>
</div>
@ -46,12 +48,28 @@
<br>
<div class="input flex">
<button class="btn center"
onclick="window.view.instance.do.filter_users.execute()"
onclick="window.del_hash_argument('filter_id')"
><i class="fa fa-close fa-fw"></i>
Clear</button>
<div style="width:1em"></div>
<button class="btn center"
onclick="{view.js}.execute()"
><i class="fa fa-search fa-fw"></i>
Execute</button>
<div style="width:1em"></div>
<button class="btn center"
onclick="{view.js}.save_filter()"
><i class="fa fa-save fa-fw"></i>
Save filter</button>
</div>
</div>
<br>
<h3>Your filter presets: <button id="btncollapse-filters-all">hide</button></h3>
<div id="filters-all"></div>
<div id="filters-all-item">
<a href="javascript:window.set_hash_argument('filter_id','{id}')">
<div class="btn card" style="float: left; margin-right: 1em;">
<i class="fa fa-filter fa-fw"></i>{name}
</div>
</a>
</div>

View File

@ -37,6 +37,8 @@ window.view.instance = {
filter_users: {
get_current_filter: function() {
var data = {};
if (E.element('#filters-current input[name=preset_id]').value !== '-1')
data.id = E.element('#filters-current input[name=preset_id]').value;
var preset = E.element('#filters-current input[name="preset_name"]').value.trim();
if (preset !== '' && preset.toLowerCase() !== 'undefined')
data.preset_name = E.element('#filters-current input[name="preset_name"]').value;
@ -60,11 +62,20 @@ window.view.instance = {
return data;
},
set_current_filter: function(data) {
const _process = function(d) {
if (d.preset_name === undefined)
const _process = function(_d) {
const hargs = get_hash_arguments();
var d = JSON.parse(JSON.stringify(_d));
if (d.id === undefined)
E.element('#filters-current input[name=preset_id]').value = -1;
else E.element('#filters-current input[name=preset_id]').value = d.id;
if (d.preset_name === undefined) {
d.preset_name = 'Undefined';
E.elemid('filter-current-name').innerText = '*New filter';
} else E.elemid('filter-current-name').innerText = d.preset_name;
E.element('#filters-current input[name="preset_name"]').value = d.preset_name;
if (d.user_filter === undefined) d.user_filter = 'local';
E.element('#filters-current input[name=user_filter][value='+d.user_filter+']').click();
if (d.profile === undefined) d.profile = '';
d.profile = atob(d.profile);
if (d.profile === '<empty>')
E.element('#filters-current #profile-search-type-empty').click();
@ -73,14 +84,23 @@ window.view.instance = {
E.element('#filters-current #profile-search-type-expr').click();
E.element("#filters-current textarea[name=profile]").value = d.profile;
}
else {
E.element('#filters-current #profile-search-type-simple').click();
E.element("#filters-current textarea[name=profile]").value = d.profile;
}
E.elements('#filters-current input[type=checkbox]').forEach(function(it){ it.checked = false });
if (d.no_avatar !== undefined) E.element('#filters-current input[name=no_avatar]').click();
if (d.no_statuses !== undefined) E.element('#filters-current input[name=no_statuses]').click();
if (d.no_follows !== undefined) E.element('#filters-current input[name=no_follows]').click();
console.log(d);
};
if (typeof data === 'object')
_process(data);
else if (typeof data === 'string') {
for (var i = 0; i < window.vars.user_filters.length; i++) {
if (window.vars.user_filters[i].id === data)
_process(window.vars.user_filters[i]);
}
}
//else // TODO: load the filter by API
},
execute: function() {
@ -96,6 +116,19 @@ window.view.instance = {
console.log(js);
});
},
save_filter: function() {
const data = window.view.instance.do.filter_users.get_current_filter();
if (data.preset_name === undefined)
// TODO: add a toast with the error
return alert("You must define a preset_name other than 'Undefined' or empty");
if (data.id === undefined)
data.id = uuidv4();
window.view.instance.do.filter_users.set_current_filter(data);
http.post('api/v1/config/filters/put?type=users', data, function(js) {
if (js.ok !== undefined)
window.view.instance.load.filter_users();
});
},
},
},
load: {
@ -123,7 +156,9 @@ window.view.instance = {
});
},
filter_users: function() {
const hargs = get_hash_arguments();
E.http_template('instance/filter-users', function(html) {
html = html.replaceAll('{view.js}', 'window.view.instance.do.filter_users');
E.element('#window-instance #container').innerHTML = html;
E.elemid('profile-search-type-simple').onchange = function(e) {
if (e.target.checked) {
@ -146,14 +181,34 @@ window.view.instance = {
}
}
E.custom.btncollapse_render();
http.get('api/v1/config/filters/get?type=users', {}, function(js) {
window.vars.user_filters = js;
E.template('filters-all', function(TPL) {
var html = '';
for (var i = 0; i < js.length; i++) {
var tpl = TPL;
tpl = tpl.replaceAll('{id}', js[i].id);
tpl = tpl.replaceAll('{name}', js[i].preset_name);
html += tpl;
}
return html;
});
if (hargs.filter_id !== undefined)
window.view.instance.do.filter_users.set_current_filter(hargs.filter_id);
});
});
},
},
load_content: function(content, hashload) {
hashload = hashload === undefined ? false : hashload;
load_content: function(content, click) {
click = click === undefined ? false : click;
const hargs = get_hash_arguments();
const _empty_content = function() {
E.element('#window-instance #container').innerHTML = '';
};
if (click) {
delete window.hash_argument_nofirechange;
del_hash_argument('filter_id', false);
}
switch (content) {
case 'home':
_empty_content();
@ -163,9 +218,9 @@ window.view.instance = {
_empty_content();
return window.view.instance.show_config();
default:
if (hashload === true)
return set_hash_argument('content', content);
_empty_content();
if (hargs.content === undefined)
set_hash_argument('content', content, false);
return window.view.instance
.load[content.replaceAll('-','_')]();
}