Add itinerary breadcrumbs, list styles, links & data

diff --git a/css/front.css b/css/front.css
index 369311e..a503682 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -1,4 +1,4 @@
-#tpAccountBox {
+#glm-itinerary-account-container {
     background: #eee;
     float: left;
     width: 98%;
@@ -10,17 +10,17 @@
     border-radius: 8px;
     padding: 10px 20px;
 }
-#tpLoggedInAs {
+#glm-itinerary-logged-in-as {
     display: block;
     position: relative;
     min-height: 73px;
     background: url("../assets/hiker.png") 0 100% no-repeat;
 }
-#tpLoggedInAs #tpLoggedInAsLabel {
+#glm-itinerary-logged-in-as .glm-itinerary-label {
     float: left;
     margin: 0 0 0 16%;
 }
-#tpLoggedInAs #tpLoggedInAsUser {
+#glm-itinerary-logged-in-as .glm-itinerary-email {
     float: left;
     clear: left;
     margin: 8px 0 0 16%;
@@ -28,36 +28,78 @@
     color: #790000;
     word-wrap: break-word;
 }
-#tpLogOutLink {
+#glm-itinerary-account-container .glm-itinerary-logout-link {
     display: block;
     position: absolute;
     bottom: 4px;
     right: 0;
 }
-#tpPlannerNav ul {
+@media only screen and (max-width: 640px) {
+    #glm-itinerary-account-container .glm-itinerary-logout-link {
+        position: relative;
+        float: right;
+        clear: left;
+    }
+}
+#glm-itinerary-planner-nav ul {
     list-style-type: none;
     margin: 0;
     padding: 10px;
 }
-#tpPlannerNav ul li {
+#glm-itinerary-planner-nav ul li {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
-#tpPlannerNav ul li a {
+#glm-itinerary-planner-nav ul li a {
     display: block;
     padding: 5px 0 5px 26px;
     background-position: 4px center;
     background-repeat: no-repeat;
-    margin-bottom: 3px;
     border: 1px solid #eee;
 }
-#tpPlannerNav #tpMoreInfo a {
+#glm-itinerary-planner-nav .more-info a {
     background-image: url("../assets/email_edit.png");
 }
-#tpPlannerNav #tpPrintList a {
+#glm-itinerary-planner-nav .print-list a {
     background-image: url("../assets/printer.png");
 }
-#tpPlannerNav #tpHelp a {
+#glm-itinerary-planner-nav .help a {
     background-image: url("../assets/help.png");
+}
+
+.glm-itinerary-list {
+    max-width: 1000px;
+    margin: 20px auto;
+}
+.glm-itinerary-list .glm-itinerary-list-item {
+    display: block;
+    width: 98%;
+    margin: 3px 1% 14px 1%;
+    border: 0;
+    border-radius: 8px;
+    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+    background: #F5F5F5;
+    padding: 10px;
+    position: relative;
+    clear: both;
+    height: 1%;
+    overflow: hidden;
+}
+.glm-itinerary-list .glm-itinerary-list-item .glm-itinerary-breadcrumbs {
+    width: 85%;
+}
+.glm-itinerary-list .glm-itinerary-list-item .glm-itinerary-item-title {
+    font-size: 18px;
+    margin: 0;
+    width:90%;
+    clear: none;
+}
+.glm-itinerary-delete {
+    display: block;
+    position: absolute;
+    top: 6px;
+    right: 6px;
 }
\ No newline at end of file

diff --git a/models/front/itinerary/list.php b/models/front/itinerary/list.php
index 2cc457e..77d9c3c 100755 (executable)
--- a/models/front/itinerary/list.php
+++ b/models/front/itinerary/list.php
@@ -71,21 +71,28 @@ class GlmMembersFront_itinerary_list // extends GlmMembersFront_events_baseActio
         $formContents      = '';
         $userLoggedIn      = false;
         $createSuccess     = false;
