thrillwiki_django_no_react/static/js/version-control.js

// Version Control System Functionality

class VersionControl {
    constructor() {
        this.setupEventListeners();
    }

    setupEventListeners() {
        // Branch switching
        document.addEventListener('htmx:afterRequest', (event) => {
            if (event.detail.target.id === 'branch-form-container') {
                this.handleBranchFormResponse(event);
            }
        });

        // Listen for branch switches
        document.addEventListener('branch-switched', () => {
            this.refreshContent();
        });

        // Handle merge operations
        document.addEventListener('htmx:afterRequest', (event) => {
            if (event.detail.target.id === 'merge-panel') {
                this.handleMergeResponse(event);
            }
        });
    }

    handleBranchFormResponse(event) {
        if (event.detail.successful) {
            // Clear the branch form container
            document.getElementById('branch-form-container').innerHTML = '';
            // Trigger branch list refresh
            document.body.dispatchEvent(new CustomEvent('branch-updated'));
        }
    }

    handleMergeResponse(event) {
        if (event.detail.successful) {
            const mergePanel = document.getElementById('merge-panel');
            if (mergePanel.innerHTML.includes('Merge Successful')) {
                // Trigger content refresh after successful merge
                setTimeout(() => {
                    this.refreshContent();
                }, 1500);
            }
        }
    }

    refreshContent() {
        // Reload the page to show content from new branch
        window.location.reload();
    }

    // Branch operations
    createBranch(name, parentBranch = null) {
        const formData = new FormData();
        formData.append('name', name);
        if (parentBranch) {
            formData.append('parent', parentBranch);
        }

        return fetch('/vcs/branches/create/', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': this.getCsrfToken()
            }
        }).then(response => response.json());
    }

    switchBranch(branchName) {
        const formData = new FormData();
        formData.append('branch', branchName);

        return fetch('/vcs/branches/switch/', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': this.getCsrfToken()
            }
        }).then(response => {
            if (response.ok) {
                document.body.dispatchEvent(new CustomEvent('branch-switched'));
            }
            return response.json();
        });
    }

    // Merge operations
    initiateMerge(sourceBranch, targetBranch) {
        const formData = new FormData();
        formData.append('source', sourceBranch);
        formData.append('target', targetBranch);

        return fetch('/vcs/merge/', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': this.getCsrfToken()
            }
        }).then(response => response.json());
    }

    resolveConflicts(resolutions) {
        return fetch('/vcs/resolve-conflicts/', {
            method: 'POST',
            body: JSON.stringify(resolutions),
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': this.getCsrfToken()
            }
        }).then(response => response.json());
    }

    // History operations
    getHistory(branch = null) {
        let url = '/vcs/history/';
        if (branch) {
            url += `?branch=${encodeURIComponent(branch)}`;
        }

        return fetch(url)
            .then(response => response.json());
    }

    // Utility functions
    getCsrfToken() {
        return document.querySelector('[name=csrfmiddlewaretoken]').value;
    }

    showError(message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4';
        errorDiv.innerHTML = `
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="ml-3">
                    <p>${message}</p>
                </div>
            </div>
        `;
        document.querySelector('.version-control-ui').prepend(errorDiv);
        setTimeout(() => errorDiv.remove(), 5000);
    }
}

// Initialize version control
document.addEventListener('DOMContentLoaded', () => {
    window.versionControl = new VersionControl();
});