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.
    • S Offline
      sdetweil
      last edited by

      great progress. smaller more manageable code…

      off to sleep

      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

        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
                        • 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