I got sucked up into a magic mirror! (and need some help)

E3V3A

Alright! I’m about ready to throw in the towel! I’ve now been looking to do this, what some developers might think is trivial, and just can’t get anything to work, for several days.

As a first step in my project, I made a nice demo table using the Tabulator library, but for some reason I am not able to get it into my MMM JS module. As soon as I think I’m starting to understand something I’m bombed out by weird errors!

For example, I installed the jquery, jquery-ui and tabulator libraries with

npm install xxxx --save

as instructed on those pages. That means that I have the node_modules directory in my MMM directory.

Now, trivially trying to import the various JS and CSS library files fails in the browser with:

The resource from ... node_modules ... was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

Here you can find my Tabulator MMM demo called MMM-Tabulator. In that repo you will find a nicely working HTML/JS file: demo.html.

How can I get that to work in the MMM-Tabulator.js ?

E3V3A

Anyone can give some hints?

raywo

@E3V3A I think your solution may be overly complicated. Why do you need JQuery?

You can have a look at my recent module MMM-PublicTransportHafas which does exactly what you described:

has a multicolumn (not) coloured table
updates every so and so minutes (user configurable)
uses plain js to generate the table
uses another api to request JSON-data to populate the table

Maybe this is a good starting point for you.
Can you share your code you have?

E3V3A

I’ve solved one of the problems with the blocked due to MIME type mismatch error above, in this thread. Please look at that answer to import your external jquery related scripts.

E3V3A

@raywo

Your MMM look very nice and the code is indeed very clean, although quite different from what I’ve seen so far. However, I’m looking at this as an exercise, since it’s my first Module.

So yes, using jquery + add-ons are definitely overkill, but has not yet been done before AFAICT. As you can see, in the demo.html, it makes doing fantastic tables using JSON a super breeze (obviously at the cost of external code and processing bloat). So since I hate making DOM from JS, I rather prefer using tools available, even if it means all this extra work and hair-pulling.

I’ll soon update the repo code in the signature, once I get the table up.

raywo

@E3V3A Thank you! It was indeed my goal to write more readable code. Oftentimes javascript code is a mess and I thought I can do better.

I’ve had a look at your code. It’s quite nice too. But of course it can be improved. ;)

Maybe you should consider putting the methods processData, getData and scheduleUpdate in another class or at least in the node_helper.js file which is meant for exactly this purpose.

E3V3A

@raywo Hi Thank you fo r taking your time to look at this. I have now updated the code.
It runs and I created a new loadTabulate function, that is supposed to do exactly the same as in the demo.html file…it returns, but nothing is displayed. I don’t know how to debug this, since there are no errors.

Perhaps, I just doing this Tabulator inclusion all wrong. I have no idea how to proceed at this point.

raywo

@E3V3A Your code looks nicer this way. Well done!

What do you want to do next? Try to describe the goal. Maybe you should open an issue in GitHub where you describe what you want to do next. That way you will not forget what you wanted to achieve and others (like me) can see what you’re up to.

BTW: I left some comments on your code on GitHub.

E3V3A

@raywo Great! Thanks! I just answered…

What’s next? Well, the table never get shown, so fixing that is next.
Once all this demo works, it’s time to put it all into a module that is actually doing something.

raywo

@E3V3A I have had a look at your code. I’ve opened a pull request. Have look!