pastebin

@page
@model ManuScriptVersion.Pages.IndexModel

<!DOCTYPE html>
<html>
<head>
    <title>File Upload</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }

        .form-group {
            margin-bottom: 10px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="date"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        button {
            padding: 10px 20px;
            background-color:forestgreen;
            color: white;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }
        

        .message {
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 4px;
        }

        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .file-info {
            margin-top: 5px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <h1>ManuScript Versioning</h1>

    <div id="messageContainer"></div>

  

    <form method="post" id="uploadForm">
        <div class="form-group">
            <label for="filePath">File Path : </label>
            <input type="text" id="filePath" name="FilePath"  required />
            <div class="file-info" id="fileInfo"></div>
        </div>

        <div class="form-group">
            <label for="versionNumber">Version Number: </label>
            <input type="text" id="versionNumber" name="VersionNumber"  required />
        </div>

        <div class="form-group">
            <label for="uploadDate">Date: </label>
            <input type="date" id="uploadDate" name="UploadDate" required />
        </div>

        <button type="submit" id="submitBtn" >Submit</button>
    </form>


    <script>
        $(document).ready(function() {
            $('#filePath').on('input', function() {
                var path = $(this).val();
                if (path) {
                    displayPathPreview(path);
                } else {
                    $('#fileInfo').html('');
                }
            });

            $('#uploadForm').on('submit', function(e) {
                var filePath = $('#filePath').val().trim();
                var version = $('#versionNumber').val().trim();
                var date = $('#uploadDate').val();

                $('#messageContainer').empty();

                if (filePath === '') {
                    showMessage('Please enter a file or folder path.', 'error');
                    e.preventDefault();
                    return false;
                }

                if (version === '') {
                    showMessage('Please enter a version number.', 'error');
                    e.preventDefault();
                    return false;
                }

                if (date === '') {
                    showMessage('Please select a date.', 'error');
                    e.preventDefault();
                    return false;
                }

                $('#submitBtn').text('Processing...').prop('disabled', true);
            });


        function displayPathPreview(path) {
            $('#fileInfo').html('<span id="loading" style="color: blue;">(Loading XML info...)</span>');

            $.ajax({
                url: '/Index?handler=FilePreview',
                type: 'GET',  
                data: { filePath: path },  
                success: function(data) {
                    if (data.success) {
                        if (data.type === 'file') {
                            var previewHtml = '<strong>XML File:</strong> ' + path.split('\\').pop() +
                                '<br><small style="color: green;">Manuscript ID: ' + data.manuscriptId + '</small>' +
                             '<br><small style="color: green;">caption: ' + data.caption + '</small>' +
                              '<br><small style="color: green;">inherited: ' + data.inherited + '</small>' +
                                '<br><small style="color: green;">Version Date: ' + data.versionDate + '</small>' +
                                '<br><small style="color: green;">Effective Date New: ' + data.effectiveDateNew + '</small>' +
                                '<br><small style="color: green;">Effective Date Renewal: ' + data.effectiveDateRenewal + '</small>' +
                                '<br><small style="color: green;">In Service Date: ' + data.inServiceDate + '</small>' +
                                '<br><small>Caption: ' + data.caption + '</small>';

                            $('#fileInfo').html(previewHtml);
                        } else if (data.type === 'folder') {
                            $('#fileInfo').html(
                                '<strong>Folder:</strong> ' + path.split('\\').pop() +
                                '<br><small style="color: blue;">XML Files found: ' + data.fileCount + '</small>' +
                                '<br><small>Sample files: ' + (data.sampleFiles.length > 0 ? data.sampleFiles.join(', ') : 'No XML files found') + '</small>'
                            );
                        }
                    } else {
                        $('#fileInfo').html('<span style="color: red;">(Error: ' + data.error + ')</span>');
                    }
                },
                error: function(xhr, status, error) {
                    console.log(' ERROR:');
                    console.log('Status:', xhr.status);
                    console.log('Response:', xhr.responseText);
                    $('#fileInfo').html('<span style="color: red;">(Server Error: ' + xhr.status + ')</span>');
                },
                complete: function() {
                    $('#loading').remove();
                }
            });
        }



            function showMessage(message, type) {
                var messageDiv = $('<div>')
                    .addClass('message')
                    .addClass(type)
                    .text(message);
                $('#messageContainer').append(messageDiv);

                setTimeout(function() {
                    messageDiv.fadeOut(500, function() {
                        $(this).remove();
                    });
                }, 5000);
            }
        });
    </script>






</body>
</html>