-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (127 loc) · 7.66 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>GraphQL UI — Convert your queries into forms</title>
<meta name="title" content="GraphQL — Convert your queries into forms">
<meta name="description" content="With GraphQL UI you can evade all the hassle of typing out your query manually while testing the API. Just put in your GraphQL API URL, and generate user-friendly forms on the fly.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="GraphQL UI — Convert your queries into forms">
<meta property="og:description" content="With GraphQL UI you can evade all the hassle of typing out your query manually while testing the API. Just put in your GraphQL API URL, and generate user-friendly forms on the fly.">
<meta property="og:image" content="https://i.ibb.co/TgWz2c7/Screenshot-2020-05-23-at-9-56-37-PM-1.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="GraphQL UI — Convert your queries into forms">
<meta property="twitter:description" content="With GraphQL UI you can evade all the hassle of typing out your query manually while testing the API. Just put in your GraphQL API URL, and generate user-friendly forms on the fly.">
<meta property="twitter:image" content="https://i.ibb.co/TgWz2c7/Screenshot-2020-05-23-at-9-56-37-PM-1.jpg">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/graphql.min.js"></script>
<script src="https://unpkg.com/[email protected]/standalone.js"></script>
<script src="https://unpkg.com/[email protected]/parser-graphql.js"></script>
<script>{{ index.js }}</script>
<script>{{ renderHelpers.js }}</script>
</head>
<body>
<form action="#" name="config">
<input id="endpoint" type="text" name="endpoint" id="" placeholder="Endpoint" value="http://dev5-2.stg.synup.com/graphql">
<select name="token_type" id="">
<option value="Bearer">Bearer</option>
<option value="Internal">Internal</option>
<option value="API">API</option>
</select>
<input id="token" type="text" name="token" id="" placeholder="Token" value="eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ1c2VyX2lkIjoxNTcsImFjY291bnRfaWQiOjEyOCwicm9sZV9pZCI6MTgzODIsIm5hbWUiOiJMZXp3b24iLCJ1c2VyX3R5cGUiOiJBZ2VuY3kiLCJqdGkiOiJhYmMxNDJmZS02YTdhLTQwZjQtYmE4ZC02YTFhMDE2Nzc0NWMiLCJyb2xlX3R5cGUiOiJhZG1pbiIsInJvbGVfbmFtZSI6IkFkbWluIn0.gospr_-MP9topw-yKIF7niauJcerUhoxxDIxF8SJhUI2J-Cr7YrTQHmECxOB9hQU4s7lXsfzS7iNAa84JbR2lDi33A7yzYpQK1D8GBJgJSs8twsy41t-YVSxqmlJxhOMEobRTZqPJI1lFcf6UHcQppwNtK3_2B_srf70bwFlFgoimQxny1GRMXgtfJLfyrBBU6iFJBAIgOl8KVqfX0qBjs1l3LK9-7pVc7ZsUUq62fkAj8cYkf9t4LZla_wRBhUTQmMy_uGSTT0neqhqISG177EXHk-HzWtXVCrZBGKvFwO3rbtZRbueJopzGUI5K10iPwSQvFR64hzXuJz3WH1lGQ">
<input id="submit_button" type="submit" value="Submit" name="submit_button">
</form>
</body>
<script>
document.forms.config.addEventListener('submit', (e) => {
e.preventDefault()
let submit_button = e.target.submit_button
let endpoint = e.target.endpoint.value
let tokenType = e.target.token_type.value
let token = e.target.token.value
submit_button.setAttribute('disabled', true)
getClient(endpoint,`${tokenType} ${token}`)
.then((client) => {
submit_button.removeAttribute('disabled')
let container = document.getElementById('container')
if(container != null){ container.remove() }
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container)
let queryList = client.getFullList().sort()
let querySelectElement = document.createElement('select')
queryList.forEach((query) => {
let option = document.createElement('option')
option.setAttribute('value', query)
option.innerText = query
querySelectElement.appendChild(option)
})
container.appendChild(querySelectElement)
querySelectElement.addEventListener('change', function(e){
query = e.target.value
let subContainer = document.getElementById('subContainer')
if(subContainer != null){ subContainer.remove() }
subContainer = document.createElement('div')
subContainer.id = 'subContainer'
container.appendChild(subContainer)
let payload = client.resolveQueryInput(query)
let output = parseObject(payload)
htmlRender = renderItems(output)
subContainer.appendChild(htmlRender)
button = document.createElement('button')
button.setAttribute('value', 'Submit')
button.innerText = 'Submit'
subContainer.appendChild(button)
panelHeadings = document.getElementsByClassName('panel')
let addPanelBody = function(e){
if (e.target.nodeName != "A"){
e.preventDefault()
return
}
let typeName = e.target.innerText
let payload = client.resolveType(typeName)
let output = parseObject(payload)
let htmlRender = renderItems(output)
e.target.parentElement.parentElement.nextElementSibling.firstChild.appendChild(htmlRender)
}
for (let item of panelHeadings) {
item.addEventListener('click', addPanelBody)
}
button.addEventListener('click', function(e){
let variables = parseInput(output)
let outputPayload = client.getOutputQuery(query)
let preTags = document.getElementsByTagName("pre")
if(preTags.length > 0){
for (let i=preTags.length; i!= 0;) {
preTags[--i].remove()
}
}
let queryPreTag = document.createElement('pre')
subContainer.appendChild(queryPreTag)
queryPreTag.innerHTML = outputPayload.replace(/\n/g, "<br />")
let variablesPreTag = document.createElement('pre')
subContainer.appendChild(variablesPreTag)
variablesPreTag.innerHTML = JSON.stringify(variables, undefined, 4).replace(/\n/g, "<br />")
body = {
'query': outputPayload,
'variables': variables
}
client.execute(body).then(async (response) => {
response = await response.json();
let responseTag = document.createElement('pre')
responseTag.id = "response"
subContainer.appendChild(responseTag)
responseTag.innerHTML = JSON.stringify(response, undefined, 4)
}).catch(e=> console.log(e))
})
})
})
})
</script>
</html>