read csv-data and put it in an array

[Perlchamp]

IT WORKS !!, Sam, it WORKS !
had a wrong image-name. that is UNPARDONABLE !!
now, this background-image will shown, if two people tzhe same day… problems, problems, problems …
SOLUTION: these people (same day) should be in ONE cell, separated by < /br > therefor i don’t need a third cell ;-)

@Perlchamp no images email or text => i would like sending emails (with attached images, too)

[sdetweil]

@Perlchamp oh by the way TD-IMAGE color is black, on black background!
my email was in the chat message

[Perlchamp]

yes black on black, why not ? because of the mirrors lucidity … better safe than sorry ;-)

[sdetweil]

great progress. smaller more manageable code…

off to sleep

[Perlchamp]

bloody nice dreams, sam

[Perlchamp]

hi sam, for me it’s a milestone :

    // type: td, id: id of element, className: classname of element
    // parent: parent of element, value: value
    createEl : function (type, id, className, parent, value) {
	var el= document.createElement(type);
	if(id)
	    el.id = id;
	if(className)
	    el.className = className;
	if(parent)
	    parent.appendChild(el);
	if(value)
	    el.appendChild(document.createTextNode(value));
	return el;
    },
    
    // creates a tableheader with columnnaes
    createTableHeader: function(parent, className, columnlabels) {
	var header = document.createElement("tr");
	for(columnName of columnlabels) {
	    this.createEl("th", null, className, header, columnName);
	}
	parent.appendChild(header);
	return header;
    },

    // creates a tablefooter with columns
    createTableFooter: function(parent, className, column) {
	var footer = document.createElement("tr");
	for(colContent of column) {
	    this.createEl("td", null, className, footer, colContent);
	}
	parent.appendChild(footer);
	return footer;
    },

    // this is the major worker of the module, it provides the 
    // 	   displayable content for this module
    getDom: function() {
	var wrapper = this.createEl("div",null,null,null,null);
	
	// tell MM to call and get our content
	Log.log(JSON.stringify(this.active_birthdays));

	if ((moment() > this.midnight) || (!this.loaded)) {
	    var month = moment().month();
	    var year = moment().year();
	    var monthName = moment().format("MMMM");
	    var monthLength = moment().daysInMonth();
	    var now_day_month = moment().format("DD.MM");

	    if(Object.keys(this.active_birthdays).length > 0) {

		// create table
		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper,null)

		// create tableheader here
		var table_header = this.createTableHeader(table, null, [" "," "]);

		// create TBODY section with day names
		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table, null);

		var day_month_now = moment().format("DD.MM");
		var birthdays_seen= {}
		var spacer = " ";
		for(var birthday of Object.keys(this.active_birthdays)) {
		    for(var person of this.active_birthdays[birthday]) {
		    				
			// create looped row section
			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY" , tBody, null);

			// delete leading 0 and month
			var bd = "";
			if(birthdays_seen[birthday] == undefined) {
			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
             		    birthdays_seen[birthday] = true;
			}
			let date1 = moment(birthday,'DD.MM').valueOf();
			let date2 = moment(now_day_month,'DD.MM').valueOf();
			if (date1 < date2) {
			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
			}
			else {
			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
			}
			var spacerTR = this.createEl('tr', null, null , tBody, null);
			var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
			spacerTD.colSpan = "2";
		    }
		}

		// Create TFOOT section -- currently used for debugging only
		if (this.config.debugging) {
		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
		    //footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
		}
		else {
		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
		}

	    }

	    // pass the created content back to MM to add to DOM.
	    return wrapper;

	}
	// Dom is loaded
	this.loaded = true;

    },

css-file via email

[Perlchamp]

the next working step:

for(var birthday of Object.keys(this.active_birthdays)) {
		    for(var person of this.active_birthdays[birthday]) {
		    				
			// create looped row section
			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY" , tBody, null);

			// delete leading 0 and month
			var bd = "";
			if(birthdays_seen[birthday] == undefined) {
			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
             		    birthdays_seen[birthday] = true;
			}
			let entrie = moment(birthday,'DD.MM').valueOf();
			let now = moment(now_day_month,'DD.MM').valueOf();
			if (entrie < now) {
			    if(this.config.dimmEntries) {
				var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
				var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
				var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
				var spacerTR = this.createEl('tr', null, null , tBody, null);
				var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
				spacerTD.colSpan = "2";
			    }
			    else {
			    }
			}
			else {
			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
			    var spacerTR = this.createEl('tr', null, null , tBody, null);
			    var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
			    spacerTD.colSpan = "2";
			}
		    }
		}

