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 440.2k 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

      ok, i’ve seen, the header function … uff, all is placed right (code).
      i don’t see the day of birth. the first cell is still the problem :-(

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

        @Perlchamp with my code I see
        I removed class
        date Name age
        12.05 Sam 69
        02.05 Frank 81
        02.05 Sue 81
        05.05 mary 65
        10.05 eee EEEEE 51
        16.05 fff FFFFF 8
        16.05 ggg GGGGG 32
        27.05 hhh HHHHH 18

        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

          i have a calendar OVER the birthdaylist, so i DON#T need the month in the first cell. the FIRST cell has a calendar sheet as background-image, THOUGH i DON’T need the leading null of the day of birth. should be:
          5 Sam 69
          Mary 12
          8 Frank 81
          15 Sue 81
          …
          did you seen the images i did send ?
          and, of course, people with the same day of birth without day of birth

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

            @Perlchamp no images email or text
            (cannot do fixed font here)

            date	Name	age
            12	Sam	69
            2	Frank	81
                    Sue	81
            5	mary	65
            10	eee EEEEE	51
            16	fff FFFFF	8
                    ggg GGGGG	32
            27	hhh HHHHH	18
            
            

            code

            	getDom: function() {
            		var wrapper = this.createEl("div",null,null,null);
            
            		if(Object.keys(this.active_birthdays).length>0){
            
            			// create your table  here
            			var table = this.createEl("table", "birthday-table", null, wrapper );
            
            			// table header here, array of column names
            			var table_header=this.createTableHeader(table,null, ["date","Name","age"])
            
            		    // create TBODY section with day names
            		    var tBody = this.createEl("tBody", "birthday-tbody", null, table );	
            		    var birthdays_seen= {}
            			for(var birthday of Object.keys(this.active_birthdays)){
            				for(var person of this.active_birthdays[birthday]){
            			
            				    var bodyTR = this.createEl("tr", null,null, tBody);
            				    		var bd =""
            					    	if(birthdays_seen[birthday] == undefined){
            					    		bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0]
                         				 	        birthdays_seen[birthday] = true
            					    	}
            					 	   var bodyTDimage = this.createEl("td",null, null, bodyTR , bd );
            
            						
            
            					    var bodyTD = this.createEl("td", null, null, bodyTR , person.name);
            					     
            						var ageTD = this.createEl("td",null, null, bodyTR  ,person.age );
            
            				}
            			}
            		}
            // create your table footer here	
            
            		// pass the created content back to MM to add to DOM.
            		return wrapper;
            	}
            

            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

              my code:

                 createEl : function (type, id, className, parent, value) {
              	var el= document.createElement(type);
              	if(id)
              	    el.id = id;
              	if(className)
              	    el.className = className;
              	if(parent)
              	    parent.appendChild(el);
              	if(value)
              	    el.appendChild(document.createTextNode(value));
              	return el;
                  },
                  
                  createTableHeader: function(parent, className, columnlabels) {
              	var header = document.createElement("tr");
              	for(columnName of columnlabels) {
              	    this.createEl("th", null, className, header, columnName);
              	}
              	parent.appendChild(header);
              	return header;
                  },
              
                  getDom: function() {
              	var wrapper = this.createEl("div",null,null,null);
              	
              	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();
              
              	    if(Object.keys(this.active_birthdays).length>0) {
              
              		// create table
              		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper)
              
              		// create tableheader
              
              		// create TBODY section with day names
              		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table);
              
              		for(var birthday of Object.keys(this.active_birthdays)) {
              		    for(var person of this.active_birthdays[birthday]) {
              				
              			var bodyTR = this.createEl('tr', "birthday-tr-body", "tr-body" , tBody);
              
              			if (birthday.charAt(0) === "0") {
              			    birthday = birthday.replace("0","");
              			    birthday = birthday.substring(0,1);
              			}
              
              			var bodyTDimage = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, birthday.substring(0,2));
              			var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
              			var ageTD = this.createEl("td", "birthday-td-age", "TD-AGE", bodyTR  ,person.age );
              
              		    }
              		}
              	    }
              
              	    // Create TFOOT section -- currently used for debugging only
              
              	    return wrapper;
              
              	}
              	this.loaded = true;
                  },
              
              
              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @Perlchamp
                last edited by sdetweil

                @Perlchamp the short birthday

                bd =(birthday.startsWith(“0”)? birthday.substring(1): birthday).split(‘.’)[0]

                if the birthday starts with ‘0’ then get the rest skipping the 0

                01.05 -> 1.05
                then split the result on ‘.’
                yields array of [ 1, 05]
                and take the first element in the array [0] = 1
                if it doesn’t start with 0,use the whole string, split and take the 1st element of array
                10.05 = [10,05] = 10

                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

                  sorry, i’m still sorting my code …uff

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

                    back again. WITHOUT a class reference (third element = null) i see the days.
                    WITH class-reference (“TD-IMAGE”) i see NO days.
                    the rest is working very good, thank you for that :-)

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

                      @Perlchamp what does TD-IMAGE class def look like?

                      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

                        .birthdaylist .TD-IMAGE {
                          width: 27px;
                          font-size: 20px;
                          color: #000000;
                          background-repeat: no-repeat;
                          background-position: top left;
                          background-image: url("/modules/birthdaylist/images/kalenderblatt.png");
                          font-weight: 400;
                          line-height: 26px;
                          vertical-align: top;
                          text-align: center;
                          margin: 0px;
                          padding: 10px 0px 0px 0px;
                        }
                        
                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 22
                        • 23
                        • 24
                        • 25
                        • 26
                        • 31
                        • 32
                        • 24 / 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