-        $members           =
-        $membersWithEmails =
-        $memberEmails      =
-        $states            =
-        $membersNoEmails   =
+        $members           = array();
+        $membersWithEmails = array();
+        $memberEmails      = array();
+        $states            = array();
+        $membersNoEmails   = array();
         $formErrors        = array();
         $userInfo          = array();
 
         if ( isset( $_SESSION['travel-list'] ) ) {
             foreach ( $_SESSION['travel-list'] as $item ) {
-                $members[] = apply_filters( 'glm-member-get-memberinfo-data', '', $item['ref_dest'] );
+                $members[$item['ref_dest']] = apply_filters( 'glm-member-get-memberinfo-data', '', $item['ref_dest'] );
+
+                // Page slug is the page the itinerary was saved from
+                $itineraryPageSlug = $item['page_slug'];
+                $members[$item['ref_dest']]['page_slug'] = $itineraryPageSlug;
+                // Page slug components are used to compose breadcrumb trails back to the page
+                $members[$item['ref_dest']]['page_slug_components'] = explode( '/' , $itineraryPageSlug );
             }
         }
-
+        
         // echo '<pre>$_SESSION: ' . print_r( $_SESSION, true ) . '</pre>';
+        // echo '<pre>$_SESSION: ' . print_r( $members, true ) . '</pre>';
 
         if ( isset( $_REQUEST['option'] ) ) {
             $option = filter_var( $_REQUEST['option'], FILTER_SANITIZE_STRING );

diff --git a/views/front/itinerary/list.html b/views/front/itinerary/list.html
index 2248310..5a13f74 100644 (file)
--- a/views/front/itinerary/list.html
+++ b/views/front/itinerary/list.html
@@ -11,10 +11,10 @@
 <p>{$settings.itinerary_page_content}</p>
 
 
-<div id="tpAccountBox" class="glm_row">
+<div id="glm-itinerary-account-container" class="glma-row">
 
     {if !$userLoggedIn}
-    <div id="tpLogin" class="glma-columns glma-small-12 glma-medium-4">
+    <div id="glm-itinerary-login" class="glma-columns glma-small-12 glma-medium-4">
         <form action="{$thisUrl}" method="post">
             <input type="hidden" name="option" value="login" />
             <div class="glm-columns glm-small-12 glm-medium-4">
@@ -30,26 +30,26 @@
         </form>
     </div>
 
-    <div id="tpAccount" class="glma-columns glma-small-12 glma-medium-4">
+    <div id="glm-itinerary-account" class="glma-columns glma-small-12 glma-medium-4">
         <h2>If you do not have an account</h2>
         <a href="{$thisUrl}?option=create"> Create Account </a><br>
         By creating an account, you'll be able to save your list for later.
     </div>
     {else}
-    <div id="tpLoggedInAs" class="glma-columns glma-small-12 glma-medium-8">
-        <span id="tpLoggedInAsLabel">Logged in as </span>
-        <span id="tpLoggedInAsUser">{$userInfo.email}</span>
-        <a id="tpLogOutLink" href="https://www.uptravel.com/Toolkit/Members/TripPlanner/login.php?logout=1" style="display: block; margin-top: 6px;">Log Out</a>
+    <div id="glm-itinerary-logged-in-as" class="glma-columns glma-small-12 glma-medium-8">
+        <span class="glm-itinerary-label">Logged in as </span>
+        <span class="glm-itinerary-email">{$userInfo.email}</span>
+        <a class="glm-itinerary-logout-link" href="https://www.uptravel.com/Toolkit/Members/TripPlanner/login.php?logout=1" style="display: block; margin-top: 6px;">Log Out</a>
     </div>
     {/if}
 
     {if $members}
-    <div id="tpPlannerNav" class="glma-columns glma-small-12 glma-medium-4">
+    <div id="glm-itinerary-planner-nav" class="glma-columns glma-small-12 glma-medium-4">
         <ul>
-            <li id="tpMoreInfo"> <a href="{$thisUrl}?option=moreinfo">Get more info</a> </li>
-            <li id="tpPrintList"> <a href="#" class="list-print" data-areaToPrint="PrintArea">Print this list</a> </li>
+            <li class="more-info"> <a href="{$thisUrl}?option=moreinfo">Get more info</a> </li>
+            <li class="print-list"> <a href="#" class="list-print" data-areaToPrint="PrintArea">Print this list</a> </li>
             <!-- <li> <a href="#">View Map</a> </li> -->
-            <li id="tpHelp"> <a href="#">Help</a> </li>
+            <li class="help"> <a href="#">Help</a> </li>
         </ul>
     </div>
     {/if}
@@ -69,26 +69,61 @@
 
     {foreach $members as $data}
         <div id="map_info_{$data.id}" class="glm-hidden">
-            <strong>{$data.member_name}</strong>
+            {if $settings.list_show_detail_link && !$data.has_no_profile.value}
+                <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$data.member_slug}/{if $settings.enable_multiple_profiles}{$data.id}/{/if}">{$data.member_name}</a>
+            {else}
+                <strong>{$data.member_name}</strong>
+            {/if}
             <div>
