sf-i-events 1.0.737 → 1.0.738

package/package.json

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

package/sf-i-events.js

@@ -4098,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;
@@ -4115,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) => {
@@ -4152,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">';
@@ -6219,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 part="input-select-calendar-filter" 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 part="input-select-calendar-filter" 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">';
@@ -6383,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) => {

package/src/sf-i-events.ts

@@ -6570,13 +6570,19 @@ 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()
@@ -6587,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) => {
@@ -6624,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">';
@@ -9193,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>';
@@ -9224,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 part="input-select-calendar-filter" 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 part="input-select-calendar-filter" 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>';
         
 
@@ -9389,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();
   }