PE: add live count

gfgkare · Oct 6, 2024 · 1c1de89 · 1c1de89
1 parent b9e8d5e
commit 1c1de89
Showing 3 changed files with 165 additions and 8 deletions.
diff --git a/src/styles/ProjectExpo.scss b/src/styles/ProjectExpo.scss
@@ -487,6 +487,82 @@ $textWhite: rgb(231, 231, 231);
                     width: 100%;
                 }
 
+
+                &.liveCount {
+                    width: min(90%, 700px);
+                    padding: 0 1rem;
+                    backdrop-filter: blur(8px);
+
+                    .tableContainer {
+
+                        button {
+                            z-index: 1 !important;
+                            opacity: 0;
+                            transform: translateY(10px);
+                            transition: all .25s ease;
+
+                            float: right;
+                            background-color: rgba(white, .2);
+                            color: $textWhite;
+                            border-radius: .7rem;
+                            font-size: .7rem;
+                            display: flex;
+                            gap: .25rem;
+                            justify-content: center;
+                            align-items: center;
+                            cursor: auto;
+
+                            svg {
+                                animation: rotate 4s linear infinite;
+                            }
+
+                            &.show {
+                                opacity: 1;
+                                transform:  translateY(0);
+                            }
+                        }
+
+                        table {
+                            z-index: 2 !important;
+                            background: rgba(black, .1);
+                            border-radius: 1rem;
+                            overflow: hidden;
+                            width: 100%;
+                            margin: 0 auto;
+
+                            tr {
+
+                                th {
+                                    background-color: rgba(white, .05);
+                                    padding-top: 1rem;
+                                    padding-bottom: 1rem;
+                                }
+
+                                &:nth-child(even) {
+                                    background-color: rgba(white, .1);
+                                }
+                                &:nth-child(odd) {
+                                    background-color: rgba(white, .15);
+                                }
+                            }
+
+                            th, td {
+                                padding: .5rem .75rem;
+                                // border: 1px solid white;
+                            }
+                        }
+                    }
+
+
+                    .subText {
+                        font-size: 1.25rem !important;
+                        margin-top: .5rem;
+                        opacity: 0.5;
+                        font-weight: 500;
+                    }
+
+                }
+
                 .sectionTitleText {
                     display: flex;
                     flex-direction: column;
@@ -550,6 +626,7 @@ $textWhite: rgb(231, 231, 231);
                     }
 
 
