From ebeb7e993f852504f1b6b5b85263b42f7f77d6ad Mon Sep 17 00:00:00 2001
From: Lesley Norton <lesley@lesleynorton.com>
Date: Wed, 30 May 2018 22:32:41 -0500
Subject: [PATCH] updated directory, work in progress

---
 src/app/directory/directory.component.css  | 56 +++++++++++-----------
 src/app/directory/directory.component.html | 45 +++++++++++++++--
 src/app/directory/directory.component.ts   |  2 +-
 3 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/src/app/directory/directory.component.css b/src/app/directory/directory.component.css
index adfc88c..cde1b9b 100644
--- a/src/app/directory/directory.component.css
+++ b/src/app/directory/directory.component.css
@@ -36,7 +36,6 @@
 }
 
 h2 {
-
   border: 1px solid rgba(0,0,0,.12);
   padding-top: 20px;
   border-top-right-radius: 5px;
@@ -48,19 +47,14 @@ h2 {
   font-weight:600;
 }
 
-
 div, .mat-table, .mat-cell, .mat-sort-header-button, .mat-form-field {
   font-family: 'Nudista', sans-serif !important;
-
-
 }
 
 button.mat-sort-header-button, .mat-sort-header-container, .mat-header-cell {
   font-weight:600;
   color:#333;
   font-size:14px !important;
-  
-
 }
 
 
@@ -77,12 +71,9 @@ span.locationAddress,  .diaMeals {
   font-weight:200;
 }
 
-
-
 .mat-row.ng-star-inserted {
   background-color:rgba(255, 255, 255, 0.963);
   padding: 15px 25px;
-
 }
 
 .mat-row.ng-star-inserted:hover {
@@ -117,7 +108,6 @@ span.locationAddress,  .diaMeals {
   font-weight:600;
   margin:0 0 0 0;
   padding:0 0 0 0;
-  
 }
 
 .mat-card:not([class*="mat-elevation-z"]) {
@@ -125,26 +115,20 @@ span.locationAddress,  .diaMeals {
 }
 
 /deep/ .mat-input-underline {
-
   height:3px !important;
   background-color: rgba(255, 222, 22,1) !important;
-
 }
 
 /deep/ .mat-form-field-ripple {
   background-color: rgba(255, 222, 22,1);
   height:5px;
-
 }
 
 /deep/ .mat-form-field-infix input:focus {
   background:white;
   border: 1px solid rgba(255,222,22,.61) !important;
-
 }
 
-
-
 .workinOnIt {
   font-size:.6rem;
   color: rgba(0,0,0,.6);
@@ -152,31 +136,34 @@ span.locationAddress,  .diaMeals {
   padding:0 0 0 0;
 }
 
+mat-row p {
+  display:block !important;
+  margin: 0 0 0 0;
+}
 
+.servingTimes {
+  margin-top: 15px;
+  padding-top: 15px;
+}
 
 .directory-table {
   box-shadow: none !important;
-border: 1px solid rgba(0,0,0,.12);
-
-
+  border: 1px solid rgba(0,0,0,.12);
 }
 
 .locationAddress {
   display:block;
+  margin-bottom: 15px;
 }
 
 .currentlyServing {
   font-weight:600;
   color: #333;
-  margin-top:15px;
- 
-
+  margin-top: 3px !important;
 }
-
-.currentlyServing, .diaMeals {
-  display:none;
+.mat-cell.cdk-column-Meals.mat-column-Meals.ng-star-inserted {
+  margin: 15px auto 15px auto;
 }
-
 #hoverPopUp span{
   position:absolute;
   top:1vh;
@@ -219,8 +206,6 @@ border: 1px solid rgba(0,0,0,.12);
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
   text-align:justify;
-
-
 }
 
 
@@ -282,15 +267,28 @@ border: 1px solid rgba(0,0,0,.12);
 /deep/ .mat-select-arrow{
   color: #ffde16 !important;
 }
+
+.mat-cell.cdk-column-Name.mat-column-Name.ng-star-inserted p {
+  display: none !important;
+}
+.mat-cell.cdk-column-Name.mat-column-Name.ng-star-inserted p.currentlyServing.telephone {
+  display: block !important;
+}
   @media screen and (max-width: 800px) { 
 
+    mat-row p, .mat-cell.cdk-column-Name.mat-column-Name.ng-star-inserted p {
+      display: block !important;
+    }
 
+    .mat-cell.cdk-column-Meals.mat-column-Meals.ng-star-inserted p {
+      display: block !important;
+    }
     .currentlyServing, .diaMeals {
       display: inline-block;
     }
 
     .mat-cell.cdk-column-Meals.mat-column-Meals.ng-star-inserted {
-      display:none;
+      display:none !important;
     }
 
     .mat-header-row.ng-star-inserted {
diff --git a/src/app/directory/directory.component.html b/src/app/directory/directory.component.html
index ea2ad80..5bad456 100644
--- a/src/app/directory/directory.component.html
+++ b/src/app/directory/directory.component.html
@@ -42,8 +42,29 @@ <h2>All Meal Sites:</h2>
         <mat-cell *matCellDef="let row">
           <span class="locationName"> {{row.Name}} </span>
           <span class="locationAddress">{{ row.FullAddress }}</span>
-          <span class="currentlyServing">Meals Served:</span>
-          <span class="diaMeals">{{ row.MealServed }}</span>
+          
+            <p *ngIf="row.Phone.length > 0" class="currentlyServing telephone">Phone:
+            <a class="diaMeals" href="tel:{{row.Phone}}">{{ row.Phone }}</a></p>
+       
+ 
+              <p *ngIf="row.MealServed.length > 0" class="currentlyServing">Meals Served:
+              <span class="diaMeals">{{ row.MealServed }}</span></p>
+      
+
+              <p *ngIf="row.DaysOpen.length > 0" class="currentlyServing">Days Open:
+              <span class="diaMeals">{{ row.DaysOpen }}</span></p>
+          
+          <p class="locationName servingTimes" *ngIf ="row.BreakfastTime.length > 0 || row.LunchTime.length > 0 || row.SnackTime.length >0">Serving Hours:</p>
+              <p *ngIf="row.BreakfastTime.length > 0" class="currentlyServing">Breakfast:
+              <span class="diaMeals">{{ row.BreakfastTime }}</span></p>
+          
+         
+              <p *ngIf="row.LunchTime.length > 0" class="currentlyServing">Lunch:
+              <span class="diaMeals">{{ row.LunchTime }}</span></p>
+          
+          
+              <p *ngIf="row.SnackTime.length > 0" class="currentlyServing">Snacks: <span class="diaMeals">{{ row.SnackTime }}</span></p>
+         
         </mat-cell>
       </ng-container>
 
@@ -52,7 +73,25 @@ <h2>All Meal Sites:</h2>
       <!-- Meals Column -->
       <ng-container matColumnDef="Meals">
         <mat-header-cell *matHeaderCellDef mat-sort-header> Meals Served :</mat-header-cell>
-        <mat-cell *matCellDef="let row" > {{row.MealServed}} </mat-cell>
+        <mat-cell *matCellDef="let row" >
+            <p *ngIf="row.MealServed.length > 0" class="currentlyServing">Serving:
+                <span class="diaMeals">{{ row.MealServed }}</span></p>
+        
+  
+                <p *ngIf="row.DaysOpen.length > 0" class="currentlyServing">Days Open:
+                <span class="diaMeals">{{ row.DaysOpen }}</span></p>
+            
+            <span class="locationName servingTimes" *ngIf ="row.BreakfastTime.length > 0 || row.LunchTime.length > 0 || row.SnackTime.length >0">Serving Hours:</span>
+                <p *ngIf="row.BreakfastTime.length > 0" class="currentlyServing">Breakfast:
+                <span class="diaMeals">{{ row.BreakfastTime }}</span></p>
+            
+           
+                <p *ngIf="row.LunchTime.length > 0" class="currentlyServing">Lunch:
+                <span class="diaMeals">{{ row.LunchTime }}</span></p>
+            
+            
+                <p *ngIf="row.SnackTime.length > 0" class="currentlyServing">Snacks: <span class="diaMeals">{{ row.SnackTime }}</span></p>
+        </mat-cell>
       </ng-container>
 
 
diff --git a/src/app/directory/directory.component.ts b/src/app/directory/directory.component.ts
index bca029a..3db753e 100644
--- a/src/app/directory/directory.component.ts
+++ b/src/app/directory/directory.component.ts
@@ -52,7 +52,7 @@ export class DirectoryComponent implements OnInit {
         console.log("TURF WORK....");
         this.dataSource2.data.forEach((site) => {
           Object.defineProperty(site, 'distance', {
-            value: turf.distance(<Coord>this._mService.userGPS, site.gps, options),
+            // value: turf.distance(<Coord>this._mService.userGPS, site.gps, options),
             writable: true,
             enumerable: true,
             configurable: true