• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

read csv-data and put it in an array

Scheduled Pinned Locked Moved Utilities
313 Posts 3 Posters 407.1k Views 4 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    Perlchamp
    last edited by May 3, 2020, 6:35 PM

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

    1 Reply Last reply Reply Quote 0
    • P Offline
      Perlchamp
      last edited by May 3, 2020, 7:23 PM

      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…

      S 1 Reply Last reply May 3, 2020, 7:53 PM Reply Quote 0
      • S Away
        sdetweil @Perlchamp
        last edited by sdetweil May 3, 2020, 7:57 PM May 3, 2020, 7:53 PM

        @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 
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • P Offline
          Perlchamp
          last edited by Perlchamp May 3, 2020, 8:05 PM May 3, 2020, 8:02 PM

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

          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;
          
              },
          
          S 1 Reply Last reply May 3, 2020, 8:06 PM Reply Quote 0
          • S Away
            sdetweil @Perlchamp
            last edited by May 3, 2020, 8:06 PM

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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • P Offline
              Perlchamp
              last edited by May 3, 2020, 8:07 PM

              i have the span ! look in my code !

              S 1 Reply Last reply May 3, 2020, 8:17 PM Reply Quote 0
              • S Away
                sdetweil @Perlchamp
                last edited by May 3, 2020, 8:17 PM

                @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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • P Offline
                  Perlchamp
                  last edited by May 3, 2020, 8:39 PM

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

                  S 1 Reply Last reply May 3, 2020, 8:43 PM Reply Quote 0
                  • S Away
                    sdetweil @Perlchamp
                    last edited by sdetweil May 3, 2020, 8:43 PM May 3, 2020, 8:43 PM

                    @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…

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • P Offline
                      Perlchamp
                      last edited by May 3, 2020, 8:52 PM

                      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.

                      S 1 Reply Last reply May 3, 2020, 8:54 PM Reply Quote 0
                      • 1
                      • 2
                      • 26
                      • 27
                      • 28
                      • 29
                      • 30
                      • 31
                      • 32
                      • 28 / 32
                      28 / 32
                      • First post
                        279/313
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy