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

                      IT WORKS !!, Sam, it WORKS !
                      had a wrong image-name. that is UNPARDONABLE !!
                      now, this background-image will shown, if two people tzhe same day… problems, problems, problems …
                      SOLUTION: these people (same day) should be in ONE cell, separated by < /br > therefor i don’t need a third cell ;-)

                      @Perlchamp no images email or text => i would like sending emails (with attached images, too)
                      this is the homerun, touchdown and goal !

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

                        @Perlchamp oh by the way TD-IMAGE color is black, on black background!
                        my email was in the chat message

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 25
                        • 26
                        • 27
                        • 28
                        • 29
                        • 30
                        • 31
                        • 32
                        • 27 / 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