• 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.

Help with creating a table

Scheduled Pinned Locked Moved Development
22 Posts 4 Posters 5.3k 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
    Schmaniel
    last edited by Jan 26, 2021, 1:18 PM

    Hey!

    I started to work on a FACEIT module that shows up a few informations about a player.

    The API thing is done, now I need to create a table to visualize the output nicely.

    At first I created it in html/css. It should look something like this: 88aac78e-3dff-46af-9eff-8196ee11157b-grafik.png

    I started now with this code: https://pastebin.com/jK2jGmjA (only for the thead), but I think it’s too complicated.
    Do you have any ideas, how I can improve it?

    1 Reply Last reply Reply Quote 0
    • J Offline
      Jalibu Module Developer
      last edited by Jalibu Jan 26, 2021, 1:32 PM Jan 26, 2021, 1:30 PM

      @Schmaniel said in Help with creating a table:

      https://pastebin.com/jK2jGmjA

      You could either use the nunjucks template engine, which is baked in the magic mirror core or you could use javascript template strings:

      let markup = `
      <table>
        <tr>
          <td>Matches</td>
          <td>${numMatches}</td>
        </tr>
      </table>
      `
      wrapper.innerHTML = markup
      
      1 Reply Last reply Reply Quote 0
      • S Offline
        Schmaniel
        last edited by Jan 26, 2021, 3:13 PM

        uuh, that worked pretty well, thank you!

        Now I’m stuck with the size of the module…

        0a033cb9-b01a-4428-aaa4-6d1462066cd6-grafik.png

        S 1 Reply Last reply Jan 26, 2021, 3:18 PM Reply Quote 0
        • S Offline
          sdetweil @Schmaniel
          last edited by sdetweil Jan 26, 2021, 3:19 PM Jan 26, 2021, 3:18 PM

          @Schmaniel welcome to the fun. 900,000 details to consider. size color, font … css

          https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1611671889049

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          S 1 Reply Last reply Jan 26, 2021, 5:16 PM Reply Quote 2
          • S Offline
            Schmaniel @sdetweil
            last edited by Jan 26, 2021, 5:16 PM

            @sdetweil said in Help with creating a table:

            welcome to the fun.

            you misspelt nightmare…
            Thanks for your help!

            S 1 Reply Last reply Jan 26, 2021, 6:08 PM Reply Quote 1
            • S Offline
              sdetweil @Schmaniel
              last edited by Jan 26, 2021, 6:08 PM

              @Schmaniel it gives u an appreciation for the art of good user experience web pages

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • S Offline
                Schmaniel
                last edited by Jan 27, 2021, 10:20 AM

                Everytime my module do an API request to refresh the data, the table is disappearing for a second or two, this shouldn’t be normal, right?

                S 1 Reply Last reply Jan 27, 2021, 12:38 PM Reply Quote 0
                • S Offline
                  sdetweil @Schmaniel
                  last edited by sdetweil Jan 27, 2021, 12:55 PM Jan 27, 2021, 12:38 PM

                  @Schmaniel u get new data, then say, this.updateDom(how-fast)

                  then mm calls your getDom() routine to get the new content to display

                  so, what is the number u pass to updateDom()

                  0 means immediately
                  2000 means transition new content in 2 seconds

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  S 1 Reply Last reply Jan 27, 2021, 1:03 PM Reply Quote 0
                  • S Offline
                    Schmaniel @sdetweil
                    last edited by Jan 27, 2021, 1:03 PM

                    @sdetweil thats the code I got:

                        start: function() {
                            var self = this;
                            setInterval(function() {
                                self.updateDom(1000);
                            }, 60000);
                        },
                    

                    So as I understand now it updates every minute (60000) and it needs 1 second (1000) to update?
                    Should I change the 1000 to 0, so it updates immediately?

                    S 1 Reply Last reply Jan 27, 2021, 1:14 PM Reply Quote 0
                    • S Offline
                      sdetweil @Schmaniel
                      last edited by Jan 27, 2021, 1:14 PM

                      @Schmaniel yes, 0.

                      doesnt NEED 1 second. should TAKE 1 second

                      so.u slowed it down

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      S 1 Reply Last reply Jan 27, 2021, 1:15 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 1 / 3
                      1 / 3
                      • First post
                        1/22
                        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