]> _ Git - fluidbook-html5.git/commitdiff
wip #4740 @2
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 23 Nov 2021 19:36:05 +0000 (20:36 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 23 Nov 2021 19:36:05 +0000 (20:36 +0100)
js/libs/fluidbook/special/wescosales.js
style/special/wescosales.less

index 8c850c20606edfd76806e7924fd813d10f68615f..82e1b06a99860ee269e56da7ff8c450cbf17ee6d 100644 (file)
@@ -2,6 +2,10 @@ var wsref = {};
 var normalizeRefCache = {};
 var allrefs = null;
 var pagesofrefs = null;
+var kitsByRef = null;
+var refsByKit = null;
+var groups = null;
+var groupsByRef = null;
 
 $(function () {
     $(document).on('fluidbook.init', function () {
@@ -9,12 +13,18 @@ $(function () {
         $(fluidbook).on('fluidbook.navigation.ready', initWescoNav);
         $(fluidbook).on('fluidbook.links.ready', wescoLinksReady);
         $(fluidbook).on('fluidbook.resize', wescoResize);
+        $(document).on('click', '.wescosaleswindow a[data-tab]', function () {
+            var w = $(this).closest('.wescosaleswindow');
+            $(w).find('.tabs a').removeClass('active');
+            $(w).find('div[data-tab]').hide();
+            $(w).find('div[data-tab="' + $(this).data('tab') + '"]').show();
+            $(this).addClass('active');
+            return false;
+        });
     });
 });
 
 function initWescoNav() {
-
-    console.log('initWescoNav');
     var select = $('<select id="wescosalesselect"></select>');
     $.each(fluidbook.settings.basketReferences, function (k, v) {
         if (k === 'Groupes' || k === 'Kits') {
@@ -69,16 +79,88 @@ function wescoResize() {
 }
 
 function setWescoSalesPanel(ref, e, updateOnly) {
+    var ref = normalizeRef(ref);
     if (updateOnly === undefined) {
         updateOnly = false;
     }
-    var refs = getWescoReferences(ref);
-    var rid = forge_sha256(refs.join('-')).substr(0, 10);
+
+
+    var rid = forge_sha256(ref).substr(0, 10);
     var id = "wescosaleswindow-" + rid;
     if ($("#" + id).length != 0) {
         updateOnly = true;
     }
 
+    var tabs = ['<a nohref data-tab="product" class="active">Produit</a>'];
+    var w = '';
+
+    // Product tab
+    w += wescoSalesTab('product', ref);
+    // Groups tab
+
+    if (groupsByRef[ref] !== null) {
+        for (var j in groupsByRef[ref]) {
+            var groupId = groupsByRef[ref][j];
+            var group = groups[groupId];
+            tabs.push('<a nohref data-tab="group_' + groupId + '" title="' + escapeHtml(group.label) + '">' + group.label + '</a>');
+            w += wescoSalesTab('group_' + groupId, group.references.join(','));
+        }
+    }
+
+    // Kits tab
+    if (kitsByRef[ref] !== undefined && kitsByRef[ref] !== null) {
+        var kitrefs = [ref];
+        var kitq = {};
+        kitq[ref] = 1;
+        for (var k in kitsByRef[ref]) {
+            var kitdata = kitsByRef[ref][k];
+            kitrefs.push(kitdata.kit);
+            kitq[kitdata.kit] = kitdata.q;
+        }
+
+        tabs.push('<a nohref data-tab="kits">Kits</a>');
+        w += wescoSalesTab('kits', kitrefs.join(','), kitq, ref, true);
+    }
+
+    // Close tab
+
+    var nbtabs = tabs.length;
+    tabs.push('<a href="#" class="close"></a>');
+    w = '<div class="tabs">' + tabs.join('') + '</div>' + w;
+
+    if (!updateOnly) {
+        $('body').append('<div id="' + id + '" class="wescosaleswindow" data-id="' + rid + '"></div>');
+    }
+
+    $('#' + id).html(w);
+    var maxwidth = ((300 - 30) / nbtabs) - 2;
+    $("#" + id).find('.tabs a[data-tab]').css('max-width', maxwidth);
+    if (tabs.length >= 2) {
+        $("#" + id).find('.tabs a[data-tab]').css('width', maxwidth);
+    }
+    if (e != null) {
+        var x = e.pageX - 150;
+        var y = e.pageY - $("#" + id).outerHeight() / 2;
+        $("#" + id).css({left: x, top: y}).data({x: x, y: y});
+    }
+
+
+    setInteractPanel(id, updateOnly);
+}
+
+function wescoSalesTab(id, ref, refquantities, titleref, hideca) {
+
+    if (hideca === undefined) {
+        hideca = false;
+    }
+
+    var refs = getWescoReferences(ref);
+
+    if (titleref === undefined) {
+        titleref = refs[0]
+    }
+
+
     var activeCountry = $("#wescosalesselect").val();
     var first = true;
     var wtitle = '';
@@ -103,6 +185,11 @@ function setWescoSalesPanel(ref, e, updateOnly) {
             wrefs.push(rref.substr(0, 2) + ' ' + rref.substr(2));
         }
 
+        var q = 1;
+        if (refquantities !== undefined && refquantities[ref] !== undefined && refquantities[ref] !== null) {
+            q = refquantities[ref];
+        }
+
 
         for (var i in r.countries[activeCountry]) {
             var d = r.countries[activeCountry][i];
@@ -113,7 +200,7 @@ function setWescoSalesPanel(ref, e, updateOnly) {
                 if (d[2] === null) {
                     suppLines[d[0]] = d[1];
                 } else {
-                    wlines[d[0]] = {ca: d[1], qte: d[2]};
+                    wlines[d[0]] = {qte: d[1], ca: d[2]};
                 }
             } else {
                 if (d[2] === null) {
@@ -123,25 +210,32 @@ function setWescoSalesPanel(ref, e, updateOnly) {
                         wlines[d[0]] = {ca: 0, qte: 0};
                     }
 
-                    wlines[d[0]].ca += wescoParseNumber(d[1]);
-                    wlines[d[0]].qte += wescoParseNumber(d[2]);
+                    wlines[d[0]].qte += wescoParseNumber(d[1]) * q;
+                    wlines[d[0]].ca += wescoParseNumber(d[2]);
                 }
             }
         }
     });
 
+    if (titleref !== undefined) {
+        var r = getWescoRef(titleref);
+        wtitle = r.title;
+    }
 
-    var w = '';
-    w += '<a href="#" class="close"></a>';
+    var w = '<div data-tab="' + id + '">';
     w += '<h2>' + wtitle + '</h2>';
     w += '<h3>' + wrefs.join(', ') + '</h3>';
     w += '<hr />';
-    if (!updateOnly) {
-        $('body').append('<div id="' + id + '" class="wescosaleswindow" data-id="' + rid + '"></div>');
-    }
+
 
     w += '<table>';
-    w += '<tr><th></th><th>Qté</th><th>CA</th></tr>';
+    w += '<tr><th></th><th>Qté</th>';
+    var colspan = 2;
+    if (!hideca) {
+        colspan++;
+        w += '<th>CA</th>';
+    }
+    w += '</tr>';
 
     var format = new Intl.NumberFormat('fr-FR');
 
@@ -150,28 +244,26 @@ function setWescoSalesPanel(ref, e, updateOnly) {
         var qte = unique && line.qte.match(/[^0-9, .]/) ? line.qte : format.format(wescoParseNumber(line.qte));
         w += '<tr>';
         w += '<td class="d">' + date + '</td>';
-        w += '<td class="v">' + ca + '</td>';
-        w += '<td class="c">' + qte + '</td>';
+        if (!hideca) {
+            w += '<td class="v">' + qte + '</td>';
+            w += '<td class="c">' + ca + '</td>';
+        } else {
+            w += '<td class="c" style="border:0">' + qte + '</td>';
+        }
         w += '</tr>';
     });
     if (Object.keys(suppLines).length > 0) {
-        w += '<tr class="hr"><td colspan="3"><hr /></td></tr>';
+        w += '<tr class="hr"><td colspan="' + colspan + '"><hr /></td></tr>';
         $.each(suppLines, function (t, line) {
             w += '<tr>';
             w += '<td class="d">' + t + '</td>';
-            w += '<td class="v t" colspan="2">' + line + '</td>';
+            w += '<td class="v t" colspan="' + (colspan - 1) + '">' + line + '</td>';
             w += '</tr>';
         });
     }
-    w += '<table>';
-    $('#' + id).html(w);
-    if (e != null) {
-        var x = e.pageX - 150;
-        var y = e.pageY - $("#" + id).outerHeight() / 2;
-        $("#" + id).css({left: x, top: y}).data({x: x, y: y});
-    }
-
-    setInteractPanel(id, updateOnly);
+    w += '</table>';
+    w += '</div>';
+    return w;
 }
 
 function wescoParseNumber(n) {
@@ -184,15 +276,62 @@ function wescoParseNumber(n) {
 function getAllRefs() {
     if (allrefs === null) {
         var res = [];
+        var linenum;
+        var line;
         for (var country in fluidbook.settings.basketReferences) {
             var sheet = fluidbook.settings.basketReferences[country];
             if (country === 'Kits') {
-
+                //refsByKit = {};
+                kitsByRef = {};
+                for (linenum in sheet) {
+                    if (linenum <= 0) {
+                        continue;
+                    }
+                    line = sheet[linenum];
+                    if (line[0] === null) {
+                        continue;
+                    }
+                    var ref = normalizeRef(line[1]);
+                    var kitref = normalizeRef(line[0]);
+                    if (kitsByRef[ref] === null || kitsByRef[ref] === undefined) {
+                        kitsByRef[ref] = [];
+                    }
+                    kitsByRef[ref].push({'kit': kitref, 'q': parseFloat(line[2])});
+                    //refsByKit[normalizeRef(line[0])] = {'kit': normalizeRef(line[1]), 'q': line[2]}
+                }
             } else if (country === 'Groupes') {
-
-            } else {
-                for (var linenum in sheet) {
-                    var line = sheet[linenum];
+                groups = {};
+                groupsByRef = {};
+                for (linenum in sheet) {
+                    if (linenum <= 0) {
+                        continue;
+                    }
+                    line = sheet[linenum];
+                    if (line[0] === null) {
+                        continue;
+                    }
+                    var groupId = linenum;
+                    var label = (line[1] === null || line[1] === '' || line[1] === undefined) ? line[0] : line[1];
+                    var group = {label: label};
+                    var references = [];
+                    for (var gi = 2; gi <= line.length; gi++) {
+                        var v = line[gi];
+                        if (v === undefined || v === null || v === '') {
+                            break;
+                        }
+                        var ref = normalizeRef(v);
+                        references.push(ref);
+                        if (groupsByRef[ref] === undefined || groupsByRef[ref] === null) {
+                            groupsByRef[ref] = [];
+                        }
+                        groupsByRef[ref].push(groupId);
+                    }
+                    group.references = references;
+                    groups[groupId] = group;
+                }
+            } else if (country === 'Global') {
+                for (linenum in sheet) {
+                    line = sheet[linenum];
                     if (line[0] === null) {
                         continue;
                     }
@@ -207,7 +346,6 @@ function getAllRefs() {
                     }
                 }
             }
-            break;
         }
         allrefs = res;
     }
@@ -432,13 +570,11 @@ WescoSalesSearchPlugin.prototype = {
 
     submitQuery: function (q) {
         if (!q.match(/(\d\s*)/gm)) {
-            console.log('not ref (format)');
             return true;
         }
         q = q.replace(/\s/gm, '');
 
         if (q.length != 5) {
-            console.log('not ref (length)', q);
             return true;
         }
         var all = getAllRefs();
index 8e42d71a2b11aa57215f7d71138e65b4e251bcfb..b1a87004c404749ccd1851035e64a17712bb5519 100644 (file)
 @import "../variables";
 
 #wescosalesselector {
-       color: #5592c9;
-       display: inline-block;
-       padding: 8px 30px 0 15px;
-       span {
-
-       }
-       #wescosalesselect {
-               font-family: @font;
-               background-color: #5592c9;
-               background-image: url("../../images/select-arrow.svg");
-               background-repeat: no-repeat;
-               background-position: 130px 8px;
-               color: #ffffff;
-               border-radius: 2px;
-               padding: 0 15px 0 5px;
-               border: 0;
-               height: 22px;
-               -webkit-appearance: none;
-               -moz-appearance: none;
-               appearance: none;
-               margin-left: 15px;
-               cursor: pointer;
-               width: 150px;
-       }
+  color: #5592c9;
+  display: inline-block;
+  padding: 8px 30px 0 15px;
+
+  span {
+
+  }
+
+  #wescosalesselect {
+    font-family: @font;
+    background-color: #5592c9;
+    background-image: url("../../images/select-arrow.svg");
+    background-repeat: no-repeat;
+    background-position: 130px 8px;
+    color: #ffffff;
+    border-radius: 2px;
+    padding: 0 15px 0 5px;
+    border: 0;
+    height: 22px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin-left: 15px;
+    cursor: pointer;
+    width: 150px;
+  }
 }
 
 .wescosaleswindow {
-       position: absolute;
-       z-index: 1000;
-       background-color: #5592c9;
-       border-radius: 2px;
-       color: #fff;
-       padding: 20px;
-       width: 300px;
-       box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
-
-       .close {
-               position: absolute;
-               top: 10px;
-               right: 10px;
-               background-image: url("../../images/close.svg");
-               background-repeat: no-repeat;
-               background-position: 10px 10px;
-               width: 37px;
-               height: 37px;
-               display: inline-block;
-               transition: transform 0.4s;
-               &:hover {
-                       transform: rotate(90deg);
-               }
-       }
-
-       hr {
-               border: 0;
-               height: 1px;
-               background-color: #fff;
-               margin: 17px 0;
-       }
-
-       h2 {
-               font-size: 14px;
-               font-weight: 400;
-               padding-right: 30px;
-       }
-
-       h3 {
-               font-size: 11px;
-               font-weight: 400;
-               margin-top: 5px;
-       }
-
-       table {
-               width: 100%;
-               font-size: 13px;
-               border-collapse: collapse;
-               tr.hr td {
-                       height: 15px;
-                       hr {
-                               bottom: 0;
-                               height: 1px;
-                               background: #fff;
-                               width: 100%;
-                       }
-               }
-               td {
-                       margin: 0px 0;
-               }
-               th {
-                       text-align: right;
-                       padding: 0 15px;
-               }
-               .v {
-                       text-align: right;
-                       white-space: nowrap;
-                       width: 1px;
-                       padding: 0 15px;
-
-                       &.t {
-                               width: 200px;
-                               white-space: normal;
-                       }
-               }
-               .c {
-                       text-align: right;
-                       white-space: nowrap;
-                       width: 1px;
-                       border-left: 1px solid #fff;
-                       padding: 0 15px;
-               }
-       }
+  position: absolute;
+  z-index: 1000;
+  background-color: #5592c9;
+  border-radius: 0 0 2px 2px;
+  color: #fff;
+  padding: 20px;
+  width: 300px;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+
+  div[data-tab] {
+    display: none;
+  }
+
+  div[data-tab="product"] {
+    display: block;
+  }
+
+  .tabs {
+    position: absolute;
+    top: -24px;
+    left: 0px;
+    width: 300px;
+
+    a {
+      background-color: #366a95;
+      display: inline-block;
+      border-radius: 5px 5px 0 0;
+      cursor: pointer;
+      text-transform: uppercase;
+      height: 24px;
+      font-size: 15px;
+      padding: 2px 7px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 2px;
+      text-align: center;
+
+      &.active, &:hover {
+        background-color: #5592c9;
+      }
+
+      &.close {
+        background-image: url("../../images/close.svg");
+        background-repeat: no-repeat;
+        background-position: 8px 5px;
+        background-size: 15px 15px;
+        margin: 0;
+        width: 30px;
+        height: 24px;
+        display: inline-block;
+        position: absolute;
+        right: 0;
+      }
+    }
+  }
+
+
+  hr {
+    border: 0;
+    height: 1px;
+    background-color: #fff;
+    margin: 17px 0;
+  }
+
+  h2 {
+    font-size: 14px;
+    font-weight: 400;
+    padding-right: 30px;
+  }
+
+  h3 {
+    font-size: 11px;
+    font-weight: 400;
+    margin-top: 5px;
+  }
+
+  table {
+    width: 100%;
+    font-size: 13px;
+    border-collapse: collapse;
+
+    tr.hr td {
+      height: 15px;
+
+      hr {
+        bottom: 0;
+        height: 1px;
+        background: #fff;
+        width: 100%;
+      }
+    }
+
+    td {
+      margin: 0px 0;
+    }
+
+    th {
+      text-align: right;
+      padding: 0 15px;
+    }
+
+    .v {
+      text-align: right;
+      white-space: nowrap;
+      width: 1px;
+      padding: 0 15px;
+
+      &.t {
+        width: 200px;
+        white-space: normal;
+      }
+    }
+
+    .c {
+      text-align: right;
+      white-space: nowrap;
+      width: 1px;
+      border-left: 1px solid #fff;
+      padding: 0 15px;
+    }
+  }
 }
 
 .link a {
-       &[data-wescosales-ref] {
-               background-repeat: repeat;
-               &.supp, &.supp.export {
-                       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMjk3NmM2ZS0xYTkyLTk1NDItOTdjZC1hZjEwYzFmZmY5ZmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEZFNUIwODBFMjRDMTFFNjlDRTc5MTdBRkE3NjBDODUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEZFNUIwN0ZFMjRDMTFFNjlDRTc5MTdBRkE3NjBDODUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMjk3NmM2ZS0xYTkyLTk1NDItOTdjZC1hZjEwYzFmZmY5ZmIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjI5NzZjNmUtMWE5Mi05NTQyLTk3Y2QtYWYxMGMxZmZmOWZiIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6H4n7wAAADhJREFUeNp8zzkOADAMAkHD//9M4jRRDqCyNNsYksoOEBOWBCbskwnf4MIz+OAODC6aT1rsDQEGAIKCGgpVj078AAAAAElFTkSuQmCC");
-               }
-               &.export {
-                       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMjk3NmM2ZS0xYTkyLTk1NDItOTdjZC1hZjEwYzFmZmY5ZmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjY5NUE2ODhDOTJEMTFFNzkwNThENEQyQTVGM0I1OEQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjY5NUE2ODdDOTJEMTFFNzkwNThENEQyQTVGM0I1OEQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RkU1QjA3RkUyNEMxMUU2OUNFNzkxN0FGQTc2MEM4NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RkU1QjA4MEUyNEMxMUU2OUNFNzkxN0FGQTc2MEM4NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgwvKjwAAAA5SURBVHjaYvz//z8DLsBaZvSfAaQAG2YpNfwP1oxPEqsCZEkMBeiSKAqwScIV4JIEK8AnCcIAAQYAFiqit0KbOMYAAAAASUVORK5CYII=");
-               }
-               &.highlight {
-                       background-color: rgba(0, 255, 0, 0.5);
-               }
-       }
+  &[data-wescosales-ref] {
+    background-repeat: repeat;
+
+    &.supp, &.supp.export {
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMjk3NmM2ZS0xYTkyLTk1NDItOTdjZC1hZjEwYzFmZmY5ZmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEZFNUIwODBFMjRDMTFFNjlDRTc5MTdBRkE3NjBDODUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEZFNUIwN0ZFMjRDMTFFNjlDRTc5MTdBRkE3NjBDODUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMjk3NmM2ZS0xYTkyLTk1NDItOTdjZC1hZjEwYzFmZmY5ZmIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjI5NzZjNmUtMWE5Mi05NTQyLTk3Y2QtYWYxMGMxZmZmOWZiIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6H4n7wAAADhJREFUeNp8zzkOADAMAkHD//9M4jRRDqCyNNsYksoOEBOWBCbskwnf4MIz+OAODC6aT1rsDQEGAIKCGgpVj078AAAAAElFTkSuQmCC");
+    }
+
+    &.export {
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMjk3NmM2ZS0xYTkyLTk1NDItOTdjZC1hZjEwYzFmZmY5ZmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjY5NUE2ODhDOTJEMTFFNzkwNThENEQyQTVGM0I1OEQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjY5NUE2ODdDOTJEMTFFNzkwNThENEQyQTVGM0I1OEQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RkU1QjA3RkUyNEMxMUU2OUNFNzkxN0FGQTc2MEM4NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RkU1QjA4MEUyNEMxMUU2OUNFNzkxN0FGQTc2MEM4NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgwvKjwAAAA5SURBVHjaYvz//z8DLsBaZvSfAaQAG2YpNfwP1oxPEqsCZEkMBeiSKAqwScIV4JIEK8AnCcIAAQYAFiqit0KbOMYAAAAASUVORK5CYII=");
+    }
+
+    &.highlight {
+      background-color: rgba(0, 255, 0, 0.5);
+    }
+  }
 }