• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 435.0k 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 May 3, 2020, 3:17 AM

    @Perlchamp what does TD-IMAGE class def look like?

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    1 Reply Last reply Reply Quote 0
    • P Offline
      Perlchamp
      last edited by May 3, 2020, 3:18 AM

      .birthdaylist .TD-IMAGE {
        width: 27px;
        font-size: 20px;
        color: #000000;
        background-repeat: no-repeat;
        background-position: top left;
        background-image: url("/modules/birthdaylist/images/kalenderblatt.png");
        font-weight: 400;
        line-height: 26px;
        vertical-align: top;
        text-align: center;
        margin: 0px;
        padding: 10px 0px 0px 0px;
      }
      
      S 1 Reply Last reply May 3, 2020, 3:21 AM Reply Quote 0
      • S Offline
        sdetweil @Perlchamp
        last edited by May 3, 2020, 3:21 AM

        @Perlchamp said in read csv-data and put it in an array:

        .birthdaylist

        there is no birthdaylist class being used (unless u changed the modulename again)

        maybe

        .TD-IMAGE {
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • P Offline
          Perlchamp
          last edited by Perlchamp May 3, 2020, 3:32 AM May 3, 2020, 3:23 AM

          IT WORKS !!, Sam, it WORKS !
          had a wrong image-name. that is UNPARDONABLE !!
          now, this background-image will shown, if two people tzhe same day… problems, problems, problems …
          SOLUTION: these people (same day) should be in ONE cell, separated by < /br > therefor i don’t need a third cell ;-)

          @Perlchamp no images email or text => i would like sending emails (with attached images, too)
          this is the homerun, touchdown and goal !

          S 1 Reply Last reply May 3, 2020, 3:33 AM Reply Quote 0
          • S Offline
            sdetweil @Perlchamp
            last edited by May 3, 2020, 3:33 AM

            @Perlchamp oh by the way TD-IMAGE color is black, on black background!
            my email was in the chat message

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • P Offline
              Perlchamp
              last edited by May 3, 2020, 3:39 AM

              yes black on black, why not ? because of the mirrors lucidity … better safe than sorry ;-)

              1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil
                last edited by May 3, 2020, 3:44 AM

                great progress. smaller more manageable code…

                off to sleep

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • P Offline
                  Perlchamp
                  last edited by May 3, 2020, 3:48 AM

                  bloody nice dreams, sam

                  1 Reply Last reply Reply Quote 0
                  • P Offline
                    Perlchamp
                    last edited by May 3, 2020, 4:41 PM

                    hi sam, for me it’s a milestone :

                        // type: td, id: id of element, className: classname of element
                        // parent: parent of element, value: value
                        createEl : function (type, id, className, parent, value) {
                    	var el= document.createElement(type);
                    	if(id)
                    	    el.id = id;
                    	if(className)
                    	    el.className = className;
                    	if(parent)
                    	    parent.appendChild(el);
                    	if(value)
                    	    el.appendChild(document.createTextNode(value));
                    	return el;
                        },
                        
                        // creates a tableheader with columnnaes
                        createTableHeader: function(parent, className, columnlabels) {
                    	var header = document.createElement("tr");
                    	for(columnName of columnlabels) {
                    	    this.createEl("th", null, className, header, columnName);
                    	}
                    	parent.appendChild(header);
                    	return header;
                        },
                    
                        // creates a tablefooter with columns
                        createTableFooter: function(parent, className, column) {
                    	var footer = document.createElement("tr");
                    	for(colContent of column) {
                    	    this.createEl("td", null, className, footer, colContent);
                    	}
                    	parent.appendChild(footer);
                    	return footer;
                        },
                    
                        // this is the major worker of the module, it provides the 
                        // 	   displayable content for this module
                        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_day_month = moment().format("DD.MM");
                    
                    	    if(Object.keys(this.active_birthdays).length > 0) {
                    
                    		// create table
                    		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper,null)
                    
                    		// create tableheader here
                    		var table_header = this.createTableHeader(table, null, [" "," "]);
                    
                    		// create TBODY section with day names
                    		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table, null);
                    
                    		var day_month_now = moment().format("DD.MM");
                    		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);
                    
                    			// delete leading 0 and month
                    			var bd = "";
                    			if(birthdays_seen[birthday] == undefined) {
                    			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                                 		    birthdays_seen[birthday] = true;
                    			}
                    			let date1 = moment(birthday,'DD.MM').valueOf();
                    			let date2 = moment(now_day_month,'DD.MM').valueOf();
                    			if (date1 < date2) {
                    			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
                    			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
                    			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
                    			}
                    			else {
                    			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
                    			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
                    			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
                    			}
                    			var spacerTR = this.createEl('tr', null, null , tBody, null);
                    			var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
                    			spacerTD.colSpan = "2";
                    		    }
                    		}
                    
                    		// 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;
                    
                        },
                    
                    

                    css-file via email

                    1 Reply Last reply Reply Quote 0
                    • P Offline
                      Perlchamp
                      last edited by Perlchamp May 3, 2020, 4:59 PM May 3, 2020, 4:56 PM

                      the next working step:

                      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);
                      
                      			// delete leading 0 and month
                      			var bd = "";
                      			if(birthdays_seen[birthday] == undefined) {
                      			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                                   		    birthdays_seen[birthday] = true;
                      			}
                      			let entrie = moment(birthday,'DD.MM').valueOf();
                      			let now = moment(now_day_month,'DD.MM').valueOf();
                      			if (entrie < now) {
                      			    if(this.config.dimmEntries) {
                      				var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
                      				var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
                      				var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
                      				var spacerTR = this.createEl('tr', null, null , tBody, null);
                      				var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
                      				spacerTD.colSpan = "2";
                      			    }
                      			    else {
                      			    }
                      			}
                      			else {
                      			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
                      			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
                      			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
                      			    var spacerTR = this.createEl('tr', null, null , tBody, null);
                      			    var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
                      			    spacerTD.colSpan = "2";
                      			}
                      		    }
                      		}
                      

                      now should be the last step:
                      people who are their birthday at the same day in one cell separated by < /br > … that’s (maybe) too difficult for me, but just figuring out …

                      S 1 Reply Last reply May 3, 2020, 6:33 PM Reply Quote 0
                      • 1
                      • 2
                      • 25
                      • 26
                      • 27
                      • 28
                      • 29
                      • 30
                      • 31
                      • 32
                      • 27 / 32
                      27 / 32
                      • First post
                        268/313
                        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