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.0k 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

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

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

                        .birthdaylist

                        there is no birthdaylist class being used (unless u changed the modulename again)

                        maybe

                        .TD-IMAGE {
                        

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 10
                        • 11
                        • 12
                        • 13
                        • 14
                        • 31
                        • 32
                        • 12 / 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