-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathget_gui.js
186 lines (162 loc) · 6.91 KB
/
get_gui.js
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testcase GUI</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1e1e1e;
color: #d4d4d4;
}
.container {
padding: 16px;
}
.button {
background-color: #007acc;
color: #ffffff;
border: none;
padding: 8px 16px;
margin: 8px 0;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #005a9e;
}
.button:disabled {
background-color: #555555;
cursor: not-allowed;
}
.testcase {
margin: 16px 0;
padding: 16px;
border: 1px solid #3c3c3c;
border-radius: 4px;
background-color: #252526;
}
.testcase input, .testcase textarea {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #3c3c3c;
border-radius: 4px;
background-color: #1e1e1e;
color: #d4d4d4;
}
.testcase input:focus, .testcase textarea:focus {
outline: none;
border-color: #007acc;
}
</style>
</head>
<body>
<div class="container">
<button class="button" id="addTestcaseButton">Add Testcase</button>
<button class="button" id="runTestcaseButton">Run All Testcases</button>
<div>
<input id="problemUrl" type="text" placeholder="Enter problem URL" style="width: 80%; padding: 8px; margin: 8px 0; border: 1px solid #3c3c3c; border-radius: 4px; background-color: #1e1e1e; color: #d4d4d4;" />
<button class="button" id="fetchTestcaseButton">Fetch Testcase</button>
</div>
<div id="testcaseContainer">
<!-- Test cases will be added here dynamically -->
</div>
</div>
<script>
const vscode = acquireVsCodeApi();
const addTestcaseButton = document.getElementById('addTestcaseButton');
const fetchTestcaseButton = document.getElementById('fetchTestcaseButton');
const problemUrlInput = document.getElementById('problemUrl');
const testcaseContainer = document.getElementById('testcaseContainer');
addTestcaseButton.addEventListener('click', () => {
const testcaseDiv = document.createElement('div');
testcaseDiv.className = 'testcase';
testcaseDiv.innerHTML = \`
<label>Input:</label>
<textarea class="input_case" rows="4" placeholder="Enter input"></textarea>
<label>Expected Output:</label>
<textarea class="output_case" rows="4" placeholder="Enter expected output"></textarea>
<label>Actual Output:</label>
<textarea class="your_output_case" rows="4" placeholder="Actual output will appear here" readonly></textarea>
<button class="button runTestcaseButton">Run Testcase</button>
<button class="button deleteButton">Delete Testcase</button>
\`;
const deleteButton = testcaseDiv.querySelector('.deleteButton');
deleteButton.addEventListener('click', () => {
testcaseContainer.removeChild(testcaseDiv);
});
const runTestcaseButton = testcaseDiv.querySelector('.runTestcaseButton');
runTestcaseButton.addEventListener('click', () => {
const inputField = testcaseDiv.querySelector('.input_case');
const input = inputField.value.trim();
if (!input) {
alert('Please enter input for the testcase.');
return;
}
vscode.postMessage({
command: 'runTestcase',
input: input,
});
runTestcaseButton.disabled = true;
});
testcaseContainer.appendChild(testcaseDiv);
});
fetchTestcaseButton.addEventListener('click', () => {
const problemUrl = problemUrlInput.value.trim();
if (!problemUrl) {
alert('Please enter a valid problem URL.');
return;
}
vscode.postMessage({
command: 'fetchTestcase',
url: problemUrl,
});
});
window.addEventListener('message', (event) => {
const message = event.data;
if (message.command === 'displayTestcases') {
testcaseContainer.innerHTML = '';
message.testcases.forEach((testcase) => {
const testcaseDiv = document.createElement('div');
testcaseDiv.className = 'testcase';
testcaseDiv.innerHTML = \`
<label>Input:</label>
<textarea class="input_case" rows="4" readonly>\${testcase.input}</textarea>
<label>Expected Output:</label>
<textarea class="output_case" rows="4" readonly>\${testcase.output}</textarea>
<label>Actual Output:</label>
<textarea class="your_output_case" rows="4" placeholder="Actual output will appear here" readonly></textarea>
<button class="button runTestcaseButton">Run Testcase</button>
\`;
const runTestcaseButton = testcaseDiv.querySelector('.runTestcaseButton');
runTestcaseButton.addEventListener('click', () => {
vscode.postMessage({
command: 'runTestcase',
input: testcase.input,
});
runTestcaseButton.disabled = true;
});
testcaseContainer.appendChild(testcaseDiv);
});
} else if (message.command === 'displayOutput') {
const testcases = testcaseContainer.querySelectorAll('.testcase');
testcases.forEach((testcaseDiv) => {
const inputField = testcaseDiv.querySelector('.input_case');
const actualOutputField = testcaseDiv.querySelector('.your_output_case');
if (inputField.value.trim() === message.input.trim()) {
actualOutputField.value = message.output;
const runTestcaseButton = testcaseDiv.querySelector('.runTestcaseButton');
runTestcaseButton.disabled = false;
}
});
}
});
</script>
</body>
</html>`;
}
module.exports = getWebviewContent;