read csv-data and put it in an array

Perlchamp

i set the classes in uppercase, allthough in the css-file. but the classes are not adressed.
by the way. maybe there is a problem with TWO cells in a row, because the daynumbers are OVER the names. if you look at the picture i send before (not the last post), than you can see, that the daynumbers are in ONE row with the names …

sdetweil

@Perlchamp well, part of the problem is the ID of the cells is the same for each row… removing id and class (which I don’t have)
works

cells don’t NEED ids… but if u wanted, you would have to create a counter to append each loop to make the ids unique

new createEl which does text value too

	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

	},

and table header

	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
	},

getdom()

	// 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);

		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 TBODY section with day names
		    var tBody = this.createEl("tBody", "birthday-tbody", null, table );	

			for(var birthday of Object.keys(this.active_birthdays)){
				for(var person of this.active_birthdays[birthday]){
			
				    var bodyTR = this.createEl("tr", null,null, tBody);

					    var bodyTDimage = this.createEl("td",null, null, bodyTR , birthday );

					    var bodyTD = this.createEl("td", null, null, bodyTR , person.name);
					     
						var ageTD = this.createEl("td",null, null, bodyTR  ,person.age );

				}
			}
		}
// create your table footer here	

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

Perlchamp

ok, i’ve seen, the header function … uff, all is placed right (code).
i don’t see the day of birth. the first cell is still the problem :-(

sdetweil

@Perlchamp with my code I see
I removed class
date Name age
12.05 Sam 69
02.05 Frank 81
02.05 Sue 81
05.05 mary 65
10.05 eee EEEEE 51
16.05 fff FFFFF 8
16.05 ggg GGGGG 32
27.05 hhh HHHHH 18

Perlchamp

i have a calendar OVER the birthdaylist, so i DON#T need the month in the first cell. the FIRST cell has a calendar sheet as background-image, THOUGH i DON’T need the leading null of the day of birth. should be:
5 Sam 69
Mary 12
8 Frank 81
15 Sue 81
…
did you seen the images i did send ?
and, of course, people with the same day of birth without day of birth

sdetweil

@Perlchamp no images email or text
(cannot do fixed font here)

date	Name	age
12	Sam	69
2	Frank	81
        Sue	81
5	mary	65
10	eee EEEEE	51
16	fff FFFFF	8
        ggg GGGGG	32
27	hhh HHHHH	18

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 TBODY section with day names
		    var tBody = this.createEl("tBody", "birthday-tbody", null, table );	
		    var birthdays_seen= {}
			for(var birthday of Object.keys(this.active_birthdays)){
				for(var person of this.active_birthdays[birthday]){
			
				    var bodyTR = this.createEl("tr", null,null, tBody);
				    		var bd =""
					    	if(birthdays_seen[birthday] == undefined){
					    		bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0]
             				 	        birthdays_seen[birthday] = true
					    	}
					 	   var bodyTDimage = this.createEl("td",null, null, bodyTR , bd );

						

					    var bodyTD = this.createEl("td", null, null, bodyTR , person.name);
					     
						var ageTD = this.createEl("td",null, null, bodyTR  ,person.age );

				}
			}
		}
// create your table footer here	

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

Perlchamp

my code:

   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;
    },
    
    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;
    },

    getDom: function() {
	var wrapper = this.createEl("div",null,null,null);
	
	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();

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

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

		// create tableheader

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

		for(var birthday of Object.keys(this.active_birthdays)) {
		    for(var person of this.active_birthdays[birthday]) {
				
			var bodyTR = this.createEl('tr', "birthday-tr-body", "tr-body" , tBody);

			if (birthday.charAt(0) === "0") {
			    birthday = birthday.replace("0","");
			    birthday = birthday.substring(0,1);
			}

			var bodyTDimage = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, birthday.substring(0,2));
			var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
			var ageTD = this.createEl("td", "birthday-td-age", "TD-AGE", bodyTR  ,person.age );

		    }
		}
	    }

	    // Create TFOOT section -- currently used for debugging only

	    return wrapper;

	}
	this.loaded = true;
    },

sdetweil

@Perlchamp the short birthday

bd =(birthday.startsWith(“0”)? birthday.substring(1): birthday).split(‘.’)[0]

if the birthday starts with ‘0’ then get the rest skipping the 0

01.05 -> 1.05
then split the result on ‘.’
yields array of [ 1, 05]
and take the first element in the array [0] = 1
if it doesn’t start with 0,use the whole string, split and take the 1st element of array
10.05 = [10,05] = 10

Perlchamp

sorry, i’m still sorting my code …uff

Perlchamp

back again. WITHOUT a class reference (third element = null) i see the days.
WITH class-reference (“TD-IMAGE”) i see NO days.
the rest is working very good, thank you for that :-)

sdetweil

@Perlchamp what does TD-IMAGE class def look like?

Perlchamp

.birthdaylist .TD-IMAGE {
  width: 27px;
  font-size: 20px;
  color: #000000;
  background-repeat: no-repeat;
  background-position: top left;
  background-image: url("/modules/birthdaylist/images/kalenderblatt.png");
  font-weight: 400;
  line-height: 26px;
  vertical-align: top;
  text-align: center;
  margin: 0px;
  padding: 10px 0px 0px 0px;
}

sdetweil

@Perlchamp said in read csv-data and put it in an array:

.birthdaylist

there is no birthdaylist class being used (unless u changed the modulename again)

maybe

.TD-IMAGE {

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)
this is the homerun, touchdown and goal !

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 …