now should be the last step:
people who are their birthday at the same day in one cell separated by < /br > … that’s (maybe) too difficult for me, but just figuring out …

[sdetweil]

@Perlchamp ok, busy at the moment… about an hour 13:30 my time

[Perlchamp]

ok, doesn’t matter. enjoy your meal with your family.

[Perlchamp]

i’m a step foward (did write two functions for smarter code) :

   // creates a tablefooter with columns
    createTableFooter: function(parent, className, column) {
	var footer = document.createElement("tr");
	for(colContent of column) {
	    this.createEl("td", null, className, footer, colContent);
	}
	parent.appendChild(footer);
	return footer;
    },
    
    // compares two dates, requires moment.js :
    // output "1"  : date1 > date2
    // output "-1" : date1 < date2
    // output "0"  : fault
    compareDate: function(now, entrie, format) {
	let date_1 = moment(now,format).valueOf();
	let date_2 = moment(entrie,format).valueOf();
	if (date_1 > date_2) {
	    return 1;
	}
	else if (date_1 < date_2) {
	    return -1;
	}
	else {
	    return 0;
	}
    }, 

the lastone is used here:

for(var birthday of Object.keys(this.active_birthdays)) {
		    for(var person of this.active_birthdays[birthday]) {
		    				
			// create looped row section
			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY" , tBody, null);

			// delete leading 0 and month
			var bd = "";
			if(birthdays_seen[birthday] == undefined) {
			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
             		    birthdays_seen[birthday] = true;
			}

			if (this.compareDate(now,birthday,"DD.MM") === 1) {
			    if(this.config.dimmEntries) {
				var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
				var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
				var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
				var spacerTR = this.createEl('tr', null, null , tBody, null);
				var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
				spacerTD.colSpan = "2";
			    }
			    else {
			    }
			}
			else {
			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
			    var spacerTR = this.createEl('tr', null, null , tBody, null);
			    var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
			    spacerTD.colSpan = "2";
			}
		    }
		}

it works fine for me :-). for the last step (people with the same birthday in one cell, separeted via < /br >) i have momently no ideas…

[sdetweil]

@Perlchamp ok, not sure how u want to present the two people with the same date
simplified code

	getDom: function(){
		var wrapper = this.createEl("div",null,null,null);

		if(Object.keys(this.active_birthdays).length>0){

			// create your table  here
			var table = this.createEl("table", "birthday-table", null, wrapper );

			// table header here, array of column names
			var table_header=this.createTableHeader(table,null, ["date","Name","age"])		

			// create looped row section
			var tBody = this.createEl('tbody', "birthday-t-body", "tbody", table, null);		

			var birthdays_seen= {}
			for(var birthday of Object.keys(this.active_birthdays)) {
			    for(var person of this.active_birthdays[birthday]) {			    				

					// create looped row section
					var bodyTR = this.createEl('tr', null, "TR-BODY" ,tBody, null);	

					let now = moment().format('DD.MM').valueOf();				
					let entrie=now
				    if(this.config.dimmEntries) {				
						entrie = moment(birthday,'DD.MM').valueOf();
					}
					var bd = "";					
			    	if(birthdays_seen[birthday]==undefined){
						bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
						var imageTD = this.createEl('td', null, "TD-IMAGE_"+(entrie < now)?"DIMMED":'' , bodyTR, bd);						
					}	
					else{
						this.createEl('span', null , null , bodyTR,bd);
					}					

					var nameTD = this.createEl('td', null, "TD-BODY_"+(entrie < now)?"DIMMED":'' , bodyTR, person.name);
					var spanTD = this.createEl("span", null, "TD-AGE_"+(entrie < now)?"DIMMED":'', nameTD, person.age);
					var spacerTR = this.createEl('tr', null, null , tBody, null);
					var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, "----");
					spacerTD.colSpan = "2";
					birthdays_seen[birthday] = true;

				}
		    }
		}
		return wrapper;
	},

maybe? but why?

