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 442.3k 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 all except parent in quotes

      tables parent is wrapper, wrappers parent is null/0

      Sam

      How to add modules

      learning how to use browser developers window for css changes

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

        wrapper in quotes , too ?

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

          @sdetweil if there is no data, then you still need to return something (empty div)

          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

            @Perlchamp wrapper is a div type, no id,class or parent

            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 now does not work:

                          // create table
              	    var wrapper = this.createEl('table', "birthday-table", table , 0)
              	    
              	    // create header
              	    var tHeader = this.createEl('thead', "birthday-thead", thead , "")
              	    var headerTR = this.createEl('tr', "birthday-tr-head", tr-head , "tHeader")
              	    var headerTH = this.createEl('th', "birthday-th-head", th-head , "headerTR")
              	    headerTH.colSpan = "2";
              	    headerTH.scope = "col";
              	    headerTH.innerHTML = " ";
              	        
              	    // Create TFOOT section -- currently used for debugging only
              	    var tFooter = this.createEl('tfoot', "birthday-tfood", tfoot , "")
              	    var footerTR = this.createEl('tr', "birthday-tf-foot", tr-foot , "tFooter")
              	    var footerTD = this.createEl('td', "birthday-td-foot", td-foot , "footerTR")
              	    footerTD.colSpan ="2";
              	    if (this.config.debugging) {
              		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode! < br / > Please see console log.";
              	    }
              	    else {
              		footerTD.innerHTML = "&nbsp;";
              	    }
              
              	    // create TBODY section with day names
              	    var tBody = this.createEl('tBody', "birthday-tbody", tbody , "")
              	    
              	    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")
              		    var bodyTDimage = this.createEl('td', "birthday-td-image", td-image , "bodyTR")
              		    if (birthday.charAt(0) === "0") {
              			birthday = birthday.replace("0","");
              			birthday = birthday.substring(0,1);
              		    }
              		    bodyTDimage.innerHTML = birthday.substring(0,2);
              		    var bodyTD = this.createEl('td', "birthday-td-body", td-body , "bodyTDimage")
              		    bodyTD.innerHTML = person.name + "&nbsp;&nbsp;&nbsp; < span class=\"age-span\" > " + person.age + " < /span > ";
              		    				
              		}
              	    }
              
              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @Perlchamp
                last edited by sdetweil

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

                ", thead ,

                again all classes in quotes, ONLY parent NOT in quotes

                 var wrapper = this.createEl('table', "birthday-table", "table" , null)
                	    var tHeader = this.createEl('thead', "birthday-thead", "thead" , wrapper )
                	    var headerTR = this.createEl('tr', "birthday-tr-head", "tr-head" , tHeader)
                	    var headerTH = this.createEl('th', "birthday-th-head", "th-head" , headerTR)
                

                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

                  does not work for me. complete getDom and your createEl :

                      createEl(type, id, class, parent){
                  	var el = document.createElement(type);
                  	el.id = id;
                  	if(class); 
                  	el.classname = class;
                  	parent.addChild(el);
                  	return el;
                      },
                  
                      getDom: function() {
                  	var self = this;
                  	var wrapper = document.createElement("div");
                  		
                  	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();
                  
                  	    // create table
                  	    var wrapper = this.createEl("table", "birthday-table", "table" , null)
                  	    
                  	    // create header
                  	    var tHeader = this.createEl('thead', "birthday-thead", "thead" , wrapper)
                  	    
                  	    var headerTR = this.createEl('tr', "birthday-tr-head", "tr-head" , tHeader)
                  	    var headerTH = this.createEl('th', "birthday-th-head", "th-head" , headerTR)
                  	    headerTH.colSpan = "2";
                  	    headerTH.scope = "col";
                  	    headerTH.innerHTML = "&nbsp;";
                  	        
                  	    // Create TFOOT section -- currently used for debugging only
                  	    var tFooter = this.createEl('tfoot', "birthday-tfood", "tfoot" , wrapper)
                  	    var footerTR = this.createEl('tr', "birthday-tf-foot", "tr-foot" , tFooter)
                  	    
                  	    var footerTD = this.createEl('td', "birthday-td-foot", "td-foot" , footerTR)
                  	    footerTD.colSpan ="2";
                  	    if (this.config.debugging) {
                  		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
                  	    }
                  	    else {
                  		footerTD.innerHTML = "&nbsp;";
                  	    }
                  
                  	    // 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", "tr-body" , tBody)
                  		    var bodyTDimage = this.createEl('td', "birthday-td-image", "td-image" , bodyTR)
                  		    if (birthday.charAt(0) === "0") {
                  			birthday = birthday.replace("0","");
                  			birthday = birthday.substring(0,1);
                  		    }
                  		    bodyTDimage.innerHTML = birthday.substring(0,2);
                  
                  		    var bodyTD = this.createEl('td', "birthday-td-body", "td-body" , bodyTDimage)
                  		    bodyTD.innerHTML = person.name + "&nbsp;&nbsp;&nbsp; < span class=\"age-span\" > " + person.age + " < /span > ";
                  		    				
                  		}
                  	    }
                  
                  	    return wrapper;
                  
                  	}
                  	
                  	this.loaded = true;
                  
                  	    }
                      },
                  
                  S 1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @Perlchamp
                    last edited by sdetweil

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

                    	    // create table
                    	    var table = this.createEl("table", "birthday-table", "table" , wrapper)
                    	    
                    	    // create header
                    	    var tHeader = this.createEl('thead', "birthday-thead", "thead" , table)
                    	    
                    	    var headerTR = this.createEl('tr', "birthday-tr-head", "tr-head" , tHeader)
                    	    var headerTH = this.createEl('th', "birthday-th-head", "th-head" , headerTR)
                    	    headerTH.colSpan = "2";
                    	    headerTH.scope = "col";
                    	    headerTH.innerHTML = " ";
                    	        
                    	    // Create TFOOT section -- currently used for debugging only
                    	    var tFooter = this.createEl('tfoot', "birthday-tfood", "tfoot" , table)
                    	    var footerTR = this.createEl('tr', "birthday-tf-foot", "tr-foot" , tFooter)
                    	    
                    	    var footerTD = this.createEl('td', "birthday-td-foot", "td-foot" , footerTR)
                    	    footerTD.colSpan ="2";
                    	    if (this.config.debugging) {
                    		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!< br />Please see console log.";
                    	    }
                    	    else {
                    		footerTD.innerHTML = " ";
                    	    }
                    
                    	    // 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)
                    		    var bodyTDimage = this.createEl('td', "birthday-td-image", "td-image" , bodyTR)
                    		    if (birthday.charAt(0) === "0") {
                    			birthday = birthday.replace("0","");
                    			birthday = birthday.substring(0,1);
                    		    }
                    		    bodyTDimage.innerHTML = birthday.substring(0,2);
                    
                    		    var bodyTD = this.createEl('td', "birthday-td-body", "td-body" , bodyTDimage)
                    		    bodyTD.innerHTML = person.name + "    < span class=\"age-span\" > " + person.age + " < /span > ";
                    		    				
                    		}
                    	    }
                    

                    what the html fragments with the < and space, they don’t work if there is a space there, need it for the forum, but won’t actually work

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    S 2 Replies Last reply Reply Quote 0
                    • S Offline
                      sdetweil @sdetweil
                      last edited by

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

                        headerTH.innerHTML = " ";
                      

                      all things are empty when created, so don’t need this

                      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 @sdetweil
                        last edited by

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

                          else {
                          footerTD.innerHTML = " ";
                          }
                        

                        don’t need this

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

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