Skip to content

Commit

Permalink
🌃
Browse files Browse the repository at this point in the history
  • Loading branch information
@a-sync
a-sync committed Feb 23, 2024
1 parent f6228ff commit b39fe29
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 160 deletions.
25 changes: 4 additions & 21 deletions application/views/admin/events.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,18 +189,10 @@
<div class="mdc-data-table mdc-elevation--z2" id="events-table">
<div class="mdc-data-table__table-container">

<div class="dnone" id="events-filters"></div>

<table class="mdc-data-table__table sortable">
<thead>
<?php if (count($items) > 0) : ?>
<tr class="mdc-data-table__header-row dnone" id="events-filters">
<td class="mdc-data-table__header-cell"></td>
<td class="mdc-data-table__header-cell" id="attacker-filter"></td>
<td class="mdc-data-table__header-cell" id="event-filter"></td>
<td class="mdc-data-table__header-cell" id="victim-filter"></td>
<td class="mdc-data-table__header-cell"></td>
<td class="mdc-data-table__header-cell"></td>
</tr>
<?php endif; ?>
<tr class="mdc-data-table__header-row">
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col" aria-sort="ascending" data-column-id="time">Time</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col" aria-sort="none" data-column-id="attacker" title="Player name / Entity ID">Attacker</th>
Expand All @@ -214,15 +206,7 @@
</tr>
</thead>
<tbody class="mdc-data-table__content">
<?php
$events_num = [];
foreach ($items as $i) :
if (isset($events_num[$i['event']])) {
$events_num[$i['event']] += 1;
} else {
$events_num[$i['event']] = 1;
}

<?php foreach ($items as $i) :
$time = gmdate('H:i:s', $i['frame']);

$attacker_name = html_escape($i['attacker_name']);
Expand Down Expand Up @@ -309,7 +293,6 @@
<script>
const entities = <?php echo json_encode($op_entities); ?>;
const sides = <?php echo json_encode($sides); ?>;
const events_num = <?php echo json_encode($events_num); ?>;

