• 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 380.4k 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 Away
    sdetweil
    last edited by May 3, 2020, 1:38 AM

    new getDom(), without header or footer

    	getDom: function() {
    		var wrapper = this.createEl("div",null,null,null);
    
    		if(Object.keys(this.active_birthdays).length>0){
    
    			// create your table and header here
    		    // create TBODY section with day names
    		    var tBody = this.createEl("tBody", "birthday-tbody", "tbody", wrapper );	
    
    			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",null, tBody);
    
    					    var bodyTDimage = this.createEl("td","birthday-td-image", null, bodyTR );
    
    					    	bodyTDimage.appendChild(document.createTextNode(birthday));
    
    					    var bodyTD = this.createEl("td", "birthday-td-body", null, bodyTR );
    
    							bodyTD.appendChild(document.createTextNode(person.name));
    			
    					     
    						var ageTD = this.createEl("td","birthday-td-age", null, bodyTR  );
    			 
    					    	ageTD.appendChild(document.createTextNode(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
    • P Offline
      Perlchamp
      last edited by Perlchamp May 3, 2020, 1:42 AM May 3, 2020, 1:40 AM

      the classes are not addressed :
      image
      … without header and footer.
      why the classes are null ?

      S 1 Reply Last reply May 3, 2020, 1:42 AM Reply Quote 0
      • S Away
        sdetweil @Perlchamp
        last edited by sdetweil May 3, 2020, 1:56 AM May 3, 2020, 1:42 AM

        @Perlchamp sorry, typo
        className with upper case

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

        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, 1:52 AM

          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 May 3, 2020, 1:55 AM Reply Quote 0
          • S Away
            sdetweil @Perlchamp
            last edited by sdetweil May 3, 2020, 2:20 AM May 3, 2020, 1:55 AM

            @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
            • P Offline
              Perlchamp
              last edited by May 3, 2020, 2:35 AM

              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 May 3, 2020, 2:36 AM Reply Quote 0
              • S Away
                sdetweil @Perlchamp
                last edited by sdetweil May 3, 2020, 2:37 AM May 3, 2020, 2:36 AM

                @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
                • P Offline
                  Perlchamp
                  last edited by Perlchamp May 3, 2020, 2:47 AM May 3, 2020, 2:42 AM

                  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 May 3, 2020, 2:52 AM Reply Quote 0
                  • S Away
                    sdetweil @Perlchamp
                    last edited by sdetweil May 3, 2020, 2:52 AM May 3, 2020, 2:52 AM

                    @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
                    • P Offline
                      Perlchamp
                      last edited by May 3, 2020, 2:54 AM

                      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 May 3, 2020, 3:06 AM Reply Quote 0
                      • 1
                      • 2
                      • 24
                      • 25
                      • 26
                      • 27
                      • 28
                      • 31
                      • 32
                      • 26 / 32
                      26 / 32
                      • First post
                        251/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