Skip to content

Instantly share code, notes, and snippets.

@rimiti

rimiti/index.html

Created August 13, 2019 13:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rimiti/bdb8732682e073fd1d52aee0c7022611 to your computer and use it in GitHub Desktop.
Save rimiti/bdb8732682e073fd1d52aee0c7022611 to your computer and use it in GitHub Desktop.
Download ZIP
zendesk-app
Raw
index.html
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<!--<html xmlns="http://www.w3.org/1999/xhtml">-->
<!--<head>-->
<!-- <title>Test Layout</title>-->
<!-- <style type="text/css">-->
<!-- body, html-->
<!-- {-->
<!-- margin: 0; padding: 0; height: 100%; overflow: hidden;-->
<!-- }-->
<!-- #content-->
<!-- {-->
<!-- position:absolute; left: 0; right: 0; bottom: 0; top: 0px;-->
<!-- }-->
<!-- </style>-->
<!--</head>-->
<!--<body>-->
<!--<div id="content">-->
<!-- <iframe width="100%" height="100%" frameborder="0" src="https://bo.kapten.com" />-->
<!--</div>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-bedrock@7.0" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-utilities" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-tags" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-callouts" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zendeskgarden/css-buttons" type="text/css">
<link rel="stylesheet" href="./styles.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
</head>
<body>
<div class="user-profiles-container">
<div class="requester-name u-semibold u-ta-center u-fs-lg"></div>
<div class="vertical-line"></div>
<div class="details">
<div class="c-callout">
<a class="driver-status c-btn c-btn--primary" aria-disabled="true" role="button"></a>
</div>
<a class="back-office c-btn c-btn--primary" target="_blank" href="https://bo.kapten.com/users/" role="button">Back office</a>
</div>
</div>
<script>
const driverBackOfficeLink = 'https://bo.kapten.com/users/';
const client = ZAFClient.init();
client.invoke('resize', { width: '100%', height: '200px' });
const client = {
get: () => {
return Promise.resolve({
ticket: {
id: 123,
state: 'available',
requester: 'John Doe',
email: 'example@gmail.com',
externalId: 123
}
});
}
};
$(function() {
client.get('ticket')
.then(({ ticket }) => {
$('.requester-name').html(ticket.requester.name);
$('.details ul > li:nth-child(1) span').html(ticket.requester.email);
$('.details a').attr('href', driverBackOfficeLink + ticket.requester.externalId);
setInterval(function() {
$.getJSON('https://www.mocky.io/v2/5cd43788350000aa2c7a5417', function({ driver }) {
if(driver.state === 'available') {
$('.details a').removeClass('not-available').addClass('available').text('Available');
} else if(driver.state === 'not-available'){
$('.details a').removeClass('available').addClass('not-available').text('Not available');
} else {
$('.details a').removeClass('available not-available').addClass('loading').text('spinner');
}
});
}, 1000);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment