rudeshark.net/packages/client/src/pages/api-console.vue
2023-04-07 17:01:42 -07:00

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>