TMS WEB Core Template: Demo

This repository contains an example of using TMS WEB Core with the AdminLTE 4 (Bootstrap 5) template as a front-end to the TMS XData Template: Demo Data REST API server. This project originated as part of a series of blog posts about using TMS XData and TMS WEB Core with different kinds of templates, the first of which can be found here.

Getting Started

Initially, only a few features have been implemented. Starting with a Login page and a simple dashboard. It is expected that this project will continue to advance in step with the XData project. However, it should be immediately usable, with the ability to login to the XData server, assuming that all the defaults are used in terms of ports, passwords and son on. When the web application starts normally, the login form is displayed.

Project Login Form

NOTE: The project can be configured for multiple icon sources. Font Awesome 6 Pro Duotone icons are shown in this example. While the project supports these as a configuration option, these icons (and the required license) are not included in this project.

Deployment

An optional configuration file can be used to pass the URL for the XData server when deploying this project in a production setting (or anywhere other than the default development environment). At the moment, this is just a JSON file with a single entry. The app looks for it in 'td_configuration.json' in the same folder as the app itself (wherever Project1.html is, for example). This needs to be readable by the app. If there are any access issues, be sure that it is accessible from the browser first (eg: http://localhost/Project1/td_configuration.json). Here's an example of what the file should contain.

{
  "Server": "http://localhost:12345/tms/xdata"
}

Note also that this mechanism can be used to test development client code against something other than the development XData server. For example, the Server value could be pointed at a different test or production server.

Usage Note: Post-Build Command

The Delphi project included in this repository is configured with a post-build command that is used to further customize the html and css files that are generated after this project is built. The command defined in the project file references a script that is outside this repository. It should be updated to reference the script that is included in the PostBuild folder in this repository. This change can be implemented by changing the Project | Options | Build Events | Post-build events | Command entry:

Replace

powershell -ExecutionPolicy Unrestricted -file ..\BuildScripts\PostBuildTemplate.ps1 "$(OUTPUTDIR)"

With

powershell -ExecutionPolicy Unrestricted -file .\BuildScripts\PostBuildTemplate.ps1 "$(OUTPUTDIR)"

This just involves removing a period to reference the script in this project folder rather than a script outside this project folder. The repository was configured this way to allow for personalized build scripts. If you wish to customize this particular build script, simply move (or copy) the BuildScripts folder up one level and leave this command as-is. You can then customize the build script however you like without it being overwritten by the repository.

Key Dependencies

As with any modern web application, other JavaScript libraries/dependencies have been used in this project. Most of the time, this is handled via a CDN link (usually JSDelivr) in the Project.html file. In some cases, for performance or other reasons, they may be included directly.

TMS WEB Core - This is a TMS WEB Core project, after all
AdminLTE 4 - Naturally
Bootstrap - No introduction needed
Tabulator - Fantastic pure JavaScript web data tables
Font Awesome - The very best icons
Material Design Icons - Used throughout Home Assistant
Luxon - For handling date/time conversions

Additional Notes

While this project is currently under active development, feel free to give it a try and post any issues you encounter. Or start a discussion if you would like to help steer the project in a particular direction. Early days yet, so a good time to have your voice heard. As the project unfolds, additional resources will be made available, including platform binaries, more documentation, demos, and so on.

Repository Information

Last Updated at 2023-12-24 05:15:46 UTC
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
CSS                              5           1933             92          26324
Pascal                          11            483            731           2032
HTML                             8            129            198           1215
JavaScript                       3             21            226           1134
Delphi Form                     10              0              0            888
Markdown                         1             18              2             56
YAML                             2              8             12             33
PowerShell                       1             15             26              6
-------------------------------------------------------------------------------
SUM:                            41           2607           1287          31688
-------------------------------------------------------------------------------

Sponsor / Donate / Support

If you find this work interesting, helpful, or valuable, or that it has saved you time, money, or both, please consider directly supporting these efforts financially via GitHub Sponsors or donating via Buy Me a Pizza. Also, check out these other GitHub Repositories that may interest you.

More TMS WEB Core and TMS XData Content

If you're interested in other TMS WEB Core and TMS XData content, follow along on 𝕏 at @WebCoreAndMore, join our 𝕏 Web Core and More Community, or check out the TMS Software Blog.

Duplicate addEventListeners

At the moment, when switching Forms or SubForms, the DOMContentLoaded event is fired to try and get the AdminLTE JS to attach itself to whatever new components are on the page. The downside to this is that it wasn't designed for this. As a result, it re-attaches itself to any elements it finds, including those that it was already attached to previously.

As this attachment mechanism - addEventListener - uses anonymous functions rather than named functions, there isn't really any good way to remove the event handlers short of cloning the node in place. However, doing so removes other event handlers, including our own.

The resolution, for now, is to alter their JS code to add a class to the objects they've attached themselves to (the LTE class) and then only add new event listeners if that class is not present. Hack-ish, certainly. But it works. So we end up with an adminlte-custom.js that we use instead. A new function is inserted, and then the existing functions are replaced with references to this new function just by doing search and replace. Another approach would be to override the addEventListener function itself, but that's not very fun and besides, we only want these specific functions overridden.

 /* CUSTOMIZATION
 **
 ** Calling the DomLoaded event repeatedly to "apply" this JS to whatever has changed in the page
 ** results in multiple anonymous addEventListener instances and thus breaks the functionality.
 ** To get around this, an addCUSTOMEventListener function is used, with a search/replace to find
 ** the occurences of the original addEventListener calls.  In this custom version, we just check
 ** if there is an LTE class.  If it does, we skip the event.  If it doesn't, we add the class
 ** and then issue the normal addEventListener call.
 **
 ** search:  btn.addEventListener(
 ** replace: window.addCUSTOMEventListener(btn,
 **
 ** search:  selSidebar.addEventListener(
 ** replace: window.addCUSTOMEventListener(selSidebar,
 **
 ** search:  window.addCUSTOMEventListener(targetContentWrapper,
 ** replace: window.addCUSTOMEventListener(targetContentWrapper,
 */


window.addCUSTOMEventListener = function(element,a,b,c) {
  if (element.classList.contains('LTE')) {
//    console.log(element+'aEV orverride: blocked');
  } else {
//    console.log(element+'aEV orverride: added');
    element.classList.add('LTE');
    element.addEventListener(a,b,c);
  }
};

500foods / tms-web-core-templatedemo Goto Github PK