• 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 421.2k 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, 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 Offline
      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
      • S Offline
        sdetweil @Perlchamp
        last edited by sdetweil May 3, 2020, 10:20 PM May 3, 2020, 10:09 PM

        @Perlchamp

        warning one ( was missing, fixed
        SORRY… tested now… the + append didn’t work, had to force with concat()…

        Its the two values, now and entrie

        				let now = moment().format('DD.MM').valueOf();				 // this is string dd.mm
        				let entrie=now
        			    if(this.config.dimmEntries) {				
        					entrie = moment(birthday,'DD.MM').format.valueOf();     // this is a moment 
        

        so later when compared, it doesn;t work

        and comparing strings with < doesn’t really work…

        I would do

        let now=moment()
        let entrie = moment(birthday,‘DD.MM’)
        then in the compare
        (entrie.isBefore(now))?..

        	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()		
        					let entrie=now
        				    if(this.config.dimmEntries) {				
        						entrie = moment(birthday,'DD.MM')
        					}
        					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".concat(entrie.isBefore(now)?"_DIMMED":'') , bodyTR, bd);		
        						var nameTD = this.createEl('td', null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'') , bodyTR, person.name);
        									 this.createEl("span", null, null, nameTD, " ");						// needs class for width
        						var spanTDo = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(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".concat(entrie.isBefore(now)?"_DIMMED":'') ,spanTDo, person.name);
        						// add a span with age
        						var spanTD = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(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;
        	},
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        S 1 Reply Last reply May 3, 2020, 10:21 PM Reply Quote 0
        • S Offline
          sdetweil @sdetweil
          last edited by May 3, 2020, 10:21 PM

          @Perlchamp see my update above

          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, 10:42 PM

            @sdetweil said in read csv-data and put it in an array:

            moment(birthday,‘DD.MM’)

            sorry, doesn’t work. blackscreen. if i change back (my post) css is addressed. i didn’t change the jet = part. i think, something’s wrong with the cerateEl function, but you know i’m not an expert.but to control. here is my code :

            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();
            			let entrie = moment(birthday,"DD.MM");
            			
            			if(this.config.dimmEntries) {				
            			    entrie = moment(birthday,'DD.MM');
            			}
            			
            			// 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".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, bd);
            			    var imageTD = this.createEl("td", null, "TD-IMAGE", bodyTR, bd);
            			    //var nameTD = this.createEl("td", null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, person.name);
            			    var nameTD = this.createEl("td", null, "TD-BODY", bodyTR, person.name);
            			    this.createEl("span", null, "TD-AGE", nameTD, " ");						
            			    
            			    // needs class for width
            			    //var spanTDo = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', nameTD, person.age);
            			    var spanTDo = this.createEl("span", null, "TD-AGE", 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".concat(entrie.isBefore(now)?"_DIMMED":'',spanTDo, person.name);
            			    var nameTD = this.createEl("span", null, "TD-BODY", spanTDo, person.name);
            			    // add a span with age
            			    //var spanTD = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', spanTDo, person.age);
            			    var spanTD = this.createEl("span", null, "TD-AGE", 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;
            			
            		    }
            		}
            
            S 1 Reply Last reply May 3, 2020, 10:46 PM Reply Quote 0
            • S Offline
              sdetweil @Perlchamp
              last edited by sdetweil May 3, 2020, 10:49 PM May 3, 2020, 10:46 PM

              @Perlchamp ah well. both work here… your latest and mine produce the same results

              your output

              date	Name	age
              12	Sam 69
              2	Frank 81
              Sue81
              5	mary 65
              10	eee EEEEE 51
              16	fff FFFFF 8
              ggg GGGGG32
              27	hhh HHHHH 18
              

              my output

              date	Name	age
              12	Sam 69
              2	Frank 81
              Sue81
              5	mary 65
              10	eee EEEEE 51
              16	fff FFFFF 8
              ggg GGGGG32
              27	hhh HHHHH 18
              

              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, 11:12 PM May 3, 2020, 11:08 PM

                what does that mean? but you don’t use css, do you ? YES, but didn’t you see, that i have annotate the

                .concat(entrie.isBefore(now)?"_DIMMED":''
                

                lines in the code, i posted ? without entrie.isBefore … css is addressed, with it’s not addressed

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

                  @Perlchamp I stepped thru and watched it change from with dimmed and without

                  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 4, 2020, 12:10 AM

                    sorry for nerving, sam. i would like to understand the code. where is the part in which the name and age of people with the same birthday are collected/combined ?

                    S 1 Reply Last reply May 4, 2020, 12:45 AM Reply Quote 0
                    • S Offline
                      sdetweil @Perlchamp
                      last edited by May 4, 2020, 12:45 AM

                      @Perlchamp I’ll use you last code post

                      // loop thru all the brithdays found in the file that match this month, one at a time
                      for(var birthday of Object.keys(this.active_birthdays)) {
                      
                                          // each row is a person
                      		    for(var person of this.active_birthdays[birthday]) {
                      		    				
                      			// create looped row section
                                              // create a row
                      			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY", tBody, null);
                      
                                              // get timne/date of now
                      			let now = moment();
                                              // we need to change the style to dimmed,. if the BD is in the past
                      
                      			//let entrie = moment(birthday,"DD.MM");                      // < --- problem
                                              // assume the birthday is NOT in the past
                      			let entrie = now                                    
                                              // if the user requested dimming
                      			if(this.config.dimmEntries) {		
                                                  // get the brithdate in this year 01.05.2020
                                                  // note the value WAS the SAME as 'now'
                      			    entrie = moment(birthday,'DD.MM');
                      			}
                                              // set the default value for the birthdate display			
                      			var bd = "";  // assume we don't need to display it
                         			// if we have not seen this birthdate in the loop so far, its the fiist time
                      			if(birthdays_seen[birthday] == undefined) {
                                                  // so we need the number of the day of the month
                                                 // if it starts with 0, get from char 1 on sop 01.05 becomes 1.05, then 
                                                 // use split to get the parts [ 1, 05]
                                                 // if not '0', use all bd numbers 12.05, and split to [12,05]
                                                 // and take the 1st element of array 
                                                 // 1, or 12, for the two examples
                      			    bd = (birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                      
                                                  // now we need a row of data for the the person
                                                  // class name is either TD-IMAGE or TD-IMAGE_DIMMED
                                                  // use the two moments to compare (the fix for the entrie= now above will fix this) 
                                                  // if the persons ds is before now, and we want dimmed, then add the tail of the class name on
                                                  // else use this the name (concat('') - add nothing))
                                                  // this  entrie.isBefore(now)?'_DIMMED':'' means 
                                                  // the result of the expression is entrie before now  
                                                  // if true return '_DIMMED'
                                                  // if false return ''
                                                  // "TD-IMAGE".concat() this means add onto the string "TD-IMAGE" whatever is inside the concat() parens, either '_DIMMED' or ''
                                                  // so the class will be TD-IMAGE (for people with bithrdays ON or AFTER today)
                                                  // or TD-IMAGE_DIMMED for people with birthdays BEFORE today
                      			    //var imageTD = this.createEl('td', null, "TD-IMAGE".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, bd);
                      			    var imageTD = this.createEl("td", null, "TD-IMAGE", bodyTR, bd);
                      			    //var nameTD = this.createEl("td", null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, person.name);
                      			    var nameTDo = this.createEl("td", null, "TD-BODY", bodyTR, person.name);
                      			    this.createEl("span", null, "TD-AGE", nameTD, " ");						
                      			    
                      			    // needs class for width
                      			    //var spanTD = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', nameTDo, person.age);
                      			    var spanTD = this.createEl("span", null, "TD-AGE", nameTD0, person.age);
                      			}
                      			else{
                                                   // we HAVE seen the birthday before, the row is already created, so we need to add to the END THAT ROW, ie after the span of the previous person
                      			    // add a break (to the end of the TD for the name (has span already for age)
                      			    this.createEl("br", null , null , nameTDo, null);
                      			    // add a span with name
                      			    //var nameTD = this.createEl("span", null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'',nameTDo, person.name);
                                                  //  add a span for the persons name (after the line break
                      			    var nameTD = this.createEl("span", null, "TD-BODY", nameTDo, person.name);
                      			    // add a span with for spacing
                      			    //var spanTD = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', nameTDo, person.age);
                                                  // add a span with age
                      			    var spanTD = this.createEl("span", null, "TD-AGE", nameTDo, person.age);
                                                  // if we have another person with the same BD, new stuff will be added after this span
                      			}					
                      			
                      			var spacerTR = this.createEl("tr", null, null , tBody, null);
                      			var spacerTD = this.createEl("td", null, "SPACER", spacerTR, " ");
                      			spacerTD.colSpan = "2";
                                              // regardless of 1st or second, we have seen this birthdaty
                      			birthdays_seen[birthday] = true;
                      			
                      		    }
                      		}
                      

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      S 1 Reply Last reply May 4, 2020, 12:46 AM Reply Quote 0
                      • 1
                      • 2
                      • 7
                      • 8
                      • 9
                      • 10
                      • 11
                      • 31
                      • 32
                      • 9 / 32
                      9 / 32
                      • First post
                        290/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