Recently I installed DUPLICATI to make my personal backups. I created around 7 tasks, I mean Jobs Configurations.

Duplicati has a GUI (Graphical User Interface) web based and in the home it reports the task list.

There is no option to sort the task list. I googled for a solution but I didnt find any simple way.

The official task list is orded by created.

Here my solution to make the task list draggable.

 GOAL

JAVASCRIPT CODE

Here the following javascript code to implement the SortableJS plugin. It allow to change the order of tasks as shown in the above animated gif.

Edit the duplicati home page file index.html:

• Windows 10
  "C:\Program Files\Duplicati 2\webroot\ngax\index.html"
• Linux
  "/usr/lib/duplicati/webroot/ngax/index.html"

Find the html closed tag </head>. and paste before it

    <!-- [ QooL Drag to Sort using SortableJS ] [ START ] -->    
    <style>
        .task {
            cursor: move;
            padding: 12px;
        }
        
        .placeHolder {
            box-shadow: 0 0 4px 2px #6699f6 !important;
            box-shadow: 0 0 3pt 2pt #6699f6 !important;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        // - When dom is loaded and ready
        $(document).ready(function() {
            QooLTaskExists();
        });
        // - When URL change
        $(window).on('hashchange', function(e) {
            QooLTaskExists();
        });
        // - Check if task class exists
        function QooLTaskExists() {
            var checkExist = setInterval(function() {
                if ($('.task').length) {
                    QooLDrag();
                    clearInterval(checkExist);
                }
            }, 400); // check every 1000ms...
        }
        // - Drag
        function QooLDrag() {
            var elements = document.getElementsByClassName('tasklist');
            var el = elements[0];
            Sortable.create(el, {
                group: "tasklist",
                store: {
                    /**
                     * Get the order of elements. Called once during initialization.
                     * @param   {Sortable}  sortable
                     * @returns {Array}
                     */
                    get: function(sortable) {
                        var order = localStorage.getItem(sortable.options.group.name);
                        return order ? order.split('|') : [];
                    },
                    /**
                     * Save the order of elements. Called onEnd (when the item is dropped).
                     * @param {Sortable}  sortable
                     */
                    set: function(sortable) {
                        var order = sortable.toArray();
                        localStorage.setItem(sortable.options.group.name, order.join('|'));
                    }
                },
                ghostClass: "placeHolder",
                swapThreshold: 0.20,
            })
        }
    </script>
    <!-- [ QooL Drag to Sort using SortableJS ] [ END ] -->

BUG AND/OR LIMIT KNOWN

When Duplicati show a notification page will be updated and order will come arrival. To get back your favorite order just reload the page pressing F5 or in the browser icon.

I am working to manage the task list reloaded when a notification is shown. Using the "modern"  Javascript MutationObserver() the page is reloaded but the only way to sort atm is reload the page with location.reload()