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

      this is the status at the moment :
      image

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

        @Perlchamp cool… do you want ages aligned?

        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

          yes, of course, sir …

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

            @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
            • PerlchampP Offline
              Perlchamp
              last edited by Perlchamp

              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 Reply Quote 0
              • S Offline
                sdetweil @Perlchamp
                last edited by

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