MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. Perlchamp
    3. Posts
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 6
    • Posts 171
    • Groups 0

    Posts

    Recent Best Controversial
    • RE: read csv-data and put it in an array

      hi sam,
      right row 2 cols day name + age < br > … < br > name+age < br >
      the image below displays that:
      image

      look at my code, it’s all implemated but not the users in one cell :

          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
      		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;
      			}
      
      			if (this.compareDate(now,birthday,"DD.MM") === 1) {
      			    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";
      			}
      		    }
      		}
      
      		// 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;
      
          },
      
      posted in Utilities
      PerlchampP
      Perlchamp
    • RE: read csv-data and put it in an array

      i’m a step foward (did write two functions for smarter code) :

         // 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;
          },
          
          // compares two dates, requires moment.js :
          // output "1"  : date1 > date2
          // output "-1" : date1 < date2
          // output "0"  : fault
          compareDate: function(now, entrie, format) {
      	let date_1 = moment(now,format).valueOf();
      	let date_2 = moment(entrie,format).valueOf();
      	if (date_1 > date_2) {
      	    return 1;
      	}
      	else if (date_1 < date_2) {
      	    return -1;
      	}
      	else {
      	    return 0;
      	}
          }, 
      

      the lastone is used here:

      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;
      			}
      
      			if (this.compareDate(now,birthday,"DD.MM") === 1) {
      			    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";
      			}
      		    }
      		}
      

      it works fine for me :-). for the last step (people with the same birthday in one cell, separeted via < /br >) i have momently no ideas…

      posted in Utilities
      PerlchampP
      Perlchamp
    • RE: read csv-data and put it in an array

      ok, doesn’t matter. enjoy your meal with your family.

      posted in Utilities
      PerlchampP
      Perlchamp
    • RE: read csv-data and put it in an array

      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 …

      posted in Utilities
      PerlchampP
      Perlchamp
    • RE: read csv-data and put it in an array

      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

      posted in Utilities
      PerlchampP
      Perlchamp
    • RE: read csv-data and put it in an array

      bloody nice dreams, sam

      posted in Utilities
      PerlchampP
      Perlchamp
    • RE: read csv-data and put it in an array

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

      posted in Utilities
      PerlchampP
      Perlchamp
    • RE: read csv-data and put it in an array

      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 !

      posted in Utilities
      PerlchampP
      Perlchamp
    • RE: read csv-data and put it in an array
      .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;
      }
      
      posted in Utilities
      PerlchampP
      Perlchamp
    • RE: read csv-data and put it in an array

      back again. WITHOUT a class reference (third element = null) i see the days.
      WITH class-reference (“TD-IMAGE”) i see NO days.
      the rest is working very good, thank you for that :-)

      posted in Utilities
      PerlchampP
      Perlchamp
    • 1
    • 2
    • 3
    • 4
    • 5
    • 17
    • 18
    • 3 / 18