From 76e102be5266fe5d43b08798dd44908a311a8127 Mon Sep 17 00:00:00 2001 From: versx Date: Sun, 27 Sep 2020 15:28:28 -0700 Subject: [PATCH] Add expandable raid entry rows for more info --- src/data/map.js | 15 ++++-- src/services/locale.js | 28 +++++++++++ src/views/header.mustache | 1 + src/views/raids.mustache | 103 +++++++++++++++++++++++++++++++++++--- static/css/style.css | 8 +++ 5 files changed, 142 insertions(+), 13 deletions(-) create mode 100644 static/css/style.css diff --git a/src/data/map.js b/src/data/map.js index fb962de..a1c7d0c 100644 --- a/src/data/map.js +++ b/src/data/map.js @@ -457,7 +457,7 @@ async function getRaids(filter) { const now = new Date(); const starts = new Date(row.raid_battle_timestamp * 1000); const started = starts < now; - const startTime = started ? '--' : starts.toLocaleTimeString(); + const startTime = started ? '--' : utils.toHHMMSS(starts - now);//.toLocaleTimeString(); const ends = new Date(row.raid_end_timestamp * 1000); const secondsLeft = ends - now; // Skip raids that have less than 60 seconds remaining. @@ -472,6 +472,7 @@ async function getRaids(filter) { (utils.inArray(filter.city, city) || filter.city.toLowerCase() === 'all')) { const mapLink = util.format(config.google.maps, row.lat, row.lon); raids.push({ + DT_RowId: row.id, pokemon: { formatted: ` ${name}`, sort: row.raid_pokemon_id @@ -489,10 +490,14 @@ async function getRaids(filter) { sort: level }, gym_name: `${gym}`, - team: { - formatted: teamIcon, - sort: row.team_id - }, + team: teamIcon, + form: row.raid_pokemon_form > 0 ? Localizer.instance.getFormName(row.raid_pokemon_form) : '', + evolution: row.raid_pokemon_evolution > 0 ? Localizer.instance.getEvolutionName(row.raid_pokemon_evolution) : '', + move1: Localizer.instance.getMoveName(row.raid_pokemon_move_1), + move2: Localizer.instance.getMoveName(row.raid_pokemon_move_2), + costume: row.raid_pokemon_costume ? Localizer.instance.getCostumeName(row.raid_pokemon_costume) : '', + gender: Localizer.instance.getGenderName(row.raid_pokemon_gender), + cp: (row.raid_pokemon_cp || 0).toLocaleString(), ex_eligible: ex, city: city }); diff --git a/src/services/locale.js b/src/services/locale.js index 1cd70e5..1046d48 100644 --- a/src/services/locale.js +++ b/src/services/locale.js @@ -72,6 +72,34 @@ class Localizer { return i18n('team_' + teamId); } + getMoveName(moveId) { + return i18n('move_' + moveId); + } + + getCostumeName(costumeId) { + return i18n('costume_' + costumeId); + } + + getGenderName(genderId) { + return i18n('gender_icon_' + genderId); + } + + getEvolutionName(evoId) { + return i18n('evo_' + evoId); + } + + getFormName(formId) { + return i18n('form_' + formId); + } + + getWeatherName(weatherId) { + return i18n('weather_' + weatherId); + } + + getWeatherIcon(weatherId) { + return i18n('weather_icon_' + weatherId); + } + getQuestTask(questId, amount) { const task = i18n('quest_' + questId, { amount: amount }); return task; diff --git a/src/views/header.mustache b/src/views/header.mustache index 8fe6594..a1c6cff 100644 --- a/src/views/header.mustache +++ b/src/views/header.mustache @@ -8,6 +8,7 @@ + diff --git a/src/views/raids.mustache b/src/views/raids.mustache index b235b91..d6b7dee 100644 --- a/src/views/raids.mustache +++ b/src/views/raids.mustache @@ -101,13 +101,12 @@ + - - @@ -226,6 +225,13 @@ "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]], "pageLength": 100, "columns": [ + { + "class": "details-control", + "orderable": false, + "data": null, + "defaultContent": "", + "visible": false + }, { data: { _: "pokemon.formatted", sort: "pokemon.sort" @@ -243,11 +249,6 @@ sort: "raid_ends.sort" } }, { "data": "gym_name" }, - { data: { - _: "team.formatted", - sort: "team.sort" - } }, - { "data": "ex_eligible" }, { "data": "city" } ], "columnDefs": [ @@ -256,7 +257,7 @@ "info": true, "order": [[ 3, "asc" ]], "search.caseInsensitive": true, - "responsive": true, + //"responsive": true, /* "createdRow": function(row, data, index) { //$('td', row).eq(2).css('color', 'blue'); @@ -294,6 +295,92 @@ table.ajax.reload(null, false); }, 30 * 1000); }); + let detailRows = []; + $('#table tbody').on('click', 'tr td', function() { + let tr = $(this).closest('tr'); + let row = table.row(tr); + let index = $.inArray(tr.attr('id'), detailRows); + if (row.child.isShown()) { + row.child.hide(); + tr.removeClass('shown'); + detailRows.splice(index, 1); + } + else { + row.child(format(row.data())).show(); + tr.addClass('shown'); + detailRows.push(tr.attr('id')); + } + }); + + // On each draw, loop over the `detailRows` array and show any child rows + table.on('draw', function() { + $.each(detailRows, function (i, id) { + $(`#${id} td.details-control`).trigger('click'); + }); + }); + + function format (data) { + let content = ` +
+
+
${data.gym_name}
+
+
+
+ Moveset: ${data.move1}/${data.move2}
+
+
+ EX-Eligible: ${data.ex_eligible}
+
+
+ Team: ${data.team}
+
+
+ Level: ${data.raid_level.formatted}
+
+ `; + if (data.form) { + content += ` +
+ Form: ${data.form}
+
+ `; + } + if (data.costume) { + content += ` +
+ Costume: ${data.costume}
+
+ `; + } + if (data.evolution) { + content += ` +
+ Evolution: ${data.evolution}
+
+ `; + } + if (data.cp > 0) { + content += ` +
+ CP: ${data.cp}
+
+ `; + } + if (data.gender > 0) { + content += ` +
+ Gender: ${data.gender}
+
+ `; + } + content += ` +
+
+ `; + return content; + } + function reload() { var pokemon = $('#filter-pokemon').val(); var gym = $('#filter-gym').val(); diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..5a4a156 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,8 @@ +.expanded-row { + border: 4px solid rgb(50, 53, 57); + background-color: rgb(34, 34, 34); + width: 100%; + height: 100%; + padding: 0 0 0 0; + /*margin: 0 0 0 0;*/ +} \ No newline at end of file
{{Pokemon}} {{Level}} {{Starts}} {{Ends}} {{Gym Name}}{{Team}}{{EX-Eligible}} {{City}}