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 448.6k 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

      i set the classes in uppercase, allthough in the css-file. but the classes are not adressed.
      by the way. maybe there is a problem with TWO cells in a row, because the daynumbers are OVER the names. if you look at the picture i send before (not the last post), than you can see, that the daynumbers are in ONE row with the names …

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