From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Fri, 26 Jan 2018 14:16:27 +0000 (-0500)
Subject: adding custom events views
X-Git-Tag: v1.0.0^2~94
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=9af4e33f8cbd8441bbb2f17787db9c5555a5a7f8;p=WP-Themes%2Fwmta.git

adding custom events views

adding custom event views overriding view files in theme
---

diff --git a/glm-member-db-events/views/front/events/agenda.html b/glm-member-db-events/views/front/events/agenda.html
new file mode 100644
index 0000000..f4ba765
--- /dev/null
+++ b/glm-member-db-events/views/front/events/agenda.html
@@ -0,0 +1,371 @@
+<div id="glm-event-wrapper">
+        <div class="row">
+            {include file='front/events/searchForm.html'}
+        </div>
+    
+        <div id="glm-event-agenda-view" class="row">
+            <div class="small-12 columns">
+                {foreach $eventsByDate as $date => $key}
+                    <div class="row glm-event-day-row">
+                        <div class="small-12 medium-2 columns">
+                            <div class="glm-event-cal">
+                                <div class="glm-event-cal-month">{$date|date_format:"%b"}</div>
+                                <div class="glm-event-cal-day-container">
+                                    <span class="glm-event-cal-day">{$date|date_format:"%e"}</span>
+                                    <span class="glm-event-cal-dow">{$date|date_format:"%a"}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="small-12 medium-10 columns">
+                            {foreach $key as $events}
+                                {foreach $events as $event}
+                                    {$showTime = true}
+                                <div class="row glm-event-day-event">
+                                    <div class="small-12 columns">
+                                        <h2 class="agenda-event-name">{$event.name}</h2>
+                                        {$eventDateTime = $event.starting_date|date_format:"%I:%M %P"}
+                                            {foreach $event.recurrences as $rec}
+                                                {$start_time = $rec.start_time.time}
+                                                {if $start_time == $eventDateTime}
+                                                    {if ($rec.from_date.timestamp == $rec.to_date.timestamp && $rec.from_date.timestamp == $date)
+                                                    or ($date <= $rec.to_date.timestamp && $date >= $rec.from_date.timestamp )}
+                                                        <div class='date-range-container'>
+                                                            {if !$event.all_day}
+                                                                {$showTime = false}
+                                                                {if $event.starting_date|date_format:"%l:%M %P" == $event.ending_date|date_format:"%l:%M %P"}
+                                                                    {$event.starting_date|date_format:"%l:%M %P"}
+                                                                {else}
+                                                                    {$event.starting_date|date_format:"%l:%M %P"} - {$event.ending_date|date_format:"%l:%M %P"}
+                                                                {/if}
+    
+                                                            {/if}
+                                                            {if $rec.name && $rec.name != 'Imported' && $rec.name != 'Imported Event Schedule' }
+                                                                {$rec.name}
+                                                            {/if}
+                                                            ( {if $event.times|@count > 1} Occurring {/if} 
+                                                            {$rec.from_date.date} <span class="agenda-event-recur-dates">
+                                                              {if $rec.from_date.date != $rec.to_date.date}
+                                                                - {$rec.to_date.date}
+                                                               {else if $rec.specific_dates}
+                                                                - {$rec.specific_dates|@end|date_format:"%m/%d/%Y"}
+                                                              {/if}
+                                                            </span>
+    
+                                                        {if $rec.day_of_week.names|@count < 7 && $rec.day_of_week.names|@count > 0 }
+                                                        <span class="agenda-days-of-week">
+                                                            on
+                                                            {foreach $rec.day_of_week.names as $day}
+                                                                {if $day == "Thursday"}
+                                                                    <span class="agenda-event-weekday"> {$day|substr:0:4} </span>
+                                                                 {else}
+                                                                    <span class="agenda-event-weekday"> {$day|substr:0:3} </span>
+                                                                 {/if}
+                                                             {/foreach}
+    
+                                                        </span>
+                                                        {/if}
+                                                         )
+                                                        </div>
+                                                    {/if}
+                                                {/if}
+                                            {/foreach}
+                                        <div class="day-times-wrapper">
+                                            {if !$event.all_day && $showTime}
+                                                {if $event.starting_date|date_format:"%l:%M %P" == $event.ending_date|date_format:"%l:%M %P"}
+                                                <div class="agenda-event-times">{$event.starting_date|date_format:"%l:%M %P"}</div>
+                                                {else}
+                                                <div class="agenda-event-times"> {$event.starting_date|date_format:"%l:%M %P"} - {$event.ending_date|date_format:"%l:%M %P"}</div>
+                                                {/if}
+                                            {/if}
+                                        </div>
+                                        <div class="event-content glm-hide clearfix">
+                                            {if $event.image}<img style="float:right;" src="{$imgUrl}{$event.image}">{/if}
+                                            {$event.intro}
+                                            <div>
+                                                <a class="glm-read-more" href="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}">Read More</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                {/foreach}
+                            {/foreach}
+                        </div>
+                    </div>
+                {/foreach}
+    
+            </div>
+        </div>
+        {assign var="current_year" value=$smarty.now|date_format:"%Y"}
+        {assign var="current_month" value=$smarty.now|date_format:"%m"}
+        <div id="event-date-toggle-container">
+            <label class="date-toggle-label" for="#event-date-toggle"> Select a Date <label>
+            <select id="event-date-toggle">
+                <option value="" disabled selected> Select Month</option>
+                {foreach $months as $year=>$month}{
+                    {foreach $month as $m=>$value}
+                        {if $current_month == $value.date && $current_year == $year}
+                            <option value="{$year}-{$value.date}-01" selected> {$value.name} - {$year}</option>
+                        {else}
+                            <option value="{$year}-{$value.date}-01"> {$value.name} - {$year}</option>
+                        {/if}
+                    {/foreach}
+                {/foreach}
+            </select>
+        </div>
+        <!-- Calendar -->
+        <div id="eventCalendar" style='position: relative;'>
+            <div class='event-overlay'>
+                <div class="loading"></div>
+            </div>
+        </div>
+    </div>
+    
+    
+    
+    <script type="text/javascript">
+        jQuery(document).ready(function($) {
+    
+            var fullCalendarLoaded  = false;
+            var recurrencesInited   = false;
+            var locationsInited     = false;
+            var table               = 'glm-table-calendar';
+            var post_start, post_end, month_obj;
+            var rows                = $(".glm-event-day-row");
+            var agenda              = $("#glm-event-agenda-view");
+            var view_select         = $("#glm-event-view-select");
+            var search              = $("#glm-events-search-form");
+            var calendar            = $("#eventCalendar");
+            var event_search        = $(".glm-search-icon");
+            var main_content        = $("#main-content");
+            var member_id           = '{$memberId}';
+            var view                = '{$cal_view}';
+            var months              = '{$json_months}';
+            var category            = $('#glm-event-category').val();
+            var current_month       = $('{$current_month}');
+            var current_year        = $('{$current_year}');
+            var custom_page         = '{$customPage}';
+            var page_slug           = '{$pageSlug}';
+            var retain_date;
+            
+            if(!member_id){
+                member_id = null;
+            }
+    
+            // add 7 days to ensure we always get the current month and not any other month view that may
+            // be visible (last few days of previous month or first few days of next month)
+            function get_current_view(){
+                var retain_date;
+                var calCurrDate = $('#eventCalendar').fullCalendar('getView').start;
+                var d = moment(calCurrDate).add(7, 'days').format('YYYY-MM-01');
+                
+                return retain_date = d;
+            }
+            function in_mobile(){
+                if($(window).width() < 641 ){
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+            
+            $('#glm-event-from').on("change", function(){
+                var from_date = $(this).val();
+                $('#glm-event-to').val(from_date);
+    
+            });
+    
+            months = JSON.parse(months);
+    
+            event_search.on('click', function(){
+                sessionStorage.override = 'yes';
+            });
+            
+            if( sessionStorage.view && sessionStorage.override === 'no' && !in_mobile()){
+                view = sessionStorage.view;
+            } else if( sessionStorage.override === 'yes' || in_mobile()){
+                view = 'agenda';
+            } 
+    
+            // AJAX FUNCTION ************************************************
+            // Get calendar month via AJAX
+            function eventsCalMonthAJAX(month) {
+                var dat = {
+    
+                    action: 'glm_members_admin_ajax',
+                    glm_action: 'eventsCalMonthAJAX',
+                    month: month,
+                    category: category,
+                    member_id: member_id,
+                    custom_page: custom_page,
+                    page_slug: page_slug
+                };
+                $('.fc-event').remove();
+    
+                 jQuery.ajax({
+                    type: 'POST',
+                    url: '{$ajaxUrl}',
+                    data: dat,
+                    beforeSend: function(){
+                        $(".event-overlay").show();
+                        $(".loading").show();
+                    },
+                    complete: function(){
+                        $(".event-overlay").hide();
+                        $(".loading").hide();
+                    },
+                    cache: false,
+                    success: function (response){
+                        var buildingEvents = [];
+                        //var events_obj = jQuery.parseJSON(response);
+                        var events_obj = response;
+                        var events = events_obj.events;
+                        buildingEvents = $.map(events, function(i, val) {
+                            return {
+                                title:   i.title,
+                                start:   i.start,
+                                end:     i.last,
+                                allDay:  i.all_day,
+                                url:     i.url,
+                                recurs:  i.recurs
+                            };
+                        });
+                        $("#eventCalendar").fullCalendar('removeEvents');
+                        $("#eventCalendar").fullCalendar('addEventSource', buildingEvents);
+                    }
+                });
+                var timestamp = $.now();
+                var url = '{$ajaxUrl}' + '?t=' + timestamp;
+            }
+            var height = 900;
+            // Calendar *****************************************************
+            $('#eventCalendar').fullCalendar({
+                eventOrder: 'allDay',
+                height: height,
+                contentHeight: height,
+                eventRender: function(event, element){
+                    element.attr('title', event.title);
+                },
+                viewRender: function (view, element){
+                    post_start = view.start._d;
+                    post_end = view.end._d;
+                    {literal}month_obj = {start: view.start._d, last: view.end._d};{/literal}
+                },
+                header: {
+                    left: 'prev,next,today',
+                    center: 'title',
+                    right: ''
+                },
+                dayClick: function(date, jsEvent, view) {
+                    //$('#eventCalendar').fullCalendar('changeView', 'agendaDay');
+                    //$('#eventCalendar').fullCalendar('gotoDate', date);
+                },
+                editable: false,
+                handleWindowResize: true,
+                lazyFetching: true,
+                eventClick : function (event){
+                    
+                    sessionStorage.current_calendar_view = get_current_view();
+                
+                
+                    if(custom_page !== ''){
+                        location.href = event.url + '&glm_event_from=' + event.start.format();
+                    } else {
+                        location.href = event.url + '?glm_event_from=' + event.start.format();
+                    }
+                    
+                    return false;
+                },
+                eventLimit: true,
+                views: {
+                    month: {
+                        eventLimit: 4,
+                        eventBackgroundColor: 'transparent',
+                        eventTextColor: '#3A87AD',
+                        eventBorderColor: 'transparent',
+                    },
+                    agenda: {
+                        eventLimit: 4
+                    }
+                }
+            });
+    
+            if(view === "calendar"){
+                eventsCalMonthAJAX(month_obj);
+                main_content.removeClass("small-8").addClass("small-12");
+                calendar.show();
+                view_select.val('calendar');
+    
+            } else if ( view === "agenda"){
+                calendar.hide();
+                agenda.css("display", "block");
+                view_select.val('agenda');
+            }
+            $("#glm-event-view-select").on("change", function (){
+                sessionStorage.override = 'no';
+                sessionStorage.setItem("view", $(this).attr("value"));
+                if($("#glm-event-view-select option:selected").val() === "calendar"){
+                    eventsCalMonthAJAX(month_obj);
+                    agenda.css("display","none");
+                    calendar.fadeIn('slow', function(){});
+                    calendar.fullCalendar('render');
+    
+                } else if ( $("#glm-event-view-select option:selected").val() === "agenda"){
+                    agenda.css("display", "block");
+                    calendar.fadeOut('slow', function(){});
+                }
+            });
+            $(window).on("load", function(){
+                
+                if(sessionStorage.current_calendar_view){
+                    $('#event-date-toggle option').each(function(){
+                        if( $(this).val() === sessionStorage.current_calendar_view){
+                            $(this).prop('selected', true);
+                        }
+                    });
+                }
+    
+                $('#event-date-toggle-container').insertAfter( $('.fc-left')).fadeTo('slow', 1);
+                
+                $('#event-date-toggle').on("change", function(){
+                    var selected_date = $(this).val();
+                
+                    $('#eventCalendar').fullCalendar('gotoDate', selected_date);
+                     eventsCalMonthAJAX(month_obj);
+                     if(sessionStorage.current_calendar_view){
+                        sessionStorage.current_calendar_view = '';
+                    }
+                });
+            });
+            if(sessionStorage.current_calendar_view){
+                 $('#eventCalendar').fullCalendar('gotoDate', sessionStorage.current_calendar_view);
+                 eventsCalMonthAJAX(month_obj);
+            }
+            // initialize calendar with AJAX calls *************************************
+            $(document).on("click", "button.fc-button", function () {
+                if(sessionStorage.current_calendar_view){
+                    sessionStorage.current_calendar_view = '';
+                }
+            
+                eventsCalMonthAJAX(month_obj);
+            });
+    
+           $('#eventCalendar').find('.fc-today-button').on("click", function(){
+               eventsCalMonthAJAX(month_obj);
+               var current_view = get_current_view();
+               $('#event-date-toggle option').each(function(){
+                    if( $(this).val() === current_view){
+                        $(this).prop('selected', true);
+                    }
+                });
+           });
+           
+            var dates = $(".agenda-event-recur-dates");
+            dates.each( function (){
+               if( $(this).text().indexOf('-') < 0 ){
+                   $(this).remove();
+               }
+            });
+    
+        });
+    </script>
+    
\ No newline at end of file
diff --git a/glm-member-db-events/views/front/events/searchForm.html b/glm-member-db-events/views/front/events/searchForm.html
new file mode 100644
index 0000000..db1d8ea
--- /dev/null
+++ b/glm-member-db-events/views/front/events/searchForm.html
@@ -0,0 +1,103 @@
+<script>
+        var ajaxUrl = '{$ajaxUrl}';
+    </script>
+    {if !$eventId}
+        <div id="glm-events-search-form" class="small-12 columns">
+            <h1>Find An Event</h1>
+            <form action="{$currentUrl}">
+                <input type="hidden" name="search" value="1">
+                <div class="row">
+                    <div class="small-12 medium-5 columns">
+                        <input class="glm-search-icon right" type="image" alt="Search" src="{$assetsUrl}search-icon-24x24.png">
+                        <input id="glm-event-name" name="event_name" placeholder="Event Name" value="{$eventName}">
+                    </div>
+                    
+                    <div class="small-12 small-text-center medium-7 medium-text-right columns">
+                        <a id="glm-event-add-event" href="{$siteBaseUrl}add-event/" class="tiny button success">Add an Event</a>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="small-12 columns">
+                        <hr />
+                    </div>
+                </div>
+            </form>
+            <form id="glm-member-event-search" action="{$currentUrl}" method="get">
+                <input type="hidden" name="search" value="1">
+                 <input type="hidden" name="override_default" value="yes">
+                <div class="row">
+                    <div class="small-6 medium-3 column">
+                        <div class="row collapse prefix-radius">
+                            <div class="small-3 columns">
+                                <span class="prefix">From</span>
+                            </div>
+                            <div class="small-9 columns">
+                                <input id="glm-event-from" name="glm_event_from" value="{$fromDate}">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="small-6 medium-3 column">
+                        <div class="row collapse prefix-radius">
+                            <div class="small-3 columns">
+                                <span class="prefix">To</span>
+                            </div>
+                            <div class="small-9 columns">
+                                <input id="glm-event-to" name="glm_event_to" value="{$toDate}">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="small-8 medium-3 column">
+                        <input class="glm-search-icon right" type="image" alt="Search" src="{$assetsUrl}search-icon-24x24.png">
+                        <select id="glm-event-category" name="category">
+                            <option value="0">-- All Categories --</option>
+                            {foreach $categories as $cat}
+                                <option value="{$cat.id}"{if $cat.default == 1} selected{/if}>{$cat.name}</option>
+                            {/foreach}
+                        </select>
+                    </div>
+                    
+                    <div class="small-4 medium-2 column">
+                        {if !$eventId}
+                        <input class="right" type="image" title="Print PDF" id="glm-event-pdf-submit" src="{$assetsUrl}print-icon-24x24.png">
+                        {else}
+                        {/if}
+                        <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=rssFeed{if $eventId}&eventId={$eventId}{/if}">
+                        <img class="right" title="RSS Feed" id="glm-event-rss-feed" src="{$assetsUrl}rss-icon-24x24.png" />
+                        </a>
+                        <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=icalFeed&ical=1{if $eventId}&eventId={$eventId}{/if}">
+                        <img class="right" title="iCal Feed" id="glm-event-ical-feed" src="{$assetsUrl}calendar-icon-24x24.png" />
+                        </a>
+                    </div>
+                </div>
+                 
+            </form>
+            <div class="small-7 medium-3 columns view-select">
+                <select id="glm-event-view-select">
+                    <option id="agenda-view-option" value="agenda"> Agenda View </option>
+                    <option id="calendar-view-option" value="calendar"> Calendar View </option>
+                </select>
+            </div>
+        </div>
+    {else}
+        <div class="small-4 small-offset-8 medium-2 medium-offset-10 column">
+            {if !$eventId}
+            <input class="right" type="image" title="Print PDF" id="glm-event-pdf-submit" src="{$assetsUrl}print-icon-24x24.png">
+            {else}
+            {/if}
+            <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=rssFeed{if $eventId}&eventId={$eventId}{/if}">
+            <img class="right" title="RSS Feed" id="glm-event-rss-feed" src="{$assetsUrl}rss-icon-24x24.png" />
+            </a>
+            <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=icalFeed&ical=1{if $eventId}&eventId={$eventId}{/if}">
+            <img class="right" title="iCal Feed" id="glm-event-ical-feed" src="{$assetsUrl}calendar-icon-24x24.png" />
+            </a>
+        </div>
+    {/if}
+    
+    <script type="text/javascript">
+        jQuery(document).ready(function($){
+            jQuery('#glm-event-pdf-submit').click(function(){
+                jQuery('#glm-member-event-search').attr('method', 'post');
+            });
+        });
+    </script>
+    
\ No newline at end of file