Jump to content

Optimized View for Report Listing


Guest AnotherAlex

Recommended Posts

Guest AnotherAlex

Suggestion Name: 

Optimized View for Report Listing

 

Suggestion Description:

Add some Features to the Report Listing for better usability

As u can see in the image i added following features:

  • Sortable table by Tablehead (in my case default is descending by Update at Timestamp) so last changed entries are at the top of the list
    => Function: click on table head to change the sorting, a small arrow shows which direction and sorting is active, the setting should be saved in session so when changing between views u get the same sorting when opening reports again
  • Status has colors (taken from website in green/red) to see faster/better Accepted and Declined Reports
  • Table has striped background to better see the different rows
  • Hover Effect on Table row when mouse is moving over the table (light grey row 19 Oct 23:15)

 

Edit 25th October:

I added a 2nd Image cos i added another Feature. When a report is claimed/autoclaimed and the Status is still New, the Claimed by Info gets marked yellow so you can see, that the report is in progress.

 

Any example images: 

image.png

 

image.thumb.png.114e2983a4bb5a760aa5078b3c991172.png

 

Why should it be added?:

Players have different priorities about Informations they want to see, this way its easier to get the informations that are relevant for players and they can adjust the informations to their liking.

 

How did i do this?

I used JavaScript and CSS to modify the Website for me (cos i obvious cant change the TruckersMP Website :P).

So im using a Browser Addon to add JS/CSS on Websites just for me. I wont link any addons here cos there are many different ones for all the different browsers.

The code im using is a small jquery Addon cos TMP already uses jquery for the table sorting, and im modifying the table with some additional JS code.

If someone is interested in it, u'll find the code below.

 

Disclaimer: When using such Addons / Codes u r modifying the website in your local browser after it was loaded. When the Website owner changes their website, the code maybe won't work anymore or u get other usability/technical problems. So using this means using it on your own risk!

 

For any Developers out there: it works :D it is absolutely not nice code... ;)

 

My Code:

The changes are only be used on this URL: https://truckersmp.com/reports

/*
	A simple, lightweight jQuery plugin for creating sortable tables.
	https://github.com/kylefox/jquery-tablesort
	Version 0.0.11
*/
(function($) {
	$.tablesort = function ($table, settings) {
		var self = this;
		this.$table = $table;
		this.$thead = this.$table.find('thead');
		this.settings = $.extend({}, $.tablesort.defaults, settings);
		this.$sortCells = this.$thead.length > 0 ? this.$thead.find('th:not(.no-sort)') : this.$table.find('th:not(.no-sort)');
		this.$sortCells.on('click.tablesort', function() {
			self.sort($(this));
		});
		this.index = null;
		this.$th = null;
		this.direction = null;
	};

	$.tablesort.prototype = {

		sort: function(th, direction) {
			var start = new Date(),
				self = this,
				table = this.$table,
				rowsContainer = table.find('tbody').length > 0 ? table.find('tbody') : table,
				rows = rowsContainer.find('tr').has('td, th'),
				cells = rows.find(':nth-child(' + (th.index() + 1) + ')').filter('td, th'),
				sortBy = th.data().sortBy,
				sortedMap = [];

			var unsortedValues = cells.map(function(idx, cell) {
				if (sortBy)
					return (typeof sortBy === 'function') ? sortBy($(th), $(cell), self) : sortBy;
				return ($(this).data().sortValue != null ? $(this).data().sortValue : $(this).text());
			});
			if (unsortedValues.length === 0) return;

			//click on a different column
			if (this.index !== th.index()) {
				this.direction = 'desc';
				this.index = th.index();
			}
			else if (direction !== 'asc' && direction !== 'desc')
				this.direction = this.direction === 'asc' ? 'desc' : 'asc';
			else
				this.direction = direction;

			direction = this.direction == 'asc' ? 1 : -1;

			self.$table.trigger('tablesort:start', [self]);
			self.log("Sorting by " + this.index + ' ' + this.direction);

			// Try to force a browser redraw
			self.$table.css("display");
			// Run sorting asynchronously on a timeout to force browser redraw after
			// `tablesort:start` callback. Also avoids locking up the browser too much.
			setTimeout(function() {
				self.$sortCells.removeClass(self.settings.asc + ' ' + self.settings.desc);
				for (var i = 0, length = unsortedValues.length; i < length; i++)
				{
					sortedMap.push({
						index: i,
						cell: cells[i],
						row: rows[i],
						value: unsortedValues[i]
					});
				}

				sortedMap.sort(function(a, b) {
					return self.settings.compare(a.value, b.value) * direction;
				});

				$.each(sortedMap, function(i, entry) {
					rowsContainer.append(entry.row);
				});

				th.addClass(self.settings[self.direction]);

				self.log('Sort finished in ' + ((new Date()).getTime() - start.getTime()) + 'ms');
				self.$table.trigger('tablesort:complete', [self]);
				//Try to force a browser redraw
				self.$table.css("display");
			}, unsortedValues.length > 2000 ? 200 : 10);
		},

		log: function(msg) {
			if(($.tablesort.DEBUG || this.settings.debug) && console && console.log) {
				console.log('[tablesort] ' + msg);
			}
		},

		destroy: function() {
			this.$sortCells.off('click.tablesort');
			this.$table.data('tablesort', null);
			return null;
		}

	};

	$.tablesort.DEBUG = false;

	$.tablesort.defaults = {
		debug: $.tablesort.DEBUG,
		asc: 'sorted ascending',
		desc: 'sorted descending',
		compare: function(a, b) {
			if (a > b) {
				return 1;
			} else if (a < b) {
				return -1;
			} else {
				return 0;
			}
		}
	};

	$.fn.tablesort = function(settings) {
		var table, sortable, previous;
		return this.each(function() {
			table = $(this);
			previous = table.data('tablesort');
			if(previous) {
				previous.destroy();
			}
			table.data('tablesort', new $.tablesort(table, settings));
		});
	};

})(window.Zepto || window.jQuery);

/*
   TruckersMP Report View Optimization by AnotherAlex
*/

//$('table').tablesort();
//$.tablesort.DEBUG = true;
$.tablesort.defaults = {
    debug: true,
    asc: 'sorted ascending',
    desc: 'sorted descending',
    compare: function (a, b) {
        if (a > b) {
            return 1;
        } else if (a < b) {
            return -1;
        } else {
             return 0;
        }
    }
};
  $(document).ready(function() {
    if (/https:\/\/truckersmp.com\/reports/.test(window.location.href)) {
      $('table').tablesort().data('tablesort').sort($('th:nth-child(8)'));
    }
    var sheet = document.createElement('style');
    sheet.innerHTML = ".table>tbody>tr:nth-child(odd)>td{background-color:rgba(255,255,255,.025)!important;}"+
    ".table>tbody>tr:hover td{background-color:rgba(255,255,255,.15)!important;}"+
    "th.sorted.ascending:after {content: '  \\21D1';}th.sorted.descending:after {	content: ' \\21D3';}"+
    ";"
    document.head.appendChild(sheet);
    $('table tr').each(function(){
    $(this).find('td:nth-child(7)').each(function(){
        switch($(this)[0].innerText) {
            case 'Accepted':
                $(this)[0].style.cssText = "background-color:#72c02c !important;color:rgba(0,0,0,.5)!important;font-weight:bold;";
                break;
            case 'New':
                break;
            default:
                $(this)[0].style.cssText = "background-color:#e74c3c !important;color:rgba(0,0,0,.5);font-weight:bold;";
        }
    })
})
});
  

 

Link to post
Share on other sites
×
×
  • Create New...