eduardogsilva.routerfleet/templates/backup/compare_backups.html

{% extends 'base.html' %}

{% block page_custom_head %}
    <link rel="stylesheet" type="text/css" href="/static/plugins/diff2html/diff2html.min.css"/>
    <script type="text/javascript" src="/static/plugins/diff2html/diff2html.min.js"></script>

    <style>
        .d2h-file-list-wrapper {
            display: none;
        }

        .d2h-file-header {
            display: none;
        }
    </style>

{% endblock %}

{% block content %}

    <div class='row'>
        <div class='col-xl-12'>
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">

                        <a href="/router/details/?uuid={{ backup1.router.uuid }}">{{ backup1.router }}</a> -
                        Comparing backup:
                        <a href="/backup/backup_details/?uuid={{ backup1.uuid }}"
                           title="{{ backup1.backup_text_hash }}">
                            {% if backup1.finish_time %}{{ backup1.finish_time }}{% else %}
                                {{ backup1.created }}{% endif %}
                        </a>
                        with:
                        <a href="/backup/backup_details/?uuid={{ backup2.uuid }}"
                           title="{{ backup2.backup_text_hash }}">
                            {% if backup2.finish_time %}{{ backup2.finish_time }}{% else %}
                                {{ backup2.created }}{% endif %}
                        </a>

                    </h3>
                </div>
                <div class="card-body row">
                    <div class="col-lg-12">
                        <button class="btn btn-outline-primary" onclick="renderDiff('side-by-side')">Side by Side
                        </button>
                        <button class="btn btn-outline-primary" onclick="renderDiff('inline')">Inline</button>
                        <a class="btn btn-outline-primary"
                           href="?uuid={{ backup1.uuid }}&compare_uuid={{ backup2.uuid }}">Diff only</a>
                        <a class="btn btn-outline-primary"
                           href="?uuid={{ backup1.uuid }}&compare_uuid={{ backup2.uuid }}&display=all">Complete file</a>
                        <div id="diff-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block custom_page_scripts %}
    <script type="text/javascript">
        var diffString = `{{ diff_str|safe }}`;

        function renderDiff(viewType) {
            var targetElement = document.getElementById('diff-container');
            var processedDiffString = diffString.split('\n').filter(line => {
                return !line.startsWith('--- a/') && !line.startsWith('+++ b/');
            }).join('\n');
            var configuration = {
                inputFormat: 'diff',
                showFiles: false,
                matching: 'lines',
                outputFormat: viewType,
            };

            var diffHtml = Diff2Html.html(processedDiffString, configuration);
            targetElement.innerHTML = diffHtml;
        }

        //renderDiff('inline');
        renderDiff('side-by-side');
    </script>




{% endblock %}