Working on the time selection.
authorSteve Sutton <steve@gaslightmedia.com>
Mon, 30 Oct 2017 20:55:25 +0000 (16:55 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Mon, 30 Oct 2017 20:55:25 +0000 (16:55 -0400)
Lot's of redoing the forms and using the glm grlid more.

classes/data/dataRegEvent.php
css/front.css
js/frontRegApp.js
js/models/front/regClass.js
js/views/front/regClass.js
js/views/front/regEvent.js
models/front/registrations/list.php
views/front/registrations/list.html
views/front/registrations/registration.html

index 88c9d1a..828403d 100644 (file)
@@ -356,21 +356,28 @@ class GlmDataRegistrationsRegEvent extends GlmDataAbstract
                 // echo '<pre>$eventData: ' . print_r( $eventData, true ) . '</pre>';
 
                 // Add to the registration event arraytrue
-                $result_data['intro']         = $eventData['intro'];
-                $result_data['descr']         = $eventData['descr'];
-                $result_data['image']         = $eventData['image'];
-                $result_data['contact_name']  = $eventData['contact_name'];
-                $result_data['contact_email'] = $eventData['contact_email'];
-                $result_data['contact_phone'] = $eventData['contact_phone'];
-                $result_data['url']           = $eventData['url'];
+                $result_data['intro']               = $eventData['intro'];
+                $result_data['descr']               = $eventData['descr'];
+                $result_data['image']               = $eventData['image'];
+                $result_data['contact_name']        = $eventData['contact_name'];
+                $result_data['contact_email']       = $eventData['contact_email'];
+                $result_data['contact_phone']       = $eventData['contact_phone'];
+                $result_data['url']                 = $eventData['url'];
+                $result_data['hide_address']        = $eventData['hide_address'];
+                $result_data['use_member_location'] = $eventData['use_member_location'];
+
+                // Check for times data and use that.
                 if ( isset( $eventData['times'] ) && $eventData['times'] ) {
-                    $result_data['times']         = $eventData['times'];
+                    $result_data['times'] = $eventData['times'];
                 }
                 if ( isset( $eventData['starting_date'] ) && $eventData['starting_date'] ) {
                     $result_data['starting_date'] = $eventData['starting_date'];
                 }
                 if ( isset( $eventData['ending_date'] ) && $eventData['ending_date'] ) {
-                    $result_data['ending_date']   = $eventData['ending_date'];
+                    $result_data['ending_date'] = $eventData['ending_date'];
+                }
+                if ( isset( $eventData['locations'] ) && $eventData['locations'] ) {
+                    $result_data['locations'] = $eventData['locations'];
                 }
             }
 
index eb38cc2..2269f03 100644 (file)
@@ -20,6 +20,9 @@
 /*}}} end of tampering */
 
 /*{{{ Event Registration List */
