121 lines
2.9 KiB
Vue
121 lines
2.9 KiB
Vue
<template>
|
|
<MkStickyContainer>
|
|
<template #header
|
|
><MkPageHeader :actions="headerActions" :tabs="headerTabs"
|
|
/></template>
|
|
<MkSpacer :content-max="700">
|
|
<div class="_formRoot">
|
|
<div class="_formBlock">
|
|
<MkInput
|
|
v-model="endpoint"
|
|
:datalist="endpoints"
|
|
class="_formBlock"
|
|
@update:modelValue="onEndpointChange()"
|
|
>
|
|
<template #label>Endpoint</template>
|
|
</MkInput>
|
|
<MkTextarea v-model="body" class="_formBlock" code>
|
|
<template #label>Params (JSON or JSON5)</template>
|
|
</MkTextarea>
|
|
<MkSwitch v-model="withCredential" class="_formBlock">
|
|
With credential
|
|
</MkSwitch>
|
|
<MkButton
|
|
class="_formBlock"
|
|
primary
|
|
:disabled="sending"
|
|
@click="send"
|
|
>
|
|
<template v-if="sending"><MkEllipsis /></template>
|
|
<template v-else
|
|
><i class="ph-paper-plane-tilt ph-bold ph-lg"></i>
|
|
Send</template
|
|
>
|
|
</MkButton>
|
|
</div>
|
|
<div v-if="res" class="_formBlock">
|
|
<MkTextarea v-model="res" code readonly tall>
|
|
<template #label>Response</template>
|
|
</MkTextarea>
|
|
</div>
|
|
</div>
|
|
</MkSpacer>
|
|
</MkStickyContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import JSON5 from "json5";
|
|
import { Endpoints } from "calckey-js";
|
|
import MkButton from "@/components/MkButton.vue";
|
|
import MkInput from "@/components/form/input.vue";
|
|
import MkTextarea from "@/components/form/textarea.vue";
|
|
import MkSwitch from "@/components/form/switch.vue";
|
|
import * as os from "@/os";
|
|
import { definePageMetadata } from "@/scripts/page-metadata";
|
|
|
|
const body = ref("{}");
|
|
const endpoint = ref("");
|
|
const endpoints = ref<any[]>([]);
|
|
const sending = ref(false);
|
|
const res = ref("");
|
|
const withCredential = ref(true);
|
|
|
|
os.api("endpoints").then((endpointResponse) => {
|
|
endpoints.value = endpointResponse;
|
|
});
|
|
|
|
function send() {
|
|
sending.value = true;
|
|
const requestBody = JSON5.parse(body.value);
|
|
os.api(
|
|
endpoint.value as keyof Endpoints,
|
|
requestBody,
|
|
requestBody.i || (withCredential.value ? undefined : null)
|
|
).then(
|
|
(resp) => {
|
|
sending.value = false;
|
|
res.value = JSON5.stringify(resp, null, 2);
|
|
},
|
|
(err) => {
|
|
sending.value = false;
|
|
res.value = JSON5.stringify(err, null, 2);
|
|
}
|
|
);
|
|
}
|
|
|
|
function onEndpointChange() {
|
|
os.api(
|
|
"endpoint",
|
|
{ endpoint: endpoint.value },
|
|
withCredential.value ? undefined : null
|
|
).then((resp) => {
|
|
const endpointBody = {};
|
|
for (const p of resp.params) {
|
|
endpointBody[p.name] =
|
|
p.type === "String"
|
|
? ""
|
|
: p.type === "Number"
|
|
? 0
|
|
: p.type === "Boolean"
|
|
? false
|
|
: p.type === "Array"
|
|
? []
|
|
: p.type === "Object"
|
|
? {}
|
|
: null;
|
|
}
|
|
body.value = JSON5.stringify(endpointBody, null, 2);
|
|
});
|
|
}
|
|
|
|
const headerActions = $computed(() => []);
|
|
|
|
const headerTabs = $computed(() => []);
|
|
|
|
definePageMetadata({
|
|
title: "API console",
|
|
icon: "ph-terminal-window ph-bold ph-lg",
|
|
});
|
|
</script>
|