89 lines
3.3 KiB
Vue
89 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { NetworkTypes } from 'easytier-frontend-lib';
|
|
import { computed, ref } from 'vue';
|
|
import { AutoComplete, Divider, Button, Textarea } from "primevue";
|
|
import { getInitialApiHost, cleanAndLoadApiHosts, saveApiHost } from "../modules/api-host"
|
|
import ApiClient from '../modules/api';
|
|
|
|
const api = computed<ApiClient>(() => new ApiClient(apiHost.value));
|
|
|
|
const apiHost = ref<string>(getInitialApiHost())
|
|
const apiHostSuggestions = ref<Array<string>>([])
|
|
const apiHostSearch = async (event: { query: string }) => {
|
|
apiHostSuggestions.value = [];
|
|
let hosts = cleanAndLoadApiHosts();
|
|
if (event.query) {
|
|
apiHostSuggestions.value.push(event.query);
|
|
}
|
|
hosts.forEach((host) => {
|
|
apiHostSuggestions.value.push(host.value);
|
|
});
|
|
}
|
|
|
|
const newNetworkConfig = ref<NetworkTypes.NetworkConfig>(NetworkTypes.DEFAULT_NETWORK_CONFIG());
|
|
const toml_config = ref<string>("");
|
|
const errorMessage = ref<string>("");
|
|
|
|
const generateConfig = (config: NetworkTypes.NetworkConfig) => {
|
|
saveApiHost(apiHost.value)
|
|
errorMessage.value = "";
|
|
api.value?.get_remote_client("").generate_config(config).then((res) => {
|
|
if (res.error) {
|
|
errorMessage.value = "Generation failed: " + res.error;
|
|
} else if (res.toml_config) {
|
|
toml_config.value = res.toml_config;
|
|
} else {
|
|
errorMessage.value = "Api server returned an unexpected response";
|
|
}
|
|
}).catch(err => {
|
|
errorMessage.value = "Generate request failed: " + (err instanceof Error ? err.message : String(err));
|
|
});
|
|
};
|
|
|
|
const parseConfig = async () => {
|
|
try {
|
|
errorMessage.value = "";
|
|
const res = await api.value?.get_remote_client("").parse_config(toml_config.value);
|
|
|
|
if (res.error) {
|
|
errorMessage.value = "Parse failed: " + res.error;
|
|
} else if (res.config) {
|
|
newNetworkConfig.value = res.config;
|
|
} else {
|
|
errorMessage.value = "API returned an unexpected response";
|
|
}
|
|
} catch (e) {
|
|
errorMessage.value = "Parse request failed: " + (e instanceof Error ? e.message : String(e));
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-center m-5">
|
|
<div class="sm:block md:flex w-full">
|
|
<div class="sm:w-full md:w-1/2 p-4">
|
|
<div class="flex flex-col">
|
|
<div class="w-full self-center ">
|
|
<label>ApiHost</label>
|
|
<AutoComplete id="api-host" v-model="apiHost" dropdown :suggestions="apiHostSuggestions"
|
|
@complete="apiHostSearch" class="w-full" />
|
|
<Divider />
|
|
</div>
|
|
</div>
|
|
<Config :cur-network="newNetworkConfig" @run-network="generateConfig" />
|
|
</div>
|
|
<div class="sm:w-full md:w-1/2 p-4 flex flex-col h-[calc(100vh-80px)]">
|
|
<pre v-if="errorMessage"
|
|
class="mb-2 p-2 rounded text-sm overflow-auto bg-red-100 text-red-700 max-h-40">{{ errorMessage }}</pre>
|
|
<Textarea v-model="toml_config" spellcheck="false"
|
|
class="w-full flex-grow p-2 whitespace-pre-wrap font-mono resize-none"
|
|
placeholder="Press 'Run Network' to generate TOML configuration, or paste your TOML configuration here to parse it"></Textarea>
|
|
<div class="mt-3 flex justify-center">
|
|
<Button label="Parse Config" icon="pi pi-arrow-left" icon-pos="left" @click="parseConfig" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|