we have currently two rows, 3 columns

   day       name   age
   empty  name   age

you want ?? two columns?

   row (2 cols)
     day      name + age < br>
                 name + age 
   row (3 cols)
     dayn   name   age 

[Perlchamp]

hi sam,
right row 2 cols day name + age < br > … < br > name+age < br >
the image below displays that:

look at my code, it’s all implemated but not the users in one cell :

    getDom: function() {
	var wrapper = this.createEl("div",null,null,null,null);
	
	// tell MM to call and get our content
	Log.log(JSON.stringify(this.active_birthdays));

	if ((moment() > this.midnight) || (!this.loaded)) {
	    var month = moment().month();
	    var year = moment().year();
	    var monthName = moment().format("MMMM");
	    var monthLength = moment().daysInMonth();
	    var now = moment();

	    if(Object.keys(this.active_birthdays).length > 0) {

		// create table
		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper,null)

		// create tableheader here
		var table_header = this.createTableHeader(table, null, [" "," "]);

		// create TBODY section with day names
		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table, null);

		var day_month_now = moment().format("DD.MM");
		var birthdays_seen= {}
		var spacer = " ";
		for(var birthday of Object.keys(this.active_birthdays)) {
		    for(var person of this.active_birthdays[birthday]) {
		    				
			// create looped row section
			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY" , tBody, null);

			// delete leading 0 and month
			var bd = "";
			if(birthdays_seen[birthday] == undefined) {
			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
             		    birthdays_seen[birthday] = true;
			}

			if (this.compareDate(now,birthday,"DD.MM") === 1) {
			    if(this.config.dimmEntries) {
				var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
				var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
				var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
				var spacerTR = this.createEl('tr', null, null , tBody, null);
				var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
				spacerTD.colSpan = "2";
			    }
			    else {
			    }
			}
			else {
			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
			    var spacerTR = this.createEl('tr', null, null , tBody, null);
			    var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
			    spacerTD.colSpan = "2";
			}
		    }
		}

		// Create TFOOT section -- currently used for debugging only
		if (this.config.debugging) {
		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
		    //footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
		}
		else {
		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
		}

	    }

	    // pass the created content back to MM to add to DOM.
	    return wrapper;

	}
	// Dom is loaded
	this.loaded = true;

    },

[sdetweil]

@Perlchamp i missed the span instead of td for age… working on the join

[Perlchamp]

i have the span ! look in my code !

[sdetweil]

@Perlchamp

updated

	getDom: function(){
		var wrapper = this.createEl("div",null,null,null);

		if(Object.keys(this.active_birthdays).length>0){

			// create your table  here
			var table = this.createEl("table", "birthday-table", null, wrapper );

			// table header here, array of column names
			var table_header=this.createTableHeader(table,null, ["date","Name","age"])		

			// create looped row section
			var tBody = this.createEl('tbody', "birthday-t-body", "tbody", table, null);		

			var birthdays_seen= {}
			for(var birthday of Object.keys(this.active_birthdays)) {
			    for(var person of this.active_birthdays[birthday]) {			    				

					// create looped row section
					var bodyTR = this.createEl('tr', null, "TR-BODY" ,tBody, null);	

					let now = moment().format('DD.MM').valueOf();				
					let entrie=now
				    if(this.config.dimmEntries) {				
						entrie = moment(birthday,'DD.MM').valueOf();
					}
					var bd = "";					
			    	if(birthdays_seen[birthday]==undefined){
						bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
						var imageTD = this.createEl('td', null, "TD-IMAGE_"+(entrie < now)?"DIMMED":'' , bodyTR, bd);		
						var nameTD = this.createEl('td', null, "TD-BODY_"+(entrie < now)?"DIMMED":'' , bodyTR, person.name);
									 this.createEl("span", null, null, nameTD, " ");						// needs class for width
						var spanTDo = this.createEl("span", null, "TD-AGE_"+(entrie < now)?"DIMMED":'', nameTD, person.age);
					}	
					else{
						// add a break
						this.createEl('br', null , null , spanTDo,null);
						// add a span with name
						var nameTD = this.createEl('span', null, "TD-BODY_"+(entrie < now)?"DIMMED":'' ,spanTDo, person.name);
						// add a span with age
						var spanTD = this.createEl("span", null, "TD-AGE_"+(entrie < now)?"DIMMED":'', spanTDo, person.age);						
					}					

					var spacerTR = this.createEl('tr', null, null , tBody, null);
					var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, " ");
					spacerTD.colSpan = "2";
					birthdays_seen[birthday] = true;

				}
		    }
		}
		return wrapper;
	},

