Change bakside 2025

docker-compose.yml

@@ -2,7 +2,7 @@ version: "3"
 
 services:
   postgres:
-    image: postgres
+    image: postgres:17
     environment:
       - POSTGRES_DB=postgres
       - POSTGRES_USER=postgres

frontend/src/pages/baksida/index.tsx

@@ -12,45 +12,38 @@ import {
   ListItemText,
   Typography,
 } from "@mui/material";
-import { amber, green, red } from "@mui/material/colors";
+import { amber, red } from "@mui/material/colors";
 import Head from "next/head";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 
 import { ContactInfo } from "@/components/pages/baksida/ContactInfo";
 import { Layout, RootStyle } from "@/layouts/Layout";
 import { NextPageWithLayout } from "@/lib/next";
-import Amund from "~/public/img/Amund Norland.jpg";
-import Hilvi from "~/public/img/Hilvi Fjose.jpg";
+import Martin from "~/public/img/Martin Bore.jpg";
 import Solveig from "~/public/img/Solveig Lund Christiansen.jpg";
 
 const ReportsPage: NextPageWithLayout = () => {
   const formRef = useRef<null | HTMLDivElement>(null);
   const scrollToForm = () => formRef.current?.scrollIntoView({ behavior: "smooth" });
 
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+
   const responsibles = [
     {
       id: 1,
-      name: "Solveig Lund Christiansen",
+      name: "Solveig L. Christiansen",
       initials: "SLC",
       color: red[800],
       image: Solveig,
       email: "solveilc@stud.ntnu.no",
     },
     {
       id: 2,
-      name: "Hilvi Fjose ",
-      initials: "HF",
+      name: "Martin Bore",
+      initials: "MB",
       color: amber[500],
-      image: Hilvi,
-      email: "hilvif@stud.ntnu.no",
-    },
-    {
-      id: 3,
-      name: "Amund Norland",
-      initials: "AN",
-      color: green[500],
-      image: Amund,
-      email: "amundno@stud.ntnu.no",
+      image: Martin,
+      email: "martbore@stud.ntnu.no",
     },
   ];
 
@@ -314,16 +307,32 @@ const ReportsPage: NextPageWithLayout = () => {
               </Card>
             </Grid>
 
-            <Grid style={{ width: "100%" }} item ref={formRef}>
+            <Grid style={{ width: "100%" }} item ref={formRef} sx={{ position: "relative" }}>
+              {!iframeLoaded && (
+                <Grid
+                  sx={{
+                    position: "absolute",
+                    inset: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    bgcolor: "background.paper",
+                    zIndex: 1,
+                  }}
+                >
+                  <CircularProgress />
+                </Grid>
+              )}
+
               <iframe
                 title="Reports"
                 src="https://docs.google.com/forms/d/e/1FAIpQLSdXFXYU7O1_qcDbX3PONucYLDv3K6KrUIEQ6rtfcRiiR3DEzg/viewform?embedded=true"
                 width="100%"
                 height="2003px"
                 frameBorder="0"
-              >
-                <CircularProgress />
-              </iframe>
+                onLoad={() => setIframeLoaded(true)}
+                style={{ display: "block" }}
+              />
             </Grid>
           </Grid>
         </Grid>