refactor(events): replace parties concept with events throughout the application

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

This commit refactors the entire application to replace the 'parties' concept with 'events'. All controllers, models, views, and related files have been updated to reflect this change. The parties table has been replaced with an events table, and all related functionality has been updated accordingly.

app/javascript/controllers/counter_controller.js

@@ -1,9 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static values = { 
-    target: Number,
-    decimal: Boolean,
+  static values = {
+    target: { type: Number, default: 0 },
+    decimal: { type: Boolean, default: false },
     duration: { type: Number, default: 2000 }
   }
 
@@ -27,35 +27,44 @@ export default class extends Controller {
   }
 
   animate() {
-    const startValue = 0
-    const startTime = performance.now()
+    // Find the target element with data-target-value
+    const targetElement = this.element.querySelector('.stat-number');
+    if (!targetElement) return;
+
+    // Get the target value
+    this.targetValue = parseInt(targetElement.getAttribute('data-target-value'), 10) || this.targetValue;
+
+    const startValue = 0;
+    const startTime = performance.now();
 
     const updateCounter = (currentTime) => {
-      const elapsedTime = currentTime - startTime
-      const progress = Math.min(elapsedTime / this.durationValue, 1)
-      
+      const elapsedTime = currentTime - startTime;
+      const progress = Math.min(elapsedTime / this.durationValue, 1);
+
       // Easing function for smooth animation
-      const easeOutQuart = 1 - Math.pow(1 - progress, 4)
-      
-      let currentValue = startValue + (this.targetValue - startValue) * easeOutQuart
-      
+      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+
+      let currentValue = startValue + (this.targetValue - startValue) * easeOutQuart;
+
       if (this.decimalValue && this.targetValue < 10) {
-        currentValue = currentValue.toFixed(1)
+        currentValue = currentValue.toFixed(1);
       } else {
-        currentValue = Math.floor(currentValue)
+        currentValue = Math.floor(currentValue);
       }
 
-      this.element.textContent = currentValue
+      // Update only the text content of the target element
+      targetElement.textContent = currentValue;
 
       if (progress < 1) {
-        requestAnimationFrame(updateCounter)
+        requestAnimationFrame(updateCounter);
       } else {
-        this.element.textContent = this.decimalValue && this.targetValue < 10 
-          ? this.targetValue.toFixed(1) 
-          : this.targetValue
+        const finalValue = this.decimalValue && this.targetValue < 10
+          ? this.targetValue.toFixed(1)
+          : this.targetValue;
+        targetElement.textContent = finalValue;
       }
     }
 
-    requestAnimationFrame(updateCounter)
+    requestAnimationFrame(updateCounter);
   }
 }

app/javascript/controllers/featured_event_controller.js

@@ -0,0 +1,86 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["card"]
+  static classes = ["visible"]
+  static values = {
+    threshold: { type: Number, default: 0.1 },
+    rootMargin: { type: String, default: '0px 0px -50px 0px' },
+    staggerDelay: { type: Number, default: 0.2 }
+  }
+
+  connect() {
+    console.log("FeaturedEventController connected")
+    this.setupIntersectionObserver()
+    this.setupStaggeredAnimations()
+  }
+
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+  }
+
+  setupIntersectionObserver() {
+    const observerOptions = {
+      threshold: this.thresholdValue,
+      rootMargin: this.rootMarginValue
+    }
+
+    this.observer = new IntersectionObserver((entries) => {
+     entries.forEach(entry => {
+       if (entry.isIntersecting) {
+         entry.target.classList.add('visible')
+       }
+     })
+   }, observerOptions)
+
+    // Observe all card elements within this controller's scope
+   const elements = this.cardTargets
+   console.log("Card targets:", elements)
+   elements.forEach(el => {
+     this.observer.observe(el)
+   })
+  }
+
+  setupStaggeredAnimations() {
+   console.log("Setting up staggered animations")
+   console.log("Card targets:", this.cardTargets)
+   // Add staggered animation delays to cards
+   this.cardTargets.forEach((card, index) => {
+     card.style.transitionDelay = `${index * this.staggerDelayValue}s`
+     card.classList.remove('visible')
+   })
+ }
+}
+
+
+/** Old code
+ <script>
+  // Add animation classes when elements are in view
+  document.addEventListener("DOMContentLoaded", function() {
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+        }
+      });
+    }, observerOptions);
+
+    // Observe animated elements
+    document.querySelectorAll('.animate-fadeInUp, .animate-slideInLeft, .animate-slideInRight').forEach(el => {
+      observer.observe(el);
+    });
+
+    // Add staggered animation delays
+    document.querySelectorAll('.featured-event-card').forEach((card, index) => {
+      card.style.transitionDelay = `${index * 0.2}s`;
+    });
+  });
+</script>
+ */

app/javascript/controllers/index.js

@@ -5,12 +5,15 @@
 import { application } from "./application"
 
 import LogoutController from "./logout_controller"
-import FlashMessage from "./flash_message_controller"
+import FlashMessageController from "./flash_message_controller"
 import CounterController from "./counter_controller"
+import FeaturedEventController from "./featured_event_controller"
+
 import ShadcnTestController from "./shadcn_test_controller"
 
 application.register("logout", LogoutController) // Allow logout using js
-application.register("flash-message", FlashMessage) // Dismiss notification after 5 secondes
+application.register("flash-message", FlashMessageController) // Dismiss notification after 5 secondes
 application.register("counter", CounterController) // Simple counter for homepage
+application.register("featured-event", FeaturedEventController) // Featured event controller for homepage
 
 application.register("shadcn-test", ShadcnTestController) // Test controller for Shadcn

app/javascript/controllers/ticket_cart_controller.js

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["quantity", "cartCount", "cartTotal", "checkoutButton"]
-  static values = { partyId: String }
+  static values = { eventId: String }
 
   connect() {
     this.cart = {}
@@ -78,7 +78,7 @@ export default class extends Controller {
 
     const form = document.createElement('form')
     form.method = 'POST'
-    form.action = `/parties/${this.partyIdValue}/checkout`
+    form.action = `/events/${this.eventIdValue}/checkout`
     form.style.display = 'none'
 
     // Add CSRF token