Implement row Popup View when clicking on the brand/model column

src/www/static/css/toh.css

@@ -88,4 +88,34 @@
 	left: -2px;
 	z-index: 1000;
 }
-
+/* Cell Popup Details ------------- */  
+.tabulator-popup-container{
+	border-color: #ccc ;
+	padding: 0;
+	width: auto !important;
+	height: auto !important;
+	max-width: 500px !important;
+}
+.toh-popup-details-table{
+	width: 100%;
+	border-spacing : 0;
+	border-collapse : collapse;
+}
+.toh-popup-details-table TD{
+	padding: 1px 5px;
+	font-size: 12px;
+	border-bottom: 2px solid #fff;
+}
+.toh-popup-details-table .toh-popup-group-tr TD{
+	color: #999;
+}
+.toh-popup-details-table .toh-popup-key{
+	vertical-align: top;
+	font-weight: bold;
+	background-color: #f0f0f0;
+	text-align: right;
+	text-wrap: nowrap;
+}
+.toh-popup-details-table .toh-popup-value{
+	word-break: break-all;
+}

src/www/static/js/toh_conf.js

@@ -31,13 +31,41 @@ let tabulatorOptions={
 				{column:"brand", dir:"asc"}, 	//sort by this first
 				{column:"model", dir:"desc"}, //then sort by this second
 			],
-
 };
 
 let prefs={
 	def_view: 'normal'
 };
 
+// Cell Model Popup Formatter ############################################################################################
+var cellModelPopupFormatter = function(e, cell, onRendered){
+	var data 	= cell.getData();
+	var col={};
+	var value='';
+	var done=false;
+	var contents = "<table class='toh-popup-details-table'>";
+
+	$.each(colViewGroups,function(key,obj){
+		$.each(obj.fields,function(f,field){
+			col		= getMyColumnDefinition(field);
+			value	=data[field];
+			if(value == null || value == '-' || value == ''){
+				//value='';
+				return true; // continue
+			}
+			if(!done){
+				contents +='<tr class="toh-popup-group-tr"><td colspan=2>'+obj.name+'</td></tr>';
+				done=true;
+			}
+			contents +='<tr><td class="toh-popup-key">'+col.f_title+'</td><td class="toh-popup-value">'+formatLinkToHtml(value)+'</td></tr>';
+		});
+		done=false;
+	});
+
+	contents += "</table>";
+	return contents;
+};
+
 // Columns Formatters ###############################################################################################################
 
 function FormatterLink(cell, formatterParams, onRendered) {
@@ -153,15 +181,15 @@ function FormatterYesNo(cell, formatterParams, onRendered) {
 // Columns Styles ###############################################################################################################
 
 let columnStyles={
-	brand: {frozen:true, hozAlign:"left"},
-	model: {frozen:true, hozAlign:"left"},
+	brand: 								{title:"Brand",	frozen:true,		clickPopup: cellModelPopupFormatter, hozAlign:"left"},
+	model: 								{title:"Model",	frozen:true,		clickPopup: cellModelPopupFormatter, hozAlign:"left"},
 
 	audioports:							{title:"Audio",				headerTooltip:'Audio Ports',			sorter: 'array', width:80, hozAlign:"left" },
 	availability:						{title:"Availability",		headerTooltip:'Availability',			width:110, hozAlign:"right" },
 	bluetooth:							{title:"BT",				headerTooltip:'Bluetooth version',		width:40, hozAlign:"left" },
 	bootloader:							{title:"Boot",				headerTooltip:'BootLoader',				width:60, hozAlign:"left" },
 	buttoncount:						{title:"Butt.",				headerTooltip:'Button count',			width:40 },
-	cpu:								{																	formatter: FormatterCleanWords, width:120, hozAlign:"left" },
+	cpu:								{title:"CPU",																	formatter: FormatterCleanWords, width:120, hozAlign:"left" },
 	comments:							{title:"Comments",			headerTooltip:'Comments',				width:200, hozAlign:"left" },
 	commentsavports:					{title:"AV Comments",		headerTooltip:'AV ports Comments',		width:60, hozAlign:"left" },
 	commentinstallation:				{title:"Inst.Comments",		headerTooltip:'Installation Comments',	width:60 , hozAlign:"left"},
@@ -213,6 +241,7 @@ let columnStyles={
 	supportedsincecommit:				{title:"S.Commit",			headerTooltip:'Supported Since Commit',	formatter: FormatterLinkCommit, width:70, hozAlign:"left", tooltip:false },
 	supportedsincerel:					{title:"S.Release",			headerTooltip:'Supported Since Release', width:60 },
 	switch:								{title:"Switch",			headerTooltip:'Switch',					width:120, hozAlign:"left" },
+	target:								{title:"Target",			headerTooltip:'Target',					width:60, hozAlign:"left" },
 	unsupported_functions:				{title:"Unsupported",		headerTooltip:'Unsupported Functions', 	width:85, hozAlign:"left" },
 	usbports:							{title:"USB",				headerTooltip:'USB Ports', 				width:60, hozAlign:"left" },
 	version:							{title:"Version",			headerTooltip:'Hardware Version', 		width:55, hozAlign:"left" },
@@ -229,13 +258,7 @@ let columnStyles={
 	wikideviurl:						{title:"Wiki",				headerTooltip:'Wiki Page',				formatter: FormatterLink, formatterParams:{ label:'Wiki'}, width:40 },
 };
 
-// let columnOrder=[
-// 	'brand',
-// 	'model',
-// 	'cpu',
-// 	'rammb',
-// 	'flashmb',
-// ];
+
 let columnOrder=[];
 
 
@@ -330,7 +353,6 @@ let colViewGroups={
 		]
 	},
 
-
 	software:{
 		name: 'Software',
 		fields:[
@@ -402,7 +424,6 @@ let colViews={
 		'availability',
 		'picture'
 		],
-
 	hardware:	[
 		...colViewGroups.base.fields,
 		...colViewGroups.hardware_main.fields,
@@ -428,5 +449,3 @@ let colViews={
 	],
 };
 
-
-

src/www/static/js/toh_main.js

@@ -1,8 +1,44 @@
 
 
+// Functions for Cell Model Popup Formatter ############################################################################################
+
+function getMyColumnDefinition(field){
+	let cols=columnStyles;
+	let col={};
+	if(typeof(cols[field]) != 'undefined' ){
+		col=cols[field];
+		if(typeof(col.headerTooltip) != 'undefined' && col.headerTooltip !==''){
+			col.f_title=col.headerTooltip;
+		}
+		else if(typeof(col.title) != 'undefined' && col.title !==''){
+			col.f_title=col.title;
+		}
+		else{
+			col.f_title=field;
+		}
+	}
+	else{
+		col.f_title=field;
+	}
+	return col;
+}
+
+function formatLinkToHtml(url, name='link', target_blank=true){
+	let pattern = /^http(s)?:\/\//;
+	let target='';
+	if(target_blank){
+		target='_blank';
+	}
+	if(pattern.test(url)){
+		return '<a href="'+url+'" target="'+target+'" title="'+url+'">'+name+'</a>';
+	}
+	return url;
+}
+
 // ############################################################################################################
 $(document).ready(function () {
 
+
 	// Get parameters
 	function getUrlParameter(name) {
 		name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
@@ -373,6 +409,7 @@ $(document).ready(function () {
 		e.stopPropagation();
 		$('#custom-content SMALL').toggle();
 	});
+
 });