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 _createForOfIteratorHelper(o, allowArrayLike) {
var it;
if (typeof Symbol === 'undefined' || o[Symbol.iterator] == null) {
if (
Array.isArray(o) ||
(it = _unsupportedIterableToArray(o)) ||
(allowArrayLike && o && typeof o.length === 'number')
) {
if (it) o = it;
var i = 0;
var F = function F() {};
return {
s: F,
n: function n() {
if (i >= o.length) return { done: true };
return { done: false, value: o[i++] };
},
e: function e(_e) {
throw _e;
},
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 normalCompletion = true,
didErr = false,
err;
return {
s: function s() {
it = o[Symbol.iterator]();
},
n: function n() {
var step = it.next();
normalCompletion = step.done;
return step;
},
e: function e(_e2) {
didErr = true;
err = _e2;
},
f: function f() {
try {
if (!normalCompletion && it.return != null) it.return();
} finally {
if (didErr) throw err;
}
},
};
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === 'string') return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === 'Object' && o.constructor) n = o.constructor.name;
if (n === 'Map' || n === 'Set') return Array.from(o);
if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return arr2;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly)
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
} else {
obj[key] = value;
}
return obj;
}
// 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= */