Akram

Backend/service_event2/demo/src/main/java/com/example/demo/entities/Event.java

@@ -30,12 +30,12 @@ public class Event {
     @Column(name="photo",length=99999999)
     private String photo;
 
-    public Event(boolean b, String description, String title, Long price, String ownerId, Date dateDebut, String photo, Date dateFin) {
+    public Event(boolean b, String description, String title, Long price, Long ownerId, Date dateDebut, String photo, Date dateFin) {
         this.status = b;
         this.description = description;
         this.title = title;
         this.price =  price;
-        this.owner_id = Long.parseLong(ownerId);
+        this.owner_id = ownerId;
         this.date_debut = dateDebut;
         this.photo = photo;
         this.date_fin=dateFin;

Backend/service_event2/demo/src/main/java/com/example/demo/entities/Participation.java

@@ -23,6 +23,12 @@ public class Participation {
     @JoinColumn(name = "event_id", nullable = false)
     private Event event;
 
+    public Participation(Long price,Long person_id, Event event)
+    {
+        this.price= price;
+        this.person_id = person_id;
+        this.event = event;
+    }
     @Transient
     private User user;
 }

Backend/service_event2/demo/src/main/java/com/example/demo/repositories/ParticipationRepository.java

@@ -4,7 +4,9 @@
 import com.example.demo.entities.Participation;
 import org.springframework.data.jpa.repository.JpaRepository;
 
-public interface ParticipationRepository extends JpaRepository<Participation, Long> {
+import java.util.List;
 
+public interface ParticipationRepository extends JpaRepository<Participation, Long> {
+    List<Participation> findAllByEventId(Long eventId);
 }
 

Backend/service_event2/demo/src/main/java/com/example/demo/services/EventService.java

@@ -34,6 +34,11 @@ public class EventService {
     public List<Event> GetAllevents()
     {
         List<Event> e=  eventRepository.findAll();
+        for(Event tmp :e)
+        {
+            User p = personneService.findCustomerById(tmp.getOwner_id());
+            tmp.setOwner(p);
+        }
         return  e ;
     }
     @GetMapping("/Event/{id}")
@@ -63,10 +68,12 @@ public ResponseEntity<?> registerEventUser( @RequestParam("photo") String photo,
                                                     @RequestParam("price") Long price,
                                                     @RequestParam("date_debut")  @DateTimeFormat(pattern = "yyyy-MM-dd")Date dateDebut,
                                                     @RequestParam("date_fin")  @DateTimeFormat(pattern = "yyyy-MM-dd")Date dateFin,
-                                                    @RequestParam("owner_id") String ownerId) {
+                                                    @RequestParam("owner_id") Long ownerId) {
 
         Event newEvent = new Event(false,description,title,price,ownerId,dateDebut,photo,dateFin);
         eventRepository.save(newEvent);
+        User user =  personneService.findCustomerById(ownerId);
+
         if (newEvent != null) {
             return ResponseEntity.ok(newEvent);
         } else {
@@ -75,13 +82,37 @@ public ResponseEntity<?> registerEventUser( @RequestParam("photo") String photo,
     }
 
     @PostMapping("/EventResgistration/")
-    public Participation EventRegistration(@RequestBody Participation p )
-    {
-        User Registrated_User = personneService.findCustomerById(p.getPerson_id());
+    public ResponseEntity<?> EventRegistration(@RequestParam("price") Long price,
+                                               @RequestParam("person_id") Long person_id,
+                                               @RequestParam("event_id") Long eventId) {
+        User Registrated_User = personneService.findCustomerById(person_id);
+        Event event = eventRepository.findById(eventId).orElse(null); // Fetch event by ID
+        Participation p = new Participation(price, person_id, event);
+        p.setEvent(event);
         p.setUser(Registrated_User);
         participationRepository.save(p);
-        return  p ;
+
+        return ResponseEntity.ok(p);
+    }
+
+
+    @GetMapping("/UsersRegistrated/{id}")
+    public ResponseEntity<?> GetRegistratedUsers(@PathVariable(name="id") Long event_id)
+    {
+        List<Participation>p =  participationRepository.findAllByEventId(event_id);
+        for(Participation tmp : p)
+        {
+            User user =  personneService.findCustomerById(tmp.getPerson_id());
+            tmp.setUser(user);
+        }
+        if (p != null) {
+            return ResponseEntity.ok(p);
+        } else {
+            return ResponseEntity.notFound().build();
+        }
     }
+
+
     @PutMapping("/updateBidding")
     public ResponseEntity<Participation> biddingUpdate(@RequestBody Participation p) {
 

Frontend/src/app/events/events.component.css

@@ -1,4 +1,8 @@
-.event-block{
+.event-block {
   width: 80%;
 
 }
+
+*{
+  box-sizing:border-box;
+}

Frontend/src/app/events/events.component.html

@@ -1,10 +1,10 @@
 <app-navbar></app-navbar>
 
-<div class="container mx-auto px-4 flex flex-col items-center justify-center min-h-screen parent space-y-8">
+<div class="container mx-auto px-4 flex flex-col items-center justify-center min-h-screen parent space-y-8 mt-20">
   <!-- Augmentation du mt ici pour donner plus d'espace -->
 
   <!-- Titre principal -->
-  <h1 class="text-2xl font-bold">
+  <h1 class="text-2xl font-bold mt-5">
     Annonces des fermes à vendre en Tunisie !!!!!!!!
     <div class="flex justify-center m-5">
       <button id="defaultModalButton" data-modal-target="defaultModal" data-modal-toggle="defaultModal" class="block text-white bg-yellow-500 hover:bg-orange-400 focus:ring-4 focus:outline-none focus:ring-orange-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-orange-350 dark:hover:bg-orange-400 dark:focus:ring-orange-500" type="button">
@@ -58,7 +58,7 @@ <h2 class="text-lg font-semibold text-gray-800">
             <p class="text-sm text-gray-600 mt-2">
               {{ annonce.description }}
             </p>
-            <button class="mt-4 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
+            <button class="mt-4 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700" (click) = "openModelDetailsEvent(annonce)">
               je participe
             </button>
           </div>
@@ -138,7 +138,7 @@ <h3 class="text-lg font-semibold text-green-700">
               placeholder="Write the event  description here ...">
           </div>
         </div>
-        <button type="submit"
+        <button type="submit" data-modal-toggle="defaultModal"
           class="text-white inline-flex items-center bg-yellow-500 hover:bg-yellow-600 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
           <svg class="mr-1 -ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd"
@@ -151,7 +151,63 @@ <h3 class="text-lg font-semibold text-green-700">
     </div>
   </div>
 </div>
+<!-- modal details events-->
+<div *ngIf="isModalOpenDetailsEvent" class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50">
+  <div class="bg-white rounded-lg shadow-lg w-[640px] h-[460px] flex">
+    <!-- Liste des participants -->
+    <div class="w-1/3 bg-gray-100 p-4 border-r">
+      <h5 class="text-lg font-semibold mb-4">Participants</h5>
+      <ul class="space-y-2">
+        <li *ngFor="let participant of curr_users" class="text-sm text-gray-700 flex items-center space-x-2">
+          <img [src]="participant.user.photo" alt="Avatar" class="w-8 h-8 rounded-full">
+          <span>{{ participant.user.name + " " + participant.user.lastName + " " + participant.price }}</span>
+
+        </li>
+      </ul>
+    </div>
+
+    <!-- Détails de l'événement -->
+    <div class="flex-1 flex flex-col">
+      <!-- En-tête -->
+      <div class="px-6 py-4 flex items-center justify-between border-b">
+        <h5 class="text-lg font-semibold">Détails de l'événement</h5>
+        <button (click)="closeModalDetailsEvent()" class="text-gray-600 hover:text-gray-900">
+          <span class="text-xl">&times;</span>
+        </button>
+      </div>
+
+      <!-- Contenu principal -->
+      <div class="px-6 py-4 flex-1 overflow-y-auto">
+        <!-- Description -->
+        <div class="mb-4">
+          <h6 class="text-lg font-semibold mb-2">Description :</h6>
+          <p class="text-gray-600 text-sm">{{ SelectedEvent.description }}</p>
+        </div>
+
+        <!-- Prix -->
+        <div class="mb-4">
+          <h6 class="font-medium text-gray-800">Prix :</h6>
+          <p class="text-gray-600">{{ SelectedEvent.price }}</p>
+        </div>
 
+        <!-- Image -->
+        <div>
+          <h6 class="font-medium text-gray-800 mb-2">Image :</h6>
+          <img [src]="SelectedEvent.photo" alt="Event Image" class="w-full h-32 object-cover rounded-lg">
+        </div>
+      </div>
+
+      <div class="modal-footer mt-4 flex justify-end mr-11 mb-5">
+        <input type="number" name="value" id="value" [(ngModel)]="value"
+        class="bg-yellow-50 border border-yellow-300 text-green-900 text-xs rounded-md focus:ring-green-500 focus:border-green-500 block w-60 p-2.5 mr-5"
+        placeholder="Enter your bid" required>
+
+        <button type="submit" class="bg-yellow-500 text-white py-2 px-4 rounded-lg" (click)="RegisterForEvent()">Participer</button>
+      </div>
+
+    </div>
+  </div>
+</div>
 
 
 </div>

Frontend/src/app/events/events.component.ts

@@ -1,9 +1,14 @@
-import { Component,OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NavbarComponent } from '../accueil/navbar/navbar.component';
 import { CommonModule, CurrencyPipe, NgForOf, NgIf } from '@angular/common';
 import { event } from '../models/event.model';
 import { EventService } from '../services/event/event.service';
 import { FormsModule } from '@angular/forms';
+import { User } from '../models/user.model';
+import { Participation} from '../models/Participation';
+
+import { RegistrationService } from '../services/participation/registration.service';
+import { UserService } from '../services/user/user.service';
 @Component({
   selector: 'app-events',
   standalone: true,
@@ -17,51 +22,132 @@ import { FormsModule } from '@angular/forms';
 })
 export class EventsComponent implements OnInit {
 
-  event_created={status:false,description:"",title:"",price:0,
-    photo:"",date_debut:'',date_fin:'',owner_id:1,owners:'',users:[]
-  } ;
+  Owner!: User;
+
+  curr_users!: Participation[];
+
+  SelectedEvent: event = {
+    id: -1,
+    status: false,
+    description: '',
+    title: '',
+    price: 0,
+    owner_id: 0,
+    photo: '',
+    date_debut: '',
+    date_fin: '',
+    owner: this.Owner,
+    users: [],
+  }
+  value  = 0 ;
+  isModalOpenDetailsEvent:boolean=false;
+  event_created = {
+    status: false, description: "", title: "", price: 0,
+    photo: "", date_debut: '', date_fin: '', owner_id: 1, owners: '', users: []
+  };
   annonces: event[] = [];
-  constructor(private eventService:EventService) {
+  constructor(private eventService: EventService , private registrationService:RegistrationService , private userService:UserService) {
 
   }
 
   ngOnInit(): void {
+    this.load_events();
+    this.get_user(1);
+
+  }
+  get_user(id:number)
+  {
+    this.userService.getUser(id).subscribe({
+      next:(res) =>{
+        this.Owner = res;
+        console.log(res);
+
+      },
+      error:(err)=>{
+        console.log("error getting user",err);
+
+      }
+    })
+  }
+
+  openModelDetailsEvent(Ev:event):void
+  {
+    this.SelectedEvent = Ev;
+    const formData =  new FormData();
+    formData.append("event_id",Ev.id.toString());
+    this.registrationService.getRegistratedUsers(Ev.id).subscribe({
+      next:(res)=>{
+        this.curr_users = res;
+        console.log(res);
+      },
+      error:(err)=>{
+        console.log("error getting registrated users ",err);
+
+      }
+    })
+
+    this.isModalOpenDetailsEvent= true;
+
+  }
+  closeModalDetailsEvent():void{
+    this.isModalOpenDetailsEvent=false;
+  }
+  load_events() {
     this.eventService.getEvents().subscribe({
-      next:(data) => {
+      next: (data) => {
         this.annonces = data;
 
       },
-      error:(err) =>{
-            console.log("error : ",err);
+      error: (err) => {
+        console.log("error : ", err);
       }
     })
   }
   onFileChanged(event: any) {
     const file = event.target.files[0];
-    this.event_created.photo =file;
+    this.event_created.photo = file;
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = () => {
       this.event_created.photo = reader.result as string;
     };
 
   }
+  RegisterForEvent() {
+    const formData = new FormData();
+
+    formData.append("price", this.value.toString());
+    formData.append("person_id", this.Owner.id.toString());
+    formData.append("event_id", this.SelectedEvent.id.toString());
+
+    this.registrationService.register(formData).subscribe({
+        next: (response) => {
+            console.log("Registration successful", response);
+        },
+        error: (err) => {
+            console.error("Error during registration", err);
+        }
+    });
+}
+
+
   CreateEvent(): void {
 
-  const formData = new FormData();
+    const formData = new FormData();
     formData.append("photo", this.event_created.photo.toString()); // Either the base64 or the file
     formData.append("title", this.event_created.title);
     formData.append("description", this.event_created.description);
     formData.append("price", this.event_created.price.toString());
     formData.append("date_debut", this.event_created.date_debut);
     formData.append("date_fin", this.event_created.date_fin);
-    formData.append("owner_id","1");
+    formData.append("owner_id", "1");
     formData.forEach((value, key) => {
       console.log(key + ": " + value);
     });
     this.eventService.addEvent(formData).subscribe({
       next: (response) => {
         console.log("Event created successfully:", response);
+        this.load_events();
       },
       error: (error) => {
         console.error("Error creating event:", error);

Frontend/src/app/models/Participation.ts

@@ -0,0 +1,10 @@
+import { event } from "./event.model";
+import { User } from "./user.model";
+
+export interface Participation {
+  price: number,
+  user: User,
+  person_id:number,
+  id?:number,
+  Event: event
+}

Frontend/src/app/models/event.model.ts

@@ -1,7 +1,7 @@
 import { User } from "./user.model";
 
 export interface event {
-  id?: number;
+  id: number;
   status: boolean;
   description: string;
   title: string;