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.
    • 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
                                  • 3
                                  • 4
                                  • 5
                                  • 6
                                  • 15
                                  • 16
                                  • 4 / 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