bw-hspc-contest-env/extension/bwcontest/webviews/components/ProblemPanel.svelte

186 lines
4.1 KiB
Svelte
Raw Normal View History

2023-05-07 11:01:27 -04:00
<script lang="ts">
2023-10-15 18:35:49 -04:00
import { onMount } from 'svelte';
2023-10-16 13:11:54 -04:00
import type { WebviewMessageType, MessageType, ProblemData } from '../../src/problemPanel';
2023-10-15 18:35:49 -04:00
2023-10-16 13:11:54 -04:00
function postMessage(message: MessageType) {
2023-10-15 18:35:49 -04:00
vscode.postMessage(message);
}
2023-10-16 13:11:54 -04:00
// let savedInputs: Map<number, { input: string; output: string }> = new Map();
2023-10-15 18:35:49 -04:00
2023-10-16 13:11:54 -04:00
let activeProblemIndex = 0;
2023-10-15 18:35:49 -04:00
let problemData: ProblemData | undefined;
2023-10-16 13:11:54 -04:00
let sampleInputValue: string;
let outputValue: string;
2023-10-15 18:35:49 -04:00
let running = false;
$: if (problemData && problemData.length !== 0) {
2023-10-16 13:11:54 -04:00
activeProblemIndex = 0;
2023-10-15 18:35:49 -04:00
}
function resetInput() {
2023-10-16 13:11:54 -04:00
if (problemData) {
sampleInputValue = problemData[activeProblemIndex].sampleInput;
} else {
sampleInputValue = '';
}
2023-10-15 18:35:49 -04:00
}
function onRun() {
2023-10-16 13:11:54 -04:00
// if (problemData !== undefined && running === false) {
// postMessage({
// type: 'requestRun',
// value: {
// problemId: problemData[activeProblemIndex].id,
// input: sampleInputValue
// }
// });
// }
2023-10-15 18:35:49 -04:00
}
function updateTextBoxes() {
2023-10-16 13:11:54 -04:00
// if (savedInputs.has(activeProblem.id)) {
// sampleInputText.value = savedInputs.get(activeProblem.id)!.input;
// outputText.value = savedInputs.get(activeProblem.id)!.output;
// } else {
if (problemData !== undefined) {
sampleInputValue = problemData[activeProblemIndex].sampleInput;
2023-10-15 18:35:49 -04:00
}
2023-10-16 13:11:54 -04:00
outputValue = '[Run to get output]';
// }
2023-10-15 18:35:49 -04:00
}
function onSubmit() {
2023-10-16 13:11:54 -04:00
// if (teamId && contestId && sessionToken) {
// postMessage({
// type: 'onSubmit',
// value: {
// sessionToken: sessionToken,
// contestId: contestId,
// teamId: teamId,
// problemId: activeProblem.id,
// problemName: activeProblem.pascalName
// }
// });
// }
2023-10-15 18:35:49 -04:00
}
function onKill() {
2023-10-16 13:11:54 -04:00
// postMessage({ type: 'onKill' });
2023-10-15 18:35:49 -04:00
}
2023-10-16 13:11:54 -04:00
onMount(() => {
postMessage({ msg: 'onRequestProblemData' });
});
2023-10-15 18:35:49 -04:00
window.addEventListener('message', async (event) => {
2023-10-16 13:11:54 -04:00
const m = (event as MessageEvent).data as WebviewMessageType;
// if (message.msg === 'onOutput') {
// outputValue = message.value;
// running = false;
if (m.msg === 'onProblemData') {
problemData = m.data;
updateTextBoxes();
2023-10-15 18:35:49 -04:00
}
});
2023-05-07 11:01:27 -04:00
</script>
<h1>Test & Submit Problems</h1>
{#if problemData}
2023-10-15 18:35:49 -04:00
<div class="tab-container">
2023-10-16 13:11:54 -04:00
{#each problemData as problem, i}
2023-10-15 18:35:49 -04:00
<button
on:click={() => {
if (!running) {
2023-10-16 13:11:54 -04:00
// savedInputs.set(activeProblem.id, {
// input: sampleInputText.value,
// output: outputText.value
// });
activeProblemIndex = i;
2023-10-15 18:35:49 -04:00
updateTextBoxes();
}
}}
id={`problem_${problem.id}`}
type="button"
2023-10-16 13:11:54 -04:00
class={'tab ' + (activeProblemIndex === i ? 'active' : '')}>{problem.name}</button
2023-10-15 18:35:49 -04:00
>
{/each}
</div>
2023-05-07 11:01:27 -04:00
{/if}
2023-10-16 13:11:54 -04:00
{#if problemData !== undefined}
<h2>{problemData[activeProblemIndex].name}</h2>
2023-10-15 18:35:49 -04:00
<div style="display:flex">
<div style="flex:1; margin-right:20px">
<h3>Sample Input (You can edit this!)</h3>
2023-10-16 13:11:54 -04:00
<textarea bind:value={sampleInputValue} />
2023-10-15 18:35:49 -04:00
<button style="margin-top:5px" on:click={resetInput} type="button">Reset Input</button>
</div>
<div style="flex:1">
<div style="display:flex">
<h3 style="margin-right:5px">Output</h3>
{#if running}
<span class="loader"></span>
{/if}
</div>
2023-10-16 13:11:54 -04:00
<textarea bind:value={outputValue} readonly />
2023-10-15 18:35:49 -04:00
{#if !running}
<button style="margin-top:5px" on:click={onRun} type="button">Run</button>
{:else}
<button style="margin-top:5px" on:click={onKill} type="button">Stop</button>
{/if}
</div>
</div>
<button on:click={onSubmit} type="button">Submit</button>
2023-05-07 11:01:27 -04:00
{/if}
<style>
2023-10-15 18:35:49 -04:00
textarea {
resize: vertical;
height: 250px;
}
.tab-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 30px;
margin-bottom: 10px;
}
.tab {
flex: 1;
border: none;
cursor: pointer;
text-align: center;
}
.tab.active {
background-color: rgb(95, 103, 118);
}
.loader {
width: 16px;
height: 16px;
border: 3px solid #fff;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>