-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
50 lines (50 loc) · 2.29 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
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="favicon.png"/>
<title>Products</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>List of products</h1>
<h2>There are <span id="nbproducts">0</span> product(s) available</h2>
<div id="products" class="row" style="padding: 10px;">Loading...</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
const root = 'https://demo.dev2.simplicite.io/api/';
const opts = { crossDomain: true, xhrFields: { withCredentials: true } };
$(document).ready(() => {
$.ajaxSetup(opts);
// Call to login endpoint to get a auth token
$.ajax({ url: root + 'login?_output=json', data: { username: 'website', password: 'simplicite' } }).done(user => {
console.log(user);
// Add the auth token to the global Ajax options
opts.headers = { 'X-Simplicite-Authorization': 'Bearer ' + user.authtoken }
$.ajaxSetup(opts);
// Call search REST service on the DemoProduct object with filter on the demoPrdAvailable field
$.ajax({ url: root + 'rest/DemoProduct?_inline_thumbnails=true', data: { demoPrdAvailable: true } }).done(products => {
$('#nbproducts').text(products.length);
const $p = $('#products').empty();
for (let k in products) {
const p = products[k];
console.log(p);
$p.append($('<div/>').addClass('col col-lg-4')
.append($('<div/>').css('margin', '.25rem').addClass('card')
.append($('<div/>').addClass('card-header').append(p.demoPrdReference))
.append($('<div/>').addClass('card-body')
.append($('<img/>', { src: 'data:' + p.mime + ';base64,' + p.demoPrdPicture.thumbnail }))
.append($('<h5/>').addClass('card-title').append(p.demoPrdName))
.append($('<h6/>').addClass('card-subtitle mb-2 text-muted').append(p.demoPrdDescription))
.append($('<div/>').css('max-height', '10rem').css('overflow', 'auto').addClass('alert alert-secondary').append(p.demoPrdDocumentation))
)
)
);
}
}).fail((xhr, status, err) => { console.error(err); });
}).fail((xhr, status, err) => { console.error(err); });
});
</script>
</body>