Read the statement by Michael Teeuw here.
read csv-data and put it in an array
-
new getDom(), without header or footer
getDom: function() { var wrapper = this.createEl("div",null,null,null); if(Object.keys(this.active_birthdays).length>0){ // create your table and header here // create TBODY section with day names var tBody = this.createEl("tBody", "birthday-tbody", "tbody", wrapper ); 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",null, tBody); var bodyTDimage = this.createEl("td","birthday-td-image", null, bodyTR ); bodyTDimage.appendChild(document.createTextNode(birthday)); var bodyTD = this.createEl("td", "birthday-td-body", null, bodyTR ); bodyTD.appendChild(document.createTextNode(person.name)); var ageTD = this.createEl("td","birthday-td-age", null, bodyTR ); ageTD.appendChild(document.createTextNode(person.age)); } } } // create your table footer here // pass the created content back to MM to add to DOM. return wrapper; }
-
the classes are not addressed :
… without header and footer.
why the classes are null ? -
@Perlchamp sorry, typo
className with upper casecreateEl : 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 },
-
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 … -
@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)
workscells 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; }
-
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 :-( -
@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 -
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 -
@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; }
-
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; },