You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.3 KiB
Vue
121 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<header>
|
|
<h1>{{ page.name }}</h1>
|
|
<p>{{ page.description }}</p>
|
|
<nuxt-link to="/">back</nuxt-link>
|
|
</header>
|
|
|
|
<div class="structure">
|
|
<Parameters title="Input" :params="page.input" />
|
|
<Arrow :animate="animationKey" />
|
|
<Parameters title="Output" :params="page.output" />
|
|
</div>
|
|
|
|
<div class="playground">
|
|
<h3>Try it:</h3>
|
|
<code>
|
|
/functions/{{ page.name }} ?
|
|
<span v-for="(input, index) in page.input" :key="input.id">
|
|
<span v-if="index != 0"> &</span>
|
|
<input
|
|
v-model="form[input.name]"
|
|
type="text"
|
|
:placeholder="input.name"
|
|
/>
|
|
</span>
|
|
</code>
|
|
<button @click="testApi()">Try</button>
|
|
|
|
<div class="result">
|
|
<h3>Results</h3>
|
|
<div
|
|
v-for="(output, index) in page.output"
|
|
:key="output.id"
|
|
class="result"
|
|
>
|
|
<code>{{ output.name }}</code
|
|
>: {{ results[index] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav>
|
|
<h3>Other functions</h3>
|
|
<ul>
|
|
<li v-for="tool in toolkit" :key="tool.id">
|
|
<nuxt-link :to="`/functions/${tool.name}`">
|
|
{{ tool.name }}
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
async asyncData({ $strapi, params }) {
|
|
const toolkit = await $strapi.find('functions')
|
|
const query = await $strapi.$functions.find({ name: params.slug })
|
|
const page = query[0]
|
|
|
|
const form = {}
|
|
page.input.forEach((input) => (form[input.name] = input.defaultValue))
|
|
|
|
return { page, toolkit, form }
|
|
},
|
|
data() {
|
|
return {
|
|
results: [],
|
|
animationKey: 1,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async testApi() {
|
|
this.results = []
|
|
this.animationKey = Math.random()
|
|
let args = ''
|
|
Object.keys(this.form).forEach((arg) => {
|
|
args += `${arg}=${this.form[arg]}&`
|
|
})
|
|
const data = await this.$strapi.$http.$get(
|
|
`http://localhost:1337/functions/${this.page.name}?${args}`
|
|
)
|
|
this.page.output.forEach((output) => {
|
|
this.results.push(data[output.name])
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.structure {
|
|
display: flex;
|
|
max-width: 1280px;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
grid-gap: 24px;
|
|
}
|
|
|
|
.structure > * {
|
|
border: 1px solid black;
|
|
padding: 24px;
|
|
margin-top: 24px;
|
|
flex: 1;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
h1 {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
}
|
|
</style> |