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

src/app/ui/ui.module.ts → src/app/shared/shared.module.ts

@@ -33,4 +33,4 @@ import { RevealComponent } from './reveal/reveal.component';
     RevealComponent,
   ]
 })
-export class UiModule { }
+export class SharedModule { }

src/app/showcase-site/showcase-site.component.ts

 import { Component, OnInit, Renderer } from '@angular/core';
-import { Link } from 'app/ui';
+import { Link } from 'app/shared';
 
 @Component({
   selector: 'app-showcase-site',

src/app/showcase-site/showcase-site.module.ts

@@ -4,7 +4,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { CoreModule } from 'app/core';
-import { UiModule } from 'app/ui';
+import { SharedModule } from 'app/shared';
 import { Ng2EmojiModule } from 'ng2-emoji';
 
 // Components
@@ -41,7 +41,7 @@ import { MentionsComponent } from './mentions/mentions.component';
     CommonModule,
     RouterModule,
     CoreModule,
-    UiModule,
+    SharedModule,
     Ng2EmojiModule.forRoot(),
   ],
   declarations: [

src/app/visits/organizer-card/organizer-card.component.html

+<div class="container drop-shadow-sm">
+  <label class="name">
+    <strong>
+      {{ organizer.fullName }}
+    </strong>
+  </label>
+  <div *ngIf="organizer.phoneNumber" class="text-muted-sm">
+    <label>Téléphone</label>
+    <app-reveal [content]="organizer.phoneNumber"></app-reveal>
+  </div>
+</div>

src/app/visits/organizer-card/organizer-card.component.scss

+@import '~sass/variables';
+
+.container {
+  text-align: center;
+  padding: 1em;
+  background: white;
+  width: 8em;
+  label {
+    display: block;
+    margin: .5em 0;
+  }
+}

src/app/visits/organizer-card/organizer-card.component.ts

+import { Component, Input } from '@angular/core';
+import { User } from 'app/core';
+
+@Component({
+  selector: 'app-organizer-card',
+  templateUrl: './organizer-card.component.html',
+  styleUrls: ['./organizer-card.component.scss']
+})
+export class OrganizerCardComponent {
+
+  @Input() organizer: User;
+
+}

src/app/visits/participant-number-badge/participant-number-badge.component.html

+<span *ngIf="number > 0" class="badge badge-default badge-lg">
+  <i class="fa fa-user"></i> {{ number }}
+  <span [ngPlural]="number">
+    <ng-template ngPluralCase="=1">participant</ng-template>
+    <ng-template ngPluralCase="other">participants</ng-template>
+  </span>
+</span>

src/app/visits/participant-number-badge/participant-number-badge.component.ts

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-participant-number-badge',
+  templateUrl: './participant-number-badge.component.html',
+  styleUrls: ['./participant-number-badge.component.scss']
+})
+export class ParticipantNumberBadgeComponent {
+
+  @Input() number: number;
+
+}

src/app/visits/participation-badge/participation-badge.component.html

+<span [ngSwitch]="accepted">
+  <span *ngSwitchCase="true" class="badge badge-success badge-lg">
+    <i class="fa fa-ticket"></i> Tu <span [ngSwitch]="passed">
+      <span *ngSwitchCase="true">as participé</span>
+      <span *ngSwitchDefault>participes</span>
+    </span> à cette sortie.
+  </span>
+  <span *ngSwitchCase="false" class="badge badge-danger badge-lg">
+    <i class="fa fa-times"></i> Ton inscription a été rejetée.
+  </span>
+  <span *ngSwitchDefault class="badge badge-info badge-lg">
+    <i class="fa fa-info"></i> Ton inscription est en attente de validation par les organisateurs.
+  </span>
+</span>

src/app/visits/participation-badge/participation-badge.component.ts

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-participation-badge',
+  templateUrl: './participation-badge.component.html',
+  styleUrls: ['./participation-badge.component.scss']
+})
+export class ParticipationBadgeComponent {
+
+  @Input() accepted: boolean;
+  @Input() passed: boolean;
+
+}

src/app/visits/registration-badge/registration-badge.component.html

+<span *ngIf="open" class="badge badge-warning badge-lg"><i class="fa fa-clock-o"></i>
+  Inscriptions avant le {{ deadline | date:"dd/MM à HH:mm" }}
+</span>
+
+<span *ngIf="!open && !passed" class="badge badge-danger badge-lg" [ngClass]="{'tooltip bottom': !passed}">
+  <i class="fa fa-times"></i> Inscriptions fermées {{ deadline | amLocale:'fr' | amTimeAgo }}
+  <span class="tooltip-text drop-shadow-sm" *ngIf="!passed">
+    Tu peux encore tenter de t'inscrire
+    <a href="mailto:oser.sortie@gmail.com?subject=Inscription à la sortie : {{ title }}">par email</a>.
+  </span>
+</span>

src/app/visits/registration-badge/registration-badge.component.ts

+import { Component, Input } from '@angular/core';
+import { Visit } from '../shared';
+
+@Component({
+  selector: 'app-registration-badge',
+  templateUrl: './registration-badge.component.html',
+  styleUrls: ['./registration-badge.component.scss']
+})
+export class RegistrationBadgeComponent {
+
+  @Input() title: string;
+  @Input() open: boolean;
+  @Input() passed: boolean;
+  @Input() deadline: Date;
+
+}

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

+<table>
+  <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>

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

+@import '~sass/media-queries';
+
+table {
+  width: 100%;
+  border: none;
+  border-spacing: .5em;
+
+  td:nth-child(1) {
+    font-weight: bold;
+  }
+}