Shipping Team | Showcase | MESCIUS DataViewsJS Demos

This example shows contact list of team grouped by first letter with interactive filtering.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Showcase/ShippingTeam/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="grid, grouping, filtering" />
<meta
name="description"
content="This example shows contact list of team grouped by first letter with interactive filtering"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shipping Team | Showcase | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link
href="/dataviewsjs/demos/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="main-container">
<div id="grid" class="grid"></div>
<div id="reset" class="reset" role="button">Show All</div>
<div class="toc-wrapper">
<ul id="toc" class="toc">
<li id="A">A</li>
<li id="B">B</li>
<li id="C">C</li>
<li id="D">D</li>
<li id="E">E</li>
<li id="F">F</li>
<li id="G">G</li>
<li id="H">H</li>
<li id="I">I</li>
<li id="J">J</li>
<li id="K">K</li>
<li id="L">L</li>
<li id="M">M</li>
<li id="N">N</li>
<li id="O">O</li>
<li id="P">P</li>
<li id="Q">Q</li>
<li id="R">R</li>
<li id="S">S</li>
<li id="T">T</li>
<li id="U">U</li>
<li id="V">V</li>
<li id="W">W</li>
<li id="X">X</li>
<li id="Y">Y</li>
<li id="Z">Z</li>
</ul>
</div>
</div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

