Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add filter action to achievements manager. #2328

Merged
merged 8 commits into from
Mar 2, 2024
Merged

Add filter action to achievements manager. #2328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6d78f5b
Add filter action to achievements manager.
somiaj Feb 17, 2024
44e7ac0
Fixes to achievement filter.
somiaj Feb 19, 2024
6cfffb9
Replace selectedIndex with value statements.
somiaj Feb 19, 2024
71db28a
Reduce javascript redundancy.
somiaj Feb 24, 2024
08ce6bc
Remove achievement transition code.
somiaj Feb 25, 2024
98608b6
Add help on where to upload .axp files in achievements manager.
somiaj Feb 25, 2024
f1b088e
Save curried event listeners so they can be removed.
somiaj Feb 25, 2024
49f9ea8
change achievement categrory selection to dropdown
Alex-Jordan Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 89 additions & 103 deletions htdocs/js/AchievementList/achievementlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1,102 @@
(() => {
// Action form validation.
// Store event listeners so they can be removed.
const event_listeners = {};

const show_errors = (ids, elements) => {
for (const id of ids) elements.push(document.getElementById(id));
for (const element of elements) {
if (element?.id.endsWith('_err_msg')) {
element?.classList.remove('d-none');
} else {
element?.classList.add('is-invalid');
if (!(element.id in event_listeners)) {
event_listeners[element.id] = hide_errors([], elements);
element?.addEventListener('change', event_listeners[element.id]);
}
}
}
};

const hide_errors = (ids, elements) => {
return () => {
for (const id of ids) elements.push(document.getElementById(id));
for (const element of elements) {
if (element?.id.endsWith('_err_msg')) {
element?.classList.add('d-none');
if (element.id === 'select_achievement_err_msg' && 'achievement_table' in event_listeners) {
document
.getElementById('achievement-table')
?.removeEventListener('change', event_listeners.achievement_table);
delete event_listeners.achievement_table;
}
} else {
element?.classList.remove('is-invalid');
if (element.id in event_listeners) {
element?.removeEventListener('change', event_listeners[element.id]);
delete event_listeners[element.id];
}
}
}
};
};

const is_achievement_selected = () => {
for (const achievement of document.getElementsByName('selected_achievements')) {
if (achievement.checked) return true;
}
document.getElementById('select_achievement_err_msg')?.classList.remove('d-none');
document.getElementById('achievement-table')?.addEventListener(
'change',
() => {
document.getElementById('select_achievement_err_msg')?.classList.add('d-none');
for (const id of ['edit_select', 'assign_select', 'export_select', 'score_select']) {
document.getElementById(id)?.classList.remove('is-invalid');
}
},
{ once: true }
);
const err_msg = document.getElementById('select_achievement_err_msg');
err_msg?.classList.remove('d-none');
if (!('achievement_table' in event_listeners)) {
event_listeners.achievement_table = hide_errors(
['filter_select', 'edit_select', 'assign_select', 'export_select', 'score_select'],
[err_msg]
);
document.getElementById('achievement-table')?.addEventListener('change', event_listeners.achievement_table);
}
return false;
};

document.getElementById('achievement-list')?.addEventListener('submit', (e) => {
const action = document.getElementById('current_action')?.value || '';
if (action === 'edit') {
const edit_select = document.getElementById('edit_select');
if (edit_select.value === 'selected' && !is_achievement_selected()) {
if (action === 'filter') {
const filter_select = document.getElementById('filter_select');
const filter = filter_select?.value || '';
const filter_text = document.getElementById('filter_text');
if (filter === 'selected' && !is_achievement_selected()) {
e.preventDefault();
e.stopPropagation();
edit_select.classList.add('is-invalid');
edit_select.addEventListener(
'change',
() => {
document.getElementById('select_achievement_err_msg')?.classList.add('d-none');
document.getElementById('edit_select')?.classList.remove('is-invalid');
},
{ once: true }
);
show_errors(['select_achievement_err_msg'], [filter_select]);
} else if (filter === 'match_ids' && filter_text?.value === '') {
e.preventDefault();
e.stopPropagation();
show_errors(['filter_text_err_msg'], [filter_select, filter_text]);
}
} else if (action === 'assign') {
const assign_select = document.getElementById('assign_select');
if (assign_select.value === 'selected' && !is_achievement_selected()) {
} else if (['edit', 'assign', 'export', 'score'].includes(action)) {
const action_select = document.getElementById(`${action}_select`);
if (action_select.value === 'selected' && !is_achievement_selected()) {
e.preventDefault();
e.stopPropagation();
assign_select.classList.add('is-invalid');
assign_select.addEventListener(
'change',
() => {
document.getElementById('select_achievement_err_msg')?.classList.add('d-none');
document.getElementById('assign_select')?.classList.remove('is-invalid');
},
{ once: true }
);
show_errors(['select_achievement_err_msg'], [action_select]);
}
} else if (action === 'import') {
const import_file = document.getElementById('import_file_select');
if (!import_file.value.endsWith('.axp')) {
e.preventDefault();
e.stopPropagation();
document.getElementById('import_file_err_msg')?.classList.remove('d-none');
import_file.classList.add('is-invalid');
import_file.addEventListener(
'change',
() => {
document.getElementById('import_file_err_msg')?.classList.add('d-none');
document.getElementById('import_file_select')?.classList.remove('is-invalid');
},
{ once: true }
);
}
} else if (action === 'export') {
const export_select = document.getElementById('export_select');
if (export_select.value === 'selected' && !is_achievement_selected()) {
e.preventDefault();
e.stopPropagation();
export_select.classList.add('is-invalid');
export_select.addEventListener(
'change',
() => {
document.getElementById('select_achievement_err_msg')?.classList.add('d-none');
document.getElementById('export_select')?.classList.remove('is-invalid');
},
{ once: true }
);
}
} else if (action === 'score') {
const score_select = document.getElementById('score_select');
if (export_select.value === 'selected' && !is_achievement_selected()) {
e.preventDefault();
e.stopPropagation();
score_select.classList.add('is-invalid');
score_select.addEventListener(
'change',
() => {
document.getElementById('select_achievement_err_msg')?.classList.add('d-none');
document.getElementById('score_select')?.classList.remove('is-invalid');
},
{ once: true }
);
show_errors(['import_file_err_msg'], [import_file]);
}
} else if (action === 'create') {
const create_text = document.getElementById('create_text');
const create_select = document.getElementById('create_select');
if (create_text.value === '') {
e.preventDefault();
e.stopPropagation();
document.getElementById('create_file_err_msg')?.classList.remove('d-none');
create_text.classList.add('is-invalid');
create_text.addEventListener(
'change',
() => {
document.getElementById('create_file_err_msg')?.classList.add('d-none');
document.getElementById('create_text')?.classList.remove('is-invalid');
},
{ once: true }
);
} else if (document.getElementById('create_select')?.selectedIndex == 1 && !is_achievement_selected()) {
show_errors(['create_file_err_msg'], [create_text]);
} else if (create_select?.value == 'copy' && !is_achievement_selected()) {
e.preventDefault();
e.stopPropagation();
show_errors(['select_achievement_err_msg'], [create_select]);
}
} else if (action === 'delete') {
const delete_confirm = document.getElementById('delete_select');
Expand All @@ -123,30 +106,33 @@
} else if (delete_confirm.value != 'yes') {
e.preventDefault();
e.stopPropagation();
document.getElementById('delete_confirm_err_msg')?.classList.remove('d-none');
delete_confirm.classList.add('is-invalid');
delete_confirm.addEventListener(
'change',
() => {
document.getElementById('delete_select')?.classList.remove('is-invalid');
document.getElementById('delete_confirm_err_msg')?.classList.add('d-none');
},
{ once: true }
);
show_errors(['delete_confirm_err_msg'], [delete_confirm]);
}
}
});

// Remove all error messages when changing tabs.
for (const tab of document.querySelectorAll('a[data-bs-toggle="tab"]')) {
tab.addEventListener('shown.bs.tab', () => {
const actionForm = document.getElementById('achievement-list');
for (const err_msg of actionForm.querySelectorAll('div[id$=_err_msg]')) {
err_msg.classList.add('d-none');
}
for (const invalid of actionForm.querySelectorAll('.is-invalid')) {
invalid.classList.remove('is-invalid');
}
if (Object.keys(event_listeners).length != 0)
hide_errors(
[],
document.getElementById('achievement-list')?.querySelectorAll('div[id$=_err_msg], .is-invalid')
)();
});
}

// Toggle the display of the filter elements as the filter select changes.
const filter_select = document.getElementById('filter_select');
const filter_text_elements = document.getElementById('filter_text_elements');
const filter_category_elements = document.getElementById('filter_category_elements');
const filterElementToggle = () => {
if (filter_select?.value === 'match_ids') filter_text_elements.style.display = 'flex';
else filter_text_elements.style.display = 'none';
if (filter_select?.value === 'match_category') filter_category_elements.style.display = 'flex';
else filter_category_elements.style.display = 'none';
};

if (filter_select) filterElementToggle();
filter_select?.addEventListener('change', filterElementToggle);
})();
Loading