93 lines
2.0 KiB
Vue
93 lines
2.0 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;
|
|
}
|
|
|
|
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>
|
|
|
|
<div class="main-container">
|
|
<input v-model="agent.name" type="text" placeholder="name">
|
|
<input v-model="agent.identifier" type="text" placeholder="identifier">
|
|
<select v-model="agent.kind">
|
|
<option v-for="k in kinds" :value="k">{{k}}</option>
|
|
</select>
|
|
|
|
<button @click="submitAgent()">Create Agent</button>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.main-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.multi-select-box {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.multi-select-box div {
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.multi-select-box div:last {
|
|
border-bottom: none;
|
|
}
|
|
.multi-select-box div:hover {
|
|
background-color: var(--color-background-mute);
|
|
}
|
|
.multi-select-box div.selected {
|
|
background-color: var(--color-background-soft);
|
|
}
|
|
</style>
|