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 @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