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