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 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
      • 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 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
                        • 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