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

      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 Do not disturb
        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 Do not disturb
            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 Do not disturb
                  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 Do not disturb
                      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 Do not disturb
                          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