fun with forms

CERIT-SC · Dec 20, 2024 · 59a2755 · 59a2755
1 parent b6f4068
commit 59a2755
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 44 deletions.
diff --git a/src/HomePage.jsx b/src/HomePage.jsx
@@ -10,35 +10,35 @@ import { FieldHeader } from "./components/FieldHeader/FieldHeader";
 
 function HomePage() {
   // for testing with npm run dev please uncomment this block
-  // const appConfig = {
-  //   spawners: {
-  //     "test": {
-  //       last_activity: "2024-11-24T15:48:29.604740Z",
-  //       url: "/user/test",
-  //       active: true,
-  //       ready: false,
-  //     },
-  //     "test1": {
-  //       last_activity: "2024-11-24T15:46:56.719146Z",
-  //       url: "/user/test1",
-  //       active: false,
-  //       ready: false,
-  //     },
-  //     ...Array.from({ length: 50 }, (_, i) => `spawner${i + 1}`).reduce((acc, spawner) => {
-  //       acc[spawner] = {
-  //         last_activity: new Date().toISOString(),
-  //         url: `/user/${spawner}`,
-  //         active: Math.random() < 0.5, // Randomly set active status
-  //         ready: Math.random() < 0.5, // Randomly set ready status
-  //       };
-  //       return acc;
-  //     }, {})
-  //   },
-  //   default_server_active: false,
-  //   url: "http://localhost",
-  //   userName: "dev",
-  //   xsrf: "sample-xsrf-token",
-  // };
+  const appConfig = {
+    spawners: {
+      "test": {
+        last_activity: "2024-11-24T15:48:29.604740Z",
+        url: "/user/test",
+        active: true,
+        ready: false,
+      },
+      "test1": {
+        last_activity: "2024-11-24T15:46:56.719146Z",
+        url: "/user/test1",
+        active: false,
+        ready: false,
+      },
+      ...Array.from({ length: 50 }, (_, i) => `spawner${i + 1}`).reduce((acc, spawner) => {
+        acc[spawner] = {
+          last_activity: new Date().toISOString(),
+          url: `/user/${spawner}`,
+          active: Math.random() < 0.5, // Randomly set active status
+          ready: Math.random() < 0.5, // Randomly set ready status
+        };
+        return acc;
+      }, {})
+    },
+    default_server_active: false,
+    url: "http://localhost",
+    userName: "dev",
+    xsrf: "sample-xsrf-token",
+  };
 
   const [spawners, setSpawners] = useState(appConfig.spawners);
   const [defaultServerActive, setDefaultServerActive] = useState(
@@ -148,9 +148,13 @@ function HomePage() {
             <Button title="Add New Server" onClickFun={handleAddServer} />
           </div>
           {Object.entries(spawners).map(([name, spawner], dropdownIndex) => (
-            <FieldHeader
+            <DropDownButton
               title={name}
-              isActive={isActiveIndex(dropdownIndex)}
+              isActive={spawner.active}
+              activeText={spawner.active
+                  ? "Running"
+                  : "Stopped"}
+              // infoText={"cvb"}
               hasIcon={true}
               onActivate={() => setActiveDropdownIndex(dropdownIndex)}
             >
@@ -185,7 +189,7 @@ function HomePage() {
                   )}
                 </div>
               </div>
-            </FieldHeader>
+            </DropDownButton>
           ))}
         </div>
         <EinfraFooter />

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
@@ -9,7 +9,7 @@
 .btn--primary {
   background-color: var(--primary-color);
   color: white;
-  padding: 1rem;
+  padding: 0.6rem;
   border: none;
   cursor: pointer;
   text-align: center;
@@ -36,7 +36,7 @@
 .btn--secondary {
   background-color: rgb(117, 5, 5);
   color: white;
-  padding: 1rem;
+  padding: 0.6rem;
   border: none;
   cursor: pointer;
   text-align: center;

diff --git a/src/components/DropDownButton/DropDownButton.css b/src/components/DropDownButton/DropDownButton.css
@@ -1,8 +1,30 @@
 .dropdown {
   position: relative;
   display: flex;
-  width: 100%;
   flex-direction: column;
+  width: 100%;
+  padding: 0.6rem;
+}
+
+.activeText {
+  /*margin-left: auto;*/
+  grid-area: text;
+  /*margin: 0;*/
+  font-size: 16px;
+}
+
+ .title {
+  grid-area: title;
+  /*margin: 0;*/
+  /* margin-left: auto;*/
+  /* justify-self: left;*/
+  font-size: 16px;
+}
+
+ .icon {
+  grid-area: icon;
+  /*margin: 0;*/
+  font-size: 16px;
 }
 
 .dropbtn--primary {
@@ -17,8 +39,12 @@
 
   margin-bottom: 4px;
 
-  display: flex;
   justify-content: space-between;
+
+  display: grid;
+  grid-template-areas: "title . text . icon";
+  grid-template-columns: auto 25fr auto 1fr auto;
+
 }
 
 .dropbtn--primary.selected {

diff --git a/src/components/DropDownButton/DropDownButton.tsx b/src/components/DropDownButton/DropDownButton.tsx
@@ -16,6 +16,7 @@ interface DropDownButtonProps {
   hasIcon: boolean;
   isSelected: boolean;
   onActivate: () => void;
+  activeText?: string;
 }
 
 export const DropDownButton: React.FC<DropDownButtonProps> = ({
@@ -24,8 +25,10 @@ export const DropDownButton: React.FC<DropDownButtonProps> = ({
   children,
   primary = true,
   isActive = false,
+  activeText = "",
   hasIcon = false,
   isSelected = false,
+
   onActivate = () => {},
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -47,10 +50,12 @@ export const DropDownButton: React.FC<DropDownButtonProps> = ({
         className={`dropbtn--${primary ? "primary" : "secondary"} ${isOpen ? "active" : ""} ${isSelected ? "selected" : ""}`}
         onClick={toggleDropdown}
       >
-        {title}
-        {infoText && <InfoBox infoText={infoText} />}
-        {hasIcon && !isOpen && <FontAwesomeIcon icon={faChevronCircleDown} />}
-        {hasIcon && isOpen && <FontAwesomeIcon icon={faChevronCircleUp} />}
+        <div className="title">{title}</div>
+        <div className="activeText">{activeText}</div>
+        {/*<div className="activeText"><p>{activeText}</p></div>*/}
+        {infoText && <InfoBox className="icon" infoText={infoText} />}
+        {hasIcon && !isOpen && <FontAwesomeIcon className="icon" icon={faChevronCircleDown} />}
+        {hasIcon && isOpen && <FontAwesomeIcon className="icon" icon={faChevronCircleUp} />}
       </button>
       {isOpen && <div className="dropdown-content">{children}</div>}
     </div>

diff --git a/src/components/FieldHeader/FieldHeader.css b/src/components/FieldHeader/FieldHeader.css
@@ -1,14 +1,20 @@
 .field-header {
   background-color: var(--primary-color);
   color: white;
-  padding: 1rem;
+  padding: 0.6rem;
   font-size: 16px;
   border: none;
   text-align: left;
   border-radius: 0.5rem;
   margin-bottom: 0.25rem;
   display: flex;
   justify-content: space-between;
+  align-items: center; /* Ensures vertical alignment */
+}
+
+.field-header .activeText {
+  font-size: 18px;
+  margin-left: auto;
 }
 
 .field-children {

diff --git a/src/components/FieldHeader/FieldHeader.tsx b/src/components/FieldHeader/FieldHeader.tsx
@@ -5,21 +5,26 @@ import { InfoBox } from "../InfoBox/InfoBox";
 interface FieldHeaderProps {
   infoText?: string;
   title: string;
+  activeText?: string;
   children: React.ReactNode;
 }
 
 export const FieldHeader: React.FC<FieldHeaderProps> = ({
   title = "",
   infoText = "",
+  activeText= "",
   children,
 }) => {
   const info = <InfoBox infoText={infoText}></InfoBox>;
 
   return (
     <div>
       <div className="field-header">
-        {title}
-        {infoText !== "" && info}
+      <div className="title"><p>{title}</p></div>
+      <div className="activeText"><p>{activeText}</p></div>
+      <div className="infoText"><p>{infoText !== "" && info}</p></div>
+
+          {/*{activeText}*/}
       </div>
       <div className="field-children">{children}</div>
     </div>

diff --git a/src/components/Form/ProgressiveForm.css b/src/components/Form/ProgressiveForm.css
@@ -1,7 +1,7 @@
 .form-wrap {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 0rem;
 }
 
 .btns_wrap {