create activity card

Emmanuelle BONOLI · Emmanuelle BONOLI · commit 04bd4d31c730 · 2025-02-13T19:19:43.000+01:00
diff --git a/public/activities/tempActivitiesData.json b/public/activities/tempActivitiesData.json
@@ -22,10 +22,10 @@
     "id": 2,
     "title": "Collecte alimentaire",
     "description": "Aidez-nous à collecter et distribuer des denrées aux personnes dans le besoin.",
-    "image": ["/activities/tempImageData/maraude.png"],
+    "image": ["/activities/tempImageData/collecteAlimentaire.png"],
     "organization": {
       "name": "Les Restos du Cœur",
-      "logo": "/activities/tempImageData/logoCroixRouge.png",
+      "logo": "/activities/tempImageData/restoDuCoeur.png",
       "isFollow": true
     },
     "location": "Lyon",
@@ -41,10 +41,10 @@
     "id": 3,
     "title": "Soutien scolaire",
     "description": "Nous recherchons des bénévoles pour aider des enfants en difficulté scolaire.",
-    "image": ["/activities/tempImageData/maraude.png"],
+    "image": ["/activities/tempImageData/soutienScolaire.jpg"],
     "organization": {
       "name": "Éducation Pour Tous",
-      "logo": "/activities/tempImageData/logoCroixRouge.png",
+      "logo": "/activities/tempImageData/educationPourTous.png",
       "isFollow": true
     },
     "location": "Paris",
@@ -63,13 +63,13 @@
     "image": ["/activities/tempImageData/SPA.png"],
     "organization": {
       "name": "SPA",
-      "logo": "/activities/tempImageData/logoCroixRouge.png",
+      "logo": "/activities/tempImageData/logoSPA.png",
       "isFollow": false
     },
     "location": "Marseille",
     "date": "2024-12-15",
     "participants": {
-      "current": 3,
+      "current": 10,
       "max": 10
     },
     "theme": ["Nature"],
diff --git a/public/activities/tempImageData/collecteAlimentaire.png b/public/activities/tempImageData/collecteAlimentaire.png
diff --git a/public/activities/tempImageData/educationPourTous.png b/public/activities/tempImageData/educationPourTous.png
diff --git a/public/activities/tempImageData/logoSPA.png b/public/activities/tempImageData/logoSPA.png
diff --git a/public/activities/tempImageData/restoDuCoeur.png b/public/activities/tempImageData/restoDuCoeur.png
diff --git a/public/activities/tempImageData/soutienScolaire.jpg b/public/activities/tempImageData/soutienScolaire.jpg
diff --git a/src/app/features/activity/components/activity-card/activity-card.component.html b/src/app/features/activity/components/activity-card/activity-card.component.html
@@ -3,8 +3,9 @@
   <div class="description-card">
     <div class="header-description">
       <h3>{{ activity.title }}</h3>
-      <p>Badge volonteers</p>
-      <!-- TODO: changer pour le composant réutilisable -->
+      @if (activity) {
+        <app-inscription-badge [participants]="activity.participants"></app-inscription-badge>
+      }
     </div>
     <p>
       {{ activity.description }}
@@ -19,15 +20,13 @@ <h3>{{ activity.title }}</h3>
         <div class="footer-details">
           <div class="location">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-              <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
               <path
                 d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
             </svg>
             <p class="mini-p">{{ activity.location }}</p>
           </div>
           <div class="date">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-              <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
               <path
                 d="M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z" />
             </svg>
