Read the statement by Michael Teeuw here.
read csv-data and put it in an array
-
ok, doesn’t matter. enjoy your meal with your family.
-
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…
-
@Perlchamp ok, not sure how u want to present the two people with the same date
simplified codegetDom: 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
-
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; },
-
@Perlchamp i missed the span instead of td for age… working on the join
-
i have the span ! look in my code !
-
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 -
first i have to change my classes ? instead of TD-IMAGE TD-IMAGE_, ?
-
@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…
-
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.