endf-compare-wasm/index.html at main · CodeVisionaries/endf-compare-wasm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compare ENDF files in the Browser!</title>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js"></script>
    <style>
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9; /* Light background color */
            color: #333; /* Darker text color for contrast */
            padding: 20px; /* Add some padding around the content */
        }

        h1 {
            color: #3498db; /* Blue color for the heading */
            text-align: center; /* Center the heading */
        }

        button {
            background-color: #3498db; /* Blue background for buttons */
            color: white; /* White text color */
            border: none; /* Remove default border */
            border-radius: 15px; /* Rounded corners */
            padding: 10px 15px; /* Padding for buttons */
            cursor: pointer; /* Pointer cursor on hover */
            margin: 10px; /* Margin around buttons */
            font-size: 16px; /* Increase font size */
            transition: background-color 0.3s; /* Smooth transition */
        }

        button:hover {
            background-color: #034977; /* Darker blue on hover */
        }

        #spinner {
            display: none; /* Initially hidden */
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 20px auto; /* Center the spinner */
        }

        pre {
            background-color: #ffffff; /* White background for output */
            border: 1px solid #ddd; /* Light grey border */
            border-radius: 5px; /* Rounded corners */
            padding: 10px; /* Padding for the output area */
            overflow-x: auto; /* Horizontal scroll for long lines */
            white-space: pre-wrap; /* Preserve white space */
        }
    </style>
</head>
<body>
    <h1>Compare ENDF files in the Browser!</h1>
    <div style="margin:30px">
        <button style="width:180px" onclick="document.getElementById('file-input-lhs').click()">Select Original File</button>
        <input type='file' id="file-input-lhs" style="display:none" onchange="updateFileName('file-input-lhs', 'lhs-file-name')">
        <span id="lhs-file-name" style="margin-left: 10px; font-weight: bold;"></span>
    </div>
    <div style="margin:30px">
        <button style="width:180px" onclick="document.getElementById('file-input-rhs').click()">Select New File</button>
        <input type='file' id="file-input-rhs" style="display:none" onchange="updateFileName('file-input-rhs', 'rhs-file-name')">
        <span id="rhs-file-name" style="margin-left: 10px; font-weight: bold;"></span>
    </div>

    <div style="margin:50px">
        <button id="run-python" style="background-color: #09db79; color: white;">Compare Files</button>
        <div id="spinner"></div>
    </div>
    <div>
        <button id="toggle-warnings" style="margin: 10px; background-color: #f39c12; color: white;">Show Warnings</button>
        <div id="warnings" style="display: none; background-color: #fff3cd; border: 1px solid #ffeeba; border-radius: 5px; padding: 10px;">
            <strong>Warnings:</strong>
            <div id="warnings-content" style="max-height: 200px; overflow-y: auto;"></div>
        </div>
    </div>

    <pre id="output"></pre>

    <script>
        // Create a new Web Worker
        const worker = new Worker('worker.js');

        let warningsContent = document.getElementById('warnings-content');
        let outputElement = document.getElementById('output');

        worker.onmessage = function(event) {
            const { output, error, warning } = event.data;
            const spinner = document.getElementById('spinner');


            if (warning) {
                warningsContent.innerHTML += `<div>${warning}</div>`;
                document.getElementById('warnings').style.display = 'block'; // Show the warnings section
            }

            if (error) {
                outputElement.textContent = "Error: " + error;
                // Hide spinner
                spinner.style.display = 'none';
            } else {
                if(output !== undefined && output.length > 0){
                    // Pretty print JSON output
                    let prettyOutput = JSON.stringify(JSON.parse(output), null, 4);
                    outputElement.textContent = prettyOutput;
                    // Hide spinner
                    spinner.style.display = 'none';
                }
            }
        };

        document.getElementById('run-python').addEventListener('click', async () => {
            warningsContent.innerHTML += `<div></div>`;
            outputElement.textContent = "";

            const fileInputLhs = document.getElementById('file-input-lhs');
            const fileInputRhs = document.getElementById('file-input-rhs');

            if (fileInputLhs.files.length > 0 && fileInputRhs.files.length > 0) {
                const lhsFile = fileInputLhs.files[0];
                const rhsFile = fileInputRhs.files[0];
                const lhsText = await lhsFile.text();
                const rhsText = await rhsFile.text();

                // Show spinner
                document.getElementById('spinner').style.display = 'block';

                // Send data to the worker
                worker.postMessage({ lhsText, rhsText });
            } else {
                alert('Please select both files.');
            }
        });

        // Toggle warnings visibility
        document.getElementById('toggle-warnings').addEventListener('click', () => {
            const warningsDiv = document.getElementById('warnings');
            warningsDiv.style.display = warningsDiv.style.display === 'none' ? 'block' : 'none';
        });

        function updateFileName(inputId, displayId) {
            const fileInput = document.getElementById(inputId);
            const fileNameDisplay = document.getElementById(displayId);
            if (fileInput.files.length > 0) {
                fileNameDisplay.textContent = fileInput.files[0].name; // Display the name of the selected file
            }else{
                fileNameDisplay.textContent = "";
            }
        }
    </script>
</body>
</html>