refactor visit detail into multiple components, rename ui module to shared module

src/app/visits/useful-information/useful-information.component.ts

+import { Component, Input } from '@angular/core';
+import { Visit } from '../shared';
+
+@Component({
+  selector: 'app-useful-information',
+  templateUrl: './useful-information.component.html',
+  styleUrls: ['./useful-information.component.scss']
+})
+export class UsefulInformationComponent {
+
+  @Input() visit: Visit;
+
+}

src/app/visits/visit-detail/visit-detail.component.html

@@ -15,32 +15,18 @@
 
     <!-- Metadata badges -->
     <div>
-      <span *ngIf="visit.registrationsOpen" class="badge badge-warning badge-lg"><i class="fa fa-clock-o"></i>
-        Inscriptions avant le {{ visit.deadline | date:"dd/MM à HH:mm" }}
-      </span>
-      <span *ngIf="!visit.registrationsOpen" class="badge badge-danger badge-lg" [ngClass]="{'tooltip bottom': !visit.passed}">
-        <i class="fa fa-times"></i> Inscriptions fermées <span *ngIf="!visit.passed">{{ visit.deadline | amLocale:'fr' | amTimeAgo }}</span>
-        <span class="tooltip-text drop-shadow-sm" *ngIf="!visit.passed">
-          Tu peux encore tenter de t'inscrire
-          <a href="mailto:oser.sortie@gmail.com?subject=Inscription à la sortie : {{ visit.title }}">par email</a>.
-        </span>
-      </span>
-      <span *ngIf="acceptedParticipants > 0" class="badge badge-default badge-lg">
-        <i class="fa fa-user"></i> {{ acceptedParticipants }} participants
-      </span>
+      <app-registration-badge
+        [title]="visit.title"
+        [open]="visit.registrationsOpen"
+        [passed]="visit.passed"
+        [deadline]="visit.deadline"></app-registration-badge>
+      <app-participant-number-badge
+        [number]="acceptedParticipants"></app-participant-number-badge>
+
       <span *ngIf="participant">
-        <span *ngIf="participant.accepted" class="badge badge-success badge-lg">
-          <i class="fa fa-ticket"></i> Tu <span [ngSwitch]="visit.passed">
-            <span *ngSwitchCase="true">as participé</span>
-            <span *ngSwitchDefault>participes</span>
-          </span> à cette sortie.
-        </span>
-        <span *ngIf="participant.accepted === null" class="badge badge-info badge-lg">
-          <i class="fa fa-info"></i> Ton inscription est en attente de validation par les organisateurs.
-        </span>
-        <span *ngIf="participant.accepted === false" class="badge badge-danger badge-lg">
-          <i class="fa fa-times"></i> Ton inscription a été rejetée.
-        </span>
+        <app-participation-badge
+          [accepted]="participant.accepted"
+          [passed]="visit.passed"></app-participation-badge>
       </span>
     </div>
 
@@ -52,12 +38,16 @@
     <div *ngIf="participant && !visit.passed">
 
       <!-- And a shy-ish unregister link -->
-      <p class="text-muted-sm">Tu as un empêchement et souhaites <span class="link-muted" (click)="leaveFormActive = true">te désinscrire ?</span></p>
+      <p class="text-muted-sm">
+        Tu as un empêchement et souhaites
+        <span class="link-muted" (click)="leaveFormActive = true">
+          te désinscrire ?
+        </span>
+      </p>
 
       <!-- Related documents -->
       <p class="alert alert-info" *ngIf="visit.permissionSheet">
-        {{ visit.permissionSheet }}
-        <i class="fa fa-exclamation-triangle"></i> Avant de te rendre à la sortie, télécharge <a [href]="visit.permissionSheet">l'autorisation de sortie</a>. Fais-la remplir par tes parents et remet-la aux tuteurs le jour de la sortie.
+        <i class="fa fa-exclamation-triangle"></i>Avant de te rendre à la sortie, télécharge <a [href]="visit.permissionSheet">l'autorisation de sortie</a>. Fais-la remplir par tes parents et remets-la aux tuteurs le jour de la sortie.
       </p>
       <p class="alert alert-default" *ngIf="visit.factSheet">
         <i class="fa fa-file-text"></i> Les organisateurs ont rédigé une <a [href]="visit.factSheet">fiche sortie</a>. N'hésite pas à en prendre connaissance avant de te rendre à la sortie !
@@ -78,50 +68,19 @@
   </div>
 
   <h2>Informations pratiques</h2>
-
-  <table class="tips">
-    <tr>
-      <td>Lieu</td>
-      <td>{{ visit.place.name }}</td>
-    </tr>
-    <tr>
-      <td>Adresse</td>
-      <td>{{ visit.place.address.toString() }}</td>
-    </tr>
-    <tr>
-      <td>Date</td>
-      <td>{{ visit.date | date:"fullDate" }}</td>
-    </tr>
-    <tr>
-      <td>Heure de début</td>
-      <td>{{ visit.startTime | date:"shortTime"}}</td>
-    </tr>
-    <tr>
-      <td>Heure de fin estimée</td>
-      <td>{{ visit.endTime | date:"shortTime"}}</td>
-    </tr>
-    <tr>
-      <td>Lieu de rendez-vous</td>
-      <td>{{ visit.meetingPlace }}</td>
-    </tr>
-  </table>
+  <app-useful-information [visit]="visit"></app-useful-information>
 
   <h2>Se rendre à cette sortie</h2>
-  <agm-map [latitude]="lat" [longitude]="lng" [zoom]="17">
-    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
-  </agm-map>
+  <app-visit-location-map
+    [geocoder]="geocoder"
+    [address]="visit.address"></app-visit-location-map>
 
   <div *ngIf="visit.organizers.length > 0">
     <h2>Tuteurs organisateurs</h2>
 
