1. Module bundling added to reduce server calls as each file was taking ~440 ms to load on public server.\n2. JavaScript lib files refactored with OOP for use with module bundling.

2024-09-10 19:43:02 +01:00
parent aac01e687f
commit 0c88f161c3
7678 changed files with 778712 additions and 1254 deletions
--- a/templates/components/common/temporary/_overlay_confirm.html
+++ b/templates/components/common/temporary/_overlay_confirm.html
@@ -13,7 +13,9 @@
    </div>
 </div>

-<script>
+<script type="module">
+    import Events from "{{ url_for('static', filename='js/lib/events.js') }}";
+    
    var idOverlayConfirm = "#{{ model.ID_OVERLAY_CONFIRM }}";

    function hookupOverlayConfirm(callbackSuccess) {
@@ -27,13 +29,13 @@
        let selectorButtonCancel = idOverlayConfirm + ' button.' + flagCancel;
        let selectorButtonConfirm = idOverlayConfirm + ' button.' + flagSubmit;

-        initialiseEventHandler(selectorButtonCancel, flagInitialised, function(buttonCancel) {
+        Events.initialiseEventHandler(selectorButtonCancel, flagInitialised, function(buttonCancel) {
            buttonCancel.addEventListener('click', function() {
                let overlay = document.querySelector(idOverlayConfirm);
                overlay.style.visibility = 'hidden';
            });
        });
-        initialiseEventHandler(selectorButtonConfirm, flagInitialised, function(buttonConfirm) {
+        Events.initialiseEventHandler(selectorButtonConfirm, flagInitialised, function(buttonConfirm) {
            buttonConfirm.addEventListener('click', function() {
                let overlay = document.querySelector(idOverlayConfirm);
                let textarea = overlay.querySelector('textarea');
--- a/templates/components/common/temporary/_overlay_error.html
+++ b/templates/components/common/temporary/_overlay_error.html
@@ -9,13 +9,15 @@
    </div>
 </div>

-<script>
+<script type="module">
+    import Events from "{{ url_for('static', filename='js/lib/events.js') }}";
+    
    var idOverlayError = "#{{ model.ID_OVERLAY_ERROR}}";
    function hookupOverlayError() {
        let overlay = document.querySelector(idOverlayError);
        let selectorButtonCancel = idOverlayError + ' button.' + flagCancel;

-        initialiseEventHandler(selectorButtonCancel, flagInitialised, function(buttonCancel) {
+        Events.initialiseEventHandler(selectorButtonCancel, flagInitialised, function(buttonCancel) {
            buttonCancel.onclick = function() {
                overlay.style.visibility = 'hidden';
            };
--- a/templates/layouts/layout.html
+++ b/templates/layouts/layout.html
@@ -35,7 +35,7 @@
    <meta name="yandex-verification" content="4693a824cfda082a" />
    <meta id="{{ model.ID_CSRF_TOKEN }}" name="{{ model.NAME_CSRF_TOKEN }}" content="{{ csrf_token() }}" />

-    <!-- Scripts -->
+    <!-- Scripts 
    <script src="{{ url_for('static', filename='js/lib/common.js') }}"></script>
    <script src="{{ url_for('static', filename='js/lib/constants.js') }}"></script>
    <script src="{{ url_for('static', filename='js/lib/events.js') }}"></script>
@@ -44,6 +44,7 @@
    <script src="{{ url_for('static', filename='js/lib/local_storage.js') }}"></script>
    <script src="{{ url_for('static', filename='js/lib/utils.js') }}"></script>
    <script src="{{ url_for('static', filename='js/lib/validation.js') }}"></script>
+    -->
    
    <script>
        // var attrFor = "{{ model.ATTR_FOR }}";
@@ -191,8 +192,10 @@
    </script>


-    <!-- Stylesheets -->
+    <!-- Stylesheets 
    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet" type="text/css"/>
+    -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/main.css') }}">
 </head>
 <body data-page="{{ model.hash_page_current }}">
 {% set user = model.get_user_session() %}
@@ -315,9 +318,9 @@
    </div>
 </div>

-<!--<script type="module" src="{{ url_for('static', filename='js/pages/base.js') }}"></script>-->
-<script type="module" src="{{ url_for('static', filename='js/app.js') }}"></script>
-
+<!--<script type="module" src="{{ url_for('static', filename='js/pages/base.js') }}"></script>
+<script type="module" src="{{ url_for('static', filename='js/app.js') }}"></script>-->
+<script src="{{ url_for('static', filename='dist/js/main.bundle.js') }}"></script>
 </body>
 </html>

--- a/templates/pages/core/_admin_home.html
+++ b/templates/pages/core/_admin_home.html
@@ -3,10 +3,11 @@
 {% block title %}{{ model.title }}{% endblock %}

 {% block page_body %}
-    <!-- Include Stylesheet -->
+    <!-- Include Stylesheet 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/core.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/core/admin_home.css') }}">
-    
+    -->
+
    <!-- HTML content -->
    <div class="{{ model.FLAG_CARD }} {{ model.FLAG_ROW }}">
        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
@@ -37,10 +38,10 @@
            </div>
    </div>
    
-    <!-- Include JavaScript -->
+    <!-- Include JavaScript 
    <script type="module" src="{{ url_for('static', filename='js/sections/core.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/core/admin_home.js') }}"></script>
-    <!-- <script type="module" src="{{ url_for('static', filename='js/pages/store/base.js') }}"></script> -->
+    <!- <script type="module" src="{{ url_for('static', filename='js/pages/store/base.js') }}"></script> -->
    
    <!--
    <script>
--- a/templates/pages/core/_contact.html
+++ b/templates/pages/core/_contact.html
@@ -3,9 +3,10 @@
 {% block title %}{{ model.title }}{% endblock %}

 {% block page_body %}
-    <!-- Include Stylesheet -->
+    <!-- Include Stylesheet 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/core.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/core/contact.css') }}">
+    -->

    <script src="https://www.google.com/recaptcha/enterprise.js?render=6Lf8Q8cpAAAAAFAawGu4-ma60bvbEixNVTVvRzKe"></script> <!-- reCaptcha Integration -->
    
@@ -86,10 +87,11 @@
        </div>
    </div>
    
-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script type="module" src="{{ url_for('static', filename='js/sections/core.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/core/contact.js') }}"></script>
-
+    -->
+    
    <script>
        var idEmail = "#{{ model.ID_EMAIL }}";
        var idMessage = "#{{ model.ID_MESSAGE }}";
--- a/templates/pages/core/_home.html
+++ b/templates/pages/core/_home.html
@@ -3,9 +3,10 @@
 {% extends 'layouts/layout.html' %}

 {% block page_body %}
-    <!-- Include Stylesheet -->
+    <!-- Include Stylesheet
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/core.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/core/home.css') }}" />
+    -->

    <!-- HTML content -->
    <div>
@@ -14,9 +15,10 @@
        {% include 'components/common/buttons/_buttons_save_cancel.html' %}
    </div>
    
-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script type="module" src="{{ url_for('static', filename='js/sections/core.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/core/home.js') }}"></script>
+    -->
    
    <!--
    <script>
--- a/templates/pages/core/_services.html
+++ b/templates/pages/core/_services.html
@@ -5,10 +5,11 @@
 {% block title %}{{ model.title }}{% endblock %}

 {% block page_body %}
-    <!-- Include Stylesheet -->
+    <!-- Include Stylesheet
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/core.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/core/services.css') }}" />
-
+    -->
+    
    <!-- HTML content -->
    <div class="{{ model.FLAG_CARD }}">
        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
@@ -101,10 +102,11 @@
        </ul>
    </div>
    
-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script type="module" src="{{ url_for('static', filename='js/sections/core.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/core/services.js') }}"></script>
-    
+    -->
+
    <!--
    <script>
        var hashPageCurrent = "{{ model.HASH_PAGE_SERVICES }}";
--- a/templates/pages/legal/_license.html
+++ b/templates/pages/legal/_license.html
@@ -3,10 +3,11 @@
 {% block title %}{{ model.title }}{% endblock %}

 {% block page_body %}
-    <!-- Include Stylesheet -->
+    <!-- Include Stylesheet
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/legal.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/legal/license.css') }}">
-    
+    -->
+
    <!-- HTML content -->
    <div class="{{ model.FLAG_CARD }} {{ model.FLAG_COLUMN }}">
        <p>Copyright &copy; 2024 Precision And Research Technology Systems Limited
@@ -21,10 +22,11 @@
        </p>
    </div>

-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script type="module" src="{{ url_for('static', filename='js/sections/legal.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/legal/license.js') }}"></script>
-
+    -->
+    
    <!--
    <script>
        var hashPageCurrent = "{{ model.HASH_PAGE_LICENSE }}";
--- a/templates/pages/legal/_privacy_notice.html
+++ b/templates/pages/legal/_privacy_notice.html
@@ -3,9 +3,10 @@
 {% block title %}{{ model.title }}{% endblock %}

 {% block page_body %}
-    <!-- Include Stylesheet -->
+    <!-- Include Stylesheet 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/legal.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/legal/privacy_notice.css') }}">
+    -->
    
    <!-- HTML content -->
    <div class="{{ model.FLAG_CARD }} {{ model.FLAG_COLUMN }}">
@@ -80,9 +81,10 @@
        <p>1 May 2024</p>
    </div>

-    <!-- Include JavaScript -->
+    <!-- Include JavaScript 
    <script type="module" src="{{ url_for('static', filename='js/sections/legal.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/legal/privacy_notice.js') }}"></script>
+    -->

    <!--
    <script>
--- a/templates/pages/legal/_retention_schedule.html
+++ b/templates/pages/legal/_retention_schedule.html
@@ -3,9 +3,10 @@
 {% block title %}{{ model.title }}{% endblock %}

 {% block page_body %}
-    <!-- Include Stylesheet -->
+    <!-- Include Stylesheet
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/legal.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/legal/services.css') }}">
+    -->
    
    <!-- HTML content -->
    <div class="{{ model.FLAG_CARD }} {{ model.FLAG_COLUMN }}">
@@ -1946,9 +1947,10 @@
    </table>
 </div>

-    <!-- Include JavaScript -->
+    <!-- Include JavaScript 
    <script type="module" src="{{ url_for('static', filename='js/sections/legal.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/legal/retention_schedule.js') }}"></script>
+    -->

    <!--
    <script>
--- a/templates/pages/store/_basket.html
+++ b/templates/pages/store/_basket.html
@@ -3,10 +3,11 @@
 {% block title %}{{ model.title }}{% endblock %}

 {% block page_body %}
-    <!-- Include Stylesheets -->
+    <!-- Include Stylesheets
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/store.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/store/basket.css') }}">
-    
+    -->
+
    <!-- HTML content -->
    <div class="{{ model.FLAG_CARD }}">
        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
@@ -49,9 +50,10 @@
    {% include 'components/common/temporary/_overlay_address.html' %}

    
-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script src="{{ url_for('routes_store.scripts_section_store') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/store/basket.js') }}"></script>
+    -->
    {% set block_id = 'checkout' %}
    {% include 'layouts/_shared_store.html' %}
    <!--
--- a/templates/pages/store/_checkout_success.html
+++ b/templates/pages/store/_checkout_success.html
@@ -3,9 +3,10 @@
 {% block title %}{{ model.title }}{% endblock %}

 {% block page_body %}
-    <!-- Include Stylesheets -->
+    <!-- Include Stylesheets
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/store.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/store/checkout_success.css') }}">
+    -->
    
    <!-- HTML content -->
    <div class="{{ model.FLAG_CARD }}">
@@ -25,9 +26,10 @@
        </div>
    </div>
    
-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script src="{{ url_for('routes_store.scripts_section_store') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/store/checkout_success.js') }}"></script>
+    -->
    {% set block_id = 'checkout' %}
    {% include 'layouts/_shared_store.html' %}
    <!--
--- a/templates/pages/store/_product_categories.html
+++ b/templates/pages/store/_product_categories.html
@@ -1,8 +1,10 @@
 {% extends 'layouts/layout.html' %}

 {% block page_body %}
+    <!--
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/store.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/store/product_categories.css') }}">
+    -->
    
    <form id="{{ model.ID_FORM_FILTERS }}" class="{{ model.FLAG_FILTER }} {{ model.FLAG_ROW }} {{ model.FLAG_CARD }}" action="{{ url_for('routes_store_product_category.save_category') }}" method="POST"> <!-- {{ model.FLAG_CONTAINER }} -->
        {{ model.form_filters.hidden_tag() }}
@@ -84,10 +86,11 @@
    {% include 'components/common/temporary/_overlay_confirm.html' %}
    {% include 'components/common/temporary/_overlay_error.html' %}

-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script src="{{ url_for('routes_store.scripts_section_store') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/store/product_categories.js') }}"></script>
-    
+    -->
+
    <script>
        // pass arguments from model to JS
        var flagIsNotEmpty = "{{ model.FLAG_IS_NOT_EMPTY }}";
--- a/templates/pages/store/_product_permutations.html
+++ b/templates/pages/store/_product_permutations.html
@@ -4,10 +4,10 @@
    <!--
    { % set product = model.product %}
    { % set permutation = product.get_permutation_selected() %}
-    -->
    <script>console.log("test 1");</script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/store.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/store/product_permutations.css') }}">
+    -->
    
    <!-- HTML content -->
    <form id="{{ model.ID_FORM_FILTERS }}" class="{{ model.FLAG_ROW }} {{ model.FLAG_CARD }}" action="{{ url_for('routes_store_product_permutation.permutation_save') }}" method="POST"> <!-- {{ model.FLAG_CONTAINER }} -->
@@ -119,10 +119,10 @@
    {% include 'components/common/temporary/_overlay_confirm.html' %}
    {% include 'components/common/temporary/_overlay_error.html' %}

-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script src="{{ url_for('routes_store.scripts_section_store') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/store/product_permutations.js') }}"></script>
-
+    -->
    <script>
        // pass arguments from model to JS
        /*
--- a/templates/pages/store/_products.html
+++ b/templates/pages/store/_products.html
@@ -1,8 +1,10 @@
 {% extends 'layouts/layout.html' %}

 {% block page_body %}
+    <!--
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/store.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/store/products.css') }}">
+    -->
    
    <form id="{{ model.ID_FORM_FILTERS }}" class="{{ model.FLAG_FILTER }} {{ model.FLAG_ROW }} {{ model.FLAG_CARD }}" action="{{ url_for('routes_store_product.save_product') }}" method="POST"> <!-- {{ model.FLAG_CONTAINER }} -->
        {{ model.form_filters.hidden_tag() }}
@@ -95,10 +97,11 @@
    {% include 'components/common/temporary/_overlay_confirm.html' %}
    {% include 'components/common/temporary/_overlay_error.html' %}

-    <!-- Include JavaScript -->
+    <!-- Include JavaScript 
    <script src="{{ url_for('routes_store.scripts_section_store') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/store/products.js') }}"></script>
-    
+    -->
+
    <script>
        // pass arguments from model to JS
        var flagIsNotEmpty = "{{ model.FLAG_IS_NOT_EMPTY }}";
--- a/templates/pages/store/_stock_items.html
+++ b/templates/pages/store/_stock_items.html
@@ -1,10 +1,12 @@
 {% extends 'layouts/layout.html' %}

 {% block page_body %}
+    <!--
    <script>console.log("test 1");</script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/store.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/store/stock_items.css') }}">
-    
+    -->
+
    <!-- HTML content -->
    <form id="{{ model.ID_FORM_FILTERS_STOCK }}" class="{{ model.FLAG_ROW }} {{ model.FLAG_CARD }}" action="{{ url_for('routes_store.stock_filter') }}" method="POST"> <!-- {{ model.FLAG_CONTAINER }} -->
        {{ model.form_filters.hidden_tag() }}
@@ -111,10 +113,11 @@
    {% include 'components/common/temporary/_overlay_confirm.html' %}
    {% include 'components/common/temporary/_overlay_error.html' %}

-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script src="{{ url_for('routes_store.scripts_section_store') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/store/stock_items.js') }}"></script>
-
+    -->
+    
    <script>
        // pass arguments from model to JS
        /*
--- a/templates/pages/store/_supplier.html
+++ b/templates/pages/store/_supplier.html
@@ -6,9 +6,10 @@
    {% set supplier = model.supplier %}
    {% set block_id = 'styles' %}
    {% include 'layouts/_shared_store.html' %}
-    
+    <!--
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/store.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/store/supplier.css') }}">
+    -->
    
    <!-- HTML content -->
    <div class="card">
@@ -93,9 +94,10 @@
        </form>
    </div>

-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script src="{{ url_for('routes_store.scripts_section_store') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/store/supplier.js') }}"></script>
+    -->

    <!--
    <script>
--- a/templates/pages/user/_user.html
+++ b/templates/pages/user/_user.html
@@ -3,10 +3,10 @@
 {% extends 'layouts/layout.html' %}

 {% block page_body %}
-    <!-- Include Stylesheet -->
+    <!-- Include Stylesheet
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sections/user.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/user.css') }}" />
-
+    -->
    <!-- HTML content -->
    <div>
        {% set firstname = 'new user' if user.firstname is none else user.firstname %}
@@ -15,9 +15,10 @@
        {% include 'components/common/buttons/_buttons_save_cancel.html' %}
    </div>
    
-    <!-- Include JavaScript -->
+    <!-- Include JavaScript
    <script type="module" src="{{ url_for('static', filename='js/sections/user.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/pages/user.js') }}"></script>
+    -->
    
    <!--
    <script>