Cleanup and modernize JS

allianceauth/fleetactivitytracking/templates/fleetactivitytracking/fatlinkstatisticscorpview.html

@@ -42,6 +42,7 @@
     </div>
 {% endblock content %}
 {% block extra_script %}
-$(document).ready(function(){
+$(document).ready(function () {
-  $("[rel=tooltip]").tooltip();
+    $("[rel=tooltip]").tooltip();
+});
 {% endblock extra_script %}

allianceauth/fleetactivitytracking/templates/fleetactivitytracking/fatlinkstatisticsview.html

@@ -44,6 +44,7 @@
     </div>
 {% endblock content %}
 {% block extra_script %}
-$(document).ready(function(){
+$(document).ready(function () {
-  $("[rel=tooltip]").tooltip();
+    $("[rel=tooltip]").tooltip();
+});
 {% endblock extra_script %}

allianceauth/groupmanagement/templates/groupmanagement/audit.html

@@ -83,7 +83,7 @@
 
 {% block extra_script %}
     $.fn.dataTable.moment = function(format, locale) {
-        var types = $.fn.dataTable.ext.type;
+        let types = $.fn.dataTable.ext.type;
 
         // Add type detection
         types.detect.unshift(function(d) {

allianceauth/optimer/templates/optimer/add.html

@@ -34,17 +34,15 @@
 {% endblock %}
 
 {% block extra_script %}
-
     $('#id_start').datetimepicker({
-    setlocale: '{{ LANGUAGE_CODE }}',
+        setlocale: '{{ LANGUAGE_CODE }}',
-    {% if NIGHT_MODE %}
+        {% if NIGHT_MODE %}
-        theme: 'dark',
+            theme: 'dark',
-    {% else %}
+        {% else %}
-        theme: 'default',
+            theme: 'default',
-    {% endif %}
+        {% endif %}
-    mask: true,
+        mask: true,
-    format: 'Y-m-d H:i',
+        format: 'Y-m-d H:i',
-    minDate: 0
+        minDate: 0
     });
-
 {% endblock extra_script %}

allianceauth/optimer/templates/optimer/management.html

@@ -41,9 +41,10 @@
 
     {% include 'bundles/moment-js.html' with locale=True %}
     <script src="{% static 'js/timers.js' %}"></script>
+
     <script type="application/javascript">
         // Data
-        var timers = [
+        let timers = [
         {% for op in optimer %}
             {
                 'id': {{ op.id }},
@@ -52,67 +53,66 @@
             },
         {% endfor %}
         ];
-    </script>
-    <script type="application/javascript">
-
-        timedUpdate();
-        setAllLocalTimes();
-
-        // Start timed updates
-        setInterval(timedUpdate, 1000);
-
-        function timedUpdate() {
-            updateClock();
-            updateAllTimers();
-        }
-
-        function updateAllTimers () {
-            var l = timers.length;
-            for (var i=0; i < l; ++i) {
-                if (timers[i].expired) continue;
-                updateTimer(timers[i]);
-            }
-        }
 
         /**
          * Update a timer
          * @param timer Timer information
-         * @param timer.start Date of the timer
-         * @param timer.id Id number of the timer
-         * @param timer.expired
          */
-        function updateTimer(timer) {
+        let updateTimer = function (timer) {
             if (timer.start.isAfter(Date.now())) {
-                var duration = moment.duration(timer.start - moment(), 'milliseconds');
+                let duration = moment.duration(timer.start - moment(), 'milliseconds');
+
                 document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
             } else {
                 timer.expired = true;
+
                 document.getElementById("countdown" + timer.id).innerHTML = "";
             }
-        }
+        };
+
+        let updateAllTimers = function () {
+            let l = timers.length;
 
-        /**
-         * Set all local time fields
-         */
-        function setAllLocalTimes() {
-            var l = timers.length;
             for (var i=0; i < l; ++i) {
-                setLocalTime(timers[i]);
+                if (timers[i].expired) continue;
+
+                updateTimer(timers[i]);
             }
-        }
+        };
 
         /**
          * Set the local time info for the timer
          * @param timer Timer information
-         * @param timer.start Date of the timer
-         * @param timer.id Id number of the timer
          */
-        function setLocalTime(timer) {
+        let setLocalTime = function (timer) {
             document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
-        }
+        };
 
-        function updateClock() {
+        /**
+         * Set all local time fields
+         */
+        let setAllLocalTimes = function () {
+            let l = timers.length;
+
+            for (var i=0; i < l; ++i) {
+                setLocalTime(timers[i]);
+            }
+        };
+
+        let updateClock = function () {
             document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
-        }
+        };
+
+        let timedUpdate = function () {
+            updateClock();
+            updateAllTimers();
+        };
+
+        // Set initial values
+        setAllLocalTimes();
+        timedUpdate();
+
+        // Start timed updates
+        setInterval(timedUpdate, 1000);
     </script>
 {% endblock content %}

allianceauth/permissions_tool/templates/permissions_tool/audit.html

@@ -24,7 +24,7 @@
                     </tr>
                 </thead>
                 <tbody>
-                {% for user in permission.users %}                    
+                {% for user in permission.users %}
                     {% include 'permissions_tool/audit_row.html' with type="User" name="Permission granted directlty" %}
                 {% endfor %}
                 {% for group in permission.groups %}
@@ -35,13 +35,13 @@
                 {% for state in permission.states %}
                     {% for profile in state.userprofile_set.all %}
                         {% with profile.user as user %}
-                            {% include 'permissions_tool/audit_row.html' with type="State" name=state%}                            
+                            {% include 'permissions_tool/audit_row.html' with type="State" name=state%}
                         {% endwith %}
                     {% endfor %}
                 {% endfor %}
                 </tbody>
             </table>
-        </div>        
+        </div>
     </div>
 {% endblock content %}
 
@@ -56,15 +56,16 @@
 
 {% block extra_script %}
     $(document).ready(function() {
-        var groupColumn = 0;
+        let groupColumn = 0;
-        var table = $('#tab_permissions_audit').DataTable({
+
+        $('#tab_permissions_audit').DataTable({
             columnDefs: [
                 { "visible": false, "targets": groupColumn }
             ],
             order: [[ groupColumn, 'asc' ], [ 2, 'asc' ] ],
             filterDropDown:
             {
-                columns: [                                       
+                columns: [
                     {
                         idx: 0,
                         title: 'Source'
@@ -73,20 +74,20 @@
                 bootstrap: true
             },
             drawCallback: function ( settings ) {
-                var api = this.api();
+                let api = this.api();
-                var rows = api.rows( {page:'current'} ).nodes();
+                let rows = api.rows( {page:'current'} ).nodes();
-                var last=null;
+                let last = null;
-    
+
                 api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                     if ( last !== group ) {
                         $(rows).eq( i ).before(
                             '<tr class="tr-group"><td colspan="3">' + group + '</td></tr>'
                         );
-    
+
                         last = group;
                     }
                 } );
             }
         } );
     } );
-{% endblock %}
+{% endblock %}

allianceauth/permissions_tool/templates/permissions_tool/overview.html

@@ -9,9 +9,9 @@
     <div class="col-sm-12">
         <h1 class="page-header">{% trans "Permissions Overview" %}</h1>
         <p>
-        {% if request.GET.all != 'yes' %}            
+        {% if request.GET.all != 'yes' %}
             {% blocktrans %}Showing only applied permissions{% endblocktrans %}
-            <a href="{% url 'permissions_tool:overview' %}?all=yes" class="btn btn-primary">{% trans "Show All" %}</a>            
+            <a href="{% url 'permissions_tool:overview' %}?all=yes" class="btn btn-primary">{% trans "Show All" %}</a>
         {% else %}
             {% blocktrans %}Showing all permissions{% endblocktrans %}
             <a href="{% url 'permissions_tool:overview' %}?all=no" class="btn btn-primary">{% trans "Show Applied" %}</a>
@@ -79,7 +79,7 @@
 {% endblock content %}
 
 {% block extra_javascript %}
-    {% include 'bundles/datatables-js.html' %}    
+    {% include 'bundles/datatables-js.html' %}
     <script type="application/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>
 {% endblock %}
 
@@ -89,15 +89,16 @@
 
 {% block extra_script %}
     $(document).ready(function() {
-        var groupColumn = 0;
+        let groupColumn = 0;
-        var table = $('#tab_permissions_overview').DataTable({
+
+        $('#tab_permissions_overview').DataTable({
             columnDefs: [
                 { "visible": false, "targets": groupColumn }
             ],
             order: [[ groupColumn, 'asc' ], [ 1, 'asc' ], [ 2, 'asc' ] ],
             filterDropDown:
             {
-                columns: [                                       
+                columns: [
                     {
                         idx: 0
                     },
@@ -108,20 +109,20 @@
                 bootstrap: true
             },
             drawCallback: function ( settings ) {
-                var api = this.api();
+                let api = this.api();
-                var rows = api.rows( {page:'current'} ).nodes();
+                let rows = api.rows( {page:'current'} ).nodes();
-                var last=null;
+                let last = null;
-    
+
                 api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                     if ( last !== group ) {
                         $(rows).eq( i ).before(
                             '<tr class="tr-group"><td colspan="6">' + group + '</td></tr>'
                         );
-    
+
                         last = group;
                     }
                 } );
             }
         } );
     } );
-{% endblock %}
+{% endblock %}

allianceauth/srp/templates/srp/add.html

@@ -43,17 +43,15 @@
 {% endblock %}
 
 {% block extra_script %}
-
     $('#id_fleet_time').datetimepicker({
-    setlocale: '{{ LANGUAGE_CODE }}',
+        setlocale: '{{ LANGUAGE_CODE }}',
-    {% if NIGHT_MODE %}
+        {% if NIGHT_MODE %}
-        theme: 'dark',
+            theme: 'dark',
-    {% else %}
+        {% else %}
-        theme: 'default',
+            theme: 'default',
-    {% endif %}
+        {% endif %}
-    mask: true,
+        mask: true,
-    format: 'Y-m-d H:i',
+        format: 'Y-m-d H:i',
-    minDate: 0
+        minDate: 0
     });
-
 {% endblock extra_script %}

allianceauth/srp/templates/srp/data.html

@@ -187,7 +187,7 @@ ESC to cancel{% endblocktrans %}"id="blah"></i></th>
     {% include 'bundles/x-editable-js.html' %}
     {% include 'bundles/moment-js.html' %}
     {% include 'bundles/clipboard-js.html' %}
-    
+
     <script>
         var clipboard = new ClipboardJS('.copy-text-fa-icon');
         clipboard.on('success', function (e) {
@@ -206,73 +206,71 @@ ESC to cancel{% endblocktrans %}"id="blah"></i></th>
 {% endblock extra_javascript %}
 
 {% block extra_script %}
-  $(document).ready(function() {
+    $(document).ready(function() {
-      $.fn.editable.defaults.mode = 'inline';
+        $.fn.editable.defaults.mode = 'inline';
-      $.fn.editable.defaults.showbuttons = false;
+        $.fn.editable.defaults.showbuttons = false;
-      $.fn.editable.defaults.highlight = "#AAFF80";
+        $.fn.editable.defaults.highlight = "#AAFF80";
 
+        $.fn.dataTable.moment = function(format, locale) {
+            let types = $.fn.dataTable.ext.type;
 
-      $('.srp').editable({
+            // Add type detection
-          display: function(value, response) {
+            types.detect.unshift(function(d) {
-              return false;
+                return moment(d, format, locale, true).isValid() ?
-          },
+                    'moment-' + format :
-          success: function(response, newValue) {
+                    null;
-              newValue = parseInt(newValue);
+            });
-              newvalue = newValue.toLocaleString() + " ISK";
-              $(this).html(newvalue.bold());
-          },
-          validate: function(value) {
-              if (value === null || value === '') {
-                  return 'Empty values not allowed';
-              }
-          }
-      });
-      $('.srp').on('hidden', function(e, reason){
-              if(reason === 'save' || reason === 'nochange') {
-              var $next = $(this).closest('tr').next().find('.editable');
-              setTimeout(function() {
-                  $next.editable('show');
-              }, 400);
-          }
-     });
-  });
 
-  $(document).ready(function(){
+            // Add sorting method - use an integer for the sorting
-    $("[rel=tooltip]").tooltip({ placement: 'top'});
+            types.order[ 'moment-' + format+'-pre' ] = function(d) {
-  });
+                return moment(d, format, locale, true).unix();
+            };
+        };
+        $.fn.dataTable.moment('YYYY-MMM-D, HH:mm');
 
-  $.fn.dataTable.moment = function(format, locale) {
+        $('.srp').editable({
-    var types = $.fn.dataTable.ext.type;
+            display: function(value, response) {
+                return false;
+            },
+            success: function(response, newValue) {
+                newValue = parseInt(newValue);
+                let newValueOutput = newValue.toLocaleString() + " ISK";
 
-      // Add type detection
+                $(this).html(newValueOutput.bold());
-      types.detect.unshift(function(d) {
+            },
-        return moment(d, format, locale, true).isValid() ?
+            validate: function(value) {
-          'moment-'+format :
+                if (value === null || value === '') {
-          null;
+                    return 'Empty values not allowed';
-      } );
+                }
+            }
+        });
 
-      // Add sorting method - use an integer for the sorting
+        $('.srp').on('hidden', function(e, reason){
-      types.order[ 'moment-'+format+'-pre' ] = function(d) {
+            if(reason === 'save' || reason === 'nochange') {
-        return moment(d, format, locale, true).unix();
+                let $next = $(this).closest('tr').next().find('.editable');
-    };
-  };
 
-  $(document).ready( function(){
+                setTimeout(function() {
-    $.fn.dataTable.moment('YYYY-MMM-D, HH:mm');
+                    $next.editable('show');
+                }, 400);
+            }
+        });
 
-    $('table.srplist').DataTable({
+        $('table.srplist').DataTable({
-      "order": [[ 6, "asc" ]],
+            "order": [[ 6, "asc" ]],
-      "paging": false,
+            "paging": false,
-      "columnDefs": [{
+            "columnDefs": [
-          "targets": [1, 8],
+                {
-          "orderable": false
+                    "targets": [1, 8],
-      },
+                    "orderable": false
-      {
+                },
-          "targets": [4, 5],
+                {
-          "type": "num"
+                    "targets": [4, 5],
-      }]
+                    "type": "num"
+                }
+            ]
+        });
 
+        // tooltip
+        $("[rel=tooltip]").tooltip({ placement: 'top'});
     });
-  });
-
 {% endblock extra_script %}

allianceauth/static/js/refresh_notifications.js

@@ -1,3 +1,5 @@
+/* global notificationUPdateSettings */
+
 /*
     This script refreshed the unread notification count in the top menu
     on a regular basis so to keep the user apprised about newly arrived
@@ -6,70 +8,67 @@
     The refresh rate can be changes via the Django setting NOTIFICATIONS_REFRESH_TIME.
     See documentation for details.
 */
-
 $(function () {
-    var elem = document.getElementById("dataExport");
+    'use strict';
-    var notificationsListViewUrl = elem.getAttribute("data-notificationsListViewUrl");
+
-    var notificationsRefreshTime = elem.getAttribute("data-notificationsRefreshTime");
+    let notificationsListViewUrl = notificationUPdateSettings.notificationsListViewUrl;
-    var userNotificationsCountViewUrl = elem.getAttribute(
+    let notificationsRefreshTime = notificationUPdateSettings.notificationsRefreshTime;
-        "data-userNotificationsCountViewUrl"
+    let userNotificationsCountViewUrl = notificationUPdateSettings.userNotificationsCountViewUrl;
-    );
 
     // update the notification unread count in the top menu
-    function update_notifications() {
+    let updateNotifications = function () {
         $.getJSON(userNotificationsCountViewUrl, function (data, status) {
-            if (status == 'success') {
+            if (status === 'success') {
-                var innerHtml = "";
+                let innerHtml = '';
-                var unread_count = data.unread_count;
+                let unreadCount = data.unread_count;
-                if (unread_count > 0) {
+
+                if (unreadCount > 0) {
                     innerHtml = (
-                        `Notifications <span class="badge">${unread_count}</span>`
+                        `Notifications <span class="badge">${unreadCount}</span>`
-                    )
+                    );
+                } else {
+                    innerHtml = '<i class="far fa-bell"></i>';
                 }
-                else {
+
-                    innerHtml = '<i class="far fa-bell"></i>'
+                $('#menu_item_notifications').html(
-                }
-                $("#menu_item_notifications").html(
                     `<a href="${notificationsListViewUrl}">${innerHtml}</a>`
                 );
-            }
+            } else {
-            else {
                 console.error(
-                    `Failed to load HTMl to render notifications item. Error: `
+                    `Failed to load HTMl to render notifications item. Error: ${xhr.status}': '${xhr.statusText}`
-                        `${xhr.status}': '${xhr.statusText}`
                 );
             }
         });
-    }
+    };
 
-    var myInterval;
+    let myInterval;
 
     // activate automatic refreshing every x seconds
-    function activate_refreshing() {
+    let activateRefreshing = function () {
         if (notificationsRefreshTime > 0) {
             myInterval = setInterval(
-                update_notifications, notificationsRefreshTime * 1000
+                updateNotifications, notificationsRefreshTime * 1000
             );
         }
-    }
+    };
 
     // deactivate automatic refreshing
-    function deactivate_refreshing() {
+    let deactivateRefreshing = function () {
         if ((notificationsRefreshTime > 0) && (typeof myInterval !== 'undefined')) {
-            clearInterval(myInterval)
+            clearInterval(myInterval);
         }
-    }
+    };
 
     // refreshing only happens on active browser tab
     $(document).on({
         'show': function () {
-            activate_refreshing()
+            activateRefreshing();
         },
         'hide': function () {
-            deactivate_refreshing()
+            deactivateRefreshing();
         }
     });
 
     // Initial start of refreshing on script loading
-    activate_refreshing()
+    activateRefreshing();
 });

allianceauth/static/js/timers.js

@@ -1,23 +1,49 @@
+/* global moment */
+
 /**
-* Get a duration string like countdown.js
+ * Get a duration string like countdown.js
-* e.g. "1y 2d 3h 4m 5s"
+ * e.g. "1y 2d 3h 4m 5s"
-* @param duration moment.duration
+ *
-*/
+ * @param duration
-function getDurationString(duration) {
+ * @returns {string}
-    var out = "";
+ */
+let getDurationString = function (duration) {
+    'use strict';
+
+    let out = '';
+
     if (duration.years()) {
         out += duration.years() + 'y ';
     }
+
     if (duration.months()) {
         out += duration.months() + 'm ';
     }
+
     if (duration.days()) {
         out += duration.days() + 'd ';
     }
-    return out + duration.hours() + "h " + duration.minutes() + "m " + duration.seconds() + "s";
-}
 
+    return out + duration.hours() + 'h ' + duration.minutes() + 'm ' + duration.seconds() + 's';
+};
 
-function getCurrentEveTimeString() {
+/**
-    return moment().utc().format('dddd LL HH:mm:ss')
+ * returns the current eve time as a formatted string
-}
+ *
+ * condition:
+ *      only if moment.js is loaded before,
+ *      if not this function returns an empty string to avoid JS errors from happening.
+ *
+ * @returns {string}
+ */
+let getCurrentEveTimeString = function () {
+    'use strict';
+
+    let returnValue = '';
+
+    if (window.moment) {
+        returnValue = moment().utc().format('dddd LL HH:mm:ss');
+    }
+
+    return returnValue;
+};

allianceauth/templates/allianceauth/base.html

@@ -46,19 +46,20 @@
                 </div>
             </div>
         {% endif %}
-        <!-- share data with JS part -->
+
-        <div 
-            id="dataExport"     
-            data-notificationsListViewUrl="{% url 'notifications:list' %}"
-            data-notificationsRefreshTime="{% notifications_refresh_time %}"
-            data-userNotificationsCountViewUrl="{% url 'notifications:user_notifications_count' request.user.pk %}"            
-        >
-        </div>
         {% include 'bundles/bootstrap-js.html' %}
         {% include 'bundles/jquery-visibility-js.html' %}
+
+        <script type="application/javascript">
+            let notificationUPdateSettings = {
+                notificationsListViewUrl: "{% url 'notifications:list' %}",
+                notificationsRefreshTime: "{% notifications_refresh_time %}",
+                userNotificationsCountViewUrl: "{% url 'notifications:user_notifications_count' request.user.pk %}"
+            };
+        </script>
         <script src="{% static 'js/refresh_notifications.js' %}"></script>
-        
+
-        {% block extra_javascript %}            
+        {% block extra_javascript %}
         {% endblock extra_javascript %}
         <script>
             {% block extra_script %}

allianceauth/timerboard/templates/timerboard/view.html

@@ -526,9 +526,7 @@
     {% include 'bundles/moment-js.html' with locale=True %}
     <script src="{% static 'js/timers.js' %}"></script>
     <script type="application/javascript">
-        var locale = "{{ LANGUAGE_CODE }}";
+        let timers = [
-
-        var timers = [
             {% for timer in timers %}
                 {
                     'id': {{ timer.id }},
@@ -545,67 +543,64 @@
             {% endfor %}
         ];
 
-        moment.locale(locale);
+        /**
+         * Update a timer
+         * @param timer Timer information
+         */
+        let updateTimer = function (timer) {
+            if (timer.targetDate.isAfter(Date.now())) {
+                let duration = moment.duration(timer.targetDate - moment(), 'milliseconds');
 
-        // Set initial values
+                document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
-        setAllLocalTimes();
+            } else {
-        timedUpdate();
+                timer.expired = true;
 
-        // Start timed updates
+                document.getElementById("countdown" + timer.id).innerHTML = "";
-        setInterval(timedUpdate, 1000);
+            }
+        };
+
+        let updateAllTimers = function () {
+            let l = timers.length;
+
+            for (var i=0; i < l; ++i) {
+                if (timers[i].expired) continue;
+
+                updateTimer(timers[i]);
+            }
+        };
 
         function timedUpdate() {
             updateClock();
             updateAllTimers();
         }
 
-        function updateAllTimers () {
-            var l = timers.length;
-            for (var i=0; i < l; ++i) {
-                if (timers[i].expired) continue;
-                updateTimer(timers[i]);
-            }
-        }
-
         /**
-         * Update a timer
+         * Set the local time info for the timer
          * @param timer Timer information
-         * @param timer.targetDate Date of the timer
-         * @param timer.id Id number of the timer
-         * @param timer.expired
          */
-        function updateTimer(timer) {
+        let setLocalTime = function (timer) {
-            if (timer.targetDate.isAfter(Date.now())) {
+            document.getElementById("localtime" + timer.id).innerHTML = timer.targetDate.format("ddd @ LT");
-                duration = moment.duration(timer.targetDate - moment(), 'milliseconds');
+        };
-                document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
-            } else {
-                timer.expired = true;
-                document.getElementById("countdown" + timer.id).innerHTML = "";
-            }
-        }
 
         /**
          * Set all local time fields
          */
-        function setAllLocalTimes() {
+        let setAllLocalTimes = function () {
-            var l = timers.length;
+            let l = timers.length;
+
             for (var i=0; i < l; ++i) {
                 setLocalTime(timers[i]);
             }
-        }
+        };
 
-        /**
+        let updateClock = function () {
-         * Set the local time info for the timer
-         * @param timer Timer information
-         * @param timer.targetDate Date of the timer
-         * @param timer.id Id number of the timer
-         */
-        function setLocalTime(timer) {
-            document.getElementById("localtime" + timer.id).innerHTML = timer.targetDate.format("ddd @ LT");
-        }
-
-        function updateClock() {
             document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
-        }
+        };
+        // Set initial values
+        setAllLocalTimes();
+        timedUpdate();
+
+        // Start timed updates
+        setInterval(timedUpdate, 1000);
     </script>
 {% endblock content %}