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.

    Module shows no text.

    Scheduled Pinned Locked Moved Development
    6 Posts 3 Posters 1.3k Views 3 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.
    • K Offline
      k-0
      last edited by

      Hi everybody! :upside-down_face:

      I tried to write a module for the first time. It was supposed to show the menu including the prices of the canteen at our university, but for some reason I don’t get an output. I tried to run the logic and a test module with „hello world“ and both worked. I attached to this message my code and I hope that someone can help me out with this issue.

      Here ist my code:

      Module.register("MMM-Test", {
        defaults: {},
        start: function () {
      	this.count = 0
        	var timer = setInterval(()=>{
          		this.updateDom()
          		this.count++
        		}, 30000) // 1000 = 1s
      	},
        getDom: function() {
          var element = document.createElement("div")
        element.className = "myContent"
          var subElement = document.createElement('table');
          var tr = document.createElement('tr');
          var td1 = document.createElement('td');
          var td2 = document.createElement('td');
          var request = require('request');
          var text1;
          var text2;
          var heute = new Date().toISOString().substr(0,10);
          var cnt = 0;
       request({
          url: 'https://openmensa.org/api/v2/canteens/838/days/'+heute+'/meals',
          json: true
       }, function(error, response, body) {
              element.innerHTML = ('\nCAFETERIA EAH am ' +  heute.substring(8,10)+ '.'+heute.substring(5,7) +'.'+heute.substring(0,4)+':');
      	if (body.length < 1){
      		text1 = document.createTextNode('Heute geschlossen!');
      	}
      	else {
      	  while (body.length > cnt) {
      		text1 = document.createTextNode((body[cnt].name));
      		text2 = document.createTextNode(body[cnt++].prices.employees.toFixed(2) +' €');
      		}
      	}
      });
          td1.appendChild(text1);
          td2.appendChild(text2);
          tr.appendChild(td1);
          tr.appendChild(td2);
          subElement.appendChild(tr);
          subElement.id = "COUNT"
          element.appendChild(subElement)
      return element
      },
        notificationReceived: function() {},
        socketNotificationReceived: function() {},
      })
      
      
      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @k-0
        last edited by sdetweil

        @k-0 request is an async call, it will return immediately, but the callback function will not happen until a LONG time after the getdom() function returns…

        you need to do this someplace else (on a timer maybe)…

        and when the request returns, then save the data and signal mm with this.updateDom() to indicate new data is ready for viewing… MM will then call your getDom() routine…

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • K Offline
          k-0
          last edited by k-0

          Can you (or someone else) give me an example? I have no experience with async programming.
          I tried to solve this problem with setTimeout(function() { mycode }, 6000) , but it doesn’t work.

          ? 1 Reply Last reply Reply Quote 0
          • ? Offline
            A Former User @k-0
            last edited by

            @k-0
            Try this;

            Module.register("MMM-Test", {
              defaults: {},
              start: function () {
                this.count = 0
                this.timer = null
              },
            
              getContent: function() {
                var heute = new Date().toISOString().substr(0,10);
                var cnt = 0;
                var url = 'https://openmensa.org/api/v2/canteens/838/days/' + heute + '/meals'
                fetch(url, {mode:"cors"})
                .then((response) => {
                  console.log("Response fetched.")
                  return response.text();
                })
                .then((text) => {
                  this.parseContent(text)
                })
                .catch((error) => {
                  console.log('Error:', error)
                })
            
                this.timer = setTimeout(()=>{
                  this.getContent()
                }, 30000)
              },
            
              parseContent: function(text) {
                var dom = document.getElementById("TEST")
                dom.innerHTML = ""
                var data = JSON.parse(text)
                for (let i = 0; i < data.length; i++) {
                  var item = data[i]
                  var elem = document.createElement("div")
                  elem.innerHTML = `${item.category} - ${item.name}`
                  dom.appendChild(elem)
                }
              },
            
              notificationReceived: function(noti, payload, sender) {
                if (noti == "DOM_OBJECTS_CREATED") {
                  this.getContent()
                }
              },
            
              getDom: function() {
                var dom = document.createElement("div")
                dom.id = "TEST"
                return dom
              }
            })
            
            
            S 1 Reply Last reply Reply Quote 0
            • S Away
              sdetweil @Guest
              last edited by

              @Sean doable, but sloppy. Supposed to call updatedDom(), and let mm handle the actual update.

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              ? 1 Reply Last reply Reply Quote 0
              • ? Offline
                A Former User @sdetweil
                last edited by

                @sdetweil
                Yes, you’re right. it was just an example. Anyway, it can be done like this;

                parseContent: function(text) {
                    this.lastPatched = JSON.parse(text)
                    this.updateDom()
                },
                
                getDom: function() {
                    var dom = document.createElement("div")
                    dom.id = "TEST"
                    if (this.lastPatched) {
                      ... // draw patched data...
                    }
                    return dom
                }
                
                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • 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