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

                @Perlchamp each to their own!..

                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

                  if i do this :

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

                  it looks like:
                  image

                  and i ask me, WHY css is not working only for this cell !!

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

                    @Perlchamp td has a class, you are overriding it…
                    you want that class on the text in the td, not the td itself…

                    table, th, tr, all have classes… you can ADD a class instead of SET a class

                    += adds to

                    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

                      but the other cell (name plus age) works, WHY ?

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

                        @Perlchamp not a css class wizard

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

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