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 495.6k 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 @sdetweil
      last edited by

      @Perlchamp my code had

      
      					let now = moment()		
      					let entrie=now
      				    if(this.config.dimmEntries) {				
      						entrie = moment(birthday,'DD.MM')
      					}
      					var bd = "";	
      

      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

        thanks a lot. i will study this …

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

          @Perlchamp make that one fix and then my code will work too

          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

            update !
            i tried, but how should i do this ?
            i was in the dev. didn’t helped me. it’s , how said, the part

            .concat(entrie.isBefore(now)?"_DIMMED":''
            

            with => blackScreen
            without => working (formatted => css).

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

              @Perlchamp have to edit the source code, then reload the browser page, cannot edit in debugger

              let now = moment()		
              					let entrie=now   // <-- this line was not included in yours..   i commented 
              				    if(this.config.dimmEntries) {				
              						entrie = moment(birthday,'DD.MM')
              					}
              

              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

                this code => blackScreen:

                    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 = moment();
                
                	    if(Object.keys(this.active_birthdays).length > 0) {
                	    
                		// create your table here
                		var table = this.createEl("table", "birthday-table", "TABLE", wrapper, null);
                
                		// create tableheader here, array of column names
                		var table_header = this.createTableHeader(table, "THEAD", [" "," "]);
                		//var table_header = this.createTableHeader(table, null, [" "," "," "]);
                		
                		// create TBODY section with day names
                		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY", table, null);
                
                		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);
                
                			let now = moment();
                			let entrie = moment(birthday,"DD.MM");
                			
                			if(this.config.dimmEntries) {				
                			    entrie = moment(birthday,"DD.MM");
                			}
                			
                			// delete leading 0 and month
                			var bd = "";
                			
                			if(birthdays_seen[birthday] == undefined) {
                			    bd = (birthday.startsWith("0")? birthday.substring(1): birthday).split(".")[0];
                			    var imageTD = this.createEl("td", null, "TD-IMAGE".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, bd);
                			    //var imageTD = this.createEl("td", null, "TD-IMAGE", bodyTR, bd);
                			    var nameTD = this.createEl("td", null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, person.name);
                			    //var nameTD = this.createEl("td", null, "TD-BODY", bodyTR, person.name);
                			    this.createEl("span", null, "TD-AGE", nameTD, " ");						
                			    
                			    // needs class for width
                			    var spanTDo = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', nameTD, person.age);
                			    //var spanTDo = this.createEl("span", null, "TD-AGE", nameTD, person.age);
                			}
                			else{
                			    // add a break
                			    this.createEl("br", null , null , spanTDo, null);
                			    // add a span with name
                			    var nameTD = this.createEl("span", null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'',spanTDo, person.name);
                			    //var nameTD = this.createEl("span", null, "TD-BODY", spanTDo, person.name);
                			    // add a span with age
                			    var spanTD = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', spanTDo, person.age);
                			    //var spanTD = this.createEl("span", null, "TD-AGE", spanTDo, person.age);
                			}					
                
                			birthdays_seen[birthday] = true;
                		    }
                		}
                
                		// 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;
                
                    },
                

                this code works but no css:

                 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 = moment();
                
                	    if(Object.keys(this.active_birthdays).length > 0) {
                	    
                		// create table
                		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper,null)
                
                		// create tableheader here, array of column names
                		var table_header = this.createTableHeader(table, null, [" "," "]);
                		
                		// create TBODY section with day names
                		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table, null);
                
                		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);
                
                			let now = moment().format('DD.MM').valueOf();				
                			let entrie=now;
                			if(this.config.dimmEntries) {				
                			    entrie = moment(birthday,'DD.MM').valueOf();
                			}
                			
                			// delete leading 0 and month
                			var bd = "";
                			
                			if(birthdays_seen[birthday] == undefined) {
                			    bd = (birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                
                			    var imageTD = this.createEl('td', null, "TD-IMAGE" + (entrie < now)?"_DIMMED":'' , bodyTR, bd);		
                			    var nameTD = this.createEl('td', null, "TD-BODY" + (entrie < now)?"_DIMMED":'' , bodyTR, person.name);
                			    this.createEl("span", null, null, nameTD, " ");						
                			    
                			    // needs class for width
                			    var spanTDo = this.createEl("span", null, "TD-AGE" + (entrie < now)?"_DIMMED":'', nameTD, person.age);
                			}
                			else{
                			    // add a break
                			    this.createEl('br', null , null , spanTDo,null);
                			    // add a span with name
                			    var nameTD = this.createEl('span', null, "TD-BODY" + (entrie < now)?"_DIMMED":'' ,spanTDo, person.name);
                			    // add a span with age
                			    var spanTD = this.createEl("span", null, "TD-AGE" + (entrie < now)?"_DIMMED":'', spanTDo, person.age);						
                			}					
                			
                			var spacerTR = this.createEl('tr', null, null , tBody, null);
                			var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, " ");
                			spacerTD.colSpan = "2";
                			birthdays_seen[birthday] = true;
                			
                		    }
                		}
                
                		// 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;
                
                    },
                 
                
                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @Perlchamp
                  last edited by sdetweil

                  @Perlchamp you need to learn the debugger, code fixed

                  	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 looped row section
                  			var tBody = this.createEl('tbody', "birthday-t-body", "tbody", table, null);		
                  
                  			var birthdays_seen= {}
                  			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', null, "TR-BODY" ,tBody, null);	
                  
                  					let now = moment()		
                  					let entrie=now
                  				    if(this.config.dimmEntries) {				
                  						entrie = moment(birthday,'DD.MM')
                  					}
                  					var bd = "";					
                  			    	if(birthdays_seen[birthday]==undefined){
                  						bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                  						var imageTD = this.createEl('td', null, "TD-IMAGE".concat(entrie.isBefore(now)?"_DIMMED":'') , bodyTR, bd);		
                  						var nameTD = this.createEl('td', null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'') , bodyTR, person.name);
                  									 this.createEl("span", null, null, nameTD, " ");						// needs class for width
                  						var spanTDo = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":''), nameTD, person.age);
                  					}	
                  					else{
                  						// add a break
                  						this.createEl('br', null , null , spanTDo,null);
                  						// add a span with name
                  						var nameTD = this.createEl('span', null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'') ,spanTDo, person.name);
                  						// add a span with age
                  						var spanTD = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":''), spanTDo, person.age);						
                  					}					
                  
                  
                  					var spacerTR = this.createEl('tr', null, null , tBody, null);
                  					var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, " ");
                  					spacerTD.colSpan = "2";
                  					birthdays_seen[birthday] = true;
                  
                  				}
                  		    }
                  		}
                  		return wrapper;
                  	},
                  

                  see the last line of the console

                  Screenshot at 2020-05-03 20-27-54.png
                  black screen means syntax error in some modulename.js, click on the line number and it will take you to that line in the code … note the concat(… is missing its right paren ‘)’

                  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

                    thank you very much. yes i need more expirience of debugging. it’s my second day i use it, sorry sam. AND MANY THANKS.

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

                      @Perlchamp Make an error, take out a comma, or ’

                      reload the page, f5

                      put part of ht module name in the filter field of the console

                      find the error message
                      click the filename/line to the right

                      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, will collect some experience …

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

                          ok, the blacksreen is gone, works, but no css

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

                            @Perlchamp that comes up for me
                            Copied directly. Will send my module file.

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

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

                                @Perlchamp see the expanded html on left

                                Screenshot at 2020-05-03 21-02-49.png

                                file sent

                                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 ! now i hope to find the error :-)

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

                                    @Perlchamp i did not use the classes , no… didn’t care about the layout etc…
                                    I want to make sure the NAMES of the classes are right…

                                    sending file again, sorting the dates

                                    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

                                      work’s, too :-) , sam

                                      1 Reply Last reply Reply Quote 0
                                      • D Offline
                                        dorinilut
                                        last edited by

                                        @Perlchamp , would it be possible to share the module you came up with? I am looking for the exact same thing and I was thinking I would be getting a copy.

                                        many many thanks!

                                        1 Reply Last reply Reply Quote 1

                                        Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                        Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                        With your input, this post could be even better 💗

                                        Register Login
                                        • 1
                                        • 2
                                        • 12
                                        • 13
                                        • 14
                                        • 15
                                        • 16
                                        • 16 / 16
                                        • 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