if we see 1st time br, do date, name/span/age
if second time add line break to old name list
add span for name, span span for separator (need class for width), span for age

[Perlchamp]

first i have to change my classes ? instead of TD-IMAGE TD-IMAGE_, ?

[sdetweil]

@Perlchamp the classname is a string

and the front part is the same

so , you had duplicated code, just to change the classname…

I just used your if(entrie) to decide it the name needed the’DIMMED" part added
move the _ to the “DIMMED”, like this “_DIMMED”

then they will be TD-IMAGE and TD-IMAGE_DIMMED , just like you had it…

its the same row data and parentage, just a class change… (nice work having common names, so you could do this), got rid of that big else…

[Perlchamp]

css i don’t get to work. here’s my getDom:

getDom: function() {
	var wrapper = this.createEl("div",null,null,null,null);
	
	// tell MM to call and get our content
	Log.log(JSON.stringify(this.active_birthdays));

	if ((moment() > this.midnight) || (!this.loaded)) {
	    var month = moment().month();
	    var year = moment().year();
	    var monthName = moment().format("MMMM");
	    var monthLength = moment().daysInMonth();
	    var now = moment();

	    if(Object.keys(this.active_birthdays).length > 0) {
	    
		// create table
		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper,null)

		// create tableheader here, array of column names
		var table_header = this.createTableHeader(table, null, [" "," "]);
		
		// create TBODY section with day names
		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table, null);

		var birthdays_seen= {}
		var spacer = " ";
		for(var birthday of Object.keys(this.active_birthdays)) {
		    for(var person of this.active_birthdays[birthday]) {

		    				
			// create looped row section
			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY" , tBody, null);

			let now = moment().format('DD.MM').valueOf();				
			let entrie=now;
			if(this.config.dimmEntries) {				
			    entrie = moment(birthday,'DD.MM').valueOf();
			}
			
			// delete leading 0 and month
			var bd = "";
			
			if(birthdays_seen[birthday] == undefined) {
			    bd = (birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];

			    var imageTD = this.createEl('td', null, "TD-IMAGE" + (entrie < now)?"_DIMMED":'' , bodyTR, bd);		
			    var nameTD = this.createEl('td', null, "TD-BODY" + (entrie < now)?"_DIMMED":'' , bodyTR, person.name);
			    this.createEl("span", null, null, nameTD, " ");						
			    
			    // needs class for width
			    var spanTDo = this.createEl("span", null, "TD-AGE" + (entrie < now)?"_DIMMED":'', nameTD, person.age);
			}
			else{
			    // add a break
			    this.createEl('br', null , null , spanTDo,null);
			    // add a span with name
			    var nameTD = this.createEl('span', null, "TD-BODY" + (entrie < now)?"_DIMMED":'' ,spanTDo, person.name);
			    // add a span with age
			    var spanTD = this.createEl("span", null, "TD-AGE" + (entrie < now)?"_DIMMED":'', spanTDo, person.age);						
			}					
			
			var spacerTR = this.createEl('tr', null, null , tBody, null);
			var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, " ");
			spacerTD.colSpan = "2";
			birthdays_seen[birthday] = true;
			
		    }
		}

		// Create TFOOT section -- currently used for debugging only
		if (this.config.debugging) {
		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
		    //footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
		}
		else {
		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
		}

	    }

	    // pass the created content back to MM to add to DOM.
	    return wrapper;

	}
	// Dom is loaded
	this.loaded = true;

    },

there should be an error i don’t see.

[sdetweil]

@Perlchamp use the debugger, expand the elements tree, find the table and look at the classes assigned

[Perlchamp]

hi sam,
if i do this:

   var imageTD = this.createEl("td", null, "TD-IMAGE", bodyTR, bd);

instead of this :

var imageTD = this.createEl("td", null, "TD-IMAGE" + (entrie < now)?"_DIMMED":'' , bodyTR, bd);

css are addressed. maybe something has to change in the createEl function ?