FamilyMapServer/index.html at master · jonathanlinford/FamilyMapServer · GitHub

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title> Family Map app server </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">

        <!-- Place favicon.ico in the root directory -->

<!--        <link rel="stylesheet" href="css/normalize.css">    -->
        <link rel="stylesheet" href="css/main.css">
   <!--     <script src="js/vendor/modernizr-2.8.3.min.js"></script> -->

        <script type="text/javascript">

            function submit()
            {
                var handle = document.getElementById("handleBox").value;
                var requestBody = document.getElementById("requestBox").value;
                var token = document.getElementById("authToken").value;

                var method = "post";
                if(handle.includes("person") || handle.includes("event"))
                {
                  method = "get";
                }

                send(handle,requestBody, method, token);
                return false;
            }

            function send(path, params, method, token)
            {
                var obj = new XMLHttpRequest();
                obj.onreadystatechange = function()
                {
                    var response = obj.responseText;
                    var responseJson = JSON.parse(response);
                    if (responseJson.authToken) {
                        document.getElementById("authToken").value = responseJson.authToken;
                    }
                    document.getElementById("response").value = formatJson(response);
                };
                obj.open(method,path,false);
                obj.setRequestHeader("Content-Type", "application/json");
                obj.setRequestHeader("Authorization", token);
                obj.send(params);
            }

            function formatJson(inputText)
            {
                var temp = "";
                var indent = 0;
                for(var i in inputText)
                {
                    var char = inputText[i];
                    if(char != null)
                    {
                        if(char === ']' || char === '}')
                        {
                            temp += "\n";
                            indent--;
                            for(var j = 0; j < indent; j++)
                            {
                                temp += '\t';
                            }

                        }

                        temp += char;

                        if (char === ',')
                        {
                            temp += "\n";

                            for(j = 0; j < indent; j++)
                            {
                                temp += '\t';
                            }

                        }
                        if(char === '{' || char === '[')
                        {
                            temp += "\n";
                            indent++;
                            for(j = 0; j < indent; j++)
                            {
                                temp += '\t';
                            }
                        }
                    }
                }

                return temp;
            }

            function login()
            {
                window.scrollTo(0,document.body.scrollHeight);
                document.getElementById("handleBox").value = "/user/login";
                document.getElementById("requestBox").value = formatJson("{\"userName\":\"username\",\"password\":\"password\"}");
            }
            function register()
            {
                window.scrollTo(0,document.body.scrollHeight);
                document.getElementById("handleBox").value = "/user/register";
                document.getElementById("requestBox").value = formatJson("{\"userName\":\"username\",\"password\":\"password\"," +
                    "\"email\":\"email\",\"firstName\":\"firstname\",\"lastName\":\"lastname\", \"gender\":\"m/f\"}");
            }
            function clear()
            {
                window.scrollTo(0,document.body.scrollHeight);
                document.getElementById("handleBox").value = "/clear/";
                document.getElementById("requestBox").value = "";
            }
            function load()
            {
                window.scrollTo(0,document.body.scrollHeight);
                document.getElementById("handleBox").value = "/load/";
                document.getElementById("requestBox").value = formatJson("{\"users\":[],\"persons\":[],\"events\":[]}");
            }
            function getAllEvents()
            {
                window.scrollTo(0,document.body.scrollHeight);
                document.getElementById("handleBox").value = "/event/";
                document.getElementById("requestBox").value = "";
            }
            function getSingleEvent()
            {
                window.scrollTo(0,document.body.scrollHeight);
                document.getElementById("handleBox").value = "/event/[Replace_With_Event_ID]";
                document.getElementById("requestBox").value = "";
            }
            function getAllPersons()
            {
                window.scrollTo(0,document.body.scrollHeight);
                document.getElementById("handleBox").value = "/person/";
                document.getElementById("requestBox").value = "";
            }
            function getSinglePerson()
            {
                window.scrollTo(0,document.body.scrollHeight);
                document.getElementById("handleBox").value = "/person/[Replace_With_Person_ID]";
                document.getElementById("requestBox").value = "";
            }
            function fill(gen)
            {
                window.scrollTo(0,document.body.scrollHeight);
                var api = "/fill/[Replace_With_User_Name]";
                if(gen) api += "/{generations}";
                document.getElementById("handleBox").value = api;
                document.getElementById("requestBox").value = "";
            }
        </script>
    </head>
    <body>
        <div style="text-align:center;">
            <h1>
                This is the Family Map server used to power the Family Map Android app.
            </h1>
            <h2>Built to power BYU CS 240 Family Map Application for Android</h2>
        </div>
        <div>
            <h4>The web API that will be used is described below. Some of the APIs require a request body
                 to be sent (namely "/user/login" and "/user/register"), while others require an Authorization token (received at login).
                To view the JSON format required for "/user/login" and "/user/register" simply click on the link below and look in the request body.
                To try out an API, click on its link below. It will fill the boxes below with the data to be sent with the request.
                Edit the data as needed and click Submit.</h4>

                <!-- Commands for the Database -->
              <div style="border: 2px solid black;">
                <h1 style="padding-left:1cm; text-decoration: underline;">Database Commands</h1>
                <ul>
                    <li>
                      <a href="javascript:clear()" >/clear/</a> This API will clear ALL data from the database,
                        including users and all generated data. This API can be run from a browser by simply
                        typing it in the address bar or by clicking this link followed by pressing the Submit button below.
                        No authorization token is required.
                    </li>
                    <li>
                      <a href="javascript:load()">/load/</a> This API will load the server&apos;s database with
                        data provided by json text in the response body. The json text must contain an array of users as
                        defined in the register details in addition to a personID, an array of persons, and an array of events.
                        WARNING: all data from the database is wiped when this is called. The json file will be specified in
                        the body of the request. A example.json file is provided to get you started with loading specific data.
                        No authorization token is required.
                    </li>
                    <li>
                      <a href="javascript:fill()" >/fill/[username]</a> This API will fill the server&apos;s
                        database with fake data for the specified user name. The "username" parameter is required
                        and must be a user already registered with the server. It can be any user name you choose.
                        If there is any data in the database associated with the given user name, it is erased.
                        This API can be run from a browser by simply typing it in the address bar (or by pressing
                        the link, filling in the details, and clicking submit). The base person generated should be a
                        person representing the user.
                        No authorization token is required.</li>
                    <li>
                      <a href="javascript:fill(true)" >/fill/[username]/{generations}</a> This API will fill the
                        server&apos;s database with fake data for the specified user name. The "username" parameter
                        is required and must be a user already registered with the server. All the ancestor data
                        associated with this user is erased. This API can be run from a browser by simply
                        typing it in the address bar (or by pressing the link, filling in the details, and clicking submit).
                        The base person generated should be a person representing the user.
                        No authorization token is required.</li>
                    </li>
                  </ul>
              </div>

              <br/>

              <div style="border: 2px solid black; margin:5px;">
                  <h1 style="padding-left:1cm; text-decoration: underline;">User Commands</h1>
                <ul>
                  <li>
                    <a href="javascript:login()" >/user/login</a> Use this to log in a user. A request body
                      must be supplied specifying the username and password. If login succeeds, an authorization
                      token will be returned. Use this token on other API calls that require authorization.
                      The returned JSON object contains "Authorization" (the authorization token) and "username"
                      (the username that was just logged in).
                      No authorization token is required.
                    </li>
                  <li>
                    <a href="javascript:register()" >/user/register</a> Use this to register a user.
                      An authorization token is returned. Use it just as you would a token from login.
                      Returns the same Json object as log in. It should be noted that when you register a
                      user the database will automatically be filled.(Meaning you do not need to call the /fill API noted above).
                      No authorization token is required.
                  </li>
                  <li>
                    <a href="javascript:getAllEvents()">/event/</a> This API will return ALL events for ALL
                      family members of the current user. The current user is determined from the provided
                      authorization token (which is required for this call). The returned JSON object contains
                      "data" which is an array of event objects.
                      Authorization token is required.
                  </li>
                  <li>
                    <a href="javascript:getSingleEvent()">/event/[eventID]</a> This API will return the single
                      event with the specified ID. The event must belong to a relative of the user associated
                      with the authorization token. The returned JSON contains the requested event object.
                      Authorization token is required.
                  </li>
                  <li>
                    <a href="javascript:getAllPersons()" >/person/</a> This API will return ALL people
                      associated with the current user. The current user is determined from the provided a
                      uthorization token (which is required for this call). The returned JSON object contains
                      "data" which is an array of person objects.
                      Authorization token is required.
                  </li>
                  <li>
                    <a href="javascript:getSinglePerson()" >/person/[personID]</a> This API will return
                      the single person with the specified ID. The person must be related to the user associated
                      with the authorization token. The returned JSON contains the requested person object.
                      Authorization token is required.
                  </li>
              </ul>
            </div>
        </div>
        <div>
            <h5>
                A few notes:
                <ul>
                    <li>
                        The authorization token is returned from the server in the "Authorization"
                        attribute of the JSON object returned by the "/user/register" and "/user/login" APIs.
                        The authorization token must be placed in the "Authorization" header
                        on all subsequent HTTP requests.
                    </li>
                    <li>
                        If something fails, the returned JSON object contains a "message" attribute
                        which contains a message describing what happened.
                        Watch for these as they will give helpful insight into why the server did not
                        work as expected.
                    </li>
                </ul>
            </h5>
          <p>Try it out here</p>
        </div>
        <div class="w3-row forumDiv">
            <div class="w3-col m4">
              Handle:<input type="text" id="handleBox" name="handleBox" style="width: 400px">
            </div>
            <div class="w3-col m5">
              Authorization token: <input type="text" id="authToken" name="authToken" style="width: 400px;">
              <input type="button" name="Submit" value="Submit" onclick="submit()">
            </div>
        </div>
        <div class="w3-row" style="margin:10px;">
          <p class="w3-col w3-container center" style="width:3%"/>
          <div class="w3-col w3-container bottom" style="width:45%">
            Request Body: <textarea type="text" id="requestBox" name="requestBox" class="requestBody"></textarea>
          </div>
          <p class="w3-col w3-container center" style="width:3%"/>
          <div class="w3-col w3-container bottom" style="width:45%">
            Response From the server: <textarea type="text" id="response" class="responseBody" readonly></textarea>
          <div>
          <p class="w3-col w3-container center" style="width:3%"/>
        </div>
    </body>
</html>