#2611 WIP having multiple dungeon route tables on a single page.

lang/en_US/view_team.php

@@ -19,7 +19,9 @@
             'ad_free_giveaway_description_available'     => 'Thank you for subscribing to Keystone.guru\'s :patreon! You can give away :current more ad-free experiences to Keystone.guru to any team member.',
         ],
         'overview'        => [
-            'title' => 'Overview',
+            'title'   => 'Overview',
+            'routes'  => 'Routes',
+            'members' => 'Members',
         ],
         'routepublishing' => [
             'title' => 'Route publishing',

resources/assets/css/custom.css

@@ -58,7 +58,7 @@
     }
 }
 
-#routes_table .not_clickable {
+.routes_table .not_clickable {
     cursor: default !important;
 }
 

resources/assets/js/custom/inline/dungeonroute/table.js

@@ -31,11 +31,11 @@ class DungeonrouteTable extends InlineCode {
 
         let self = this;
 
-        $('#dungeonroute_filter').unbind('click').bind('click', function () {
+        $(this.options.filterButtonId).unbind('click').bind('click', function () {
             // Build the search parameters
-            let dungeonId = $('#dungeonroute_search_dungeon_id').val();
-            let affixes = $('#affixes').val();
-            let attributes = $('#attributes').val();
+            let dungeonId = $(self.options.dungeonSelectId).val();
+            let affixes = $(self.options.affixSelectId).val();
+            let attributes = $(self.options.attributesSelectId).val();
 
             // Find wherever the columns are we're looking for, then filter using them
             // https://stackoverflow.com/questions/32598279/how-to-get-name-of-datatable-column
@@ -51,7 +51,7 @@ class DungeonrouteTable extends InlineCode {
             self._dt.draw();
         });
 
-        $('.table_list_view_toggle').unbind('click').bind('click', function () {
+        $(this.options.tableListViewToggleSelector).unbind('click').bind('click', function () {
             // Display the correct table
             self.setViewMode($(this).data('viewmode'));
             self.refreshTable();
@@ -109,18 +109,20 @@ class DungeonrouteTable extends InlineCode {
      * Binds a datatables instance to a jquery element.
      **/
     refreshTable() {
+        console.warn('refreshtable', this.options.tableSelector);
+
         let self = this;
 
         // Send cookie
         Cookies.set('routes_viewmode', self._viewMode, cookieDefaultAttributes);
 
-        let $element = $('#routes_table');
+        let $element = $(this.options.tableSelector);
 
-        // Set buttons to the correct state
-        $('.table_list_view_toggle').removeClass('btn-default').removeClass('btn-primary').addClass('btn-default');
+        // Set all to default
+        $(this.options.tableListViewToggleSelector).removeClass('btn-default').removeClass('btn-primary').addClass('btn-default');
 
         // This is now the selected button
-        $('#table_' + self._viewMode + '_btn').removeClass('btn-default').addClass('btn-primary');
+        $(`${this.options.tableListViewToggleSelector}.${self._viewMode}`).removeClass('btn-default').addClass('btn-primary');
 
         if (self._dt !== null) {
             self._dt.destroy();
@@ -134,8 +136,8 @@ class DungeonrouteTable extends InlineCode {
             'ajax': {
                 'url': '/ajax/routes',
                 'data': function (d) {
-                    d.requirements = $('#dungeonroute_requirements_select').val();
-                    d.tags = $('#dungeonroute_tags_select').val();
+                    d.requirements = $(self.options.requirementsSelectId).val();
+                    d.tags = $(self.options.tagsSelectId).val();
                     d = $.extend(d, self._tableView.getAjaxParameters());
                 },
                 'cache': false
@@ -511,6 +513,8 @@ class DungeonrouteTable extends InlineCode {
      * @private
      */
     _changePublishState(publicKey, value) {
+        let self = this;
+
         $.ajax({
             type: 'POST',
             url: `/ajax/${publicKey}/publishedState`,
@@ -521,7 +525,7 @@ class DungeonrouteTable extends InlineCode {
             success: function (json) {
                 showSuccessNotification(lang.get('messages.route_published_state_changed'));
                 // Refresh the table
-                $('#dungeonroute_filter').trigger('click');
+                $(self.options.filterButtonId).trigger('click');
             }
         });
     }
@@ -532,6 +536,8 @@ class DungeonrouteTable extends InlineCode {
      * @private
      */
     _promptDeleteDungeonRouteClicked(clickEvent) {
+        let self = this;
+
         showConfirmYesCancel(lang.get('messages.route_delete_confirm'), function () {
             let publicKey = $(clickEvent.target).data('publickey');
 
@@ -542,7 +548,7 @@ class DungeonrouteTable extends InlineCode {
                 success: function (json) {
                     showSuccessNotification(lang.get('messages.route_delete_successful'));
                     // Refresh the table
-                    $('#dungeonroute_filter').trigger('click');
+                    $(self.options.filterButtonId).trigger('click');
                 }
             });
         });
@@ -575,12 +581,13 @@ class DungeonrouteTable extends InlineCode {
      * @private
      */
     _promptCloneToTeamClicked(clickEvent) {
+        let self = this;
         let publicKey = $(clickEvent.target).data('publickey');
         let template = Handlebars.templates['dungeonroute_table_profile_clone_to_team_template'];
 
         showConfirmYesCancel(template($.extend({}, getHandlebarsDefaultVariables(), {
             publicKey: publicKey,
-            teams: this.options.teams
+            teams: self.options.teams
         })), function () {
             let targetTeam = $(`input[type='radio'][name='clone-to-team-${publicKey}']:checked`).val();
 
@@ -596,7 +603,7 @@ class DungeonrouteTable extends InlineCode {
                 success: function (json) {
                     showSuccessNotification(lang.get('messages.route_clone_successful'));
                     // Refresh the table
-                    $('#dungeonroute_filter').trigger('click');
+                    $(self.options.filterButtonId).trigger('click');
                 }
             });
         }, null, {closeWith: ['button']});
@@ -632,6 +639,7 @@ class DungeonrouteTable extends InlineCode {
      * @private
      */
     _migrateTo(clickEvent, affixName) {
+        let self = this;
         let publicKey = $(clickEvent.target).data('publickey');
 
         showConfirmYesCancel(lang.get(`messages.route_migration_to_${affixName}_confirm_warning`), function () {
@@ -642,7 +650,7 @@ class DungeonrouteTable extends InlineCode {
                 success: function (json) {
                     showSuccessNotification(lang.get('messages.route_migration_successful'));
                     // Refresh the table
-                    $('#dungeonroute_filter').trigger('click');
+                    $(self.options.filterButtonId).trigger('click');
                 }
             });
         }, null, {closeWith: ['button']});
@@ -657,11 +665,11 @@ class DungeonrouteTable extends InlineCode {
      * @private
      */
     _reset() {
-        $('#dungeonroute_search_dungeon_id').val(-1);
-        $('#affixes').val([]);
-        $('#attributes').val([]);
-        $('#dungeonroute_requirements_select').val([]);
-        $('#dungeonroute_tags_select').val([]);
+        $(this.options.dungeonSelectId).val(-1);
+        $(this.options.affixSelectId).val([]);
+        $(this.options.attributesSelectId).val([]);
+        $(this.options.requirementsSelectId).val([]);
+        $(this.options.tagsSelectId).val([]);
 
         refreshSelectPickers();
     }
@@ -677,16 +685,14 @@ class DungeonrouteTable extends InlineCode {
     overrideSelection(dungeonId, affixGroupIds = [], attributes = [], requirements = [], tags = []) {
         this._reset();
 
-        console.log(dungeonId, affixGroupIds, attributes, requirements, tags);
-
-        $('#dungeonroute_search_dungeon_id').val(dungeonId);
-        $('#affixes').val(affixGroupIds);
-        $('#attributes').val(attributes);
-        $('#dungeonroute_requirements_select').val(requirements);
-        $('#dungeonroute_tags_select').val(tags);
+        $(this.options.dungeonSelectId).val(dungeonId);
+        $(this.options.affixSelectId).val(affixGroupIds);
+        $(this.options.attributesSelectId).val(attributes);
+        $(this.options.requirementsSelectId).val(requirements);
+        $(this.options.tagsSelectId).val(tags);
 
         // Refresh the list of routes
-        $('#dungeonroute_filter').trigger('click');
+        $(this.options.filterButtonId).trigger('click');
     }
 
     /**

resources/assets/js/custom/inline/dungeonroute/tabletags.js

@@ -176,8 +176,8 @@ class DungeonRouteTableTagsHandler {
 
         // New tags text field
         let sourceTags = {};
-        for (let i = 0; i < this._dungeonrouteTable.options.autocompletetags.length; i++) {
-            let tagName = this._dungeonrouteTable.options.autocompletetags[i].name;
+        for (let i = 0; i < this._dungeonrouteTable.options.autoCompleteTags.length; i++) {
+            let tagName = this._dungeonrouteTable.options.autoCompleteTags[i].name;
             sourceTags[`${tagName}`] = i;
         }
 

resources/views/common/dungeonroute/attributes.blade.php

@@ -1,10 +1,16 @@
 <?php
-/** @var $dungeonroute \App\Models\DungeonRoute\DungeonRoute */
-/** @var $allRouteAttributes \Illuminate\Support\Collection<\App\Models\RouteAttribute> */
+/**
+ * @var DungeonRoute $dungeonroute
+ * @var Collection<RouteAttribute> $allRouteAttributes
+ */
+
+use App\Models\DungeonRoute\DungeonRoute;
+use App\Models\RouteAttribute;
+use Illuminate\Support\Collection;
 
 $showNoAttributes ??= false;
+$id               ??= 'attributes';
 ?>
-
 <div class="form-group">
     @if($showNoAttributes)
         <label for="attributes" data-toggle="tooltip"
@@ -19,24 +25,25 @@
     @endif
     <?php
     $allRouteAttributeCount = $allRouteAttributes->count();
-    /** @var \Illuminate\Support\Collection $routeAttributes */
+    /** @var Collection $routeAttributes */
     $routeAttributes = $allRouteAttributes->groupBy('category');
 
     if ($showNoAttributes) {
         $routeAttributes['meta'] = collect([
             // Create a dummy attribute which users can tick on/off to include routes with no attributes.
-            new \App\Models\RouteAttribute([
+            new RouteAttribute([
                 'id'   => -1,
                 'key'  => 'no_attributes',
                 'name' => 'routeattributes.no_attributes',
             ])
         ]);
     }
 
-    /** @var \Illuminate\Support\Collection $routeAttributes */
+    /** @var Collection $routeAttributes */
     $selectedIds ??= !isset($dungeonroute) ? [] : $dungeonroute->routeattributes->pluck('id')->toArray();
     ?>
-    <select multiple name="attributes[]" id="attributes" class="form-control selectpicker"
+    <select multiple name="{{ sprintf('%s[]', $id) }}"
+            id="{{$id}}" class="form-control selectpicker"
             size="{{ $allRouteAttributeCount + $routeAttributes->count() }}"
             data-selected-text-format="count > 1"
             data-count-selected-text="{{__('view_common.dungeonroute.attributes.attributes_selected')}}">