-                {$data.addr1}<br>
-                {$data.city}, {$data.state} {$data.zip}<br>
+                {if $data.addr1}{$data.addr1}<br>{/if}
+                {if $data.city}{$data.city}{/if}{if $data.city && ($data.state || $data.zip)},{/if}{if $data.state} {$data.state}{/if}{if $data.zip} {$data.zip}{/if}<br>
                 {if $data.phone}Phone:  <a href="tel:{apply_filters('glm_associate_phone_filter_tel', $data.phone)}">{apply_filters('glm_associate_phone_filter', $data.phone)}</a><br>{/if}
                 {if $data.url}<a href="{$data.url}">Website</a><br>{/if}
             </div>
         </div>
     {/foreach}
-    <div id="PrintArea">
+    <div id="PrintArea" class="glm-itinerary-list">
         {foreach $members as $data}
-            <div class="glm-itinerary-list-item" style="border:1px solid black; padding: 10px; margin: 10px;">
-                <div class="tpBreadcrumb">/breadcrumbs/../{$data.member_name}</div>
+            <div class="glm-itinerary-list-item">
+                <div class="glm-itinerary-breadcrumbs">
+                    {$breadcrumbTrail = ""}
+                    {foreach $data.page_slug_components as $breadcrumb}
+                        {$breadcrumbTrail = $breadcrumbTrail|cat:$breadcrumb|cat:"/"}
+                        {$breadcrumbID = get_page_by_path( $breadcrumbTrail )}
+                        {$breadcrumbTitle = get_the_title( $breadcrumbID )}
+                        <span class="glm-itinerary-breadcrumb-separator">
+                            /
+                        </span>
+                        <a class="glm-itinerary-breadcrumb-item" href="{$siteBaseUrl}{$breadcrumbTrail}">
+                            {$breadcrumbTitle}
+                        </a>
+                    {/foreach}
+                </div>
                 <a href="#" class="dashicons dashicons-trash glm-itinerary-delete" data-id="{$data.member}" data-baseurl="{$baseurl}" style="float:right;" alt="Remove"></a>
-                <h4 style="width:90%; clear: none;">{$data.member_name}</h4>
-                <div>
-                    {$data.addr1}<br>
-                    {$data.city}, {$data.state} {$data.zip}<br>
-                    {if $data.phone}Phone: <a href="tel:{apply_filters('glm_associate_phone_filter_tel', $data.phone)}">{apply_filters('glm_associate_phone_filter', $data.phone)}</a><br>{/if}
-                    {if $data.url}<a href="{$data.url}">Website</a><br>{/if}
+                
+                <h4 class="glm-itinerary-item-title">
+                {if $settings.list_show_detail_link && !$data.has_no_profile.value}
+                    <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$data.member_slug}/{if $settings.enable_multiple_profiles}{$data.id}/{/if}">
+                        {$data.member_name}
+                    </a>
+                {else}
+                    <strong>{$data.member_name}</strong>
+                {/if}
+                </h4>
+                <div class="glma-row">
+                    <div class="glm-itinerary-list-address-container glma-columns glma-small-12 glma-medium-6">
+                        {if $data.addr1}
+                            <div class="glm-itinerary-list-address">{$data.addr1}</div>
+                        {/if}
+                        {if $data.city || $data.state || $data.zip}
+                            {if $data.city}{$data.city}{/if}{if $data.city && ($data.state || $data.zip)},{/if}{if $data.state} {$data.state}{/if}{if $data.zip} {$data.zip}{/if}
+                        {/if}
+                    </div>
+                    <div class="glm-itinerary-list-contact glma-columns glma-small-12 glma-medium-6">
+                        {if $data.phone}Phone: <a href="tel:{apply_filters('glm_associate_phone_filter_tel', $data.phone)}">{apply_filters('glm_associate_phone_filter', $data.phone)}</a><br>{/if}
+                        {if $data.email}Email: <a href="mailto:{$data.email}">{$data.email}</a><br>{/if}
+                        {if $data.url}<a href="{$data.url}" target="_blank">Website</a><br>{/if}
+                    </div>
                 </div>
             </div>
         {/foreach}