estel/playtool-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework commands page

Browse Source
This commit is contained in:
Nicola Spadari
2025-02-09 12:22:48 +01:00
parent bc45ecc4fc
commit 19712a41d5
7 changed files with 89 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
app/pages/commands.vue
View File

@@ -3,29 +3,23 @@
title="Commands"
description="Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application."
>
<form @submit.prevent="sendCommand()">
<div class="mx-auto max-w-xl" lg="mr-0 max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
<div>
<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
<div mt="2.5">
<input id="command-input" v-model="input" type="text" name="command-input" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset" sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset">
</div>
</div>
<div class="flex justify-end">
<Btn type="submit">
Send command
</Btn>
</div>
<div class="mt-8">
<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label>
<div class="mt-2.5">
<textarea id="command-output" v-model="result" name="command-output" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset" sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset" />
</div>
</div>
</div>
</div>
</form>
<div class="space-y-6 md:space-y-8">
<UForm :state="inputState" :schema="schema" class="flex flex-col gap-y-4 items-end" @submit="sendCommand">
<UFormField label="Command input" name="input">
<UInput v-model="inputState.input" variant="subtle" size="lg" />
</UFormField>
<UButton type="submit" size="lg">
Send command
</UButton>
</UForm>
<UForm :state="outputState" class="flex flex-col gap-y-4 items-end">
<UFormField label="Command output" name="command-output">
<UTextarea v-model="outputState.output" variant="subtle" size="lg" :rows="8" :resize="false" readonly />
</UFormField>
</UForm>
</div>
</LayoutTile>
</template>
@@ -34,22 +28,34 @@
name: "Commands",
icon: "lucide:square-terminal"
});
const input = ref("");
const result = ref("");
const schema = z.object({
input: z.string({
required_error: "Input is required"
}).nonempty()
});
type Schema = zInfer<typeof schema>;
const inputState = ref<Partial<Schema>>({
input: undefined
});
const outputState = ref({
output: ""
});
const sendCommand = async () => {
try {
const response = await useTauriShellCommand.create("exec-sh", [
"-c",
input.value
inputState.value.input!
]).execute();
result.value = JSON.stringify(response, null, 4);
outputState.value.output = JSON.stringify(response, null, 4);
} catch (error) {
result.value = JSON.stringify(error, null, 4);
outputState.value.output = JSON.stringify(error, null, 4);
} finally {
input.value = "";
inputState.value.input = undefined;
}
};
</script>