1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<template>
<div class="container">
<div class="row">
<div class="col-sm-3">
<apidocs-sidebar></apidocs-sidebar>
</div>
<div class="col-sm-9">
<partial name="loading-box" v-if="$loadingRouteData"></partial>
<template v-else>
<h1>{{endpoint.method}} {{endpoint.path}}</h1>
<p>{{endpoint.description}}</p>
<h2>Resource URL</h2>
<p>{{endpoint_url}}</p>
<h2>Parameters</h2>
<table class="table api-params">
<tbody>
<tr v-for="(name, param) in endpoint.params">
<th>{{name}} <small v-if="param.required">required</small></th>
<td>
<p>{{param.description}}</p>
<p><b>Type</b>: {{param.type}}
</p>
</td>
</tr>
</tbody>
</table>
<template v-if="endpoint.example_params">
<h2>Example Request</h2>
<p>
<span>{{endpoint.method}}</span>
<code>{{example_url}}</code>
</p>
<pre><code><partial name="loading-box" v-if="example.loading"></partial>{{example.result}}</code></pre>
</template>
</template>
</div>
</div>
</div>
</template>
<script>
import ApidocsSidebar from "./sidebar.vue";
import apidocs from "apidocs";
import utils from "utils";
export default {
components: { "apidocs-sidebar": ApidocsSidebar },
data() {
return {
endpoint: null,
example: { loading: false },
};
},
computed: {
endpoint_url() {
return utils.getCurrentBaseUrl() + "/api/" + this.endpoint.path + ".json";
},
example_url() {
var params = this.endpoint.example_params;
var keys = Object.keys(params);
if (keys.length === 0) {
return this.endpoint_url;
} else {
return this.endpoint_url + "?" + keys.map(key => [key, params[key]].map(encodeURIComponent).join("=")).join("&");
}
},
},
route: {
data(transition) {
this.$root.updateTitle(this.$route.params.method.toUpperCase() + " " + this.$route.params.path + " - API Documentation");
var notFound = (e) => {
if (e) this.$root.setFlashNext(e);
transition.abort();
};
const path = this.$route.params.path;
const ns = path.split("/", 2)[0];
const es = apidocs.namespaces[ns];
if (!es) return notFound();
const endpoint = es.find(endp => endp.path === path);
if (!endpoint) return notFound();
transition.next({ endpoint: endpoint, example: { loading: false, result: null } });
this.example.loading = true;
fetch(this.example_url).then(res => {
if (res.status >= 400) {
var err = new Error(res.statusText);
err.response = res;
throw err;
}
return res.json();
}).then(body => {
this.example.loading = false;
this.example.result = JSON.stringify(body, null, 2);
}).catch(err => {
this.example.loading = false;
this.example.result = "Failed to load example. (" + err + ")";
if (err.response) {
err.response.json().then(body => this.example.result += "\n" + JSON.stringify(body, null, 2));
}
});
}
},
};
</script>
|