-    <ul>
-      <li *ngFor="let organizer of visit.organizers">
-        {{ organizer.user.firstName }} {{ organizer.user.lastName}}
-        <span *ngIf="organizer.user.phoneNumber">
-          (tél. : <app-reveal [content]="organizer.user.phoneNumber"></app-reveal>)
-        </span>
-      </li>
-    </ul>
+    <div class="organizers">
+      <app-organizer-card *ngFor="let organizer of visit.organizers" [organizer]="organizer.user"></app-organizer-card>
+    </div>
   </div>
 
 </div>

src/app/visits/visit-detail/visit-detail.component.scss

@@ -19,10 +19,6 @@
   }
 }
 
-agm-map {
-  height: 400px;
-}
-
 #participate-btn {
   margin-top: 1em;
 }
@@ -48,11 +44,10 @@ img {
   height: auto;
 }
 
-.tips {
-  width: 100%;
-  border: none;
-
-  td:nth-child(1) {
-    font-weight: bold;
+.organizers {
+  display: flex;
+  flex-flow: row wrap;
+  app-organizer-card {
+    margin: .5em;
   }
 }

src/app/visits/visit-detail/visit-detail.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
-import { AuthService, GeocodingService, Location } from 'app/core';
+import { AuthService, Geocoder } from 'app/core';
 import { Visit, Participant } from '../shared';
 
 @Component({
@@ -12,38 +12,26 @@ import { Visit, Participant } from '../shared';
 export class VisitDetailComponent implements OnInit {
 
   visit: Visit;
-  lat = 50.350;
-  lng = 3.520;
   userId: number;
   participant: Participant;
   acceptedParticipants = 0;
   registerFormActive = false;
   formLoading: boolean = false;
   leaveFormActive = false;
-  private geocoder: any;
+  geocoder: Geocoder;
 
   constructor(
     private route: ActivatedRoute,
     private auth: AuthService,
-    private geocoding: GeocodingService,
   ) { }
 
   ngOnInit() {
     this.visit = this.route.snapshot.data['visit'];
     this.geocoder = this.route.snapshot.data['geocoder'];
+    console.log(this.geocoder);
     this.userId = this.auth.getUser().id;
     this.getParticipant();
     this.getAcceptedParticipants();
-    this.getVisitLocation();
-  }
-
-  getVisitLocation() {
-    this.geocoding.locate(this.geocoder, this.visit.address).subscribe(
-      location => {
-        this.lat = location.lat;
-        this.lng = location.lng;
-      }
-    );
   }
 
   getParticipant() {

src/app/visits/visit-location-map/visit-location-map.component.html

+<agm-map [latitude]="lat" [longitude]="lng" [zoom]="17">
+  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+</agm-map>

src/app/visits/visit-location-map/visit-location-map.component.scss

+agm-map {
+  height: 400px;
+}

src/app/visits/visit-location-map/visit-location-map.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { GeocodingService, Geocoder } from 'app/core';
+
+@Component({
+  selector: 'app-visit-location-map',
+  templateUrl: './visit-location-map.component.html',
+  styleUrls: ['./visit-location-map.component.scss']
+})
+export class VisitLocationMapComponent implements OnInit {
+
+  @Input() address: string;
+  @Input() geocoder: Geocoder;
+  lat = 50;
+  lng = 3;
+
+  constructor(
+    private geocoding: GeocodingService,
+    private route: ActivatedRoute,
+  ) { }
+
+  ngOnInit() {
+    this.getVisitLocation();
+  }
+
+  getVisitLocation() {
+    this.geocoding.locate(this.geocoder, this.address).subscribe(
+      location => {
+        this.lat = location.lat;
+        this.lng = location.lng;
+      }
+    );
+  }
+
+}

src/app/visits/visits.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from 'app/core';
-import { Link } from 'app/ui';
+import { Link } from 'app/shared';
 
 @Component({
   selector: 'app-visits',

src/app/visits/visits.module.ts

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { CoreModule } from '../core';
-import { UiModule } from '../ui';
+import { SharedModule } from '../shared';
 import { AgmCoreModule } from '@agm/core';
 import { MomentModule } from 'ngx-moment';
 
@@ -23,6 +23,12 @@ import { RegisterFormComponent } from './register-form/register-form.component';
 
 // Resolvers
 import { VisitsResolver, VisitResolver } from './shared';
+import { RegistrationBadgeComponent } from './registration-badge/registration-badge.component';
+import { ParticipantNumberBadgeComponent } from './participant-number-badge/participant-number-badge.component';
+import { ParticipationBadgeComponent } from './participation-badge/participation-badge.component';
+import { UsefulInformationComponent } from './useful-information/useful-information.component';
+import { VisitLocationMapComponent } from './visit-location-map/visit-location-map.component';
+import { OrganizerCardComponent } from './organizer-card/organizer-card.component';
 
 @NgModule({
   imports: [
@@ -31,7 +37,7 @@ import { VisitsResolver, VisitResolver } from './shared';
     MomentModule,
     CoreModule,
     RouterModule,
-    UiModule,
+    SharedModule,
     AgmCoreModule.forRoot({
       apiKey: 'AIzaSyDXPxwZpx9EiwarLAZ3yzUANK9D4q0X9cI',
     }),
@@ -44,6 +50,12 @@ import { VisitsResolver, VisitResolver } from './shared';
     VisitDetailComponent,
     LeaveFormComponent,
     RegisterFormComponent,
+    RegistrationBadgeComponent,
+    ParticipantNumberBadgeComponent,
+    ParticipationBadgeComponent,
+    UsefulInformationComponent,
+    VisitLocationMapComponent,
+    OrganizerCardComponent,
   ],
   providers: [
     VisitService,