Customizable sorting order for characters list

This commit is contained in:
SillyLossy
2023-04-10 17:48:17 +03:00
parent d1fb575243
commit defa7f357e
5 changed files with 79 additions and 15 deletions

View File

@ -1362,6 +1362,15 @@
</div>
<form id="form_character_search_form" action="javascript:void(null);">
<input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." />
<select id="character_sort_order" title="Characters sorting order">
<option data-field="name" data-order="asc">Name, A-Z</option>
<option data-field="name" data-order="desc">Name, Z-A</option>
<option data-field="date_added" data-order="desc">Date added, newer first</option>
<option data-field="date_added" data-order="asc">Date added, older first</option>
<option data-field="date_last_chat" data-order="desc">Recently chatted</option>
<option data-field="chat_size" data-order="desc">Most chatted</option>
<option data-field="chat_size" data-order="asc">Least chatted</option>
</select>
</form>
<div id="rm_print_characters_block"></div>
</div>

View File

@ -42,6 +42,7 @@ import {
collapseNewlines,
loadPowerUserSettings,
playMessageSound,
sortCharactersList,
power_user,
} from "./scripts/power-user.js";
@ -609,7 +610,7 @@ function printCharacters() {
//console.log('printcharacters() -- printing -- ChID '+i+' ('+item.name+')');
});
printGroups();
sortCharactersList('name', 'asc');
sortCharactersList();
}
async function getCharacters() {
@ -3066,14 +3067,6 @@ function setGenerationProgress(progress) {
}
}
function sortCharactersList(field, order) {
let orderedList = characters.slice().sort((a, b) => order == 'asc' ? a[field].localeCompare(b[field]) : b[field].localeCompare(a[field]));
for (let i = 0; i < characters.length; i++) {
$(`.character_select[chid="${i}"]`).css({ 'order': orderedList.indexOf(characters[i]) });
}
}
function isHordeGenerationNotAllowed() {
if (main_api == "kobold" && horde_settings.use_horde && preset_settings == "gui") {
callPopup('GUI Settings preset is not supported for Horde. Please select another preset.', 'text');

View File

@ -1,9 +1,10 @@
import { saveSettingsDebounced } from "../script.js";
import { saveSettingsDebounced, characters } from "../script.js";
export {
loadPowerUserSettings,
collapseNewlines,
playMessageSound,
sortCharactersList,
power_user,
};
@ -38,6 +39,8 @@ let power_user = {
sheld_width: sheld_width.DEFAULT,
play_message_sound: false,
play_sound_unfocused: true,
sort_field: 'name',
sort_order: 'asc',
};
const storage_keys = {
@ -156,6 +159,25 @@ function loadPowerUserSettings(settings) {
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
$(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
$(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
$(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true);
sortCharactersList();
}
function sortCharactersList() {
const sortFunc = (a, b) => power_user.sort_order == 'asc' ? compareFunc(a, b) : compareFunc(b, a);
const compareFunc = (first, second) => typeof first[power_user.sort_field] == "string"
? first[power_user.sort_field].localeCompare(second[power_user.sort_field])
: first[power_user.sort_field] - second[power_user.sort_field];
if (power_user.sort_field == undefined || characters.length === 0) {
return;
}
let orderedList = characters.slice().sort(sortFunc);
for (let i = 0; i < characters.length; i++) {
$(`.character_select[chid="${i}"]`).css({ 'order': orderedList.indexOf(characters[i]) });
}
}
$(document).ready(() => {
@ -241,6 +263,13 @@ $(document).ready(() => {
saveSettingsDebounced();
});
$("#character_sort_order").on('change', function () {
power_user.sort_field = $(this).find(":selected").data('field');
power_user.sort_order = $(this).find(":selected").data('order');
sortCharactersList();
saveSettingsDebounced();
});
$(window).on('focus', function() {
browser_has_focus = true;
});

View File

@ -859,17 +859,20 @@ img[src="img/load.svg"] {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 10px;
padding-left: 5px;
margin: 10px 5px;
column-gap: 10px;
}
#character_sort_order {
margin: 0;
flex: 1;
}
#character_search_bar {
flex: 1;
font-size: 1em;
padding-left: 0.75em;
margin-left: 0;
margin-right: 0.5rem;
margin-bottom: 0;
margin: 0;
}
input[type=search]::-webkit-search-cancel-button {

View File

@ -739,6 +739,36 @@ app.post("/getcharacters", jsonParser, function (request, response) {
//console.log(jsonObject);
characters[i] = {};
characters[i] = jsonObject;
try {
const charStat = fs.statSync(path.join(charactersPath, item));
characters[i]['date_added'] = charStat.birthtimeMs;
const char_dir = path.join(chatsPath, item.replace('.png', ''));
let chat_size = 0;
let date_last_chat = 0;
if (fs.existsSync(char_dir)) {
const chats = fs.readdirSync(char_dir);
if (Array.isArray(chats) && chats.length) {
for (const chat of chats) {
const chatStat = fs.statSync(path.join(char_dir, chat));
chat_size += chatStat.size;
date_last_chat = Math.max(date_last_chat, chatStat.mtimeMs);
}
}
}
characters[i]['date_last_chat'] = date_last_chat;
characters[i]['chat_size'] = chat_size;
}
catch {
characters[i]['date_added'] = 0;
characters[i]['date_last_chat'] = 0;
characters[i]['chat_size'] = 0;
}
i++;
} catch (error) {
console.log(`Could not read character: ${item}`);