async function editAttackerAction(btn) {
const btn_icon = btn.querySelector('i');
Expand Down Expand Up @@ -534,7 +517,7 @@

const domLoaded = () => {
console.log('DOM loaded');
init_events_filters(entities, sides, events_num);
init_events_filters(entities, sides);

const edit_btns = document.querySelectorAll('.edit-attacker-btn');
for (const b of edit_btns) {
Expand Down
25 changes: 4 additions & 21 deletions application/views/op-events.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,10 @@

<?php echo $op_menu; ?>

<div class="dnone" id="events-filters"></div>

<table class="mdc-data-table__table sortable">
<thead>
<?php if (count($items) > 0) : ?>
<tr class="mdc-data-table__header-row dnone" id="events-filters">
<td class="mdc-data-table__header-cell"></td>
<td class="mdc-data-table__header-cell" id="attacker-filter"></td>
<td class="mdc-data-table__header-cell" id="event-filter"></td>
<td class="mdc-data-table__header-cell" id="victim-filter"></td>
<td class="mdc-data-table__header-cell"></td>
<td class="mdc-data-table__header-cell"></td>
</tr>
<?php endif; ?>
<tr class="mdc-data-table__header-row">
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col" aria-sort="ascending" data-column-id="time">Time</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col" aria-sort="none" data-column-id="attacker" title="Player name / Entity ID">Attacker</th>
Expand All @@ -60,15 +52,7 @@
</tr>
</thead>
<tbody class="mdc-data-table__content">
<?php
$events_num = [];
foreach ($deduped_items as $index => $i) :
if (isset($events_num[$i['event']])) {
$events_num[$i['event']] += 1;
} else {
$events_num[$i['event']] = 1;
}

<?php foreach ($deduped_items as $index => $i) :
$time = gmdate('H:i:s', $i['frame']);

$attacker_player_name = is_null($i['attacker_player_name']) ? '' : $i['attacker_player_name'];
Expand Down Expand Up @@ -164,11 +148,10 @@
<script>
const entities = <?php echo json_encode($op_entities); ?>;
const sides = <?php echo json_encode($sides); ?>;
const events_num = <?php echo json_encode($events_num); ?>;

const domLoaded = () => {
console.log('DOM loaded');
init_events_filters(entities, sides, events_num);
init_events_filters(entities, sides);
};

if (document.readyState === 'complete' ||
Expand Down
12 changes: 8 additions & 4 deletions public/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,13 +234,17 @@ img.ocap-link {
text-decoration: underline;
}

.attacker-filter-ss, .event-filter-ss, .victim-filter-ss {
min-width: 200px;
font-size: 0.8rem;
#events-filters {
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 1rem;
}

.event-filter-ss {
.entity-filter-ss, .event-filter-ss {
min-width: 200px;
max-width: 300px;
font-size: 0.8rem;
}

.dnone {
Expand Down
169 changes: 55 additions & 114 deletions public/events-filters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ function deepMerge(obj1, obj2) {
return merged;
}

function init_events_filters(entities, sides, events_num) {
function init_events_filters(entities, sides) {
const events_filters = document.getElementById('events-filters');

const tab_bar = document.querySelector('#events-table .mdc-tab-bar');
const tabs = tab_bar ? tab_bar.querySelectorAll('.mdc-tab') : [];
function update_tabs () {
return !tab_bar ? () => {} : () => {
for (const t of tabs) {
if (attacker_ss.settings.isOpen || victim_ss.settings.isOpen || event_ss.settings.isOpen) {
if (entity_ss.settings.isOpen || event_ss.settings.isOpen) {
t.style.opacity = '0.5';
t.style.pointerEvents = 'none';
} else {
Expand All @@ -39,10 +39,6 @@ function init_events_filters(entities, sides, events_num) {
};
}

const attacker_filter = document.getElementById('attacker-filter');
const victim_filter = document.getElementById('victim-filter');
const event_filter = document.getElementById('event-filter');

const side_player_entities = {};
const side_other_entities = {};
for (const ent of entities) {
Expand Down Expand Up @@ -80,19 +76,20 @@ function init_events_filters(entities, sides, events_num) {
}
});

const attacker_select = document.createElement('select');
attacker_select.classList.add('attacker-filter-ss');
attacker_filter.appendChild(attacker_select);
const attacker_ss = new SlimSelect({
'select': attacker_select,
'settings': {
const entity_select = document.createElement('select');
entity_select.multiple = true;
entity_select.classList.add('entity-filter-ss');
events_filters.appendChild(entity_select);
const entity_ss = new SlimSelect({
select: entity_select,
settings: {
showSearch: true,
allowDeselect: true,
closeOnSelect: false
},
'data': [
data: [
{
text: 'Filter by attacker',
text: 'Filter by entities',
value: '',
placeholder: true
},
Expand All @@ -104,148 +101,92 @@ function init_events_filters(entities, sides, events_num) {
],
events: {
afterChange: () => {
update_events_ss_dataset();
update_events_table_classes();
update_filters_dataset(true);
},
beforeOpen: update_tabs(),
afterClose: update_tabs()
}
});

const victim_select = document.createElement('select');
victim_select.classList.add('victim-filter-ss');
victim_filter.appendChild(victim_select);
const victim_ss = new SlimSelect({
'select': victim_select,
'settings': {
showSearch: true,
allowDeselect: true,
closeOnSelect: false
},
'data': [
{
text: 'Filter by victim',
value: '',
placeholder: true
},
{
text: 'nobody / "something"',
value: 'null'
},
...ss_entities_data_field
],
events: {
afterChange: () => {
update_events_ss_dataset();
update_events_table_classes();
},
beforeOpen: update_tabs(),
afterClose: update_tabs()
}
});

const ss_events_data_field = Object.keys(events_num).map(ev => {
return {
text: ev + ' (' + events_num[ev] + ')',
value: ev
}
});

const event_select = document.createElement('select');
event_select.multiple = true;
event_select.classList.add('event-filter-ss');
event_filter.appendChild(event_select);
events_filters.appendChild(event_select);
const event_ss = new SlimSelect({
'select': event_select,
'settings': {
select: event_select,
settings: {
showSearch: true,
allowDeselect: true,
closeOnSelect: false
},
'data': [
data: [
{
text: 'Filter by events',
value: '',
placeholder: true
},
...ss_events_data_field
}
],
events: {
afterChange: () => {
update_events_table_classes();
update_filters_dataset(false);
},
beforeOpen: update_tabs(),
afterClose: update_tabs()
}
});

function update_events_ss_dataset () {
if (!event_ss) return;

const rules = [];
const attacker_ss_value = attacker_ss.getSelected();
if (attacker_ss_value.length && attacker_ss_value[0] !== '') {
const attacker_id = attacker_ss_value[0] === 'null' ? '' : attacker_ss_value[0];
rules.push('[data-attacker-id="' + attacker_id + '"]');
}

const victim_ss_value = victim_ss.getSelected();
if (victim_ss_value.length && victim_ss_value[0] !== '') {
const victim_id = victim_ss_value[0] === 'null' ? '' : victim_ss_value[0];
rules.push('[data-victim-id="' + victim_id + '"]');
}
function update_filters_dataset(update_events) {
if (!entity_ss || !event_ss) return;

const entity_ss_value = entity_ss.getSelected();
const event_ss_value = event_ss.getSelected();

const ss_events_data_field_new = Object.keys(events_num).map(ev => {
const count = document.querySelectorAll('#events-table tbody tr[data-event-name="' + ev + '"]' + rules.join('')).length;
return {
text: ev + ' (' + count + ')',
value: ev,
selected: event_ss_value.includes(ev)
const events_num = [];
const ss_events_data_field = [
{
text: 'Filter by events',
value: '',
placeholder: true
}
});

event_ss.setData(ss_events_data_field_new);
}

function update_events_table_classes() {
let attacker_id = false;
const attacker_ss_value = attacker_ss.getSelected();
if (attacker_ss_value.length && attacker_ss_value[0] !== '') {
attacker_id = attacker_ss_value[0] === 'null' ? '' : attacker_ss_value[0];
}

let victim_id = false;
const victim_ss_value = victim_ss.getSelected();
if (victim_ss_value.length && victim_ss_value[0] !== '') {
victim_id = victim_ss_value[0] === 'null' ? '' : victim_ss_value[0];
}

const event_ss_value = event_ss.getSelected();
];

const rows = document.querySelectorAll('#events-table tbody tr');
for (const tr of rows) {
if (event_ss_value.length > 0) {
if (!event_ss_value.includes(tr.dataset.eventName)) {
tr.classList.add('dnone');
continue;
const ev = tr.dataset.eventName;
if (update_events && events_num[ev] === undefined) {
const rules = [];
if (entity_ss_value.length > 0) {
for (const entity_id of entity_ss_value) {
const id = entity_id === 'null' ? '' : entity_id;
rules.push('#events-table tbody tr[data-event-name="' + ev + '"][data-attacker-id="' + id + '"]');
rules.push('#events-table tbody tr[data-event-name="' + ev + '"][data-victim-id="' + id + '"]');
}
} else {
rules.push('#events-table tbody tr[data-event-name="' + ev + '"]');
}
}

if (attacker_id !== false && attacker_id !== tr.dataset.attackerId) {
tr.classList.add('dnone');
continue;
const count = document.querySelectorAll(rules.join(',')).length;
ss_events_data_field.push({
text: ev + ' (' + count + ')',
value: ev,
selected: event_ss_value.includes(ev)
});

events_num[ev] = count;
}

if (victim_id !== false && victim_id !== tr.dataset.victimId) {
if (entity_ss_value.length > 0 && !entity_ss_value.includes(tr.dataset.attackerId) && !entity_ss_value.includes(tr.dataset.victimId)) {
tr.classList.add('dnone');
} else if (event_ss_value.length > 0 && !event_ss_value.includes(tr.dataset.eventName)) {
tr.classList.add('dnone');
continue;
} else {
tr.classList.remove('dnone');
}

tr.classList.remove('dnone');
}

if (update_events) event_ss.setData(ss_events_data_field);
}

update_filters_dataset(true);
events_filters.classList.remove('dnone');
}

0 comments on commit b39fe29

Please sign in to comment.