• 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 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.
  • P Offline
    Perlchamp
    last edited by May 2, 2020, 10:47 PM

    yes, of course, sir …

    S 1 Reply Last reply May 2, 2020, 10:50 PM Reply Quote 0
    • S Offline
      sdetweil @Perlchamp
      last edited by sdetweil May 2, 2020, 10:55 PM May 2, 2020, 10:50 PM

      @Perlchamp need to specify width of td

      By default, a browser will adjust table columns to fit the contents of the table. However, if you want to control the width of each column, you can do so by adjusting the width of each or of a single row.

      if you had th, then you could see the length of the names as they go by, and then adjust the th width before sending the content to MM…

      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 2, 2020, 10:55 PM May 2, 2020, 10:55 PM

        width:27px; is placed in css
        but this:

        //bodyTDimage.id = "birthday-td-image";
        

        works. i really have to write html-text in the module-file ?

        S 1 Reply Last reply May 2, 2020, 10:57 PM Reply Quote 0
        • S Offline
          sdetweil @Perlchamp
          last edited by May 2, 2020, 10:57 PM

          @Perlchamp eh? commenting out a line?

          have a th is the same as what you have document.createElement(“th”)

          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 2, 2020, 11:00 PM May 2, 2020, 10:58 PM

            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 May 2, 2020, 11:00 PM Reply Quote 0
            • S Offline
              sdetweil @Perlchamp
              last edited by May 2, 2020, 11:00 PM

              @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
              • P Offline
                Perlchamp
                last edited by May 2, 2020, 11:03 PM

                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 May 2, 2020, 11:06 PM Reply Quote 0
                • S Offline
                  sdetweil @Perlchamp
                  last edited by sdetweil May 2, 2020, 11:18 PM May 2, 2020, 11:06 PM

                  @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 May 2, 2020, 11:10 PM Reply Quote 0
                  • S Offline
                    sdetweil @sdetweil
                    last edited by sdetweil May 2, 2020, 11:11 PM May 2, 2020, 11:10 PM

                    @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
                    • P Offline
                      Perlchamp
                      last edited by Perlchamp May 2, 2020, 11:15 PM May 2, 2020, 11:12 PM

                      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 May 2, 2020, 11:15 PM Reply Quote 0
                      • 1
                      • 2
                      • 19
                      • 20
                      • 21
                      • 22
                      • 23
                      • 31
                      • 32
                      • 21 / 32
                      21 / 32
                      • First post
                        206/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