sf-i-events 1.0.735 → 1.0.738

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sf-i-events",
   "private": false,
-  "version": "1.0.735",
+  "version": "1.0.738",
   "description": "Superflows Navigation Component",
   "main": "sf-i-events.js",
   "module": "sf-i-events.js",

package/sf-i-events.js

@@ -3528,9 +3528,9 @@ let SfIEvents = class SfIEvents extends LitElement {
             //console.log('rangeperiod', period)
             var html = this.renderEvents(firstDay, endDay, 1, lastDay, true, 0, (firstDate.getMonth()), period, firstDate, "From " + firstDay.toLocaleDateString('en-IN') + " To " + endDay.toLocaleDateString('en-IN'));
             eventsContainer.querySelector('.calendar-right-data').innerHTML = html;
-            let innerhtml = eventsContainer.innerHTML;
-            innerhtml += this.renderSelectAllButtons();
-            eventsContainer.innerHTML = innerhtml;
+            if (eventsContainer.innerHTML.indexOf('button-select-all') < 0) {
+                eventsContainer.insertAdjacentHTML('beforeend', this.renderSelectAllButtons());
+            }
             this.renderButtonRefresh(eventsContainer);
             this.attachTimelineFilterHandlers(eventsContainer);
             const radioExpander = eventsContainer.querySelector('#graph-radios-expander');
@@ -3573,80 +3573,82 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             const streamEventsContainer = eventsContainer.querySelectorAll('.stream-events-container');
             const buttonSelect = eventsContainer.querySelectorAll('.button-select');
-            let selectAllArr = this.attachSelectAllListeners(eventsContainer, buttonSelect);
-            const buttonSelectAll = selectAllArr[0];
-            const buttonUnselectAll = selectAllArr[1];
-            for (i = 0; i < buttonSelect.length; i++) {
-                buttonSelect[i].addEventListener('click', (ev) => {
-                    //console.log('eventscontainer', streamEventsContainer.length, buttonSelect.length);
-                    const id = ev.target.id;
-                    const idArr = id.split("-");
-                    const mmdd = idArr[2] + "/" + idArr[3];
-                    const j = idArr[4];
-                    // const makercheckers = idArr[5];
-                    const docs = idArr[6];
-                    if (ev.target.checked) {
-                        this.selectedItemIds.push(id);
-                    }
-                    else {
-                        this.selectedItemIds.splice(this.selectedItemIds.indexOf(id), 1);
-                        let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + mmdd.replace(/\//g, '-') + '-' + j);
-                        listReportingContainer.style.display = 'none';
-                        listReportingContainer.innerHTML = '';
-                        let buttonListReporting = eventsContainer.querySelector('#button-list-reporting-' + mmdd.replace(/\//g, '-') + '-' + j);
-                        buttonListReporting.setAttribute('part', 'button-list-reporting');
-                        let streamEventTitle = eventsContainer.querySelector('#stream-event-title-' + mmdd.replace(/\//g, '-') + '-' + j);
-                        streamEventTitle.removeAttribute('part');
-                    }
-                    if (this.selectedItemIds.length === 0) {
-                        for (var k = 0; k < buttonSelect.length; k++) {
-                            buttonSelect[k].style.display = 'block';
-                            streamEventsContainer[k].style.display = 'block';
+            if (eventsContainer.innerHTML.indexOf('button-select-all') >= 0) {
+                let selectAllArr = this.attachSelectAllListeners(eventsContainer, buttonSelect);
+                const buttonSelectAll = selectAllArr[0];
+                const buttonUnselectAll = selectAllArr[1];
+                for (i = 0; i < buttonSelect.length; i++) {
+                    buttonSelect[i].addEventListener('click', (ev) => {
+                        //console.log('eventscontainer', streamEventsContainer.length, buttonSelect.length);
+                        const id = ev.target.id;
+                        const idArr = id.split("-");
+                        const mmdd = idArr[2] + "/" + idArr[3];
+                        const j = idArr[4];
+                        // const makercheckers = idArr[5];
+                        const docs = idArr[6];
+                        if (ev.target.checked) {
+                            this.selectedItemIds.push(id);
                         }
-                        let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label');
-                        for (let bulkUploadLable of bulkUploadLables) {
-                            bulkUploadLable.innerHTML = '';
-                        }
-                        buttonSelectAll.style.display = 'none';
-                        buttonUnselectAll.style.display = 'none';
-                    }
-                    else {
-                        if (this.selectedItemIds.length === 1) {
-                            const id1 = id;
-                            const idArr1 = id1.split("-");
-                            const status = idArr1[13].replace(/_/g, '-');
-                            this.selectedStatus = status;
+                        else {
+                            this.selectedItemIds.splice(this.selectedItemIds.indexOf(id), 1);
+                            let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + mmdd.replace(/\//g, '-') + '-' + j);
+                            listReportingContainer.style.display = 'none';
+                            listReportingContainer.innerHTML = '';
+                            let buttonListReporting = eventsContainer.querySelector('#button-list-reporting-' + mmdd.replace(/\//g, '-') + '-' + j);
+                            buttonListReporting.setAttribute('part', 'button-list-reporting');
+                            let streamEventTitle = eventsContainer.querySelector('#stream-event-title-' + mmdd.replace(/\//g, '-') + '-' + j);
+                            streamEventTitle.removeAttribute('part');
                         }
-                        let totalVisibleCount = 0;
-                        for (var k = 0; k < buttonSelect.length; k++) {
-                            const id1 = buttonSelect[k].id;
-                            const idArr1 = id1.split("-");
-                            const docs1 = idArr1[6];
-                            const status = idArr1[13].replace(/_/g, '-');
-                            if (docs == docs1 && status == this.selectedStatus) {
-                                totalVisibleCount++;
+                        if (this.selectedItemIds.length === 0) {
+                            for (var k = 0; k < buttonSelect.length; k++) {
+                                buttonSelect[k].style.display = 'block';
+                                streamEventsContainer[k].style.display = 'block';
                             }
-                            else {
-                                buttonSelect[k].style.display = 'none';
-                                streamEventsContainer[k].style.display = 'none';
+                            let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label');
+                            for (let bulkUploadLable of bulkUploadLables) {
+                                bulkUploadLable.innerHTML = '';
                             }
-                        }
-                        let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label');
-                        for (let bulkUploadLable of bulkUploadLables) {
-                            bulkUploadLable.innerHTML = `${this.selectedItemIds.length - 1} other ` + ((this.selectedItemIds.length - 1) === 1 ? `item` : `items`) + ` also selected`;
-                        }
-                        if (this.selectedItemIds.length >= parseInt(this.selectallblock) || this.selectedItemIds.length >= totalVisibleCount) {
                             buttonSelectAll.style.display = 'none';
-                            buttonUnselectAll.style.display = 'flex';
+                            buttonUnselectAll.style.display = 'none';
                         }
                         else {
-                            buttonSelectAll.style.display = 'flex';
-                            buttonUnselectAll.style.display = 'none';
+                            if (this.selectedItemIds.length === 1) {
+                                const id1 = id;
+                                const idArr1 = id1.split("-");
+                                const status = idArr1[13].replace(/_/g, '-');
+                                this.selectedStatus = status;
+                            }
+                            let totalVisibleCount = 0;
+                            for (var k = 0; k < buttonSelect.length; k++) {
+                                const id1 = buttonSelect[k].id;
+                                const idArr1 = id1.split("-");
+                                const docs1 = idArr1[6];
+                                const status = idArr1[13].replace(/_/g, '-');
+                                if (docs == docs1 && status == this.selectedStatus) {
+                                    totalVisibleCount++;
+                                }
+                                else {
+                                    buttonSelect[k].style.display = 'none';
+                                    streamEventsContainer[k].style.display = 'none';
+                                }
+                            }
+                            let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label');
+                            for (let bulkUploadLable of bulkUploadLables) {
+                                bulkUploadLable.innerHTML = `${this.selectedItemIds.length - 1} other ` + ((this.selectedItemIds.length - 1) === 1 ? `item` : `items`) + ` also selected`;
+                            }
+                            if (this.selectedItemIds.length >= parseInt(this.selectallblock) || this.selectedItemIds.length >= totalVisibleCount) {
+                                buttonSelectAll.style.display = 'none';
+                                buttonUnselectAll.style.display = 'flex';
+                            }
+                            else {
+                                buttonSelectAll.style.display = 'flex';
+                                buttonUnselectAll.style.display = 'none';
+                            }
                         }
-                    }
-                    // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
-                    // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + ((new Date()).getFullYear() + ""));
-                });
+                        // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
+                        // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + ((new Date()).getFullYear() + ""));
+                    });
+                }
             }
             // this.clearGraphData();
             // //console.log('rendering range', firstDate, count);
@@ -4096,13 +4098,19 @@ let SfIEvents = class SfIEvents extends LitElement {
         this.renderStatisticsFilters = (eventsContainer) => {
             let selectFilterCriteria = eventsContainer.querySelector('#select-filter-criteria');
             let inputLabelFilter = eventsContainer.querySelector('#input-label-filter');
+            let selectFilterCriteriaMobile = eventsContainer.querySelector('#select-filter-criteria-mobile');
+            let inputLabelFilterMobile = eventsContainer.querySelector('#input-label-filter-mobile');
             selectFilterCriteria.style.display = 'block';
             inputLabelFilter.style.display = 'block';
+            selectFilterCriteriaMobile.style.display = 'block';
+            inputLabelFilterMobile.style.display = 'block';
             selectFilterCriteria.innerHTML = "";
+            selectFilterCriteriaMobile.innerHTML = "";
             let option = new Option();
             option.value = "";
             option.innerHTML = "all";
             selectFilterCriteria.add(option);
+            selectFilterCriteriaMobile.add(option);
             for (let criteria of Object.keys(this.statisticsMeta)) {
                 let option = new Option();
                 option.value = criteria;
@@ -4113,6 +4121,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     option.innerHTML = criteria;
                 }
                 selectFilterCriteria.add(option);
+                selectFilterCriteriaMobile.add(option);
             }
             let selectFilterCriteriaNew = Util.clearListeners(selectFilterCriteria);
             selectFilterCriteriaNew.addEventListener('change', (ev) => {
@@ -4150,10 +4159,50 @@ let SfIEvents = class SfIEvents extends LitElement {
                     inputLabelCriteria.style.display = 'none';
                 }
             });
+            let selectFilterCriteriaMobileNew = Util.clearListeners(selectFilterCriteriaMobile);
+            selectFilterCriteriaMobileNew.addEventListener('change', (ev) => {
+                let target = ev.target;
+                let inputLabelCriteriaMobile = eventsContainer.querySelector('#input-label-criteria-mobile');
+                let selectFilterValuesMobile = eventsContainer.querySelector('#select-filter-values-mobile');
+                if (target.value == "") {
+                    selectFilterValuesMobile.value = "";
+                    this.processDateSelectionViewer(eventsContainer);
+                }
+                selectFilterValuesMobile.innerHTML = "";
+                let option = new Option();
+                option.value = "";
+                option.innerHTML = "All";
+                selectFilterValuesMobile.add(option);
+                if (this.statisticsMeta[target.value] != null) {
+                    let sortedFilters = Util.alphabeticalSort(this.statisticsMeta[target.value]);
+                    selectFilterValuesMobile.style.display = 'block';
+                    inputLabelCriteriaMobile.style.display = 'block';
+                    inputLabelCriteriaMobile.innerHTML = target.value;
+                    for (let filter of sortedFilters) {
+                        let option = new Option();
+                        option.value = filter.split(';')[1];
+                        option.innerHTML = filter.split(';')[0].replace(/\([^)]*\)/g, "");
+                        selectFilterValuesMobile.add(option);
+                    }
+                    let selectFilterValuesMobileNew = Util.clearListeners(selectFilterValuesMobile);
+                    selectFilterValuesMobileNew.addEventListener('change', () => {
+                        console.log('changed');
+                        this.processDateSelectionViewer(eventsContainer);
+                    });
+                }
+                else {
+                    selectFilterValuesMobile.style.display = 'none';
+                    inputLabelCriteriaMobile.style.display = 'none';
+                }
+            });
             let selectFilterValues = eventsContainer.querySelector('#select-filter-values');
             let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria');
+            let selectFilterValuesMobile = eventsContainer.querySelector('#select-filter-values-mobile');
+            let inputLabelCriteriaMobile = eventsContainer.querySelector('#input-label-criteria-mobile');
             selectFilterValues.style.display = 'none';
             inputLabelCriteria.style.display = 'none';
+            selectFilterValuesMobile.style.display = 'none';
+            inputLabelCriteriaMobile.style.display = 'none';
         };
         this.renderSelectAllButtons = () => {
             let selectAllHtml = '<div class="d-flex justify-end w-100" style="position: fixed; bottom: 70px; left: 0px;" part="button-select-all-container">';
@@ -4471,9 +4520,6 @@ let SfIEvents = class SfIEvents extends LitElement {
                 const tsEnd = new Date(valueEnd);
                 tsStart.setDate(tsStart.getDate() - 2);
                 tsEnd.setDate(tsEnd.getDate() + 2);
-                //console.log('tsstart', tsStart);
-                //console.log('tsend', tsEnd);
-                // await this.fetchUserCalendar_2(tsStart.getMonth() + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), valueEnd.split('-')[1] + "/" + valueEnd.split('-')[2] + "/" + valueEnd.split('-')[0]);
                 await this.fetchAndYearlyRenderUserCalendar_2((tsStart.getMonth() + 1) + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), (tsEnd.getMonth() + 1) + "/" + tsEnd.getDate() + "/" + tsEnd.getFullYear());
                 this.renderRangeEvents(new Date(valueStart), ((new Date(valueEnd).getTime() + 24 * 60 * 60 * 1000) - new Date(valueStart).getTime()) / (1000 * 60 * 60 * 24), this._SfCustomContainer);
             }
@@ -6220,56 +6266,56 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<div class="scroll-x w-100 mobile-only">';
             html += '<div class="title-item-date">';
             html += '<label part="input-label">Start Date</label><br />';
-            html += '<input id="stream-start-date-mobile" part="input" type="date" />';
+            html += '<input id="stream-start-date-mobile" part="date-range-preselected" type="date" />';
             html += '</div>';
             html += '<div class="title-item-date">';
             html += '<label part="input-label">End Date</label><br />';
-            html += '<input id="stream-end-date-mobile" part="input" type="date" />';
+            html += '<input id="stream-end-date-mobile" part="date-range-preselected" type="date" />';
             html += '</div>';
             html += '<div class="title-item-date">';
-            html += '<button id="button-year-to-date-mobile" part="button-lg-short-secondary">Year To Date</button>';
+            html += '<button id="button-year-to-date-mobile" part="button-range-preselected">Year To Date</button>';
             html += '</div>';
             html += '<div class="title-item-date">';
-            html += '<button id="button-this-quarter-mobile" part="button-lg-short-secondary">This Quarter</button>';
+            html += '<button id="button-this-quarter-mobile" part="button-range-preselected">This Quarter</button>';
             html += '</div>';
             html += '<div class="title-item-date">';
-            html += '<button id="button-this-year-mobile" part="button-lg-short-secondary">This Year</button>';
+            html += '<button id="button-this-year-mobile" part="button-range-preselected">This Year</button>';
             html += '</div>';
             html += '<div class="title-item-date">';
-            html += '<label part="input-label-filter-criteria" id="input-label-filter-mobile">Filter Criteria</label><br />';
-            html += '<select id="select-filter-criteria-mobile" class="mr-10"></select>';
+            html += '<label part="input-label-filter-criteria" id="input-label-filter-mobile">Filter Criteria</label>';
+            html += '<select id="select-filter-criteria-mobile"></select>';
             html += '</div>';
             html += '<div class="title-item-date">';
-            html += '<label part="input-label-filter-value" id="input-label-criteria-mobile"></label><br />';
-            html += '<select id="select-filter-values-mobile" class="mr-10"></select>';
+            html += '<label part="input-label-filter-value" id="input-label-criteria-mobile"></label>';
+            html += '<select id="select-filter-values-mobile"></select>';
             html += '</div>';
             html += '</div>';
             html += '<div class="d-flex w-100">';
             html += '<div class="calendar-left-col desktop-only flex-col justify-start align-end">';
             html += '<div class="title-item-date d-flex flex-col align-end">';
             html += '<label part="input-label">Start Date</label>';
-            html += '<input id="stream-start-date" part="input" type="date" />';
+            html += '<input id="stream-start-date" part="date-range-preselected" type="date" />';
             html += '</div>';
             html += '<div class="title-item-date d-flex flex-col align-end">';
             html += '<label part="input-label">End Date</label>';
-            html += '<input id="stream-end-date" part="input" type="date" />';
+            html += '<input id="stream-end-date" part="date-range-preselected" type="date" />';
             html += '</div>';
             html += '<div class="title-item-date">';
-            html += '<button id="button-year-to-date" part="button-lg-short-secondary">Year To Date</button>';
+            html += '<button id="button-year-to-date" part="button-range-preselected">Year To Date</button>';
             html += '</div>';
             html += '<div class="title-item-date">';
-            html += '<button id="button-this-quarter" part="button-lg-short-secondary">This Quarter</button>';
+            html += '<button id="button-this-quarter" part="button-range-preselected">This Quarter</button>';
             html += '</div>';
             html += '<div class="title-item-date">';
-            html += '<button id="button-this-year" part="button-lg-short-secondary">This Year</button>';
+            html += '<button id="button-this-year" part="button-range-preselected">This Year</button>';
             html += '</div>';
             html += '<div class="title-item-date d-flex flex-col align-end">';
-            html += '<label part="input-label-filter-criteria" id="input-label-filter" class="mr-10">Filter Criteria</label>';
-            html += '<select id="select-filter-criteria" class="mr-10"></select>';
+            html += '<label part="input-label-filter-criteria" id="input-label-filter">Filter Criteria</label>';
+            html += '<select part="input-select-calendar-filter" id="select-filter-criteria"></select>';
             html += '</div>';
             html += '<div class="title-item-date d-flex flex-col align-end">';
-            html += '<label part="input-label-filter-value" id="input-label-criteria" class="mr-10"></label>';
-            html += '<select id="select-filter-values" class="mr-10"></select>';
+            html += '<label part="input-label-filter-value" id="input-label-criteria"></label>';
+            html += '<select part="input-select-calendar-filter" id="select-filter-values"></select>';
             html += '</div>';
             html += '</div>';
             html += '<div class="calendar-right-data flex-grow">';
@@ -6384,13 +6430,12 @@ let SfIEvents = class SfIEvents extends LitElement {
             selectFilterValues.style.display = 'none';
             let inputLabelFilter = this._SfCustomContainer.querySelector('#input-label-filter');
             inputLabelFilter.style.display = 'none';
-            // for(var i = 0; i < 3; i++) {
-            //   (this._SfCustomContainer as HTMLDivElement).querySelector('#stream-month-' + i)?.addEventListener('click', (ev: any)=> {
-            //     const target = parseInt((ev.target as HTMLDivElement).id.split('-')[2]);
-            //     //console.log('clicked ', target);
-            //     this.renderPast(target);
-            //   })
-            // }
+            let selectFilterCriteriaMobile = this._SfCustomContainer.querySelector('#select-filter-criteria-mobile');
+            selectFilterCriteriaMobile.style.display = 'none';
+            let selectFilterValuesMobile = this._SfCustomContainer.querySelector('#select-filter-values-mobile');
+            selectFilterValuesMobile.style.display = 'none';
+            let inputLabelFilterMobile = this._SfCustomContainer.querySelector('#input-label-filter-mobile');
+            inputLabelFilterMobile.style.display = 'none';
             this._SfCustomContainer.querySelector('#button-year-to-date').click();
         };
         this.renderThis = (index = 1, showGraph = true) => {
@@ -16432,10 +16477,12 @@ let SfIEvents = class SfIEvents extends LitElement {
                         let eventid = sortidArr[3];
                         let mmdd = mmddyyyy.split('/')[0] + '/' + mmddyyyy.split('/')[1];
                         console.log('mmdd', mmdd, Object.keys(this.events));
-                        for (let i = 0; i < this.events[mmdd].length; i++) {
-                            if (this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid) {
-                                this.events[mmdd][i].isbulk = true;
-                                break;
+                        if (this.events[mmdd] != null) {
+                            for (let i = 0; i < this.events[mmdd].length; i++) {
+                                if (this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid) {
+                                    this.events[mmdd][i].isbulk = true;
+                                    break;
+                                }
                             }
                         }
                     }

package/src/sf-i-events.ts

@@ -5881,10 +5881,9 @@ export class SfIEvents extends LitElement {
     var html = this.renderEvents(firstDay, endDay, 1, lastDay, true, 0, (firstDate.getMonth()), period, firstDate,"From " + firstDay.toLocaleDateString('en-IN') + " To " + endDay.toLocaleDateString('en-IN'));
 
     eventsContainer.querySelector('.calendar-right-data')!.innerHTML = html;
-    
-    let innerhtml = eventsContainer.innerHTML;
-    innerhtml += this.renderSelectAllButtons();
-    eventsContainer.innerHTML = innerhtml
+    if(eventsContainer.innerHTML.indexOf('button-select-all') < 0){
+      eventsContainer.insertAdjacentHTML( 'beforeend', this.renderSelectAllButtons());
+    }
     this.renderButtonRefresh(eventsContainer);
     this.attachTimelineFilterHandlers(eventsContainer);
 
@@ -5942,102 +5941,104 @@ export class SfIEvents extends LitElement {
 
     const streamEventsContainer = eventsContainer.querySelectorAll('.stream-events-container') as NodeListOf<HTMLDivElement>;
     const buttonSelect = eventsContainer.querySelectorAll('.button-select') as NodeListOf<HTMLButtonElement>;
-    let selectAllArr = this.attachSelectAllListeners(eventsContainer,buttonSelect)
-    const buttonSelectAll = selectAllArr[0]
-    const buttonUnselectAll = selectAllArr[1]
-    for(i = 0; i < buttonSelect.length; i++) {
+    if(eventsContainer.innerHTML.indexOf('button-select-all') >= 0){
+      let selectAllArr = this.attachSelectAllListeners(eventsContainer,buttonSelect)
+      const buttonSelectAll = selectAllArr[0]
+      const buttonUnselectAll = selectAllArr[1]
+      for(i = 0; i < buttonSelect.length; i++) {
 
-      buttonSelect[i].addEventListener('click', (ev: any) => {
+        buttonSelect[i].addEventListener('click', (ev: any) => {
 
-        //console.log('eventscontainer', streamEventsContainer.length, buttonSelect.length);
+          //console.log('eventscontainer', streamEventsContainer.length, buttonSelect.length);
 
-        const id = ev.target.id;
-        const idArr = id.split("-")
-        const mmdd = idArr[2] + "/" + idArr[3];
-        const j = idArr[4];
-        // const makercheckers = idArr[5];
-        const docs = idArr[6];
+          const id = ev.target.id;
+          const idArr = id.split("-")
+          const mmdd = idArr[2] + "/" + idArr[3];
+          const j = idArr[4];
+          // const makercheckers = idArr[5];
+          const docs = idArr[6];
 
-        if((ev.target as HTMLInputElement).checked) {
-          this.selectedItemIds.push(id);
-        } else {
-          this.selectedItemIds.splice(this.selectedItemIds.indexOf(id), 1);
-          let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + mmdd.replace(/\//g,'-') + '-' + j) as HTMLDivElement
-          listReportingContainer.style.display = 'none';
-          listReportingContainer.innerHTML = '';
-          let buttonListReporting = eventsContainer.querySelector('#button-list-reporting-' + mmdd.replace(/\//g,'-') + '-' + j) as HTMLButtonElement
-          buttonListReporting.setAttribute('part','button-list-reporting')    
-          let streamEventTitle = eventsContainer.querySelector('#stream-event-title-' + mmdd.replace(/\//g,'-') + '-' + j) as SfIElasticText
-          streamEventTitle.removeAttribute('part')
-        }
+          if((ev.target as HTMLInputElement).checked) {
+            this.selectedItemIds.push(id);
+          } else {
+            this.selectedItemIds.splice(this.selectedItemIds.indexOf(id), 1);
+            let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-' + mmdd.replace(/\//g,'-') + '-' + j) as HTMLDivElement
+            listReportingContainer.style.display = 'none';
+            listReportingContainer.innerHTML = '';
+            let buttonListReporting = eventsContainer.querySelector('#button-list-reporting-' + mmdd.replace(/\//g,'-') + '-' + j) as HTMLButtonElement
+            buttonListReporting.setAttribute('part','button-list-reporting')    
+            let streamEventTitle = eventsContainer.querySelector('#stream-event-title-' + mmdd.replace(/\//g,'-') + '-' + j) as SfIElasticText
+            streamEventTitle.removeAttribute('part')
+          }
 
-        if(this.selectedItemIds.length === 0) {
+          if(this.selectedItemIds.length === 0) {
 
-          for(var k = 0; k < buttonSelect.length; k++) {
+            for(var k = 0; k < buttonSelect.length; k++) {
 
-            (buttonSelect[k] as HTMLInputElement).style.display = 'block';
-            (streamEventsContainer[k] as HTMLDivElement).style.display = 'block';
-  
-          }
+              (buttonSelect[k] as HTMLInputElement).style.display = 'block';
+              (streamEventsContainer[k] as HTMLDivElement).style.display = 'block';
+    
+            }
 
-          let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label') as NodeListOf<HTMLHeadingElement>
-          for(let bulkUploadLable of bulkUploadLables){
-            bulkUploadLable.innerHTML = ''
-          }
-          
-          buttonSelectAll.style.display = 'none';
-          buttonUnselectAll.style.display = 'none';
+            let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label') as NodeListOf<HTMLHeadingElement>
+            for(let bulkUploadLable of bulkUploadLables){
+              bulkUploadLable.innerHTML = ''
+            }
+            
+            buttonSelectAll.style.display = 'none';
+            buttonUnselectAll.style.display = 'none';
 
-        } else {
+          } else {
 
-          if(this.selectedItemIds.length === 1) {
+            if(this.selectedItemIds.length === 1) {
 
-            const id1 = id;
-            const idArr1 = id1.split("-")
-            const status = idArr1[13].replace(/_/g, '-');
-            this.selectedStatus = status;
+              const id1 = id;
+              const idArr1 = id1.split("-")
+              const status = idArr1[13].replace(/_/g, '-');
+              this.selectedStatus = status;
 
-          }
+            }
 
-          let totalVisibleCount = 0
-          for(var k = 0; k < buttonSelect.length; k++) {
+            let totalVisibleCount = 0
+            for(var k = 0; k < buttonSelect.length; k++) {
 
-            const id1 = buttonSelect[k].id;
-            const idArr1 = id1.split("-")
-            const docs1 = idArr1[6];
-            const status = idArr1[13].replace(/_/g, '-');
-  
-            if(docs == docs1 && status == this.selectedStatus) {
-              totalVisibleCount++
-            } else {
-              (buttonSelect[k] as HTMLInputElement).style.display = 'none';
-              (streamEventsContainer[k] as HTMLDivElement).style.display = 'none';
+              const id1 = buttonSelect[k].id;
+              const idArr1 = id1.split("-")
+              const docs1 = idArr1[6];
+              const status = idArr1[13].replace(/_/g, '-');
+    
+              if(docs == docs1 && status == this.selectedStatus) {
+                totalVisibleCount++
+              } else {
+                (buttonSelect[k] as HTMLInputElement).style.display = 'none';
+                (streamEventsContainer[k] as HTMLDivElement).style.display = 'none';
+              }
+    
+            }  
+
+            let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label') as NodeListOf<HTMLHeadingElement>
+            for(let bulkUploadLable of bulkUploadLables){
+              bulkUploadLable.innerHTML = `${this.selectedItemIds.length - 1} other ` + ((this.selectedItemIds.length - 1) === 1 ? `item` : `items`) + ` also selected`
             }
-  
-          }  
 
-          let bulkUploadLables = eventsContainer.querySelectorAll('.bulk-upload-label') as NodeListOf<HTMLHeadingElement>
-          for(let bulkUploadLable of bulkUploadLables){
-            bulkUploadLable.innerHTML = `${this.selectedItemIds.length - 1} other ` + ((this.selectedItemIds.length - 1) === 1 ? `item` : `items`) + ` also selected`
-          }
+            if(this.selectedItemIds.length >= parseInt(this.selectallblock) || this.selectedItemIds.length >= totalVisibleCount){
+              buttonSelectAll.style.display = 'none';
+              buttonUnselectAll.style.display = 'flex';
+            }else{
+              buttonSelectAll.style.display = 'flex';
+              buttonUnselectAll.style.display = 'none';
+            }
+            
 
-          if(this.selectedItemIds.length >= parseInt(this.selectallblock) || this.selectedItemIds.length >= totalVisibleCount){
-            buttonSelectAll.style.display = 'none';
-            buttonUnselectAll.style.display = 'flex';
-          }else{
-            buttonSelectAll.style.display = 'flex';
-            buttonUnselectAll.style.display = 'none';
           }
-          
-
-        }
 
-        // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
+          // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
 
-        // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + ((new Date()).getFullYear() + ""));
-  
-      })
+          // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + ((new Date()).getFullYear() + ""));
+    
+        })
 
+      }
     }
 
     // this.clearGraphData();
@@ -6569,13 +6570,20 @@ export class SfIEvents extends LitElement {
   renderStatisticsFilters = (eventsContainer: HTMLDivElement) => {
     let selectFilterCriteria = eventsContainer.querySelector('#select-filter-criteria') as HTMLSelectElement
     let inputLabelFilter = eventsContainer.querySelector('#input-label-filter') as HTMLLabelElement
+    let selectFilterCriteriaMobile = eventsContainer.querySelector('#select-filter-criteria-mobile') as HTMLSelectElement
+    let inputLabelFilterMobile = eventsContainer.querySelector('#input-label-filter-mobile') as HTMLLabelElement
     selectFilterCriteria.style.display = 'block'
     inputLabelFilter.style.display = 'block'
+    selectFilterCriteriaMobile.style.display = 'block'
+    inputLabelFilterMobile.style.display = 'block'
     selectFilterCriteria.innerHTML = ""
+    selectFilterCriteriaMobile.innerHTML = ""
     let option = new Option()
     option.value = "";
     option.innerHTML = "all"
     selectFilterCriteria.add(option)
+    selectFilterCriteriaMobile.add(option)
+    
     for(let criteria of Object.keys(this.statisticsMeta)){
       let option = new Option()
       option.value = criteria;
@@ -6585,6 +6593,7 @@ export class SfIEvents extends LitElement {
         option.innerHTML = criteria
       }
       selectFilterCriteria.add(option)
+      selectFilterCriteriaMobile.add(option)
     }
     let selectFilterCriteriaNew = Util.clearListeners(selectFilterCriteria)
     selectFilterCriteriaNew.addEventListener('change',(ev: any) => {
@@ -6622,10 +6631,50 @@ export class SfIEvents extends LitElement {
         inputLabelCriteria.style.display = 'none'
       }
     })
+    let selectFilterCriteriaMobileNew = Util.clearListeners(selectFilterCriteriaMobile)
+    selectFilterCriteriaMobileNew.addEventListener('change',(ev: any) => {
+      let target = ev.target as HTMLSelectElement
+      let inputLabelCriteriaMobile = eventsContainer.querySelector('#input-label-criteria-mobile') as HTMLLabelElement
+      let selectFilterValuesMobile = eventsContainer.querySelector('#select-filter-values-mobile') as HTMLSelectElement
+      if(target.value == ""){
+        selectFilterValuesMobile.value = ""
+        this.processDateSelectionViewer(eventsContainer)
+      }
+      
+      selectFilterValuesMobile.innerHTML = ""
+      let option = new Option()
+      option.value = "";
+      option.innerHTML = "All";
+      selectFilterValuesMobile.add(option)
+      if(this.statisticsMeta[target.value] != null){
+        let sortedFilters = Util.alphabeticalSort(this.statisticsMeta[target.value])
+        selectFilterValuesMobile.style.display = 'block'
+        inputLabelCriteriaMobile.style.display = 'block'
+        inputLabelCriteriaMobile.innerHTML = target.value
+        for(let filter of sortedFilters){
+          let option = new Option()
+          option.value = filter.split(';')[1];
+          option.innerHTML = filter.split(';')[0].replace(/\([^)]*\)/g,"")
+          selectFilterValuesMobile.add(option)
+        }
+        let selectFilterValuesMobileNew = Util.clearListeners(selectFilterValuesMobile)
+        selectFilterValuesMobileNew.addEventListener('change',() => {
+          console.log('changed')
+          this.processDateSelectionViewer(eventsContainer);
+        })
+      }else{
+        selectFilterValuesMobile.style.display = 'none'
+        inputLabelCriteriaMobile.style.display = 'none'
+      }
+    })
     let selectFilterValues = eventsContainer.querySelector('#select-filter-values') as HTMLSelectElement
     let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria') as HTMLLabelElement
+    let selectFilterValuesMobile = eventsContainer.querySelector('#select-filter-values-mobile') as HTMLSelectElement
+    let inputLabelCriteriaMobile = eventsContainer.querySelector('#input-label-criteria-mobile') as HTMLLabelElement
     selectFilterValues.style.display = 'none'
     inputLabelCriteria.style.display = 'none'
+    selectFilterValuesMobile.style.display = 'none'
+    inputLabelCriteriaMobile.style.display = 'none'
   }
   renderSelectAllButtons = () => {
     let selectAllHtml = '<div class="d-flex justify-end w-100" style="position: fixed; bottom: 70px; left: 0px;" part="button-select-all-container">';
@@ -7039,10 +7088,6 @@ export class SfIEvents extends LitElement {
       tsStart.setDate(tsStart.getDate() - 2);
       tsEnd.setDate(tsEnd.getDate() + 2);
 
-      //console.log('tsstart', tsStart);
-      //console.log('tsend', tsEnd);
-      
-      // await this.fetchUserCalendar_2(tsStart.getMonth() + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), valueEnd.split('-')[1] + "/" + valueEnd.split('-')[2] + "/" + valueEnd.split('-')[0]);
       await this.fetchAndYearlyRenderUserCalendar_2((tsStart.getMonth() + 1) + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), (tsEnd.getMonth() + 1) + "/" + tsEnd.getDate() + "/" + tsEnd.getFullYear());
       this.renderRangeEvents(new Date(valueStart), ((new Date(valueEnd).getTime()+24*60*60*1000) - new Date(valueStart).getTime())/(1000*60*60*24), (this._SfCustomContainer as HTMLDivElement));
     } else if(valueStart != "" && valueEnd == "") {
@@ -9195,28 +9240,28 @@ export class SfIEvents extends LitElement {
 
       html += '<div class="title-item-date">';
         html += '<label part="input-label">Start Date</label><br />'
-        html += '<input id="stream-start-date-mobile" part="input" type="date" />'
+        html += '<input id="stream-start-date-mobile" part="date-range-preselected" type="date" />'
       html += '</div>';
       html += '<div class="title-item-date">';
         html += '<label part="input-label">End Date</label><br />'
-        html += '<input id="stream-end-date-mobile" part="input" type="date" />'
+        html += '<input id="stream-end-date-mobile" part="date-range-preselected" type="date" />'
       html += '</div>';
       html += '<div class="title-item-date">';
-        html += '<button id="button-year-to-date-mobile" part="button-lg-short-secondary">Year To Date</button>'
+        html += '<button id="button-year-to-date-mobile" part="button-range-preselected">Year To Date</button>'
       html += '</div>';
       html += '<div class="title-item-date">';
-        html += '<button id="button-this-quarter-mobile" part="button-lg-short-secondary">This Quarter</button>'
+        html += '<button id="button-this-quarter-mobile" part="button-range-preselected">This Quarter</button>'
       html += '</div>';
       html += '<div class="title-item-date">';
-        html += '<button id="button-this-year-mobile" part="button-lg-short-secondary">This Year</button>'
+        html += '<button id="button-this-year-mobile" part="button-range-preselected">This Year</button>'
       html += '</div>';
       html += '<div class="title-item-date">';
-        html += '<label part="input-label-filter-criteria" id="input-label-filter-mobile">Filter Criteria</label><br />'
-        html += '<select id="select-filter-criteria-mobile" class="mr-10"></select>'
+        html += '<label part="input-label-filter-criteria" id="input-label-filter-mobile">Filter Criteria</label>'
+        html += '<select id="select-filter-criteria-mobile"></select>'
       html += '</div>';
       html += '<div class="title-item-date">';
-        html += '<label part="input-label-filter-value" id="input-label-criteria-mobile"></label><br />'
-        html += '<select id="select-filter-values-mobile" class="mr-10"></select>'
+        html += '<label part="input-label-filter-value" id="input-label-criteria-mobile"></label>'
+        html += '<select id="select-filter-values-mobile"></select>'
       html += '</div>';
 
     html += '</div>';
@@ -9226,28 +9271,28 @@ export class SfIEvents extends LitElement {
 
         html += '<div class="title-item-date d-flex flex-col align-end">';
         html += '<label part="input-label">Start Date</label>'
-        html += '<input id="stream-start-date" part="input" type="date" />'
+        html += '<input id="stream-start-date" part="date-range-preselected" type="date" />'
         html += '</div>';
         html += '<div class="title-item-date d-flex flex-col align-end">';
         html += '<label part="input-label">End Date</label>'
-        html += '<input id="stream-end-date" part="input" type="date" />'
+        html += '<input id="stream-end-date" part="date-range-preselected" type="date" />'
         html += '</div>';
         html += '<div class="title-item-date">';
-        html += '<button id="button-year-to-date" part="button-lg-short-secondary">Year To Date</button>'
+        html += '<button id="button-year-to-date" part="button-range-preselected">Year To Date</button>'
         html += '</div>';
         html += '<div class="title-item-date">';
-        html += '<button id="button-this-quarter" part="button-lg-short-secondary">This Quarter</button>'
+        html += '<button id="button-this-quarter" part="button-range-preselected">This Quarter</button>'
         html += '</div>';
         html += '<div class="title-item-date">';
-        html += '<button id="button-this-year" part="button-lg-short-secondary">This Year</button>'
+        html += '<button id="button-this-year" part="button-range-preselected">This Year</button>'
         html += '</div>';
         html += '<div class="title-item-date d-flex flex-col align-end">';
-        html += '<label part="input-label-filter-criteria" id="input-label-filter" class="mr-10">Filter Criteria</label>'
-        html += '<select id="select-filter-criteria" class="mr-10"></select>'
+        html += '<label part="input-label-filter-criteria" id="input-label-filter">Filter Criteria</label>'
+        html += '<select part="input-select-calendar-filter" id="select-filter-criteria"></select>'
         html += '</div>';
         html += '<div class="title-item-date d-flex flex-col align-end">';
-        html += '<label part="input-label-filter-value" id="input-label-criteria" class="mr-10"></label>'
-        html += '<select id="select-filter-values" class="mr-10"></select>'
+        html += '<label part="input-label-filter-value" id="input-label-criteria"></label>'
+        html += '<select part="input-select-calendar-filter" id="select-filter-values"></select>'
         html += '</div>';
         
 
@@ -9391,13 +9436,13 @@ export class SfIEvents extends LitElement {
     selectFilterValues.style.display = 'none'
     let inputLabelFilter = (this._SfCustomContainer as HTMLDivElement).querySelector('#input-label-filter') as HTMLLabelElement
     inputLabelFilter.style.display = 'none';
-    // for(var i = 0; i < 3; i++) {
-    //   (this._SfCustomContainer as HTMLDivElement).querySelector('#stream-month-' + i)?.addEventListener('click', (ev: any)=> {
-    //     const target = parseInt((ev.target as HTMLDivElement).id.split('-')[2]);
-    //     //console.log('clicked ', target);
-    //     this.renderPast(target);
-    //   })
-    // }
+
+    let selectFilterCriteriaMobile = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria-mobile') as HTMLSelectElement
+    selectFilterCriteriaMobile.style.display = 'none'
+    let selectFilterValuesMobile = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values-mobile') as HTMLSelectElement
+    selectFilterValuesMobile.style.display = 'none'
+    let inputLabelFilterMobile = (this._SfCustomContainer as HTMLDivElement).querySelector('#input-label-filter-mobile') as HTMLLabelElement
+    inputLabelFilterMobile.style.display = 'none';
     
     ((this._SfCustomContainer as HTMLDivElement).querySelector('#button-year-to-date') as HTMLButtonElement).click();
   }
@@ -22333,10 +22378,12 @@ export class SfIEvents extends LitElement {
           let eventid = sortidArr[3]
           let mmdd = mmddyyyy.split('/')[0] + '/' + mmddyyyy.split('/')[1]
           console.log('mmdd', mmdd, Object.keys(this.events));
-          for (let i = 0 ; i < this.events[mmdd].length; i ++){
-            if(this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid){
-              this.events[mmdd][i].isbulk = true;
-              break
+          if(this.events[mmdd] != null){
+            for (let i = 0 ; i < this.events[mmdd].length; i ++){
+              if(this.events[mmdd][i].entityid == entityid && this.events[mmdd][i].locationid == locationid && this.events[mmdd][i].id == eventid){
+                this.events[mmdd][i].isbulk = true;
+                break
+              }
             }
           }
         }