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

      @Perlchamp well, part of the problem is the ID of the cells is the same for each row… removing id and class (which I don’t have)
      works

      cells don’t NEED ids… but if u wanted, you would have to create a counter to append each loop to make the ids unique

      new createEl which does text value too

      	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
      
      	},
      

      and table header

      	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
      	},
      

      getdom()

      	// 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);
      
      		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 TBODY section with day names
      		    var tBody = this.createEl("tBody", "birthday-tbody", null, table );	
      
      			for(var birthday of Object.keys(this.active_birthdays)){
      				for(var person of this.active_birthdays[birthday]){
      			
      				    var bodyTR = this.createEl("tr", null,null, tBody);
      
      					    var bodyTDimage = this.createEl("td",null, null, bodyTR , birthday );
      
      					    var bodyTD = this.createEl("td", null, null, bodyTR , person.name);
      					     
      						var ageTD = this.createEl("td",null, null, bodyTR  ,person.age );
      
      				}
      			}
      		}
      // create your table footer here	
      
      		// pass the created content back to MM to add to DOM.
      		return wrapper;
      	}
      

      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, i’ve seen, the header function … uff, all is placed right (code).
        i don’t see the day of birth. the first cell is still the problem :-(

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

          @Perlchamp with my code I see
          I removed class
          date Name age
          12.05 Sam 69
          02.05 Frank 81
          02.05 Sue 81
          05.05 mary 65
          10.05 eee EEEEE 51
          16.05 fff FFFFF 8
          16.05 ggg GGGGG 32
          27.05 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
          • PerlchampP Offline
            Perlchamp
            last edited by Perlchamp

            i have a calendar OVER the birthdaylist, so i DON#T need the month in the first cell. the FIRST cell has a calendar sheet as background-image, THOUGH i DON’T need the leading null of the day of birth. should be:
            5 Sam 69
            Mary 12
            8 Frank 81
            15 Sue 81
            …
            did you seen the images i did send ?
            and, of course, people with the same day of birth without day of birth

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

              @Perlchamp no images email or text
              (cannot do fixed font here)

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

              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 TBODY section with day names
              		    var tBody = this.createEl("tBody", "birthday-tbody", null, table );	
              		    var birthdays_seen= {}
              			for(var birthday of Object.keys(this.active_birthdays)){
              				for(var person of this.active_birthdays[birthday]){
              			
              				    var bodyTR = this.createEl("tr", null,null, tBody);
              				    		var bd =""
              					    	if(birthdays_seen[birthday] == undefined){
              					    		bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0]
                           				 	        birthdays_seen[birthday] = true
              					    	}
              					 	   var bodyTDimage = this.createEl("td",null, null, bodyTR , bd );
              
              						
              
              					    var bodyTD = this.createEl("td", null, null, bodyTR , person.name);
              					     
              						var ageTD = this.createEl("td",null, null, bodyTR  ,person.age );
              
              				}
              			}
              		}
              // create your table footer here	
              
              		// pass the created content back to MM to add to DOM.
              		return wrapper;
              	}
              

              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

                my code:

                   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;
                    },
                    
                    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;
                    },
                
                    getDom: function() {
                	var wrapper = this.createEl("div",null,null,null);
                	
                	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();
                
                	    if(Object.keys(this.active_birthdays).length>0) {
                
                		// create table
                		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper)
                
                		// create tableheader
                
                		// create TBODY section with day names
                		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table);
                
                		for(var birthday of Object.keys(this.active_birthdays)) {
                		    for(var person of this.active_birthdays[birthday]) {
                				
                			var bodyTR = this.createEl('tr', "birthday-tr-body", "tr-body" , tBody);
                
                			if (birthday.charAt(0) === "0") {
                			    birthday = birthday.replace("0","");
                			    birthday = birthday.substring(0,1);
                			}
                
                			var bodyTDimage = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, birthday.substring(0,2));
                			var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
                			var ageTD = this.createEl("td", "birthday-td-age", "TD-AGE", bodyTR  ,person.age );
                
                		    }
                		}
                	    }
                
                	    // Create TFOOT section -- currently used for debugging only
                
                	    return wrapper;
                
                	}
                	this.loaded = true;
                    },
                
                
                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @Perlchamp
                  last edited by sdetweil

                  @Perlchamp the short birthday

                  bd =(birthday.startsWith(“0”)? birthday.substring(1): birthday).split(‘.’)[0]

                  if the birthday starts with ‘0’ then get the rest skipping the 0

                  01.05 -> 1.05
                  then split the result on ‘.’
                  yields array of [ 1, 05]
                  and take the first element in the array [0] = 1
                  if it doesn’t start with 0,use the whole string, split and take the 1st element of array
                  10.05 = [10,05] = 10

                  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

                    sorry, i’m still sorting my code …uff

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

                      back again. WITHOUT a class reference (third element = null) i see the days.
                      WITH class-reference (“TD-IMAGE”) i see NO days.
                      the rest is working very good, thank you for that :-)

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

                        @Perlchamp what does TD-IMAGE class def look like?

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 24
                        • 25
                        • 26
                        • 27
                        • 28
                        • 31
                        • 32
                        • 26 / 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