• 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 434.4k 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.
  • S Offline
    sdetweil @Perlchamp
    last edited by sdetweil May 3, 2020, 2:20 AM May 3, 2020, 1:55 AM

    @Perlchamp well, part of the problem is the ID of the cells is the same for each row… removing id and class (which I don’t have)
    works

    cells don’t NEED ids… but if u wanted, you would have to create a counter to append each loop to make the ids unique

    new createEl which does text value too

    	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
    
    	},
    

    and table header

    	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()

    	// this is the major worker of the module, it provides the displayable content for this module
    	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 );	
    
    			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 bodyTDimage = this.createEl("td",null, null, bodyTR , birthday );
    
    					    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
    • P Offline
      Perlchamp
      last edited by May 3, 2020, 2:35 AM

      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 May 3, 2020, 2:36 AM Reply Quote 0
      • S Offline
        sdetweil @Perlchamp
        last edited by sdetweil May 3, 2020, 2:37 AM May 3, 2020, 2:36 AM

        @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
        • P Offline
          Perlchamp
          last edited by Perlchamp May 3, 2020, 2:47 AM May 3, 2020, 2:42 AM

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

            @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
            • P Offline
              Perlchamp
              last edited by May 3, 2020, 2:54 AM

              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 May 3, 2020, 3:06 AM Reply Quote 0
              • S Offline
                sdetweil @Perlchamp
                last edited by sdetweil May 3, 2020, 3:16 AM May 3, 2020, 3:06 AM

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

                  sorry, i’m still sorting my code …uff

                  1 Reply Last reply Reply Quote 0
                  • P Offline
                    Perlchamp
                    last edited by Perlchamp May 3, 2020, 3:17 AM May 3, 2020, 3:16 AM

                    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 May 3, 2020, 3:17 AM Reply Quote 0
                    • S Offline
                      sdetweil @Perlchamp
                      last edited by May 3, 2020, 3:17 AM

                      @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
                      • 1
                      • 2
                      • 24
                      • 25
                      • 26
                      • 27
                      • 28
                      • 31
                      • 32
                      • 26 / 32
                      26 / 32
                      • First post
                        259/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