function _typeof(o) {
'@babel/helpers - typeof';
return (
(_typeof =
'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
? function (o) {
return typeof o;
}
: function (o) {
return o && 'function' == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype
? 'symbol'
: typeof o;
}),
_typeof(o)
);
}
function _createForOfIteratorHelper(r, e) {
var t = ('undefined' != typeof Symbol && r[Symbol.iterator]) || r['@@iterator'];
if (!t) {
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || (e && r && 'number' == typeof r.length)) {
t && (r = t);
var _n = 0,
F = function F() {};
return {
s: F,
n: function n() {
return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] };
},
e: function e(r) {
throw r;
},
f: F,
};
}
throw new TypeError(
'Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
);
}
var o,
a = !0,
u = !1;
return {
s: function s() {
t = t.call(r);
},
n: function n() {
var r = t.next();
return (a = r.done), r;
},
e: function e(r) {
(u = !0), (o = r);
},
f: function f() {
try {
a || null == t.return || t.return();
} finally {
if (u) throw o;
}
},
};
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ('string' == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return (
'Object' === t && r.constructor && (t = r.constructor.name),
'Map' === t || 'Set' === t
? Array.from(r)
: 'Arguments' === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)
? _arrayLikeToArray(r, a)
: void 0
);
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r &&
(o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})),
t.push.apply(t, o);
}
return t;
}
function _objectSpread(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2
? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
})
: Object.getOwnPropertyDescriptors
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t))
: ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _defineProperty(e, r, t) {
return (
(r = _toPropertyKey(r)) in e
? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 })
: (e[r] = t),
e
);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, 'string');
return 'symbol' == _typeof(i) ? i : i + '';
}
function _toPrimitive(t, r) {
if ('object' != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || 'default');
if ('object' != _typeof(i)) return i;
throw new TypeError('@@toPrimitive must return a primitive value.');
}
return ('string' === r ? String : Number)(t);
}
// presenters
var employeePresenter =
'<div class="employee">\n    <img class="employee-pic" title="{{=it.employee}}" src="{{=it.photo}}" />\n    <div class="employee-info">\n      <div class="employee-name">{{=it.employee}}</div>\n      <div class="employee-position">{{=it.position}}</div>\n      <div class="employee-unit">{{=it.unit}}</div>\n  </div>\n</div>';
var communicationPresenter =
'<div class="communication">\n  <a class="communication-icon video fab fa-skype" href="skype:{{=it.skype}}" title="{{=it.skype}}"></a>\n  <a class="communication-icon voice fas fa-headset" href="tel:{{=it.phone}}" title="{{=it.phone}}"></a>\n  <a class="communication-icon email far fa-envelope" href="skype:{{=it.email}}" title="{{=it.email}}"></a>\n</div>';
var tenurePresenter =
'<div class="stat tenure">\n  <div class="stat-data">{{=it.tenure}}</div>\n  <div class="stat-label">Tenure</div>\n</div>';
var potentialPresenter =
'<div class="stat potential">\n  <div class="stat-data">{{=it.potential}}</div>\n  <div class="stat-label">Potential</div>\n</div>';
var ratingPresenter =
'<div class="stat rating">\n  <div class="stat-data">{{=it.rating}}</div>\n  <div class="stat-label">Rating</div>\n</div>';
// columns
var cols = [
{
id: 'employee',
caption: 'Employee',
dataField: 'employee',
presenter: employeePresenter,
},
{
id: 'communication',
caption: 'Communication',
dataField: 'lastName',
presenter: communicationPresenter,
},
{
id: 'tenure',
caption: 'Tenure',
dataField: 'tenure',
width: 80,
presenter: tenurePresenter,
},
{
id: 'potential',
caption: 'Potential',
dataField: 'potential',
width: 80,
presenter: potentialPresenter,
},
{
id: 'rating',
caption: 'Rating',
dataField: 'rating',
width: 80,
presenter: ratingPresenter,
},
];
// extend data structure
var demoData = data.map(function (entry) {
return _objectSpread(
_objectSpread({}, entry),
{},
{
employee: ''.concat(entry.firstName, ' ').concat(entry.lastName),
symbol: entry.lastName.charAt(0).toUpperCase(),
}
);
});
// sort data
demoData.sort(function (a, b) {
return a.symbol.localeCompare(b.symbol);
});
// highlight existing toc elements
demoData.forEach(function (entry) {
var target = document.getElementById(entry.symbol);
if (target) target.classList.add('exist');
});
// presenter
var groupingPresenter =
'<div class="group">\n  <div class="group-link" id="Symbol.{{=it.name}}">{{=it.name}}</div>\n  <div class="group-count">{{=it.count}}</div>\n</div>';
// layout
var layout = new GC.DataViews.GridLayout({
allowSorting: false,
allowColumnReorder: false,
allowColumnResize: false,
rowHeight: 84,
showColHeader: false,
showRowHeader: false,
grouping: [
{
field: 'symbol',
header: {
height: 42,
template: groupingPresenter,
},
footer: {
visible: false,
},
collapsed: false,
},
],
});
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), demoData, cols, layout);
// focus data.view by default
document.getElementById('grid').focus();
// TOC filtering
toc.onmousedown = function (event) {
var targetText = event.target.innerText;
if (!targetText) return;
var activeItems = document.querySelectorAll('#toc li.active');
var target = document.getElementById(targetText);
var _iterator = _createForOfIteratorHelper(activeItems),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done; ) {
var item = _step.value;
item.classList.remove('active');
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
if (target) target.classList.add('active');
document.getElementById('reset').classList.add('visible');
dataView.options.filtering = {
field: 'symbol',
operator: 'equal',
value: targetText,
};
};
// Reset filtering
reset.onmousedown = function () {
var activeItems = document.querySelectorAll('#toc li.active');
var _iterator2 = _createForOfIteratorHelper(activeItems),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done; ) {
var item = _step2.value;
item.classList.remove('active');
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
document.getElementById('reset').classList.remove('visible');
dataView.options.filtering = null;
};

