-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
116 lines (112 loc) · 6.64 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>REST API Ping</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="form-group">
<label for="server-address">Server Address:</label>
<input type="text" class="form-control" id="server-address" name="server-address" value="http://localhost:3000/api">
</div>
<div class="form-group">
<label for="endpoint-select">Endpoint:</label>
<select class="form-control" id="endpoint-select">
<option value="/">GET: IndexPage ('/')</option>
<option value="/ping">GET: Ping ('/ping')</option>
<option value="/delete/labelfiles">POST: DeleteLabelFiles ('/delete/labelfiles')</option>
<option value="/printers">POST: Printers ('/printers')</option>
<option value="/print/batch_label">POST: PrintBatchLabel ('/print/batch_label')</option>
<option value="/print/box_label">POST: PrintBoxLabel ('/print/box_label')</option>
</select>
</div>
<div class="form-group">
<label for="request-method">Request Method:</label>
<select class="form-control" id="request-method">
<option value="GET">GET</option>
<option value="POST">POST</option>
</select>
</div>
<button class="btn btn-primary" id="action-button">Make Call</button>
<div class="form-group">
<label for="request-body">Request Body:</label>
<textarea class="form-control" style="height: 200px; font-family:monospace;" id="request-body"></textarea>
</div>
<div class="form-group">
<label for="response-timestamp">Response Timestamp:</label>
<input type="text" class="form-control" id="response-timestamp" readonly>
</div>
<div class="form-group">
<label for="response">Response:</label>
<textarea class="form-control" style="height: 400px; font-family:monospace;" id="response" readonly></textarea>
</div>
<script>
let actionButton = document.getElementById('action-button');
let responseField = document.getElementById('response');
let responseTimestampField = document.getElementById('response-timestamp');
let endpointSelect = document.getElementById('endpoint-select');
let requestBodyField = document.getElementById('request-body');
endpointSelect.addEventListener('change', () => {
if (endpointSelect.value === '/') {
requestBodyField.value = '';
document.getElementById('request-method').value = 'GET';
}
if (endpointSelect.value === '/ping') {
requestBodyField.value = '';
document.getElementById('request-method').value = 'GET';
}
if (endpointSelect.value === '/printers') {
requestBodyField.value = '{ "api_key": "g897hdfsgo987oh9gbinuhjvc" }';
document.getElementById('request-method').value = 'POST';
}
if (endpointSelect.value === '/delete/labelfiles') {
requestBodyField.value = '{ "api_key": "g897hdfsgo987oh9gbinuhjvc" }';
document.getElementById('request-method').value = 'POST';
}
if (endpointSelect.value === '/print/batch_label') {
requestBodyField.value = '{ "api_key": "g897hdfsgo987oh9gbinuhjvc", "printer": "WE1-Batchlabel", "batch": "32C242A", "item_code": "930304F", "description_line1": "description line 1", "description_line2": "description line 2", "warehouse": "KIT0123", "warehouse_parent": "A14", "tower": "TOWER", "msl": "MSL 3", "qty": "100", "date": "19.08.2023", "user": "Dominik Ottenbreit"}';
document.getElementById('request-method').value = 'POST';
}
if (endpointSelect.value === '/print/box_label') {
requestBodyField.value = '{ "api_key": "g897hdfsgo987oh9gbinuhjvc", "printer": "WE1-Boxlabel", "kitting_box": "KIT186 - ESODE", "work_order": "WO-DE-23-00423-ST", "item_code": "IDO-0001E-01A-DE-ST", "priority": "Standard", "sales_order": "SO-DE-23-00526", "qty": 200, "description": "Idoru Pedal v5.0", "type": "Erstauftrag" }';
document.getElementById('request-method').value = 'POST';
}
var ugly = document.getElementById('request-body').value;
if (ugly) {
var obj = JSON.parse(ugly);
var pretty = JSON.stringify(obj, null, 4);
document.getElementById('request-body').value = pretty;
}
});
actionButton.addEventListener('click', () => {
let serverAddress = document.getElementById('server-address').value;
let requestMethod = document.getElementById('request-method').value;
let endpoint = endpointSelect.value;
let requestBody = requestBodyField.value;
if (requestMethod == "GET") {
requestBody = null;
}
fetch(serverAddress + endpoint, {
method: requestMethod,
body: requestBody,
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (!response.ok) {
throw new Error(response.statusText);
}
responseTimestampField.value = new Date().toLocaleString();
return response.json();
})
.then(data => responseField.value = JSON.stringify(data, null, 4))
.catch(error => responseField.value = error.message);
});
</script>
</div>
</body>
</html>