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

          yes black on black, why not ? because of the mirrors lucidity … better safe than sorry ;-)

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

            great progress. smaller more manageable code…

            off to sleep

            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

              bloody nice dreams, sam

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

                hi sam, for me it’s a milestone :

                    // type: td, id: id of element, className: classname of element
                    // parent: parent of element, value: value
                    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;
                    },
                    
                    // creates a tableheader with columnnaes
                    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;
                    },
                
                    // creates a tablefooter with columns
                    createTableFooter: function(parent, className, column) {
                	var footer = document.createElement("tr");
                	for(colContent of column) {
                	    this.createEl("td", null, className, footer, colContent);
                	}
                	parent.appendChild(footer);
                	return footer;
                    },
                
                    // 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,null);
                	
                	// tell MM to call and get our content
                	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();
                	    var now_day_month = moment().format("DD.MM");
                
                	    if(Object.keys(this.active_birthdays).length > 0) {
                
                		// create table
                		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper,null)
                
                		// create tableheader here
                		var table_header = this.createTableHeader(table, null, [" "," "]);
                
                		// create TBODY section with day names
                		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table, null);
                
                		var day_month_now = moment().format("DD.MM");
                		var birthdays_seen= {}
                		var spacer = " ";
                		for(var birthday of Object.keys(this.active_birthdays)) {
                		    for(var person of this.active_birthdays[birthday]) {
                		    				
                			// create looped row section
                			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY" , tBody, null);
                
                			// delete leading 0 and month
                			var bd = "";
                			if(birthdays_seen[birthday] == undefined) {
                			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                             		    birthdays_seen[birthday] = true;
                			}
                			let date1 = moment(birthday,'DD.MM').valueOf();
                			let date2 = moment(now_day_month,'DD.MM').valueOf();
                			if (date1 < date2) {
                			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
                			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
                			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
                			}
                			else {
                			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
                			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
                			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
                			}
                			var spacerTR = this.createEl('tr', null, null , tBody, null);
                			var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
                			spacerTD.colSpan = "2";
                		    }
                		}
                
                		// Create TFOOT section -- currently used for debugging only
                		if (this.config.debugging) {
                		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
                		    //footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
                		}
                		else {
                		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
                		}
                
                	    }
                
                	    // pass the created content back to MM to add to DOM.
                	    return wrapper;
                
                	}
                	// Dom is loaded
                	this.loaded = true;
                
                    },
                
                

                css-file via email

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

                  the next working step:

                  for(var birthday of Object.keys(this.active_birthdays)) {
                  		    for(var person of this.active_birthdays[birthday]) {
                  		    				
                  			// create looped row section
                  			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY" , tBody, null);
                  
                  			// delete leading 0 and month
                  			var bd = "";
                  			if(birthdays_seen[birthday] == undefined) {
                  			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                               		    birthdays_seen[birthday] = true;
                  			}
                  			let entrie = moment(birthday,'DD.MM').valueOf();
                  			let now = moment(now_day_month,'DD.MM').valueOf();
                  			if (entrie < now) {
                  			    if(this.config.dimmEntries) {
                  				var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
                  				var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
                  				var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
                  				var spacerTR = this.createEl('tr', null, null , tBody, null);
                  				var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
                  				spacerTD.colSpan = "2";
                  			    }
                  			    else {
                  			    }
                  			}
                  			else {
                  			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
                  			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
                  			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
                  			    var spacerTR = this.createEl('tr', null, null , tBody, null);
                  			    var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
                  			    spacerTD.colSpan = "2";
                  			}
                  		    }
                  		}
                  

                  now should be the last step:
                  people who are their birthday at the same day in one cell separated by < /br > … that’s (maybe) too difficult for me, but just figuring out …

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

                    @Perlchamp ok, busy at the moment… about an hour 13:30 my time

                    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

                      ok, doesn’t matter. enjoy your meal with your family.

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

                        i’m a step foward (did write two functions for smarter code) :

                           // creates a tablefooter with columns
                            createTableFooter: function(parent, className, column) {
                        	var footer = document.createElement("tr");
                        	for(colContent of column) {
                        	    this.createEl("td", null, className, footer, colContent);
                        	}
                        	parent.appendChild(footer);
                        	return footer;
                            },
                            
                            // compares two dates, requires moment.js :
                            // output "1"  : date1 > date2
                            // output "-1" : date1 < date2
                            // output "0"  : fault
                            compareDate: function(now, entrie, format) {
                        	let date_1 = moment(now,format).valueOf();
                        	let date_2 = moment(entrie,format).valueOf();
                        	if (date_1 > date_2) {
                        	    return 1;
                        	}
                        	else if (date_1 < date_2) {
                        	    return -1;
                        	}
                        	else {
                        	    return 0;
                        	}
                            }, 
                        

                        the lastone is used here:

                        for(var birthday of Object.keys(this.active_birthdays)) {
                        		    for(var person of this.active_birthdays[birthday]) {
                        		    				
                        			// create looped row section
                        			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY" , tBody, null);
                        
                        			// delete leading 0 and month
                        			var bd = "";
                        			if(birthdays_seen[birthday] == undefined) {
                        			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                                     		    birthdays_seen[birthday] = true;
                        			}
                        
                        			if (this.compareDate(now,birthday,"DD.MM") === 1) {
                        			    if(this.config.dimmEntries) {
                        				var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
                        				var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
                        				var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
                        				var spacerTR = this.createEl('tr', null, null , tBody, null);
                        				var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
                        				spacerTD.colSpan = "2";
                        			    }
                        			    else {
                        			    }
                        			}
                        			else {
                        			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
                        			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
                        			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
                        			    var spacerTR = this.createEl('tr', null, null , tBody, null);
                        			    var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
                        			    spacerTD.colSpan = "2";
                        			}
                        		    }
                        		}
                        

                        it works fine for me :-). for the last step (people with the same birthday in one cell, separeted via < /br >) i have momently no ideas…

                        S 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