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

Add command page

Browse Source
This commit is contained in:
Nicola Spadari
2024-06-16 18:19:13 +02:00
parent 9d9bea7e32
commit 0b7c558688
2 changed files with 57 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Btn.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<button transition-colors gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
<slot />
</button>
</template>

52
src/pages/command.vue
View File

@@ -1,5 +1,55 @@
<template> <template>
<div class="isolate">
<div class="grid grid-cols-1 lg:grid-cols-2">
<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
<h2 class="text-3xl text-white font-bold tracking-tight">
Command
</h2>
<p class="mt-6 text-lg text-gray-300 leading-8">
Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application.
</p>
</div>
</div>
<form class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16" @submit.prevent="sendCommand()">
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
<div> <div>
<p>WIP: command</p> <label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
<div class="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 sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
</div>
</div>
<div class="flex justify-end">
<Btn type="submit">
Send command
</Btn>
</div>
<div 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 sm:leading-6 focus:ring-2 focus:ring-indigo-500 focus:ring-inset" />
</div>
</div>
</div>
</div>
</form>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup>
const input = ref("");
const result = ref("");
const sendCommand = async () => {
const response = await Command.create("exec-sh", [
"-c",
input.value
]).execute();
result.value = JSON.stringify(response, null, 4);
input.value = "";
};
</script>