From 7e69ff3aed2021ca17d6ca8d7bda257ad7cce656 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 28 Oct 2020 16:13:03 +0100
Subject: [PATCH] fix: open status dot and card distance display

---
 src/app/map/components/map.component.scss         | 15 ---------------
 src/app/models/structure.model.ts                 | 12 ++++++------
 .../components/card/card.component.html           |  5 ++++-
 .../components/card/card.component.scss           |  1 +
 src/assets/scss/_icons.scss                       |  6 +++---
 src/assets/scss/_typography.scss                  |  2 +-
 src/index.html                                    |  2 +-
 7 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 91bff8ce4..95ae40f2b 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -66,19 +66,4 @@
     align-items: center;
     display: flex;
   }
-  // Find somthing better than redeclare class. Mixins ?
-  .ico-dot-available {
-    height: 12px;
-    width: 12px;
-    background-color: $green;
-    border-radius: 50%;
-    margin-right: 8px;
-  }
-  .ico-dot-unavailable {
-    height: 12px;
-    width: 12px;
-    background-color: $grey;
-    border-radius: 50%;
-    margin-right: 8px;
-  }
 }
diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index 849e79821..604ce17e8 100644
--- a/src/app/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -66,24 +66,24 @@ export class Structure {
     } else if (this.openedOn.day) {
       return 'Fermé - Ouvre ' + this.openedOn.day + ' à ' + this.openedOn.schedule;
     } else {
-      return 'Fermé - Aucun horaire disponible ';
+      return 'Aucun horaire disponible ';
     }
   }
 
   /**
    * Return a range, according to the distance, between [1,3] to get a distance reference.
-   * - [0,500m] => 1
-   * - [500m,1km] => 2
-   * - [1km, [ => 3
+   * - [0,5km] => 1
+   * - [5km,10km] => 2
+   * - [10km, [ => 3
    */
   public getDistanceRange(): number {
     if (!this.distance) {
       return 3;
     } else {
       // If it's in km
-      if (this.distance.length > 3) {
+      if (parseInt(this.distance, 10) > 10000) {
         return 3;
-      } else if (parseInt(this.distance, 10) < 500) {
+      } else if (parseInt(this.distance, 10) < 5000) {
         // If it's between 0 and 500 m
         return 1;
       } else {
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index fa7b23174..248b2a386 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -47,7 +47,10 @@
       <span>{{ structure.openDisplay() }}</span>
     </div>
     <ng-template #closed>
-      <span class="ico-dot-unavailable"></span>
+      <span *ngIf="structure.openedOn.day; else unkown" class="ico-dot-unavailable"></span>
+    </ng-template>
+    <ng-template #unkown>
+      <span class="ico-dot-unknown"></span>
     </ng-template>
   </div>
 </div>
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index 3fe9e2edd..f6db9e539 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -27,5 +27,6 @@
   span {
     @include cn-regular-14;
     margin-right: 8px;
+    display: inline-block;
   }
 }
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index 486ca1240..0ff36f179 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -55,21 +55,21 @@
   width: 12px;
   background-color: $green;
   border-radius: 50%;
-  display: inline-block;
+  margin-right: 8px;
 }
 .ico-dot-unavailable {
   height: 12px;
   width: 12px;
   background-color: $red;
   border-radius: 50%;
-  display: inline-block;
+  margin-right: 8px;
 }
 .ico-dot-unknown {
   height: 12px;
   width: 12px;
   background-color: $grey-4;
   border-radius: 50%;
-  display: inline-block;
+  margin-right: 8px;
 }
 
 .ico-marker-pin {
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index 5ddcc8aa3..bd17bb09f 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -1,6 +1,6 @@
 $text-font: 'Trebuchet MS', 'Helvetica', sans-serif;
 $footer-text-font: 'Arial', 'Helvetica', sans-serif;
-$title-font: 'Courier New', 'Helvetica', sans-serif;
+$title-font: 'Trebuchet MS', 'Helvetica', sans-serif;
 
 $font-size-xsmall: 0.875em; // 14px
 $font-size-small: 1em; // 16px
diff --git a/src/index.html b/src/index.html
index e3de07cb0..5780f8781 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Pamn</title>
+    <title>Ram</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-- 
GitLab