+#glm-reg-list h3 a {
+    text-transform: uppercase;
+}
 .glm-reg-event-list {
     width: 100%;
     padding: 0;
@@ -28,7 +31,7 @@
     border: 1px solid black;
     padding: 10px;
     margin: 1.2rem 1rem;
-    position: relative;
+    /* position: relative; */
 }
 .glm-reg-event-item h2 {
     font-size: 1.5rem;
@@ -68,7 +71,7 @@
 .glm-reg-entryforms {
     width: 100%;
     clear: both;
-    position: relative;
+    /* position: relative; */
 }
 .glm-reg-level-add-registrant {
     float: right;
 }
 .glm-reg-compcode-entry {
     width: 11rem;
-    position: absolute;
+    /* position: absolute; */
     top: .8rem;
     right: .5rem;
 }
 .glm-reg-submit {
     padding: 1rem;
-    position: absolute;
+    /* position: absolute; */
     bottom: .3rem;
     right: .5rem;
 }
index 6b23c4f..3a4d853 100644 (file)
@@ -100,6 +100,7 @@ app.Models.Front.RegClass = Backbone.Model.extend({
         reg_rate_per_reg: '',
         reg_count: 0,
         loggedIn: false,
+        selectedTime: 0,
     },
 
     initialize: function(){
@@ -421,6 +422,11 @@ app.Views.Front.RegClass = Backbone.View.extend({
         'click .glm-add-new-account': 'addNewAccount',
         'click .add-new-registrant': 'addNew',
         'click .add-new-registrant-cancel': 'cancelAddNew',
+        'click .timeSelection': 'updateTimeSelection',
+    },
+
+    updateTimeSelection: function(){
+        this.model.set({ selectedTime: this.$('.timeSelection:checked').val() });
     },
 
     render: function(){
@@ -432,6 +438,9 @@ app.Views.Front.RegClass = Backbone.View.extend({
         });
         var accountContainer = this.$('.reg-class-accounts');
         accountContainer.append(view);
+        if ( app.timeSpecific ) {
+            // this.setCalendar();
+        }
         if ( loginAccount === '' ) {
             this.$('.glm-add-account').hide();
         }
@@ -441,8 +450,21 @@ app.Views.Front.RegClass = Backbone.View.extend({
         return this;
     },
 
+    getTimeArray: function(){
+        var times = this.model.get( 'times' );
+        var timeParts = [];
+        _.each( times, function(time){
+            var testDate = new Date( time.start_datetime.datetime );
+            timeParts.push( {id: time.id,date: testDate} );
+        });
+        console.log( timeParts );
+        return timeParts;
+    },
+
     setCalendar: function(){
+        console.log( 'setting calendar' );
         var times = this.model.get( 'times' );
+        console.log(times);
         $('#eventCalendar').fullCalendar({
             events: function(start, end, timezone, callback) {
                 var events = [];
@@ -500,7 +522,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
                     this.newRegAccountView = new app.Views.Front.RegistrantForm({model: registrant});
                     this.$el.append( this.newRegAccountView.render().el );
                     if ( app.timeSpecific ) {
-                        this.setCalendar();
+                        // this.setCalendar();
                     }
                 }
             }
@@ -596,7 +618,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
         this.newRegAccountView = new app.Views.Front.RegistrantForm({model: this.newRegAccount});
         this.$el.append( this.newRegAccountView.render().el );
         if ( app.timeSpecific ) {
-            this.setCalendar();
+            // this.setCalendar();
         }
     },
 
@@ -677,7 +699,7 @@ app.Views.Front.RegEvent = Backbone.View.extend({
 
     tagName: 'div',
 
-    className: 'glm-reg-event-item clearfix',
+    className: 'glm-reg-event-item',
 
     template: _.template( jQuery('#regEvent-template').html() ),
 
@@ -691,7 +713,8 @@ app.Views.Front.RegEvent = Backbone.View.extend({
         var view = regEvent.classes.map(function(item){
             return (new app.Views.Front.RegClass({ model: item })).render().el;
         });
-        this.$el.append(view);
+        var classContainer = this.$('.glm-reg-classes');
+        classContainer.append(view);
         return this;
     },
 
index 2efbc32..fae84e5 100644 (file)
@@ -15,6 +15,7 @@ app.Models.Front.RegClass = Backbone.Model.extend({
         reg_rate_per_reg: '',
         reg_count: 0,
         loggedIn: false,
+        selectedTime: 0,
     },
 
     initialize: function(){
index df8e560..046b0a4 100644 (file)
@@ -23,6 +23,11 @@ app.Views.Front.RegClass = Backbone.View.extend({
         'click .glm-add-new-account': 'addNewAccount',
         'click .add-new-registrant': 'addNew',
         'click .add-new-registrant-cancel': 'cancelAddNew',
+        'click .timeSelection': 'updateTimeSelection',
+    },
+
+    updateTimeSelection: function(){
+        this.model.set({ selectedTime: this.$('.timeSelection:checked').val() });
     },
 
     render: function(){
@@ -34,6 +39,9 @@ app.Views.Front.RegClass = Backbone.View.extend({
         });
         var accountContainer = this.$('.reg-class-accounts');
         accountContainer.append(view);
+        if ( app.timeSpecific ) {
+            // this.setCalendar();
+        }
         if ( loginAccount === '' ) {
             this.$('.glm-add-account').hide();
         }
@@ -43,8 +51,21 @@ app.Views.Front.RegClass = Backbone.View.extend({
         return this;
     },
 
+    getTimeArray: function(){
+        var times = this.model.get( 'times' );
+        var timeParts = [];
+        _.each( times, function(time){
+            var testDate = new Date( time.start_datetime.datetime );
+            timeParts.push( {id: time.id,date: testDate} );
+        });
+        console.log( timeParts );
+        return timeParts;
+    },
+
     setCalendar: function(){
+        console.log( 'setting calendar' );
         var times = this.model.get( 'times' );
+        console.log(times);
         $('#eventCalendar').fullCalendar({
             events: function(start, end, timezone, callback) {
                 var events = [];
@@ -102,7 +123,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
                     this.newRegAccountView = new app.Views.Front.RegistrantForm({model: registrant});
                     this.$el.append( this.newRegAccountView.render().el );
                     if ( app.timeSpecific ) {
-                        this.setCalendar();
+                        // this.setCalendar();
                     }
                 }
             }
@@ -198,7 +219,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
         this.newRegAccountView = new app.Views.Front.RegistrantForm({model: this.newRegAccount});
         this.$el.append( this.newRegAccountView.render().el );
         if ( app.timeSpecific ) {
-            this.setCalendar();
+            // this.setCalendar();
         }
     },
 
index 12e32af..17d8456 100644 (file)
@@ -5,7 +5,7 @@ app.Views.Front.RegEvent = Backbone.View.extend({
 
     tagName: 'div',
 
-    className: 'glm-reg-event-item clearfix',
+    className: 'glm-reg-event-item',
 
     template: _.template( jQuery('#regEvent-template').html() ),
 
@@ -19,7 +19,8 @@ app.Views.Front.RegEvent = Backbone.View.extend({
         var view = regEvent.classes.map(function(item){
             return (new app.Views.Front.RegClass({ model: item })).render().el;
         });
-        this.$el.append(view);
+        var classContainer = this.$('.glm-reg-classes');
+        classContainer.append(view);
         return this;
     },
 
index 09db5f7..6ac8da1 100644 (file)
         // Compile template data
         $templateData = array(
             'page'              => 'register',
-            //'events'            => $eventData,
             'regEventsCount'    => $regEventsCount,
             'haveRegEvents'     => $haveRegEvents,
             'regEvents'         => $list,
index ff5d7cd..b6deb2c 100644 (file)
@@ -1,31 +1,49 @@
 {include file='front/registrations/header.html'}
-<div class="glm-reg-event-list">
+<divi id="glm-reg-list" class="glm-reg-row">
 {if $haveRegEvents}
     {foreach $regEvents as $event}
-    <div class="glm-reg-event-item clearfix">
-        <h2><a href="{$thisUrl}?page=registration&eventRegId={$event.id}">{$event.event_name}</a></h2>
-        {if $event.image}
-            <img style="float:right;" src="{$glmPluginMediaUrl}/images/thumb/{$event.image}">
-        {/if}
+    <div class="glm-columns glm-large-12 glm-reg-event-item">
+        <h3><a href="{$thisUrl}?page=registration&eventRegId={$event.id}">{$event.event_name}</a></h3>
+        {if $event.image} <img style="float:right;" src="{$glmPluginMediaUrl}/images/thumb/{$event.image}"> {/if}
         <p>{$event.intro}</p>
-        <table>
-            <tr>
-                <th> Days/Times </th>
-            </tr>
-            {foreach $event.times as $time}
-                <tr>
-                    <td>
-                        {if $time.recur_name != 'Imported Event Schedule'}
-                        <i>{$time.recur_name}</i>
-                        {/if}
-                        {$time.start_time.timestamp|date_format:"%A, %B %e, %Y"}
-                        {$time.start_time.timestamp|date_format:"%l:%M %P"}
-                        -
-                        {$time.end_time.timestamp|date_format:"%l:%M %P"}
-                    </td>
-                </tr>
-            {/foreach}
-        </table>
+        <div class="glm-reg-row">
+            <div class="glm-columns glm-large-2 glm-small-12">
+                <strong> Dates/Times: </strong>
+            </div>
+            <div class="glm-columns glm-large-10">
+                {foreach $event.times as $time}
+                    {if $time.recur_name && $time.recur_name != 'Imported Event Schedule'}
+                    <strong>{$time.recur_name}</strong><br />
+                    {/if}
+                    {$time.start_time.timestamp|date_format:"%A, %B %e, %Y"}
+                    {$time.start_time.timestamp|date_format:"%l:%M %P"}
+                    -
+                    {$time.end_time.timestamp|date_format:"%l:%M %P"}<br />
+                {/foreach}
+            </div>
+        </div>
+        {if $event.hide_address.name == 'No'}
+            <div class="glm-reg-row">
+                <div class="glm-columns glm-large-2 glm-small-12">
+                    <strong> Location: </strong>
+                </div>
+                <div class="glm-columns glm-large-10 glm-small-12">
+                    {if !$event.use_member_location.value && ($event.locations.name || $event.locations.address)}
+                        {if $event.locations.name}{$event.locations.name}<br>{/if}
+                        {if $event.locations.address} {$event.locations.address}<br> {/if}
+                        {if $event.locations.city.name}{$event.locations.city.name}{/if}{if $event.locations.state.value}, {$event.locations.state.value} {/if}
+                        {if $event.locations.zip} {$event.locations.zip} {/if}
+                        {if $event.locations.phone} {apply_filters('glm_associate_phone_filter', $event.locations.phone)} {/if}
+                    {elseif $event.use_member_location.value || $event.other_ref_dest}
+                        {if $event.member.member} {$event.member.member}<br> {/if}
+                        {if $event.member.addr1} {$event.member.addr1}<br> {/if}
+                        {if $event.member.city}{$event.member.city}{/if}{if $event.member.state.value}, {$event.member.state.value}{/if}
+                        {if $event.member.zip} {$event.member.zip} {/if}
+                        {if $event.member.phone} {apply_filters('glm_associate_phone_filter', $event.member.phone)} {/if}
+                    {/if}
+                </div>
+            </div>
+        {/if}
     </div>
     {/foreach}
 {else}
@@ -33,4 +51,3 @@
 {/if}
 
 </div>
-{debug}
index eea0c70..48d399d 100644 (file)
@@ -8,58 +8,71 @@
 {/literal}
 {* Template for the regEvent *}{literal}
 <script type="text/template" id="regEvent-template">
-    <h2><%= event_name %></h2>
-    <div class="glm-reg-compcode-entry glm-hidden">
-        <input type="text" placeholder="Enter Comp Code Here" />
-    </div>
-    <div>
-        <p><%= descr %></p>
-        <% if ( this.getClassCount() == 0 ) { %>
-            <p> Registrations for this event not currently available at this time. </p>
-        <% } else { %>
-            <% if ( !time_specific ) { %>
-                <p>Attend any time during event</p>
-                <% _.each(reg_time, function(rTime){ %>
-                    <% if ( rTime.attendee_max > 0 ) { %>
-                <p> Maximum Registrants: <%= rTime.attendee_max %><br>
-                    Currently Available: <%= rTime.attendees_available %> </p>
+    <div class="glm-row">
+        <div class="glm-columns glm-small-12">
+            <h2><%= event_name %></h2>
+            <div>
+                <% if ( this.getClassCount() == 0 ) { %>
+                    <p> Registrations for this event not currently available at this time. </p>
+                <% } else { %>
+                    <% if ( !time_specific ) { %>
+                        <p>Attend any time during event</p>
+                        <% _.each(reg_time, function(rTime){ %>
+                            <% if ( rTime.attendee_max > 0 ) { %>
+                        <p> Maximum Registrants: <%= rTime.attendee_max %><br>
+                            Currently Available: <%= rTime.attendees_available %> </p>
+                            <% } %>
+                        <% }); %>
+                    <% } else { %>
                     <% } %>
-                <% }); %>
-            <% } else { %>
-            <% } %>
-        <% } %>
+                <% } %>
 
-        <p><%= terms %></p>
-    </div>
-
-    <div class="glm-reg-entryforms clearfix glm-hidden">
-        <div class="glm-reg-dates">
-            <h4>Pick your registration dates</h4>
-            <input type="date" placeholder="Enter Date" />
-            <input type="text" placeholder="Enter Time" />
+                <% if ( terms ) { %><p><%= terms %></p><% } %>
+            </div>
         </div>
-    </div>
-    <div class="glm-reg-submit">
-        <div class="glm-reg-warning">You have not yet submitted your registration! <img src="{/literal}{$assetUrl}{literal}/fingerRightRed.svg" style="height: 2em;">
-            <input id="glm-reg-cart-continue" type="submit" value="Continue" />
+        <div class="glm-columns glm-small-12 glm-reg-classes"></div>
+        <div class="glm-columns glm-small-12">
+            <div class="glm-reg-submit">
+                <div class="glm-reg-warning">You have not yet submitted your registration! <img src="{/literal}{$assetUrl}{literal}/fingerRightRed.svg" style="height: 2em;">
+                    <input id="glm-reg-cart-continue" type="submit" value="Continue" />
+                </div>
+            </div>
         </div>
     </div>
 </script>
 {/literal}
 {* Template for regClass *}{literal}
 <script type="text/template" id="regClass-template">
-    <div class="glm-class-row-header">
-        <span class="glm-reg-level-title"><%= name %></span>
-        <span class="reg-class-count"><%= reg_count %>  {/literal}{$terms.reg_term_attendee_plur_cap}{literal}</span>
-    </div>
-    <div class="reg-class-detail">
-        <div><%- descr %></div>
-        <% if ( loggedIn ) { %>
-            <button class="glm-add-account tiny">Add Me</button>
-        <% } %>
-        <button class="glm-add-new-account tiny">Add {/literal}{$terms.reg_term_attendee_cap}{literal}</button>
-        <div class="reg-class-accounts">
-            {/literal}{$terms.reg_term_attendee_plur_cap}{literal}
+    <div class="glm-row">
+        <div class="glm-columns glm-small-12 glm-large-12">
+            <div class="glm-row">
+                <span class="glm-reg-level-title"><%= name %></span>
+                <span class="reg-class-count"><%= reg_count %>  {/literal}{$terms.reg_term_attendee_plur_cap}{literal}</span>
+                <div class="glm-columns glm-small-12">
+                    <%- descr %>
+                </div>
+                <div class="glm-columns glm-small-12 glm-large-12"> <%= reg_rate_name  %> </div>
+                <div class="glm-columns glm-small-12 glm-large-12"> Base Rate: $<%= reg_rate_base_price %> </div>
+                <div class="glm-columns glm-small-12 glm-large-12"> Per Registrant: $<%= reg_rate_per_reg %> </div>
+                <div class="glm-columns glm-small-12 glm-large-12">
+                    <% _.each( this.getTimeArray(), function(time){ %>
+                    <label>
+                        <input class="timeSelection" type="radio" name="timeOption" value="<%= time.id %>" /> <%= time.date.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'}) %>
+                    </label>
+                    <% }); %>
+                </div>
+            </div>
+        </div>
+        <div class="glm-columns glm-small-12 glm-large-12">
+            <div class="reg-class-detail">
+                <% if ( loggedIn ) { %>
+                    <button class="glm-add-account tiny">Add Me</button>
+                <% } %>
+                <button class="glm-add-new-account tiny">Add {/literal}{$terms.reg_term_attendee_cap}{literal}</button>
+                <div class="reg-class-accounts">
+                    {/literal}{$terms.reg_term_attendee_plur_cap}{literal}
+                </div>
+            </div>
         </div>
     </div>
 </script>
 {* Template for registrant add form *}{literal}
 <script type="text/template" id="eventReg-registrant-add">
     {/literal}{if $regEvent.time_specific.value}
-        <div id="eventCalendar" style="width: 90%;"></div>
     {/if}{literal}
-        <div class="glm-reg-row">
+        <div class="glm-row">
             <div class="glm-columns glm-large-6">
                 <h4>{/literal}{$terms.reg_term_contact_information}{literal}</h4>
-                <div class="glm-reg-row">
+                <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">First Name</div>
                     <div class="glm-columns glm-large-8 glm-small-12"><input class="add_reg_fname" value="<%- fname %>"></div>
                 </div>
-                <div class="glm-reg-row">
+                <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">Last Name</div>
                     <div class="glm-columns glm-large-8 glm-small-12"><input class="add_reg_lname" value="<%- lname %>"></div>
                 </div>
-                <div class="glm-reg-row">
+                <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">Email Address</div>
                     <div class="glm-columns glm-large-8 glm-small-12"><input class="add_reg_email" value="<%- email %>"></div>
                 </div>
-                <div class="glm-reg-row">
+                <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">Address 1</div>
                     <div class="glm-columns glm-large-8 glm-small-12"><input class="add_reg_addr1" value="<%- addr1 %>"></div>
                 </div>
-                <div class="glm-reg-row">
+                <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">Address 2</div>
                     <div class="glm-columns glm-large-8 glm-small-12"><input class="add_reg_addr2" value="<%- addr2 %>"></div>
                 </div>
-                <div class="glm-reg-row">
+                <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">City</div>
                     <div class="glm-columns glm-large-8 glm-small-12"><input class="add_reg_city" value="<%- city %>"></div>
                 </div>
-                <div class="glm-reg-row">
+                <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">State</div>
                     <div class="glm-columns glm-large-8 glm-small-12"><input class="add_reg_state" value="<%- state %>"></div>
                 </div>
-                <div class="glm-reg-row">
+                <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">Zip/Postal Code</div>
                     <div class="glm-columns glm-large-8 glm-small-12"><input class="add_reg_zip" value="<%- zip %>"></div>
                 </div>
-                <div class="glm-reg-row">
+                <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">Country</div>
                     <div class="glm-columns glm-large-8 glm-small-12"><input class="add_reg_country" value="<%- country %>"></div>
                 </div>
                 {/if}{literal}
             </div>
         </div>
-    <div class="glm-reg-row">
+    <div class="glm-row">
         <input class="add-new-registrant button tiny" value="Add {/literal}{$terms.reg_term_attendee_cap}{literal}" type="submit">
         <a class="add-new-registrant-cancel">Cancel</a>
     </div>
         <div class="glm-registrant-edit" title="Edit"><%= fname %> <%= lname %> <%= email %><span class="dashicons dashicons-edit"></span></div>
         <div class="reg-edit-form">
             {/literal}{if $regEvent.time_specific.value}
-                <div style="float: right; width: 48%;">
-                    <div id="eventCalendar-{literal}<%- id %>{/literal}" style="width: 90%;"></div>
-                </div>
             {/if}{literal}
             {/literal}{if $regEvent.time_specific.value}
                 <div style="width: 48%;">
     <% } %>
 </script>
 {/literal}
-<div class="glm-reg-event-list" id="regApp">
+<div class="glm-reg-event-list">
     <h1>{$terms.reg_term_registrations_name}</h1>
     {include file='front/registrations/header.html'}
+    <div class="glm-row">
+        <div id="regApp" class="glm-columns glm-small-12">
+        </div>
+    </div>
 </div>
 {* Bootstrap the models needed on page load *}
 {* Need to have RegEvent model created *}