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.

    Develop module with API

    Scheduled Pinned Locked Moved Development
    42 Posts 6 Posters 14.7k Views 6 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.
    • ? Offline
      A Former User @htilburgs
      last edited by A Former User

      @htilburgs
      Well, I don’t know what exactly you’ve tried, so difficult to tell what was wrong.
      But,
      You’ve already gotten timings from response of API in node_helper.js, and transfered it to your main module.

      var result = JSON.parse(body).data.timings;   
      

      So your this.MPT might have this object structure;

      {
            "Fajr":"04:06",
            "Sunrise":"05:35",
            "Dhuhr":"11:39",
            ...
      }
      

      So, All you need is just refer it like this.MPT.Fajr.

      1 Reply Last reply Reply Quote 0
      • htilburgsH Offline
        htilburgs
        last edited by

        @Sean,
        Thank you for explaining and pointing me out.
        I understand what was the issue. I’ve cleaned up the code and removed the caroussel part (and unneeded variables), because I don’t use that.

        Added the possibility for showing or not showing some items.
        Up to the next part… HTML Markup

        (still trying to learn JS, but not afraid to ask) ☺

        1 Reply Last reply Reply Quote 0
        • htilburgsH Offline
          htilburgs
          last edited by

          Strugling with formatting. When I use the basic code, I got the result I like but it’s not displayed nice. I like to have 3 columns.

          		var MPT = this.MPT;
          		
          		// Creating the div's for your data items
          		var top = document.createElement("div");
          		top.classList.add("list-row");
          
          		// Fajr from data
          		var mptFajr = document.createElement("div");
          		mptFajr.classList.add("small", "bright", "Fajr");
          		mptFajr.innerHTML = "Fajr : " + MPT.Fajr + " الفجر";
          		wrapper.appendChild(mptFajr);			
          			
          		// Sunrise from data
          		if (this.config.showSunrise != false) {
          		    var mptSunrise = document.createElement("div");
          		    mptSunrise.classList.add("small", "bright", "Sunrise");
          		    mptSunrise.innerHTML = "Sunrise : " + MPT.Sunrise + " شروق الشمس";
          		    wrapper.appendChild(mptSunrise);
          		}
          		// Dhuhr from data
          		var mptDhuhr = document.createElement("div");
          		mptDhuhr.classList.add("small", "bright", "Dhuhr");
          		mptDhuhr.innerHTML = "Duhr : " + MPT.Dhuhr + " الظهر";
          		wrapper.appendChild(mptDhuhr);
          
          		// Asr from data
          		var mptAsr = document.createElement("div");
          		mptAsr.classList.add("small", "bright", "Asr");
          		mptAsr.innerHTML = "Asr : " + MPT.Asr + " العصر";
          		wrapper.appendChild(mptAsr);
          			
          		// Sunset from data
          		if (this.config.showSunset != false) {
          		    var mptSunset = document.createElement("div");
          		    mptSunset.classList.add("small", "bright", "Sunset");
          		    mptSunset.innerHTML = "Sunset : " + MPT.Sunset + " غروب الشمس";
          		    wrapper.appendChild(mptSunset);
          		}
          			
          		// Maghrib from data
          		var mptMaghrib = document.createElement("div");
          		mptMaghrib.classList.add("small", "bright", "Maghrib");
          		mptMaghrib.innerHTML = "Maghrib : " + MPT.Maghrib + " المغرب";
          		wrapper.appendChild(mptMaghrib);
          		
          		// Isha from data
          		var mptIsha = document.createElement("div");
          		mptIsha.classList.add("small", "bright", "Isha");
          		mptIsha.innerHTML = "Isha : " + MPT.Isha + " العشاء";
          		wrapper.appendChild(mptIsha);
          			
          		// Midnight from data
          		if (this.config.showMidnight != false) {
          		    var mptMidnight = document.createElement("div");
          		    mptMidnight.classList.add("small", "bright", "Midnight");
          		    mptMidnigh
          

          alt text

          Now I trying for several hours to figure out how to create table, columns, rows…
          I’ve changed the code part to

          		var MPT = this.MPT;
          
          		var logs = document.createElement("table");
          		var callWrapper = document.createElement("tr");
          		callWrapper.classList.add("small");
          		
          		// Fajr
          		var FajrTextCell = document.createElement("td");
          		FajrTextCell.className.add = "xsmall bright fajrtext";
          		FajrTextCell.innerHTML = "Fajr";
          		callWrapper.appendChild(FajrTextCell);
          		
          		var FajrTimeCell = document.createElement("td");
          		FajrTimeCell.className = "xsmall bright fajrtime";
          		FajrTimeCell.innerHTML = MPT.Fajr;
          		callWrapper.appendChild(FajrTimeCell);
          		
          		var FajrArabCell = document.createElement("td");
          		FajrArabCell.className = "xsmall bright fajrarab";
          		FajrArabCell.innerHTML = "الفجر";
          		callWrapper.appendChild(FajrArabCell);
          
          		logs.appendChild(callWrapper);
          		wrapper.appendChild(logs);
          		return wrapper;
          

          The result for 1 item is nice

          alt text

          But when I repeat this for the other items, no rows are created and everything is on the same row.

          		var MPT = this.MPT;
          
          //Table Test
          
          		var logs = document.createElement("table");
          		var callWrapper = document.createElement("tr");
          		callWrapper.classList.add("small");
          		
          		// Fajr
          		var FajrTextCell = document.createElement("td");
          		FajrTextCell.className.add = "xsmall bright fajrtext";
          		FajrTextCell.innerHTML = "Fajr";
          		callWrapper.appendChild(FajrTextCell);
          		
          		var FajrTimeCell = document.createElement("td");
          		FajrTimeCell.className = "xsmall bright fajrtime";
          		FajrTimeCell.innerHTML = MPT.Fajr;
          		callWrapper.appendChild(FajrTimeCell);
          		
          		var FajrArabCell = document.createElement("td");
          		FajrArabCell.className = "xsmall bright fajrarab";
          		FajrArabCell.innerHTML = "الفجر";
          		callWrapper.appendChild(FajrArabCell);
          		
          		// Sunrise
          		var SunriseTextCell = document.createElement("td");
          		SunriseTextCell.className.add = "xsmall bright sunrisetext";
          		SunriseTextCell.innerHTML = "Sunrise";
          		callWrapper.appendChild(FajrTextCell);
          		
          		var SunriseTimeCell = document.createElement("td");
          		SunriseTimeCell.className = "xsmall bright fajrtime";
          		SunriseTimeCell.innerHTML = MPT.Sunrise;
          		callWrapper.appendChild(SunriseTimeCell);
          		
          		var SunriseArabCell = document.createElement("td");
          		SunriseArabCell.className = "xsmall bright sunrisearab";
          		SunriseArabCell.innerHTML = "شروق الشمس";
          		callWrapper.appendChild(SunriseArabCell);		
          
          		logs.appendChild(callWrapper);
          		wrapper.appendChild(logs);
          		return wrapper;
          

          alt text

          Any help to get me on the right track again?

          (still trying to learn JS, but not afraid to ask) ☺

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

            @htilburgs
            Insert “tr” element after each row.

            1 Reply Last reply Reply Quote 0
            • htilburgsH Offline
              htilburgs
              last edited by

              Don’t I do this with this?

              var callWrapper = document.createElement("tr");
              callWrapper.appendChild(FajrTextCell);
              

              (still trying to learn JS, but not afraid to ask) ☺

              S ? 2 Replies Last reply Reply Quote 0
              • S Offline
                sdetweil @htilburgs
                last edited by

                @htilburgs yes, for each row, and the columns added to the row

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                htilburgsH 1 Reply Last reply Reply Quote 0
                • htilburgsH Offline
                  htilburgs @sdetweil
                  last edited by

                  @sdetweil I don’t understand what you mean.

                  (still trying to learn JS, but not afraid to ask) ☺

                  S 1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @htilburgs
                    last edited by

                    @htilburgs make a table with HTML.

                    tr have to be added to table for each row
                    And td need to be added for each tr

                    Right? Exactly the same using code

                    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 @htilburgs
                      last edited by

                      @htilburgs
                      https://www.w3schools.com/jsref/dom_obj_table.asp
                      This might be help. Read following articles about table on that site.

                      1 Reply Last reply Reply Quote 0
                      • htilburgsH Offline
                        htilburgs
                        last edited by htilburgs

                        @Sean @sdetweil I finaly figured it out! Thanx for the support and pointing me in the correct direction. See the result:

                        alt text

                        		var MPT = this.MPT;
                        
                        		// creating the tablerows
                        		// Fajr
                        		var FajrRow = document.createElement("tr")
                        		FajrRow.className = "small fajr-row";
                        		
                        		var FajrTextCell = document.createElement("td");
                        		FajrTextCell.innerHTML = "Fajr";
                        		FajrRow.appendChild(FajrTextCell);
                        		table.appendChild(FajrRow);
                        		
                        		var FajrTimeCell = document.createElement("td");
                        		FajrTimeCell.className = "bright";
                        		FajrTimeCell.innerHTML = MPT.Fajr;
                        		FajrRow.appendChild(FajrTimeCell);
                        		table.appendChild(FajrRow);
                        		
                        		var FajrArabCell = document.createElement("td");
                        		FajrArabCell.innerHTML = "الفجر";
                        		FajrRow.appendChild(FajrArabCell);
                        		table.appendChild(FajrRow);
                        ......
                        }		
                        		return table;	
                        

                        (still trying to learn JS, but not afraid to ask) ☺

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 2 / 5
                        • 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