Merge branch 'main' of https://github.com/appKom/online-opptak into p…

…eriod-card-loading

.env.local.template

@@ -11,4 +11,4 @@ AUTH0_CLIENT_SECRET=#client secret
 AUTH0_ISSUER=#issuer base url, example: example.us.auth0.com
 
 AWS_SECRET_ACCESS_KEY=#aws secret access key
-AWS_ACCESS_KEY_ID=#aws access key id
+AWS_ACCESS_KEY_ID=#aws access key id

algorithm/README.md

@@ -9,11 +9,10 @@ cd algorithm
 python -m venv ".venv"
 ```
 
-Lag så en fil i `.\.venv\Lib\site-packages` som slutter på `.pth` og inneholder den absolutte filstien til `mip_matching`-mappen.
-
 ```
 .\.venv\Scripts\activate
-python -m pip install -r requirements.txt
+pip install -e .
+pip install -r requirements.txt
 ```
 
 ## TODOs

algorithm/bridge/.env.template

@@ -0,0 +1,2 @@
+MONGODB_URI=#url to mongodb database
+DB_NAME=#name of db

algorithm/bridge/fetch_applicants_and_committees.py

@@ -0,0 +1,76 @@
+from pymongo import MongoClient
+from dotenv import load_dotenv
+from datetime import datetime, timezone
+import os
+import certifi
+
+def main():
+    periods = fetch_periods()
+
+    #Sjekker om perioden er etter søknadstiden og før intervjuslutt og hasSentInterviewtimes er false, og returnerer søkere og komitétider dersom det er tilfelle
+    for period in periods:
+        periodId = str(period["_id"])
+        interview_end = datetime.fromisoformat(period["interviewPeriod"]["end"].replace("Z", "+00:00"))
+        application_end = datetime.fromisoformat(period["applicationPeriod"]["end"].replace("Z", "+00:00"))
+
+
+        now = datetime.now(timezone.utc)
+
+        if  application_end > now and period["hasSentInterviewTimes"] == False and interview_end < now:
+            applicants = fetch_applicants(periodId)
+            committee_times = fetch_committee_times(periodId)
+            print(applicants)
+            print(committee_times)
+
+            return applicants, committee_times
+
+
+def connect_to_db(collection_name):
+    load_dotenv()
+
+    mongo_uri = os.getenv("MONGODB_URI")
+    db_name = os.getenv("DB_NAME")
+
+    client = MongoClient(mongo_uri, tlsCAFile=certifi.where())
+
+    db = client[db_name] # type: ignore
+
+    collection = db[collection_name]
+
+    return collection, client
+
+def fetch_periods():
+    collection, client = connect_to_db("period")
+
+    periods = collection.find()
+
+    periods = list(periods)
+
+    client.close()
+
+    return periods
+
+def fetch_applicants(periodId):
+    collection, client = connect_to_db("applicant")
+
+    applicants = collection.find({"periodId": periodId})
+
+    applicants = list(applicants)
+
+    client.close()
+
+    return applicants
+
+def fetch_committee_times(periodId):
+    collection, client = connect_to_db("committee")
+
+    committee_times = collection.find({"periodId": periodId})
+
+    committee_times = list(committee_times)
+
+    client.close()
+
+    return committee_times
+
+if __name__ == "__main__":
+    main()

algorithm/src/mip_matching/Applicant.py

@@ -3,8 +3,8 @@
 from typing import TYPE_CHECKING
 if TYPE_CHECKING:
     # Unngår cyclic import
-    from Committee import Committee
-    from TimeInterval import TimeInterval
+    from mip_matching.Committee import Committee
+    from mip_matching.TimeInterval import TimeInterval
 
 import itertools
 

components/CommitteeAboutCard.tsx

@@ -0,0 +1,39 @@
+import { owCommitteeType } from "../lib/types/types";
+
+interface CommitteeAboutCardProps {
+  committee: owCommitteeType;
+  hasPeriod: boolean;
+}
+
+const CommitteeAboutCard = ({
+  committee,
+  hasPeriod,
+}: CommitteeAboutCardProps) => {
+  const { image, name_long, name_short, email, application_description } =
+    committee;
+
+  return (
+    <div>
+      <img
+        src={image?.xs || "/Online_svart_o.svg"}
+        alt={name_long}
+        className="w-16 h-16 p-1 mb-2 bg-white rounded-full"
+      />
+
+      <div className="flex items-center gap-2">
+        <h3 className="text-xl font-bold dark:text-white">
+          {name_long} {name_long !== name_short && `(${name_short})`}
+        </h3>
+        {hasPeriod && (
+          <span className="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">Har opptak!</span>
+        )}
+            </div>
+      <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">{email}</p>
+      <p className="text-gray-500 whitespace-pre-wrap dark:text-gray-400">
+        {application_description || "Ingen opptaksbeskrivelse"}
+      </p>
+    </div>
+  );
+};
+
+export default CommitteeAboutCard;

components/DropdownMenu.tsx

@@ -1,72 +1,52 @@
+import React from 'react';
 import ThemeToggle from "./ThemeToggle";
+import Link from 'next/link';
+
+interface User {
+  name: string;
+  role?: string;
+  isCommittee?: boolean;
+}
+
+interface Session {
+  user?: User;
+}
 
 type Props = {
-  session: any;
+  session: Session | null;
   handleLogin: () => void;
   handleLogout: () => void;
-  router: any;
   toggleDropdown: () => void;
 };
 
-const DropdownMenu = (props: Props) => {
+const DropdownMenu = ({ session, handleLogin, handleLogout, toggleDropdown }: Props) => {
+  const RenderLink = ({ path, label }: { path: string; label: string }) => (
+    <Link href={path} passHref>
+      <a onClick={toggleDropdown} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
+        {label}
+      </a>
+    </Link>
+  );
+
   return (
     <div className="absolute right-0 z-10 w-48 py-2 mt-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg shadow-xl cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-white">
-      {!props.session ? (
-        <div>
+      {!session?.user ? (
+        <>
           <ThemeToggle />
-          <a
-            onClick={props.handleLogin}
-            className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
-          >
+          <a onClick={handleLogin} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
             Logg inn
           </a>
-        </div>
+        </>
       ) : (
         <>
           <div className="px-4 py-2 cursor-default">
-            Logget inn som{" "}
-            <span className="font-medium">{props.session.user?.name}</span>
+            Logget inn som <span className="font-medium">{session?.user.name}</span>
           </div>
-          <a
-            onClick={() => {
-              props.router.push("/");
-              props.toggleDropdown();
-            }}
-            className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
-          >
-            Hjem
-          </a>
-          {props.session.user?.role === "admin" && (
-            <a
-              onClick={() => {
-                props.router.push("/admin");
-                props.toggleDropdown();
-              }}
-              className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
-            >
-              Admin
-            </a>
-          )}
-
-          {props.session.user?.isCommitee && (
-            <a
-              onClick={() => {
-                props.router.push("/committee");
-                props.toggleDropdown();
-              }}
-              className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
-            >
-              For komiteer
-            </a>
-          )}
+          <RenderLink path="/" label="Hjem" />
+          {session?.user.role === "admin" && <RenderLink path="/admin" label="Admin" />}
+          {session?.user.isCommittee && <RenderLink path="/committee" label="For komiteer" />}
           <ThemeToggle />
-          <a
-            onClick={() => {
-              props.handleLogout();
-              props.toggleDropdown();
-            }}
-            className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
-          >
+          <a onClick={() => { handleLogout(); toggleDropdown(); }} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
             Logg ut
           </a>
         </>

components/ErrorPage.tsx

@@ -0,0 +1,23 @@
+import Image from "next/image";
+import { useTheme } from "../lib/hooks/useTheme";
+
+const ErrorPage = () => {
+  const theme = useTheme();
+
+  const onlineLogoSrc =
+    theme === "dark" ? "/Online_hvit.svg" : "/Online_bla.svg";
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-10 bg-white dark:bg-gray-900">
+      <Image
+        src={onlineLogoSrc}
+        width={300}
+        height={100}
+        alt="Online logo"
+      />
+      <div className="text-xl text-black dark:text-white">Det har skjedd en feil :(</div>
+    </div>
+  );
+};
+
+export default ErrorPage;

components/ImportantNote.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+const ImportantNote = ({
+  prefix,
+  text,
+  isLoading,
+}: {
+  prefix: string;
+  text: string | React.ReactNode;
+  isLoading?: boolean;
+}) => {
+  return (
+    <div className="flex items-center max-w-full p-4 mx-5 mb-5 text-sm text-yellow-500 rounded-md dark:text-online-orange bg-yellow-50 dark:bg-gray-800">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        className="flex-shrink-0 w-5 h-5 mr-3"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+          clipRule="evenodd"
+        />
+      </svg>
+      {isLoading ? (
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48"></div>
+      ) : (
+        <div>
+          <b className="mr-2">{prefix}</b>
+          {text}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImportantNote;

components/Navbar.tsx

@@ -36,14 +36,12 @@ const Navbar = () => {
     <div>
       <div className="hidden md:flex justify-between w-full px-5 py-5 sm:items-center border-b-[1px] border-gray-200 dark:border-0 dark:bg-gray-800">
         <Link href="/" passHref>
-          <a
-            className={isLinkActive("/") ? "active" : ""}
-            aria-label="Online logo"
-          >
+          <a aria-label="Online logo">
             <Image
               src={onlineLogoSrc}
               width={100 * 1.5}
               height={30 * 1.5}
+              priority
               alt="Online logo"
               className="transition-all cursor-pointer hover:opacity-60"
             />
@@ -63,7 +61,7 @@ const Navbar = () => {
                   color="orange"
                   size="small"
                   icon={<AdminIcon className="w-4 h-4" />}
-                  onClick={() => router.push("/admin")}
+                  href="/admin"
                 />
               )}
               {session.user?.isCommitee && (
@@ -72,7 +70,7 @@ const Navbar = () => {
                   color="blue"
                   size="small"
                   icon={<UserGroupIcon className="w-5 h-5" />}
-                  onClick={() => router.push("/committee")}
+                  href="/committee"
                 />
               )}
               <Button
@@ -95,14 +93,17 @@ const Navbar = () => {
             </>
           )}
           <ThemeToggle />
-          <Image
-            src={bekkLogoSrc}
-            width={100}
-            height={30 * 1.5}
-            alt="Bekk logo"
-            className="transition-all cursor-pointer hover:opacity-60"
-            onClick={() => router.push("https://www.bekk.no/")}
-          />
+          <Link href="https://www.bekk.no/">
+            <a>
+              <Image
+                src={bekkLogoSrc}
+                width={100}
+                height={30 * 1.5}
+                alt="Bekk logo"
+                className="transition-all cursor-pointer hover:opacity-60"
+              />
+            </a>
+          </Link>
         </div>
       </div>
       <div className="relative md:hidden flex justify-between items-center px-5 py-5 border-b-[1px] border-gray-200 dark:border-gray-600">
@@ -140,7 +141,6 @@ const Navbar = () => {
               session={session}
               handleLogin={handleLogin}
               handleLogout={handleLogout}
-              router={router}
               toggleDropdown={toggleDropdown}
             />
           )}