Shipping Team

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

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 | GrapeCity 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" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <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: 'GrapeCity-Internal-Use-Only,GrapeCity,E195393772372914#B0KV4Ny56Vr5Wb7w6buJWeGRWb4NXUnNXRlFWWXl6SoN5VzVkYslmQ95WTENkTllVQzd4QhpEejdDNJZlWOp6M7oERQNnWspkaaB5QMhnR7dmUkRnVJR4L5cHTKNkZZdDbRBzZIxmSSR6NrpVQaVUQrBlc6ImYysSd4UlUEZGbw2kMl9UOzQVMId6ZXtUN83CO5RzaZt4VY5kM5pkUGpUUUV7UExUeGpUdTV5dFJ4bPhTc8pGeXJHWrkzNlFzdUtWTr5UQDdVckdGbSVUWr2yMPNzctZVRxEEW9lEbsZHUKJnVaRXT5p6Z0tWMqJGVrtSTIZnaopGSWZXbVNjY0hzQB5We4dnUr3ER8MkI0IyUiwiIGZUNwEkN5MjI0ICSiwSM9ETO6czNygTM0IicfJye#4Xfd5nIZRVV9IiOiMkIsISM6ByUKN7dllmVhRXYEJiOi8kI1tlOiQmcQJCLiEDMzATOwAyMwgDMwIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKs86Yu46bj9Se4l6YlBXYydmLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwSZ5JHd0ICb6VkIsICNxkjM7MjM7czM9MTN9EjI0ICZJJye0ICRiwiI34zZN3yZGNlUnJDe5wkQPVlcBh7SppmUNBlU9dWS7J4ZMRES4MTZkRXTxM7Uq5GeQdHcyFHVup6dQd6ZDpEVrNDSh9kbNdzZrl4dwdPQ', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </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"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <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= */