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

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

            This post is deleted!
            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @Perlchamp
              last edited by

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

              sorry sam, but my code is displayed wrong ! what in hell …
              the tbody section:

              any < must have a space after it to display on the forum… no way to escape them yet…
              no real work from site admin on problem

              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

                    // Override dom generator.
                    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;
                	}
                		
                    },
                
                

                this code looks like the image i did send before

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

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

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

                  i will shurely take this, if my current html should work. now it’s too much “risk” for me, to change it.

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

                    @Perlchamp yep… and you could use divs(as row) and spans(as column) for the table, instead of table/tr/td

                    https://html-cleaner.com/features/replace-html-table-tags-with-divs/

                    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 cool thing about the routine, if u decide to use div/span under instead is to fix the routine,
                      no mainline code has to change

                      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

                        i don’t think so. therefor i’m a little bit toooooooo retro ;-)

                        S 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