+
                     &.why, &.who {
 
                         .title {

diff --git a/src/views/HardcodedEventPages/Prajnotsavah/ProjectExpo.jsx b/src/views/HardcodedEventPages/Prajnotsavah/ProjectExpo.jsx
@@ -4,27 +4,27 @@ import { motion } from "framer-motion";
 
 import { BsChevronDoubleDown } from "react-icons/bs";
 import { RiGroupFill, RiErrorWarningLine } from "react-icons/ri";
-import { FaRegClock } from "react-icons/fa";
 import { MdOutlineListAlt } from "react-icons/md";
 import { IoTicket } from "react-icons/io5";
 import { GoPlus } from "react-icons/go";
 import { GoClock } from "react-icons/go";
 import { CiLocationOn } from "react-icons/ci";
-import { FaDiamond, FaRocket } from "react-icons/fa6";
-import { GiAlarmClock } from "react-icons/gi";
+import { FaDiamond, FaRocket, FaRegClock } from "react-icons/fa6";
+import { LuLoader } from "react-icons/lu";
 
 import kluLogo from "@/assets/klu.png";
 import gfgkareLogo from "@/assets/gfgkare_square_logo.jpg";
 import gfgLogo from "@/assets/gfg.png";
 
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Fade, AttentionSeeker, Slide } from "react-awesome-reveal";
 import CountdownTimer from "react-component-countdown-timer";
 import "react-component-countdown-timer/lib/styles.css";
 
 import CLink from "@/components/CLink";
 import Footer from "@/components/Footer";
 import { useAuth } from "@/contexts/AuthContext";
+import axios from "@/scripts/axiosConfig";
 
 const themeDetails = {
     "Healthcare": {
@@ -57,11 +57,22 @@ export default function ProjectExpo() {
 
     const [showThemeDetailsModal, setShowThemeDetailsModal] = useState(false);
     const [selectedTheme, setSelectedTheme] = useState(null);
+    const [liveCountRefreshing, setLiveCountRefreshing] = useState(false);
+    const [liveCount, setLiveCount] = useState(
+        {
+            "AgroTech": 3,
+            "BlockChain": 0,
+            "FinTech": 2,
+            "Fitness and Sports": 1,
+            "Healthcare": 6
+        }
+    );
 
     const whatSection = useRef();
     const themesSection = useRef();
     const registerSection = useRef();
-
+
+
     const handleThemeClick = (theme) => {
         document.body.style.overflow = 'hidden'
         setSelectedTheme(theme);
@@ -74,6 +85,26 @@ export default function ProjectExpo() {
         setShowThemeDetailsModal(false);
     }
 
+    const refreshLiveCount = () => {
+        console.log("Refreshing count...");
+        setLiveCountRefreshing(true);
+        axios.get("/projectexpo_livecount")
+        .then((res) => {
+            console.log(res.data.count);
+            setLiveCount(res.data.count);
+            setLiveCountRefreshing(false);
+        })
+    }
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+           refreshLiveCount();
+        }, 15000);
+        console.log("Set interval for live conut");
+
+        return () => clearInterval(timer);
+    }, [])
+
     return (
         <>
             {
@@ -553,6 +584,54 @@ export default function ProjectExpo() {
                             </Fade>
                         </div>
 
+                        <div className="FourQuestionSection liveCount">
+                            <Fade cascade damping={.1} triggerOnce>
+                                <div className="sectionTitleText">
+                                    <div className="bigText magenta">
+                                        LIVE COUNT
+                                    </div>
+                                    <div className="subText">
+                                        live count of all the registrations.
+                                    </div>
+                                </div>
+
+                                <div className="normalSectionText">
+                                    <div className="tableContainer">
+                                        <button className={`${liveCountRefreshing && 'show'}`}>
+                                            <LuLoader />
+                                            refreshing
+                                        </button>
+                                        <table id="countTable">
+                                            <tr>
+                                                <th>Theme</th>
+                                                <th>Count</th>
+                                            </tr>
+                                            <tr>
+                                                <td>Healthcare</td>
+                                                <td>{liveCount['Healthcare']}</td>
+                                            </tr>
+                                            <tr>
+                                                <td>FinTech</td>
+                                                <td>{liveCount['FinTech']}</td>
+                                            </tr>
+                                            <tr>
+                                                <td>AgroTech</td>
+                                                <td>{liveCount['AgroTech']}</td>
+                                            </tr>
+                                            <tr>
+                                                <td>Fitness and Sports</td>
+                                                <td>{liveCount['Fitness and Sports']}</td>
+                                            </tr>
+                                            <tr>
+                                                <td>Blockchain</td>
+                                                <td>{liveCount['BlockChain']}</td>
+                                            </tr>
+                                        </table>
+                                    </div>
+                                </div>
+                            </Fade>
+                        </div>
+
 
                         <div className="FourQuestionSection" ref={registerSection} style={{ scrollMargin: "100px" }}>
                             <Fade cascade damping={.1} triggerOnce>

diff --git a/src/views/Landing.jsx b/src/views/Landing.jsx
@@ -1,5 +1,5 @@
 import {  useState, useEffect, useRef } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { throttle } from "lodash"
 import { motion, useScroll } from 'framer-motion';
 
@@ -42,7 +42,8 @@ const items = [
 ];
 
 export default function Landing() {
-
+
+    const navigate = useNavigate();
     const { scrollYProgress, scrollY } = useScroll();
 
     // const rightCircleX = useTransform(scrollYProgress, [0, 0.5], ['55%', '-100%']);
@@ -129,7 +130,7 @@ export default function Landing() {
                     </div>
 
                     <div className="rightMenu">
-                        <button className="prajnotsavahButton">Prajnotsavah</button>
+                        <button onClick={() => navigate("/events/prajnotsavah")} className="prajnotsavahButton">Prajnotsavah</button>
                         <button className="menuButton" onClick={() => fullScreenNav.current.classList.toggle("open")} >Menu</button>
                     </div>
                 </nav>