diff --git a/src/app/features/activity/components/activity-card/activity-card.component.scss b/src/app/features/activity/components/activity-card/activity-card.component.scss
@@ -11,6 +11,7 @@
   .activity-image {
     width: 100%;
     filter: brightness(80%);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
   }
 
   h3 {
@@ -26,7 +27,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 5% 5% 0% 5%;
+    padding: 5% 5% 0 5%;
 
     .header-description {
       display: flex;
@@ -38,6 +39,10 @@
       display: flex;
       align-items: center;
       gap: 2%;
+
+      img {
+        width: 25px;
+      }
     }
 
     .push-footer {
diff --git a/src/app/features/activity/components/activity-card/activity-card.component.ts b/src/app/features/activity/components/activity-card/activity-card.component.ts
@@ -1,11 +1,13 @@
 import { Component, Input } from '@angular/core';
 import { Activity } from '../../models/activity.model';
+import { InscriptionBadgeComponent } from '../inscription-badge/inscription-badge.component';
 
 @Component({
   selector: 'app-activity-card',
-  imports: [],
+  imports: [InscriptionBadgeComponent],
   templateUrl: './activity-card.component.html',
   styleUrl: './activity-card.component.scss',
+  standalone: true,
 })
 export class ActivityCardComponent {
   @Input() activity!: Activity;
diff --git a/src/app/features/activity/components/inscription-badge/inscription-badge.component.html b/src/app/features/activity/components/inscription-badge/inscription-badge.component.html
@@ -0,0 +1,9 @@
+@if (participants) {
+  <div class="badge-container">
+    @if (participants.current === participants.max) {
+      <p class="badge full">Complet</p>
+    } @else {
+      <p class="badge">{{ participants.current }} / {{ participants.max }} pers.</p>
+    }
+  </div>
+}
diff --git a/src/app/features/activity/components/inscription-badge/inscription-badge.component.scss b/src/app/features/activity/components/inscription-badge/inscription-badge.component.scss
@@ -0,0 +1,23 @@
+.badge-container {
+  width: 75px;
+  height: 30px;
+
+  .badge {
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    text-align: center;
+    width: 75px;
+    height: 30px;
+    background-color: var(--secondary-validate-color);
+    color: var(--background-color-white);
+    font-size: var(--font-size-p-mini);
+    font-family: var(--font-family-p);
+
+    &.full {
+      background-color: var(--secondary-complete-color);
+    }
+  }
+}
diff --git a/src/app/features/activity/components/inscription-badge/inscription-badge.component.ts b/src/app/features/activity/components/inscription-badge/inscription-badge.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-inscription-badge',
+  standalone: true,
+  imports: [],
+  templateUrl: './inscription-badge.component.html',
+  styleUrl: './inscription-badge.component.scss',
+})
+export class InscriptionBadgeComponent {
+  @Input() participants!: { current: number; max: number };
+}
diff --git a/src/app/features/activity/models/activity.model.ts b/src/app/features/activity/models/activity.model.ts
@@ -19,7 +19,7 @@ export class Activity {
   organization: Organization = { name: '', logo: '', isFollow: false };
   location: string = '';
   date: Date = new Date();
-  participant: Participant = { current: 0, max: 10 };
+  participants: Participant = { current: 0, max: 10 };
   theme: Theme[];
   isFavorite: boolean = false;
 
@@ -31,7 +31,7 @@ export class Activity {
     this.organization = data.organization || { name: '', logo: '', isFollow: false };
     this.location = data.location || '';
     this.date = data.date || new Date();
-    this.participant = data.participant || { current: 0, max: 10 };
+    this.participants = data.participants || { current: 0, max: 10 };
     this.theme = data.theme || [];
     this.isFavorite = data.isFavorite || false;
   }
diff --git a/src/app/features/activity/pages/activities-home/activities-home.component.ts b/src/app/features/activity/pages/activities-home/activities-home.component.ts
@@ -10,6 +10,7 @@ import { AsyncPipe } from '@angular/common';
   imports: [ActivityCardComponent, AsyncPipe],
   templateUrl: './activities-home.component.html',
   styleUrl: './activities-home.component.scss',
+  standalone: true,
 })
 export class ActivitiesHomeComponent implements OnInit {
   activityFacadeService: ActivityFacadeService = inject(ActivityFacadeService);
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>to_rename</title>
+    <title>A l'asso</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
