• 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.9k 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 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
                • S Away
                  sdetweil @Perlchamp
                  last edited by May 3, 2020, 8:54 PM

                  @Perlchamp use the debugger, expand the elements tree, find the table and look at the classes assigned

                  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, 9:59 PM

                    hi sam,
                    if i do this:

                       var imageTD = this.createEl("td", null, "TD-IMAGE", bodyTR, bd);
                    

                    instead of this :

                    var imageTD = this.createEl("td", null, "TD-IMAGE" + (entrie < now)?"_DIMMED":'' , bodyTR, bd);
                    

                    css are addressed. maybe something has to change in the createEl function ?

                    S 2 Replies Last reply May 3, 2020, 10:00 PM Reply Quote 0
                    • S Away
                      sdetweil @Perlchamp
                      last edited by May 3, 2020, 10:00 PM

                      @Perlchamp let me look…

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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