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

      @Perlchamp eh? where is that?

      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

        getDom:

            getDom: function() {
        	var self = this;
        	var wrapper = document.createElement("div");
        		
        	// tell MM to call and get our content
        	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 = document.createElement("table");
        	    wrapper.className = 'table'; 
        	    wrapper.id = 'birthday-table';
        
        	    // create header
        	    var tHeader = document.createElement("thead");
        	    tHeader.className = "thead";
        	    tHeader.id = "birthday-thead";
        
        	    var headerTR = document.createElement("tr");
        	    headerTR.className = "tr-head";
        	    headerTR.id = "birthday-tr-head";			    
        
        	    var headerTH = document.createElement("th");
        	    headerTH.colSpan = "2";
        	    headerTH.scope = "col";
        	    headerTH.className = "th-head";
        	    headerTH.id = "birthday-th-head";
        	    headerTH.innerHTML = " ";
        	    
        	    headerTR.appendChild(headerTH);
        	    tHeader.appendChild(headerTR);
        	    wrapper.appendChild(tHeader);
        		    
        	    // Create TFOOT section -- currently used for debugging only
        	    var tFooter = document.createElement('tfoot');
        	    tFooter.className = "tfoot";
        	    tFooter.id = "birthday-tfoot";
        
        	    var footerTR = document.createElement("tr");
        	    footerTR.className = "tr-foot";
        	    footerTR.id = "birthday-tr-foot";
        
        	    var footerTD = document.createElement("td");
        	    footerTD.colSpan ="2";
        	    footerTD.className = "td-foot";
        	    footerTD.id = "birthday-td-foot";
        	    if (this.config.debugging) {
        		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
        	    }
        	    else {
        		footerTD.innerHTML = "&nbsp;";
        	    }
        
        	    footerTR.appendChild(footerTD);
        	    tFooter.appendChild(footerTR);
        	    wrapper.appendChild(tFooter);
        
        	    // create TBODY section with day names
        	    var tBody = document.createElement("tBody");
        	    tBody.className = "tbody";
        	    tBody.id = "birthday-tbody";
        	    
        	    for(var birthday of Object.keys(this.active_birthdays)) {
        		for(var person of this.active_birthdays[birthday]) {
        				
        		    //var m = document.createElement('div');
        				
        		    // create looped row section
        		    var bodyTR = document.createElement("tr");
        		    bodyTR.className = "tr-body";
        		    bodyTR.id = "birthday-tr-body";
        
        		    var bodyTDimage = document.createElement("td");
        		    //bodyTDimage.className = "td-image";
        		    bodyTDimage.id = "birthday-td-image";
        		    if (birthday.charAt(0) === "0") {
        			birthday = birthday.replace("0","");
        			birthday = birthday.substring(0,1);
        		    }
        		    bodyTDimage.innerText = birthday.substring(0,2);
        
        		    var bodyTD = document.createElement("td");
        		    bodyTD.className = "td-body";
        		    bodyTD.id = "birthday-td-body";
        		    bodyTD.innerHTML = person.name + "&nbsp;&nbsp;&nbsp;<span class=\"age-span\">" + person.age + "</span>";
        		    				
        		    //m.innerText = birthday + ' ' + person.name + ' age=' + person.age;
        		    //wrapper.appendChild(m);
        		    
        		    bodyTR.appendChild(bodyTDimage);
        		    bodyTR.appendChild(bodyTD);
        		    tBody.appendChild(bodyTR);
        		    wrapper.appendChild(tBody);
        		    
        		}
        	    }
        
        	    // pass the created content back to MM to add to DOM.
        	    return wrapper;
        
        	}
        	
        	this.loaded = true;
        
        /*
        			
        
        
        //		var bodyAgeSpan = document.createElement("span");
        //		bodyAgeSpan.className = "age-span";
        //		bodyAgeSpan.id = "birthday-age-span";
        //		bodyAgeSpan.innerHTML = "&nbsp;&nbsp;46";
        //		bodyTD.appendChild(bodyAgeSpan);
        		
        
        	    }
        */	
            },
        
        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @Perlchamp
          last edited by sdetweil

          @Perlchamp fiddling with it here… technically you are supposed to have a text element as a child of the td

          < table>
             < tr>
                < td> value < /td>
          
          var n = document.createTextNode(value);
          
          

          Sam

          How to add modules

          learning how to use browser developers window for css changes

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

            @Perlchamp

            
            			    var bodyTR = document.createElement("tr");
            			   // bodyTR.className = "tr-body";
            			    bodyTR.id = "birthday-tr-body";
            			    tBody.appendChild(bodyTR);		    
            
            			    var bodyTDimage = document.createElement("td");
            			   // bodyTDimage.className = "td-image";
            			    bodyTDimage.id = "birthday-td-image";
            			   // bodyTDimage.innerHTML = birthday;
            			    bodyTR.appendChild(bodyTDimage);
            			    bodyTDimage.appendChild(document.createTextNode(birthday));
            
            			    var bodyTD = document.createElement("td");
            			   // bodyTD.className = "td-body";
            			    bodyTD.id = "birthday-td-body";
            			   // bodyTD.innerTEXT = person.name ;
            				bodyTD.appendChild(document.createTextNode(person.name));
            			    bodyTR.appendChild(bodyTD);		
            			     
            
            				var ageTD = document.createElement("td");
            			   // bodyTD.className = "td-body";
            			    ageTD.id = "birthday-td-age";
            			    //ageTD.innerTEXT = person.age ;	 
            			    ageTD.appendChild(document.createTextNode(person.age)); 
            			    bodyTR.appendChild(ageTD);		
            

            and set the class for the text element

            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

              you were too fast !!
              to your information:
              table needs a header (thead, tr, th) and a footer (tfoot, tr, td), and, of
              course a boda (tbody, tr, td), my cose, where a put html-tags in the table and text without variable works fine.
              but later, if i should dissapointed, i will try this.

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

                @Perlchamp >where a put html-tags in the table

                its exactly the same as writing the html

                they don’t NEED a thead/tfoot, these are optional

                you could create a big text string of the html < table>… < /table>
                and then assign that text string to the wrapper div innerHTML.

                same result…

                Sam

                How to add modules

                learning how to use browser developers window for css changes

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

                  @sdetweil when I had a big pile of html objects to create I wrote a little routine to hide the 4 lines per object

                  createEl(type, id, class, parent){
                     var el = document.createElement(type)
                     el.id=id
                     if(class) 
                       el.classname=class
                     parent.addChild(el)
                     return el
                  },
                  

                  then to use

                      var table= this.createEl('table', "birthday-tbody", null , wrapper)
                              etc
                              etc
                  

                  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

                    in the moment you’re too fast for me …
                    this code is from the test-module:

                        getDom: function() {
                    	var wrapper = document.createElement("div");
                    
                    
                    	if ((moment() > this.midnight) || (!this.loaded)) {
                    	    var month = moment().month();
                    	    var year = moment().year();
                    	    var monthName = moment().format("MMMM");
                    	    var monthLength = moment().daysInMonth();
                    
                    	    // tabelle erstellen
                    	    var wrapper = document.createElement("table");
                    	    wrapper.className = 'table';
                    	    wrapper.id = 'birthday-table';
                    
                    	    // tabellenkopf erstellen
                    	    var tHeader = document.createElement("thead");
                    	    tHeader.className = "thead";
                    	    tHeader.id = "birthday-thead";
                    
                    	    var headerTR = document.createElement("tr");
                    	    headerTR.className = "tr-head";
                    	    headerTR.id = "birthday-tr-head";			    
                    
                    	    var headerTH = document.createElement("th");
                    	    headerTH.colSpan = "2";
                    	    headerTH.scope = "col";
                    	    headerTH.className = "th-head";
                    	    headerTH.id = "birthday-th-head";
                    	    headerTH.innerHTML = this.translate(this.config.title);
                    	    headerTR.appendChild(headerTH);
                    	    			
                    	    tHeader.appendChild(headerTR);
                    	    wrapper.appendChild(tHeader);
                    		    
                    	    // Create TFOOT section -- currently used for debugging only
                    	    var tFooter = document.createElement('tfoot');
                    	    tFooter.className = "tfoot";
                    	    tFooter.id = "birthday-tfoot";
                    
                    	    var footerTR = document.createElement("tr");
                    	    footerTR.className = "tr-foot";
                    	    footerTR.id = "birthday-tr-foot";
                    
                    	    var footerTD = document.createElement("td");
                    	    footerTD.colSpan ="2";
                    	    footerTD.className = "td-foot";
                    	    footerTD.id = "birthday-td-foot";
                    	    if (this.config.debugging) {
                    		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
                    	    }
                    	    else {
                    		footerTD.innerHTML = "";
                    	    }
                    
                    	    footerTR.appendChild(footerTD);
                    	    tFooter.appendChild(footerTR);
                    	    wrapper.appendChild(tFooter);
                    			
                    	    // Create TBODY section with day names
                    	    var eintraege = 3;
                    	    for (var i=1; i<=eintraege; i++) {
                    		var tBody = document.createElement("tBody");
                    		tBody.className = "tbody";
                    		tBody.id = "birthday-tbody";
                    
                    		var bodyTR = document.createElement("tr");
                    		bodyTR.className = "tr-body";
                    		bodyTR.id = "birthday-tr-body";
                    
                    		var bodyTDimage = document.createElement("td");
                    		bodyTDimage.className = "td-image";
                    		bodyTDimage.id = "birthday-td-image";
                    		bodyTDimage.innerHTML = "23";
                    
                    		var bodyTD = document.createElement("td");
                    		bodyTD.className = "td-body";
                    		bodyTD.id = "birthday-td-body";
                    		bodyTD.innerHTML = "Bettina Zimmermann&nbsp;&nbsp;<span class=\"age-span\">46</span></br>Frank Dubiel&nbsp;&nbsp;<span class=\"age-span\">54</span></br>Jürgen Gruse&nbsp;&nbsp;<span class=\"age-span\">52</span>";
                    
                    /*
                    		var bodyAgeSpan = document.createElement("span");
                    		bodyAgeSpan.className = "age-span";
                    		bodyAgeSpan.id = "birthday-age-span";
                    		bodyAgeSpan.innerHTML = "&nbsp;&nbsp;46";
                    		bodyTD.appendChild(bodyAgeSpan);
                    */		
                    
                    		bodyTR.appendChild(bodyTDimage);
                    		bodyTR.appendChild(bodyTD);
                    		tBody.appendChild(bodyTR);
                    		wrapper.appendChild(tBody);
                    	    }
                    	
                    	    this.loaded = true;
                    	    return wrapper;
                    	}
                    		
                        },
                    

                    and looks like :
                    image

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

                      @Perlchamp ok, so you WANT a title, header and footer…

                      still no different than an actual table in all html
                      by using document.creatElement and appendChild() there are no close tags to create

                      a td is a closed thing you add text to a td…

                      with my little helper routine, you write exactly what you would have written in html
                      and can indent/outdent to match for readability

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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

                        @Perlchamp maybe a nunjuks template , but its the same work to create the template the generate the content
                        the template has to have all the same stuff you are doing, including the loop part

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 20
                        • 21
                        • 22
                        • 23
                        • 24
                        • 31
                        • 32
                        • 22 / 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