aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components/apidocs/endpoint.vue
blob: aeddced343d6c40ce39282e6d7ac2093629ce665 (plain)
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
106
107
108
109
<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 aclog from "aclog";
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();
      };

      aclog.apidocs.load().then(docs => {
        const path = this.$route.params.path;
        const ns = path.split("/", 2)[0];
        const es = docs.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 } });
      }).catch(notFound).then(() => {
        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>