iDRAC_Info/backend/templates/scp_diff.html

{% extends "base.html" %}

{% block title %}설정 파일 비교: {{ file1 }} vs {{ file2 }}{% endblock %}

{% block extra_css %}
<!-- Monaco Diff Editor Styles -->
<style>
    .diff-page-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 140px);
        min-height: 600px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .diff-toolbar {
        background-color: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 0.75rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .diff-files {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        font-weight: 600;
        color: #334155;
    }

    .file-badge {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.75rem;
        background: #fff;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font-size: 0.9rem;
    }

    .diff-arrow {
        color: #94a3b8;
        font-size: 1.2rem;
    }

    #monaco-diff-root {
        flex: 1;
        width: 100%;
        height: 100%;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4 h-100">
    <!-- Breadcrumb -->
    <div class="mb-3">
        <a href="{{ url_for('xml.xml_management') }}" class="text-decoration-none text-muted small fw-bold">
            <i class="bi bi-arrow-left me-1"></i>목록으로 돌아가기
        </a>
    </div>

    <div class="diff-page-container">
        <!-- Toolbar -->
        <div class="diff-toolbar">
            <div class="diff-files">
                <div class="file-badge text-danger border-danger-subtle bg-danger-subtle">
                    <i class="bi bi-file-earmark-minus"></i>
                    <span>{{ file1 }}</span> <!-- Original -->
                </div>
                <i class="bi bi-arrow-right diff-arrow"></i>
                <div class="file-badge text-success border-success-subtle bg-success-subtle">
                    <i class="bi bi-file-earmark-plus"></i>
                    <span>{{ file2 }}</span> <!-- Modified -->
                </div>
            </div>

            <div class="btn-group btn-group-sm">
                <button class="btn btn-outline-secondary" onclick="toggleInlineDiff()" id="viewToggleBtn">
                    <i class="bi bi-layout-split me-1"></i>Inline View
                </button>
            </div>
        </div>

        <!-- Monaco Diff Editor -->
        <div id="monaco-diff-root"></div>
    </div>

    <!-- Raw Content Hidden Inputs (Jinja2 will escape HTML entities automatically) -->
    <textarea id="hidden_content1" style="display:none;">{{ content1 }}</textarea>
    <textarea id="hidden_content2" style="display:none;">{{ content2 }}</textarea>
</div>
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/monaco-editor@0.45.0/min/vs/loader.js"></script>
<script>
    let diffEditor = null;
    let isInline = false;

    document.addEventListener('DOMContentLoaded', function () {
        // 1. Check for loader failure
        if (typeof require === 'undefined') {
            document.getElementById('monaco-diff-root').innerHTML =
                '<div class="d-flex justify-content-center align-items-center h-100 text-danger">' +
                '<i class="bi bi-exclamation-triangle me-2"></i>Monaco Editor 리소스를 불러올 수 없습니다. 인터넷 연결을 확인하세요.' +
                '</div>';
            return;
        }

        require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.45.0/min/vs' } });

        require(['vs/editor/editor.main'], function () {
            // 2. Read content from hidden textareas
            // Jinja2가 HTML escaping을 처리하므로, .value를 통해 원본 XML을 얻을 수 있습니다.
            const content1 = document.getElementById('hidden_content1').value;
            const content2 = document.getElementById('hidden_content2').value;

            const originalModel = monaco.editor.createModel(content1, 'xml');
            const modifiedModel = monaco.editor.createModel(content2, 'xml');

            const container = document.getElementById('monaco-diff-root');

            // 3. Create Diff Editor
            diffEditor = monaco.editor.createDiffEditor(container, {
                theme: 'vs',
                originalEditable: false,
                readOnly: true,
                renderSideBySide: true, // Default: Split View
                automaticLayout: true,
                minimap: { enabled: true },
                diffWordWrap: 'off'
            });

            diffEditor.setModel({
                original: originalModel,
                modified: modifiedModel
            });

            // 네비게이션 기능 추가
            diffEditor.getNavigator();

        }, function (err) {
            document.getElementById('monaco-diff-root').innerHTML =
                '<div class="d-flex justify-content-center align-items-center h-100 text-danger">' +
                '<i class="bi bi-exclamation-triangle me-2"></i>에디터 로드 실패: ' + err.message + '</div>';
        });
    });

    function toggleInlineDiff() {
        if (!diffEditor) return;

        isInline = !isInline;
        diffEditor.updateOptions({
            renderSideBySide: !isInline
        });

        const btn = document.getElementById('viewToggleBtn');
        if (isInline) {
            btn.innerHTML = '<i class="bi bi-layout-sidebar me-1"></i>Split View';
        } else {
            btn.innerHTML = '<i class="bi bi-layout-split me-1"></i>Inline View';
        }
    }
</script>
{% endblock %}