Merge pull request #37 from aswanthabam/dev

feat(admin) : participants list and dowwnload participant list

firebase.json

@@ -1,13 +1,26 @@
 {
-  "hosting": {
-    "public": "dist",
-    "site": "vijnana24",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
-    "rewrites": [
-      {
-        "source": "**",
-        "destination": "/index.html"
-      }
-    ]
-  }
+  "hosting": [
+    {
+      "public": "dist",
+      "site": "vijnana24",
+      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    },
+    {
+      "public": "dist",
+      "site": "vijnana",
+      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    }
+  ]
 }

src/App.tsx

@@ -31,6 +31,8 @@ import UserList from "./pages/admin/admin_pages/users_list/UserList";
 import RequestLog from "./pages/admin/admin_pages/request_log/RequestLog";
 import ErrorLog from "./pages/admin/admin_pages/error_log/ErrorLog";
 import AddAdmin from "./pages/admin/admin_pages/add_admin/AddAdmin";
+import AboutVijnana from "./pages/admin/admin_pages/about/AboutVijnana";
+import Participants from "./pages/admin/admin_pages/view_events/participants";
 
 function getTheme() {
   var theme = localStorage.getItem("theme");
@@ -190,12 +192,14 @@ function App() {
         ></Route>
         <Route path="/admin" element={<Admin />}>
           <Route path="" element={<NewEvent />}></Route>
+          <Route path="about/" element={<AboutVijnana />}></Route>
           <Route path="admin/new" element={<AddAdmin />}></Route>
           <Route path="events/" element={<ViewEvent />}></Route>
           <Route path="events/new" element={<NewEvent />}></Route>
           <Route path="users/" element={<UserList />}></Route>
           <Route path="logs/request" element={<RequestLog />}></Route>
           <Route path="logs/error" element={<ErrorLog />}></Route>
+          <Route path="participants/:id/" element={<Participants />}></Route>
         </Route>
         <Route path="*" element={<Error404 />}></Route>
       </Routes>

src/apis/eventApi.tsx

@@ -1,4 +1,4 @@
-import { _EventInfo } from "../utils/types";
+import { _AboutVijnana, _EventInfo } from "../utils/types";
 import {
   ApiResponse,
   ResponseStatus,
@@ -7,6 +7,30 @@ import {
   validateResponse,
 } from "./api";
 
+/*
+
+  getAboutVijnana() function returns the about vijnana from the backend.
+  @param setLoading: (status: boolean) => void
+  @param setToast: (status: boolean, message: string | null, hideAfter: number | null) => void
+  @returns _EventInfo | null
+
+*/
+
+export const getAboutVijnana = async (
+  addLoader: (loader: Promise<any>) => void
+): Promise<_AboutVijnana | null> => {
+  var res = publicRouter.get("/api/v2/events/aboutVijnana");
+  addLoader(res);
+  var val = await validateResponse(res);
+  if (val.status == ResponseStatus.SUCCESS) {
+    if (val.contentType == ResponseType.DATA) {
+      var data = val.data.data as _AboutVijnana;
+      return data;
+    }
+  }
+  return null;
+};
+
 /*
 
   registerEvent() function registers an event to the backend.

src/apis/userApi.tsx

@@ -13,6 +13,22 @@ import {
   validateResponse,
 } from "./api";
 
+export const userDetailsAdmin = async (
+  userId: string,
+  addLoader: (loader: Promise<any>) => void
+): Promise<_UserDetails | null> => {
+  var res = publicRouter.get(`/api/v2/users/user-details/?userId=${userId}`);
+  addLoader(res);
+  var val = await validateResponse(res);
+  if (val.status == ResponseStatus.FAILED) {
+    return null;
+  }
+  if (val.contentType == ResponseType.DATA) {
+    return val.data.data as _UserDetails;
+  }
+  return null;
+};
+
 /* STATUS AND DETAILS ENDPOINT */
 
 export const userDetails = async (

src/components/counter/Counter.tsx

@@ -13,11 +13,14 @@ function calculateTimeDifference(
   const timeDifference = date2.getTime() - date1.getTime();
 
   // Calculate days, hours, and minutes
-  const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
-  const hours = Math.floor(
+  var days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+  var hours = Math.floor(
     (timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
   );
-  const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
+  var minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
+  days = days < 0 ? 0 : days;
+  hours = hours < 0 ? 0 : hours;
+  minutes = minutes < 0 ? 0 : minutes;
 
   return { days, hours, minutes };
 }
@@ -40,7 +43,7 @@ const Counter: React.FC<CounterProps> = ({ date, className }) => {
       d: days,
       h: hours,
       m: minutes,
-      s: 60 - now.getSeconds(),
+      s: days == 0 && hours == 0 && minutes == 0 ? 0 : 60 - now.getSeconds(),
     });
   }, []);
   setTimeout(() => {
@@ -51,7 +54,7 @@ const Counter: React.FC<CounterProps> = ({ date, className }) => {
       d: days,
       h: hours,
       m: minutes,
-      s: 60 - now.getSeconds(),
+      s: days == 0 && hours == 0 && minutes == 0 ? 0 : 60 - now.getSeconds(),
     });
     // console.log(diff);
   }, 1000);

src/main.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
@@ -7,13 +6,13 @@ import LoaderStateProvider from "./components/toploader/useLoader.tsx";
 import ToastStateProvider from "./components/toast/useToast.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <LoaderStateProvider>
-        <ToastStateProvider>
-          <App />
-        </ToastStateProvider>
-      </LoaderStateProvider>
-    </BrowserRouter>
-  </React.StrictMode>
+  // <React.StrictMode>
+  <BrowserRouter>
+    <LoaderStateProvider>
+      <ToastStateProvider>
+        <App />
+      </ToastStateProvider>
+    </LoaderStateProvider>
+  </BrowserRouter>
+  // </React.StrictMode>
 );

src/pages/admin/admin_pages/about/AboutVijnana.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from "react";
+import {
+  _AboutVijnana,
+  _Event,
+  _EventCreateData,
+} from "../../../../utils/types";
+import { getAboutVijnana } from "../../../../apis/eventApi";
+import { useLoader } from "../../../../components/toploader/useLoader";
+
+const AboutVijnana: React.FC = () => {
+  const [formData, setFormData] = useState<_AboutVijnana>({
+    name: "",
+    start: "",
+    end: "",
+    about: "",
+    contact: "",
+    email: "",
+  });
+  const { addLoader } = useLoader();
+  useEffect(() => {
+    getAboutVijnana(addLoader).then((res) => {
+      res && setFormData(res);
+    });
+  }, []);
+  return (
+    <div>
+      <h3 className="underline start" style={{ marginBottom: "30px" }}>
+        About Vijana
+      </h3>
+      <code>{"" + formData}</code>
+      <h1>EDIT NOT IMPLEMENTED</h1>
+      {/* <form onSubmit={handleSubmit} method="post">
+        <div className="mb-3">
+          <label htmlFor="title" className="form-label">
+            Name of event:
+          </label>
+          <input
+            type="text"
+            id="name"
+            className="form-control"
+            value={formData.name}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label htmlFor="title" className="form-label">
+            Start Date:
+          </label>
+          <input
+            id="start"
+            className="form-control"
+            type="datetime-local"
+            value={formData.start}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label htmlFor="title" className="form-label">
+            End Date:
+          </label>
+          <input
+            id="end"
+            className="form-control"
+            type="datetime-local"
+            value={formData.end}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label htmlFor="title" className="form-label">
+            About Event:
+          </label>
+          <textarea
+            id="about"
+            className="form-control"
+            value={formData.about}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label htmlFor="title" className="form-label">
+            Contact :
+          </label>
+          <input
+            id="contact"
+            className="form-control"
+            value={formData.contact}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label htmlFor="title" className="form-label">
+            Email:
+          </label>
+          <textarea
+            id="email"
+            className="form-control"
+            value={formData.email}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <button className="btn btn-primary">Save About</button>
+      </form> */}
+    </div>
+  );
+};
+
+export default AboutVijnana;

src/pages/admin/admin_pages/view_events/ViewEvents.tsx

@@ -3,12 +3,13 @@ import { _Event, _EventCreateData, _EventInfo } from "../../../../utils/types";
 import { useToast } from "../../../../components/toast/useToast";
 import { getEvents } from "../../../../apis/eventApi";
 import { useLoader } from "../../../../components/toploader/useLoader";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 const ViewEvent: React.FC = () => {
   const [events, setEvents] = useState<_EventInfo[]>([]); // [
   const { setToastStatus } = useToast();
   const { addLoader } = useLoader();
+  const redirect = useNavigate();
   useEffect(() => {
     getEvents(null, addLoader, setToastStatus, 10).then((res) => {
       setEvents(res ? res : []);
@@ -25,6 +26,29 @@ const ViewEvent: React.FC = () => {
             <div className="card-body">
               <h5 className="card-title">{event.name}</h5>
               <p className="card-text">{event.description}</p>
+              <div className="btn btn-info m-1">
+                Total Participants : <b>{event.participants.length} </b>
+              </div>
+              <button
+                onClick={() => {
+                  redirect("/admin/participants/" + event.id);
+                }}
+                className="btn btn-primary m-1"
+              >
+                Download Participants List &nbsp;
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  className="bi bi-download"
+                  viewBox="0 0 16 16"
+                >
+                  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+                  <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
+                </svg>
+              </button>
+              <br />
               <Link
                 className="btn btn-primary m-1"
                 to={"/admin/events/edit/" + event.id}

src/pages/admin/admin_pages/view_events/participants.module.css

@@ -0,0 +1,12 @@
+.participantsPage {
+  width: 100%;
+  margin-top: 20px;
+
+  .displayItems {
+    background: red;
+
+    & h3 {
+      font-weight: 900;
+    }
+  }
+}