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 439.7k 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.
    • PerlchampP Offline
      Perlchamp
      last edited by

      bloody nice dreams, sam

      1 Reply Last reply Reply Quote 0
      • PerlchampP Offline
        Perlchamp
        last edited by

        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

        1 Reply Last reply Reply Quote 0
        • PerlchampP Offline
          Perlchamp
          last edited by 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 …

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @Perlchamp
            last edited by

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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • PerlchampP Offline
              Perlchamp
              last edited by

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

              1 Reply Last reply Reply Quote 0
              • PerlchampP Offline
                Perlchamp
                last edited by

                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 Reply Quote 0
                • S Offline
                  sdetweil @Perlchamp
                  last edited by 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 
                  

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • PerlchampP Offline
                    Perlchamp
                    last edited by Perlchamp

                    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 Reply Quote 0
                    • S Offline
                      sdetweil @Perlchamp
                      last edited by

                      @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
                      • PerlchampP Offline
                        Perlchamp
                        last edited by

                        i have the span ! look in my code !

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 26
                        • 27
                        • 28
                        • 29
                        • 30
                        • 31
                        • 32
                        • 28 / 32
                        • First post
                          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