var data = [
{
lastName: 'Engstrom',
firstName: 'Rose',
photo: 'https://i.pravatar.cc/48?img=1',
position: 'Stock Clerk',
unit: 'Shipping',
skype: 'engstrom',
phone: '773-727-3197',
email: 'engstrom@company.com',
tenure: 4,
potential: 4,
rating: 3,
},
{
lastName: 'Forbis',
firstName: 'Andrew',
photo: 'https://i.pravatar.cc/48?img=2',
position: 'Shipping Clerk',
unit: 'Shipping',
skype: 'forbis',
phone: '218-364-9490',
email: 'forbis@company.com',
tenure: 4,
potential: 4,
rating: 3,
},
{
lastName: 'Williams',
firstName: 'Lois',
photo: 'https://i.pravatar.cc/48?img=3',
position: 'Stock Clerk',
unit: 'Shipping',
skype: 'williams',
phone: '218-640-7250',
email: 'williams@company.com',
tenure: 4,
potential: 4,
rating: 3,
},
{
lastName: 'Gardner',
firstName: 'Pamela',
photo: 'https://i.pravatar.cc/48?img=4',
position: 'Shipping Clerk',
unit: 'Shipping',
skype: 'gardner',
phone: '337-540-9762',
email: 'gardner@company.com',
tenure: 4,
potential: 4,
rating: 3,
},
{
lastName: 'Dock',
firstName: 'James',
photo: 'https://i.pravatar.cc/48?img=5',
position: 'Stock Clerk',
unit: 'Shipping',
skype: 'dock',
phone: '941-977-9603',
email: 'dock@company.com',
tenure: 4,
potential: 4,
rating: 3,
},
{
lastName: 'Graham',
firstName: 'Douglas',
photo: 'https://i.pravatar.cc/48?img=6',
position: 'Shipping Clerk',
unit: 'Shipping',
skype: 'graham',
phone: '904-803-9666',
email: 'graham@company.com',
tenure: 4,
potential: 4,
rating: 3,
},
{
lastName: 'Decaro',
firstName: 'Caroline',
photo: 'https://i.pravatar.cc/48?img=7',
position: 'Stock Clerk',
unit: 'Shipping',
skype: 'decaro',
phone: '586-758-8469',
email: 'decaro@company.com',
tenure: 4,
potential: 4,
rating: 3,
},
{
lastName: 'Rosa',
firstName: 'Viola',
photo: 'https://i.pravatar.cc/48?img=8',
position: 'Shipping Clerk',
unit: 'Shipping',
skype: 'rosa',
phone: '269-240-6811',
email: 'rosa@company.com',
tenure: 4,
potential: 4,
rating: 3,
},
{
lastName: 'Butler',
firstName: 'Dennis',
photo: 'https://i.pravatar.cc/48?img=9',
position: 'Stock Clerk',
unit: 'Shipping',
skype: 'butler',
phone: '717-518-5737',
email: 'butler@company.com',
tenure: 4,
potential: 4,
rating: 3,
},
{
lastName: 'Sais',
firstName: 'Anne',
photo: 'https://i.pravatar.cc/48?img=10',
position: 'Stock Clerk',
unit: 'Shipping',
skype: 'sais',
phone: '831-821-0981',
email: 'sais@company.com',
tenure: 2,
potential: 4,
rating: 3,
},
{
lastName: 'Asbury',
firstName: 'Margaret',
photo: 'https://i.pravatar.cc/48?img=11',
position: 'Stock Clerk',
unit: 'Shipping',
skype: 'asbury',
phone: '602-390-6041',
email: 'asbury@company.com',
tenure: 5,
potential: 4,
rating: 4,
},
{
lastName: 'Furr',
firstName: 'Paul',
photo: 'https://i.pravatar.cc/48?img=12',
position: 'Stock Clerk',
unit: 'Shipping',
skype: 'furr',
phone: '606-610-7430',
email: 'furr@company.com',
tenure: 2,
potential: 4,
rating: 3,
},
{
lastName: 'Flanagan',
firstName: 'Joanne',
photo: 'https://i.pravatar.cc/48?img=13',
position: 'Stock Clerk',
unit: 'Shipping',
skype: 'flanagan',
phone: '254-998-0463',
email: 'flanagan@company.com',
tenure: 5,
potential: 4,
rating: 4,
},
];

