Improve API console

This commit is contained in:
syuilo 2019-04-25 14:40:42 +09:00
parent 807b7f3ee5
commit 5ec6f3c15d
3 changed files with 46 additions and 2 deletions

View file

@ -14,7 +14,7 @@
<section> <section>
<header><fa icon="terminal"/> {{ $t('console.title') }}</header> <header><fa icon="terminal"/> {{ $t('console.title') }}</header>
<ui-input v-model="endpoint" :datalist="endpoints"> <ui-input v-model="endpoint" :datalist="endpoints" @change="onEndpointChange()">
<span>{{ $t('console.endpoint') }}</span> <span>{{ $t('console.endpoint') }}</span>
</ui-input> </ui-input>
<ui-textarea v-model="body"> <ui-textarea v-model="body">
@ -80,6 +80,22 @@ export default Vue.extend({
this.sending = false; this.sending = false;
this.res = JSON5.stringify(err, null, 2); this.res = JSON5.stringify(err, null, 2);
}); });
},
onEndpointChange() {
this.$root.api('endpoint', { endpoint: this.endpoint }).then(endpoint => {
const body = {};
for (const p of endpoint.params) {
body[p.name] =
p.type === 'String' ? '' :
p.type === 'Number' ? 0 :
p.type === 'Boolean' ? false :
p.type === 'Array' ? [] :
p.type === 'Object' ? {} :
null;
}
this.body = JSON5.stringify(body, null, 2);
});
} }
} }
}); });

View file

@ -23,6 +23,7 @@
@focus="focused = true" @focus="focused = true"
@blur="focused = false" @blur="focused = false"
@keydown="$emit('keydown', $event)" @keydown="$emit('keydown', $event)"
@change="$emit('change', $event)"
:list="id" :list="id"
> >
<input v-else ref="input" <input v-else ref="input"
@ -38,6 +39,7 @@
@focus="focused = true" @focus="focused = true"
@blur="focused = false" @blur="focused = false"
@keydown="$emit('keydown', $event)" @keydown="$emit('keydown', $event)"
@change="$emit('change', $event)"
:list="id" :list="id"
> >
<datalist :id="id" v-if="datalist"> <datalist :id="id" v-if="datalist">
@ -60,7 +62,7 @@
<div class="suffix" ref="suffix"><slot name="suffix"></slot></div> <div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
</div> </div>
<div class="toggle" v-if="withPasswordToggle"> <div class="toggle" v-if="withPasswordToggle">
<a @click='togglePassword'> <a @click="togglePassword">
<span v-if="type == 'password'"><fa :icon="['fa', 'eye']"/> {{ $t('@.show-password') }}</span> <span v-if="type == 'password'"><fa :icon="['fa', 'eye']"/> {{ $t('@.show-password') }}</span>
<span v-if="type != 'password'"><fa :icon="['far', 'eye-slash']"/> {{ $t('@.hide-password') }}</span> <span v-if="type != 'password'"><fa :icon="['far', 'eye-slash']"/> {{ $t('@.hide-password') }}</span>
</a> </a>

View file

@ -0,0 +1,26 @@
import $ from 'cafy';
import define from '../define';
import endpoints from '../endpoints';
export const meta = {
requireCredential: false,
tags: ['meta'],
params: {
endpoint: {
validator: $.str,
}
},
};
export default define(meta, async (ps) => {
const ep = endpoints.find(x => x.name === ps.endpoint);
if (ep == null) return null;
return {
params: Object.entries(ep.meta.params || {}).map(([k, v]) => ({
name: k,
type: v.validator.name === 'ID' ? 'String' : v.validator.name
}))
};
});