adding sidebar events widget for crawford county, searchable with datepicker
authorAnthony Talarico <talarico@gaslightmedia.com>
Mon, 30 Jan 2017 20:41:57 +0000 (15:41 -0500)
committerAnthony Talarico <talarico@gaslightmedia.com>
Mon, 30 Jan 2017 20:41:57 +0000 (15:41 -0500)
models/admin/ajax/eventsCalMonthAJAX.php
views/front/events/sidebarEvents.html [new file with mode: 0644]

index 1143cd2..e24d367 100644 (file)
@@ -129,6 +129,69 @@ class GlmMembersAdmin_ajax_eventsCalMonthAJAX extends GlmDataEventsTimes
         global $wpdb;
         
         $event_data = [];
+        
+        // this section is for a sidebar events widget, typically on a front page
+        if(isset($_REQUEST['date_string'])){
+            $date = date_parse($_REQUEST['date_string']);
+            $month = $date['month'];
+            $year  = $date['year'];
+            $image_url = GLM_MEMBERS_PLUGIN_MEDIA_URL . '/images/small/';
+            
+            $sql = "SELECT * FROM " . GLM_MEMBERS_EVENTS_PLUGIN_DB_PREFIX ."events WHERE id IN (SELECT event FROM ";
+            $sql .= GLM_MEMBERS_EVENTS_PLUGIN_DB_PREFIX . "times WHERE YEAR(start_time) = $year AND MONTH(start_time) = $month AND active = 1 ORDER BY start_time ) LIMIT 3; ";
+            $events = $wpdb->get_results($sql);
+                     
+            foreach($events as $event){
+                $sql = "SELECT start_time, end_time FROM " . GLM_MEMBERS_EVENTS_PLUGIN_DB_PREFIX . "times WHERE event = " . $event->id;
+                
+                if($event->image !== ''){
+                    $image = $image_url . $event->image;
+                } else {
+                    $image = "none";
+                }
+                
+                $date = $wpdb->get_results($sql);
+                $dates[] = $date[0];
+                $start_date = date('M d', strtotime($date[0]->start_time));
+                $end_date = date('M d', strtotime($date[0]->end_time));
+                $start_timestamp = strtotime($start_date);
+                $end_timestamp = strtotime($end_date);
+                
+                if($start_timestamp === $end_timestamp){
+                    $end = $start_timestamp;
+                } else {
+                    $start_date = $start_date . "-" . $end_date;
+                }
+                
+                $sidebar_events[$event->id] = 
+                    array(
+                        "start_date" => $start_date, 
+                        "end_date"   => $end, 
+                        "name"       => $event->name, 
+                        "content"    => $event->descr, 
+                        'image'      => $image,
+                        'id'         => $event->id,
+                        'timestamp'  => $start_timestamp
+                    );
+//               $events_date[$start_date] = array();
+               $arrayDates[date('F d D', strtotime($start_date))]  = array();
+            }
+      
+            function sortFunction( $event1, $event2 ) {
+                return strtotime($event1['start_date']) - strtotime($event2["start_date"]);
+            }
+            usort($sidebar_events, "sortFunction");
+            
+            foreach($arrayDates as $key=>$date){
+                foreach($sidebar_events as $event){
+                    if($event['timestamp'] === strtotime($key)){
+                        array_push($arrayDates[$key], $event);
+                    }
+                }
+            }
+        }
+        // end section for front page events widget data
+        
         $month = filter_var_array(
             $_REQUEST['month'],
             array(
@@ -175,9 +238,10 @@ class GlmMembersAdmin_ajax_eventsCalMonthAJAX extends GlmDataEventsTimes
   
         $return = array(
 //            'status' => false,       // Assume nothing works
-            'events' => $event_data  ,    // Where our events list will go
-            'message' => $info
-//            'times'  => ''
+            'events'          => $event_data  ,    // Where our events list will go
+            'message'         => $info,
+            'sidebar_events'  => $sidebar_events,
+            'array_dates'     => $arrayDates
         );
 
         header('Content-type:application/json;charset=utf-8', true);
diff --git a/views/front/events/sidebarEvents.html b/views/front/events/sidebarEvents.html
new file mode 100644 (file)
index 0000000..29c5d63
--- /dev/null
@@ -0,0 +1,124 @@
+
+    <h1>Upcoming Events </h1>
+    <div id="sidebar-date-select" class="sidebar-datepicker"></div>
+    <div class="sidebar-events"></div>
+
+
+<script>
+    jQuery(document).ready(function($) {
+        
+        function ajaxEvents(data_array){
+            jQuery.ajax({
+                type: 'POST',
+                url: '{$ajaxUrl}',
+                data: data_array,
+                beforeSend: function(){
+//                   $('.sidebar-event').hide();
+                },
+                complete: function(){
+                    $('.sidebar-event').fadeIn("slow");
+                },
+                success: function(data){
+                      if(data.array_dates !== null){
+                        var num = 0;
+                        $.each(data.array_dates, function(index, value){
+                           var header = $('<div class="sidebar-date-header">' + index + '</div>');
+                            var container = $('<div id="group-' + num + '"></div>');
+
+                            $.each(value, function(i, v){
+                                if(v.image !== 'none'){
+                                    var image = "<div style='background-image: url("+ v.image +");' class='sidebar-event-image'> </div>";
+                                } else {
+                                    image = "<div class='no-image'></div>";
+                                }
+                                var event = $("<div id='" + v.id + "' class='sidebar-event group-" + num + "'>" + image + "<div class='sidebar-event-info-container'> <div class='sidebar-event-name'>" + v.name  + "</div> <div class='sidebar-event-date'>" + v.start_date +  "</div> <div class='sidebar-event-desc'>" + v.content + "</div></div></div>");
+                                 container.append(event);
+                            });
+                            $(container).prepend(header);
+                            $('.sidebar-events').append(container);
+                            num++;
+                        });
+                    } else {
+                        var event = $("<div> NO EVENTS </div>");
+                        $('.sidebar-events').append(event);
+                    }
+                }
+            });
+        }
+        
+        jQuery('#sidebar-date-select').datepicker( {
+            changeMonth: true,
+            changeYear: true,
+            showButtonPanel: true,
+            dateFormat: 'Y-m',
+            onChange: function(dateText, inst) { 
+                var month = jQuery("#ui-datepicker-div .ui-datepicker-month :selected").val();
+                var year = jQuery("#ui-datepicker-div .ui-datepicker-year :selected").val();
+                jQuery(this).datepicker('setDate', new Date(year, month, 1));
+            }
+        });
+        
+        var year = $('.ui-datepicker-year option:selected').val();
+        var month = parseInt($('.ui-datepicker-month option:selected').val() ) + 1;
+        var date_string, event;
+        
+        if(String(month).length < 2){
+                month = '0' + month;
+        }
+        date_string = year + "-" + month;
+            
+        var dat = {
+                action: 'glm_members_admin_ajax',
+                glm_action: 'eventsCalMonthAJAX',
+                date_string: date_string
+        };
+        ajaxEvents(dat);
+        
+         // get events on year or month dropdown change
+        $('#sidebar-date-select').datepicker()
+            .on("input change", function (e) {
+              
+                $(".sidebar-events").empty();
+                var date = e.target.value;
+                if(date.length < 4){
+                    month = parseInt(date) + 1;
+                    month = String(month);
+                    if(String(month).length < 2){
+                        month = '0' + month;
+                    }
+                } else {
+                    year = date;
+                }
+                
+                date_string = year + "-" + month;
+                var dat = {
+                    action: 'glm_members_admin_ajax',
+                    glm_action: 'eventsCalMonthAJAX',
+                    date_string: date_string
+                };
+                ajaxEvents(dat)
+                
+            });
+            
+        // get events on next or prev button click
+        $('#sidebar-date-select').datepicker()
+            .on(".ui-datepicker-next click", function (e) {
+                var year = $('.ui-datepicker-year option:selected').val();
+                var month = parseInt($('.ui-datepicker-month option:selected').val() ) + 1;
+                
+                $(".sidebar-events").empty();
+                
+                if(String(month).length < 2){
+                    month = '0' + month;
+                }
+                date_string = year + "-" + month;
+            
+                var dat = {
+                        action: 'glm_members_admin_ajax',
+                        glm_action: 'eventsCalMonthAJAX',
+                        date_string: date_string
+                };
+                ajaxEvents(dat);               
+        });
+    });
+</script>
\ No newline at end of file