.main-container {
display: flex;
overflow: hidden;
height: 100%;
width: 100%;
}
.grid {
overflow: auto;
}
.gc-row {
display: flex;
align-items: center;
flex-direction: row;
}
.group {
width: 100%;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: space-between;
}
.group-link {
font-size: 1.125rem;
font-weight: 600;
color: inherit;
margin-left: 10px;
}
.group-count {
margin-right: 10px;
}
.gc-group-header-row {
align-items: center;
}
.gc-cell-border {
border-right: transparent;
}
.gc-cell {
padding: 0;
display: inherit !important;
overflow: hidden;
}
.reset {
display: none;
border-radius: 1.4rem;
padding: 8px 16px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.2);
font-size: 1.25rem;
cursor: pointer;
z-index: 0;
position: absolute;
background: white;
min-width: 6rem;
height: 1.4rem;
align-items: center;
justify-content: center;
left: calc(50% - 3rem);
top: 0.25rem;
}
.reset.visible {
display: inline-flex;
}
.reset:hover {
color: deepskyblue;
}
.toc {
list-style: none;
padding: 14px 18px;
margin: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: space-between;
align-items: center;
pointer-events: none;
}
.toc > li {
opacity: 0.4;
cursor: default;
pointer-events: none;
}
.toc > li.exist {
cursor: pointer;
opacity: 1;
pointer-events: all;
}
.toc > li.exist:hover, .toc > li.active {
color: deepskyblue;
}
.toc-wrapper {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
overflow-y: auto;
}
.employee {
display: flex;
align-items: center;
box-sizing: border-box;
padding: 5px 0 5px 10px;
}
.employee-info {
padding-left: 12px;
}
.employee-pic {
width: 48px;
height: 48px;
display: block;
border-radius: 50%;
}
.employee-name {
font-weight: bold;
margin-bottom: 6px;
}
.employee-position {
margin-bottom: 3px;
}
.communication {
display: flex;
box-sizing: border-box;
padding: 5px 0;
}
.communication-icon {
font-size: 2rem;
margin-right: 24px;
text-decoration: none;
}
.communication-icon.video {
color: lightseagreen;
}
.communication-icon.voice {
color: forestgreen;
}
.communication-icon.email {
color: orange;
}
.stat {
text-align: center;
padding: 5px 0;
}
.stat-label {
font-size: 0.85rem;
}
.stat-data {
font-size: 2rem;
font-weight: 600;
}
.stat.tenure {
color: deepskyblue;
}
.stat.potential {
color: forestgreen;
}
.stat.rating {
color: orange;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNob3djYXNlL1NoaXBwaW5nVGVhbS9wdXJlanMvc3R5bGVzLnNjc3MiLCJTaG93Y2FzZS9TaGlwcGluZ1RlYW0vcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFBO0VBQ0EsZ0JBQUE7RUFDQSxZQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBO0VBQ0UsY0FBQTtBQ0NGOztBREVBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7QUNDRjs7QURFQTtFQUNFLFdBQUE7RUFDQSxhQUFBO0VBQ0EsY0FBQTtFQUNBLG1CQUFBO0VBQ0EsOEJBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0VBQ0EsZ0JBQUE7RUFDQSxjQUFBO0VBQ0EsaUJBQUE7QUNDRjs7QURFQTtFQUNFLGtCQUFBO0FDQ0Y7O0FERUE7RUFDRSxtQkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLFVBQUE7RUFDQSwyQkFBQTtFQUNBLGdCQUFBO0FDQ0Y7O0FERUE7RUFDRSxhQUFBO0VBQ0EscUJBQUE7RUFDQSxpQkFBQTtFQUNBLHlFQUFBO0VBQ0Esa0JBQUE7RUFDQSxlQUFBO0VBQ0EsVUFBQTtFQUNBLGtCQUFBO0VBQ0EsaUJBQUE7RUFDQSxlQUFBO0VBQ0EsY0FBQTtFQUNBLG1CQUFBO0VBQ0EsdUJBQUE7RUFDQSxzQkFBQTtFQUNBLFlBQUE7QUNDRjtBRENFO0VBQ0Usb0JBQUE7QUNDSjtBRENFO0VBQ0Usa0JBQUE7QUNDSjs7QURHQTtFQUNFLGdCQUFBO0VBQ0Esa0JBQUE7RUFDQSxTQUFBO0VBQ0EsYUFBQTtFQUNBLGNBQUE7RUFDQSxzQkFBQTtFQUNBLDhCQUFBO0VBQ0EsbUJBQUE7RUFDQSxvQkFBQTtBQ0FGO0FERUU7RUFDRSxZQUFBO0VBQ0EsZUFBQTtFQUNBLG9CQUFBO0FDQUo7QURHRTtFQUNFLGVBQUE7RUFDQSxVQUFBO0VBQ0EsbUJBQUE7QUNESjtBRElFO0VBRUUsa0JBQUE7QUNISjs7QURPQTtFQUNFLFlBQUE7RUFDQSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxnQkFBQTtFQUNBLGdCQUFBO0FDSkY7O0FET0E7RUFDRSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLHVCQUFBO0FDSkY7O0FET0E7RUFDRSxrQkFBQTtBQ0pGOztBRE9BO0VBQ0UsV0FBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0Esa0JBQUE7QUNKRjs7QURPQTtFQUNFLGlCQUFBO0VBQ0Esa0JBQUE7QUNKRjs7QURPQTtFQUNFLGtCQUFBO0FDSkY7O0FET0E7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxjQUFBO0FDSkY7O0FET0E7RUFDRSxlQUFBO0VBQ0Esa0JBQUE7RUFDQSxxQkFBQTtBQ0pGOztBRE9BO0VBQ0Usb0JBQUE7QUNKRjs7QURNQTtFQUNFLGtCQUFBO0FDSEY7O0FES0E7RUFDRSxhQUFBO0FDRkY7O0FES0E7RUFDRSxrQkFBQTtFQUNBLGNBQUE7QUNGRjs7QURLQTtFQUNFLGtCQUFBO0FDRkY7O0FES0E7RUFDRSxlQUFBO0VBQ0EsZ0JBQUE7QUNGRjs7QURLQTtFQUNFLGtCQUFBO0FDRkY7O0FESUE7RUFDRSxrQkFBQTtBQ0RGOztBREdBO0VBQ0UsYUFBQTtBQ0FGIiwiZmlsZSI6IlNob3djYXNlL1NoaXBwaW5nVGVhbS9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5ncmlkIHtcbiAgb3ZlcmZsb3c6IGF1dG87XG59XG5cbi5nYy1yb3cge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xufVxuXG4uZ3JvdXAge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleDogMSAxIGF1dG87XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2Vlbjtcbn1cblxuLmdyb3VwLWxpbmsge1xuICBmb250LXNpemU6IDEuMTI1cmVtO1xuICBmb250LXdlaWdodDogNjAwO1xuICBjb2xvcjogaW5oZXJpdDtcbiAgbWFyZ2luLWxlZnQ6IDEwcHg7XG59XG5cbi5ncm91cC1jb3VudCB7XG4gIG1hcmdpbi1yaWdodDogMTBweDtcbn1cblxuLmdjLWdyb3VwLWhlYWRlci1yb3cge1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuXG4uZ2MtY2VsbC1ib3JkZXIge1xuICBib3JkZXItcmlnaHQ6IHRyYW5zcGFyZW50O1xufVxuXG4uZ2MtY2VsbCB7XG4gIHBhZGRpbmc6IDA7XG4gIGRpc3BsYXk6IGluaGVyaXQgIWltcG9ydGFudDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbn1cblxuLnJlc2V0IHtcbiAgZGlzcGxheTogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogMS40cmVtO1xuICBwYWRkaW5nOiA4cHggMTZweDtcbiAgYm94LXNoYWRvdzogMCAwIDAgMXB4IHJnYmEoMCwgMCwgMCwgMC4wNCksIDAgNHB4IDhweCAwIHJnYmEoMCwgMCwgMCwgMC4yKTtcbiAgZm9udC1zaXplOiAxLjI1cmVtO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHotaW5kZXg6IDA7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYmFja2dyb3VuZDogd2hpdGU7XG4gIG1pbi13aWR0aDogNnJlbTtcbiAgaGVpZ2h0OiAxLjRyZW07XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBsZWZ0OiBjYWxjKDUwJSAtIDNyZW0pO1xuICB0b3A6IDAuMjVyZW07XG5cbiAgJi52aXNpYmxlIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgfVxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogZGVlcHNreWJsdWU7XG4gIH1cbn1cblxuLnRvYyB7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDE0cHggMThweDtcbiAgbWFyZ2luOiAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDEgYXV0bztcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAmID4gbGkge1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgICBjdXJzb3I6IGRlZmF1bHQ7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cblxuICAmID4gbGkuZXhpc3Qge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBvcGFjaXR5OiAxO1xuICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG4gIH1cblxuICAmID4gbGkuZXhpc3Q6aG92ZXIsXG4gICYgPiBsaS5hY3RpdmUge1xuICAgIGNvbG9yOiBkZWVwc2t5Ymx1ZTtcbiAgfVxufVxuXG4udG9jLXdyYXBwZXIge1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIG92ZXJmbG93LXk6IGF1dG87XG59XG5cbi5lbXBsb3llZSB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIHBhZGRpbmc6IDVweCAwIDVweCAxMHB4O1xufVxuXG4uZW1wbG95ZWUtaW5mbyB7XG4gIHBhZGRpbmctbGVmdDogMTJweDtcbn1cblxuLmVtcGxveWVlLXBpYyB7XG4gIHdpZHRoOiA0OHB4O1xuICBoZWlnaHQ6IDQ4cHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG59XG5cbi5lbXBsb3llZS1uYW1lIHtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIG1hcmdpbi1ib3R0b206IDZweDtcbn1cblxuLmVtcGxveWVlLXBvc2l0aW9uIHtcbiAgbWFyZ2luLWJvdHRvbTogM3B4O1xufVxuXG4uY29tbXVuaWNhdGlvbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIHBhZGRpbmc6IDVweCAwO1xufVxuXG4uY29tbXVuaWNhdGlvbi1pY29uIHtcbiAgZm9udC1zaXplOiAycmVtO1xuICBtYXJnaW4tcmlnaHQ6IDI0cHg7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbn1cblxuLmNvbW11bmljYXRpb24taWNvbi52aWRlbyB7XG4gIGNvbG9yOiBsaWdodHNlYWdyZWVuO1xufVxuLmNvbW11bmljYXRpb24taWNvbi52b2ljZSB7XG4gIGNvbG9yOiBmb3Jlc3RncmVlbjtcbn1cbi5jb21tdW5pY2F0aW9uLWljb24uZW1haWwge1xuICBjb2xvcjogb3JhbmdlO1xufVxuXG4uc3RhdCB7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgcGFkZGluZzogNXB4IDA7XG59XG5cbi5zdGF0LWxhYmVsIHtcbiAgZm9udC1zaXplOiAwLjg1cmVtO1xufVxuXG4uc3RhdC1kYXRhIHtcbiAgZm9udC1zaXplOiAycmVtO1xuICBmb250LXdlaWdodDogNjAwO1xufVxuXG4uc3RhdC50ZW51cmUge1xuICBjb2xvcjogZGVlcHNreWJsdWU7XG59XG4uc3RhdC5wb3RlbnRpYWwge1xuICBjb2xvcjogZm9yZXN0Z3JlZW47XG59XG4uc3RhdC5yYXRpbmcge1xuICBjb2xvcjogb3JhbmdlO1xufVxuIiwiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLmdyaWQge1xuICBvdmVyZmxvdzogYXV0bztcbn1cblxuLmdjLXJvdyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG59XG5cbi5ncm91cCB7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDEgYXV0bztcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xufVxuXG4uZ3JvdXAtbGluayB7XG4gIGZvbnQtc2l6ZTogMS4xMjVyZW07XG4gIGZvbnQtd2VpZ2h0OiA2MDA7XG4gIGNvbG9yOiBpbmhlcml0O1xuICBtYXJnaW4tbGVmdDogMTBweDtcbn1cblxuLmdyb3VwLWNvdW50IHtcbiAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xufVxuXG4uZ2MtZ3JvdXAtaGVhZGVyLXJvdyB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG5cbi5nYy1jZWxsLWJvcmRlciB7XG4gIGJvcmRlci1yaWdodDogdHJhbnNwYXJlbnQ7XG59XG5cbi5nYy1jZWxsIHtcbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogaW5oZXJpdCAhaW1wb3J0YW50O1xuICBvdmVyZmxvdzogaGlkZGVuO1xufVxuXG4ucmVzZXQge1xuICBkaXNwbGF5OiBub25lO1xuICBib3JkZXItcmFkaXVzOiAxLjRyZW07XG4gIHBhZGRpbmc6IDhweCAxNnB4O1xuICBib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSgwLCAwLCAwLCAwLjA0KSwgMCA0cHggOHB4IDAgcmdiYSgwLCAwLCAwLCAwLjIpO1xuICBmb250LXNpemU6IDEuMjVyZW07XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgei1pbmRleDogMDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBiYWNrZ3JvdW5kOiB3aGl0ZTtcbiAgbWluLXdpZHRoOiA2cmVtO1xuICBoZWlnaHQ6IDEuNHJlbTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGxlZnQ6IGNhbGMoNTAlIC0gM3JlbSk7XG4gIHRvcDogMC4yNXJlbTtcbn1cbi5yZXNldC52aXNpYmxlIHtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG59XG4ucmVzZXQ6aG92ZXIge1xuICBjb2xvcjogZGVlcHNreWJsdWU7XG59XG5cbi50b2Mge1xuICBsaXN0LXN0eWxlOiBub25lO1xuICBwYWRkaW5nOiAxNHB4IDE4cHg7XG4gIG1hcmdpbjogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleDogMSAxIGF1dG87XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG59XG4udG9jID4gbGkge1xuICBvcGFjaXR5OiAwLjQ7XG4gIGN1cnNvcjogZGVmYXVsdDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG59XG4udG9jID4gbGkuZXhpc3Qge1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIG9wYWNpdHk6IDE7XG4gIHBvaW50ZXItZXZlbnRzOiBhbGw7XG59XG4udG9jID4gbGkuZXhpc3Q6aG92ZXIsIC50b2MgPiBsaS5hY3RpdmUge1xuICBjb2xvcjogZGVlcHNreWJsdWU7XG59XG5cbi50b2Mtd3JhcHBlciB7XG4gIGhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgb3ZlcmZsb3cteTogYXV0bztcbn1cblxuLmVtcGxveWVlIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgcGFkZGluZzogNXB4IDAgNXB4IDEwcHg7XG59XG5cbi5lbXBsb3llZS1pbmZvIHtcbiAgcGFkZGluZy1sZWZ0OiAxMnB4O1xufVxuXG4uZW1wbG95ZWUtcGljIHtcbiAgd2lkdGg6IDQ4cHg7XG4gIGhlaWdodDogNDhweDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbn1cblxuLmVtcGxveWVlLW5hbWUge1xuICBmb250LXdlaWdodDogYm9sZDtcbiAgbWFyZ2luLWJvdHRvbTogNnB4O1xufVxuXG4uZW1wbG95ZWUtcG9zaXRpb24ge1xuICBtYXJnaW4tYm90dG9tOiAzcHg7XG59XG5cbi5jb21tdW5pY2F0aW9uIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgcGFkZGluZzogNXB4IDA7XG59XG5cbi5jb21tdW5pY2F0aW9uLWljb24ge1xuICBmb250LXNpemU6IDJyZW07XG4gIG1hcmdpbi1yaWdodDogMjRweDtcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xufVxuXG4uY29tbXVuaWNhdGlvbi1pY29uLnZpZGVvIHtcbiAgY29sb3I6IGxpZ2h0c2VhZ3JlZW47XG59XG5cbi5jb21tdW5pY2F0aW9uLWljb24udm9pY2Uge1xuICBjb2xvcjogZm9yZXN0Z3JlZW47XG59XG5cbi5jb21tdW5pY2F0aW9uLWljb24uZW1haWwge1xuICBjb2xvcjogb3JhbmdlO1xufVxuXG4uc3RhdCB7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgcGFkZGluZzogNXB4IDA7XG59XG5cbi5zdGF0LWxhYmVsIHtcbiAgZm9udC1zaXplOiAwLjg1cmVtO1xufVxuXG4uc3RhdC1kYXRhIHtcbiAgZm9udC1zaXplOiAycmVtO1xuICBmb250LXdlaWdodDogNjAwO1xufVxuXG4uc3RhdC50ZW51cmUge1xuICBjb2xvcjogZGVlcHNreWJsdWU7XG59XG5cbi5zdGF0LnBvdGVudGlhbCB7XG4gIGNvbG9yOiBmb3Jlc3RncmVlbjtcbn1cblxuLnN0YXQucmF0aW5nIHtcbiAgY29sb3I6IG9yYW5nZTtcbn0iXX0= */