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

      wrong line, moment:

      //bodyTDimage.className = "td-image";
      

      this works, but unformatted, of course

      i don’t like things like:
      innerHTLM = tags, tags, tags …

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