112 lines
2.6 KiB
Vue
112 lines
2.6 KiB
Vue
<script setup>
|
|
import {
|
|
ref, computed, reactive,
|
|
onMounted, onUnmounted,
|
|
} from "vue";
|
|
|
|
import TitleBar from '../components/TitleBar.vue';
|
|
|
|
import * as backend from '../backend';
|
|
import * as ui from '../ui';
|
|
|
|
// List of agent class names
|
|
const kinds = ref([]);
|
|
const agent = ref({
|
|
name: "",
|
|
identifier: "",
|
|
kind: "",
|
|
});
|
|
|
|
async function submitAgent () {
|
|
const payload = {
|
|
'name': agent.value.name,
|
|
'kind': agent.value.kind,
|
|
};
|
|
|
|
if (!payload.kind) {
|
|
ui.alert("You must select a kind");
|
|
return;
|
|
}
|
|
|
|
if (agent.value.identifier) {
|
|
payload.identifier = agent.value.identifier;
|
|
}
|
|
|
|
if (agent.value.temporary) {
|
|
payload.temporary = true;
|
|
}
|
|
|
|
let response = await backend.sendAction("create-agent", payload);
|
|
|
|
if (response.error) {
|
|
ui.alert(`Could not create agent\n${response.error}`);
|
|
} else {
|
|
ui.alert(`Created Agent "${payload.name}"`);
|
|
backend.invalidateCache({agents: true});
|
|
ui.goto(`/agent/${response.agentId}`);
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
kinds.value = (await backend.sendAction("get-agent-kinds")).kinds;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<TitleBar>
|
|
<h1>Create Agent</h1>
|
|
</TitleBar>
|
|
|
|
<section class="container">
|
|
<input v-model="agent.name" placeholder="Name" />
|
|
<input v-model="agent.identifier" placeholder="Identifier (optional)" />
|
|
<select v-model="agent.kind" :class="{ placeholder: !agent.kind }">
|
|
<option value="" disabled>Select type</option>
|
|
<option v-for="k in kinds" :key="k" :value="k">{{ k }}</option>
|
|
</select>
|
|
<label class="checkbox">
|
|
<input type="checkbox" v-model="agent.temporary" />
|
|
Temporary
|
|
</label>
|
|
<button @click="submitAgent()">Create</button>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
section {
|
|
margin: 1em;
|
|
padding: 1em;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
input, select {
|
|
padding: 10px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
background: var(--color-background);
|
|
}
|
|
input::placeholder, select.placeholder {
|
|
color: var(--color-text-light);
|
|
}
|
|
input:focus, select:focus { outline: none; border-color: var(--color-primary); }
|
|
.checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; }
|
|
button {
|
|
margin-top: 4px;
|
|
padding: 10px;
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { opacity: 0.9; }
|
|
</style>
|