- Fix the suburl prefix via extending existing HttpAdorment

- Add the rest of content panel UI layouts
- Update the card value with onChange

Client/src/Components/Inputs/TextInput/Adornments/index.jsx

@@ -6,7 +6,7 @@ import Visibility from "@mui/icons-material/Visibility";
 import Docs from "../../../../assets/icons/docs.svg?react";
 import DeleteIcon from "../../../../assets/icons/trash-bin.svg?react";
 
-export const HttpAdornment = ({ https }) => {
+export const HttpAdornment = ({ https, prefix }) => {
 	const theme = useTheme();
 	return (
 		<Stack
@@ -25,7 +25,7 @@ export const HttpAdornment = ({ https }) => {
 				color={theme.palette.text.secondary}
 				sx={{ lineHeight: 1, opacity: 0.8 }}
 			>
-				{https ? "https" : "http"}://
+				{prefix !== undefined ? prefix : https ? "https://" : "http://"}
 			</Typography>
 		</Stack>
 	);
@@ -33,6 +33,7 @@ export const HttpAdornment = ({ https }) => {
 
 HttpAdornment.propTypes = {
 	https: PropTypes.bool.isRequired,
+	prefix: PropTypes.string,
 };
 
 export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
@@ -69,12 +70,11 @@ PasswordEndAdornment.propTypes = {
 export const ServerStartAdornment = () => {
 	return (
 		<InputAdornment position="start">
-			<Docs/>
+			<Docs />
 		</InputAdornment>
 	);
 };
 
-
 export const ServerEndAdornment = ({ id, removeItem }) => {
 	const theme = useTheme();
 	return (
@@ -95,7 +95,7 @@ export const ServerEndAdornment = ({ id, removeItem }) => {
 					},
 				}}
 			>
-				<DeleteIcon/>
+				<DeleteIcon />
 			</IconButton>
 		</InputAdornment>
 	);

Client/src/Components/TabPanels/Status/Card/Server/index.jsx

@@ -2,7 +2,7 @@ import TextInput from "../../../../Inputs/TextInput";
 import { ServerStartAdornment, ServerEndAdornment } from "../../../../Inputs/TextInput/Adornments";
 
 
-const Server = ({ id, removeItem, value }) => {
+const Server = ({ id, removeItem, value, onChange }) => {
 	return (
 		<TextInput
 			type="text"
@@ -15,6 +15,7 @@ const Server = ({ id, removeItem, value }) => {
 			}
 			id={id}
 			value= {value}
+			onChange ={ onChange }
 		></TextInput>
 	);
 };

Client/src/Components/TabPanels/Status/Card/index.jsx

@@ -14,13 +14,14 @@ const CustomCard = React.forwardRef((props, ref) => (
 					id={props.id}
 					removeItem={props.removeCard}
 					value={props.value}
+          onChange={props.onChange}
 				/>
 			</CardContent>
 		</CardActionArea>
 	</Card>
 ));
 
-const MyCard = ({ id, index, moveCard, removeCard, value }) => {
+const MyCard = ({ id, index, moveCard, removeCard, value, onChange }) => {
   const ref = useRef(null);
   const [, drop] = useDrop({
     accept: ItemTypes.CARD,
@@ -81,6 +82,7 @@ const MyCard = ({ id, index, moveCard, removeCard, value }) => {
 			id={id}
 			removeCard={removeCard}
 			value={value}
+      onChange={onChange}
 		/>		
 	);
 };

Client/src/Components/TabPanels/Status/ContentPanel.jsx

@@ -8,6 +8,7 @@ import { buildErrors } from "../../../Validation/error";
 import { hasValidationErrors } from "../../../Validation/error";
 import Card from "./Card";
 import update from "immutability-helper";
+import Checkbox from "../../Inputs/Checkbox";
 
 const ContentPanel = () => {
 	const theme = useTheme();
@@ -15,6 +16,9 @@ const ContentPanel = () => {
 	// Local state for form data, errors, and file handling
 	const [localData, setLocalData] = useState({
 		monitors: [],
+		showUptimePercentage: false,
+		showBarcode: false
+
 	});
 
 	const [cards, setCards] = useState(localData.monitors);
@@ -52,6 +56,17 @@ const ContentPanel = () => {
 		}));
 	};
 
+	const handleCardChange = (event) => {
+		event.preventDefault();
+		const { value, id } = event.target;
+		let idx = cards.findIndex((a) => a.id == id);
+		if (idx >= 0) {
+			let x = JSON.parse(JSON.stringify(cards[idx]));
+			x.url = value;
+			setCards(update(cards, { $splice: [[idx, 1, x]] }));
+		} else setCards(update(cards, { $push: [{ id: id, url: value }] }));
+	}
+
 	const handleSubmit = () => {
 		if (hasValidationErrors(localData, publicPageGeneralSettingsValidation, setErrors)) {
 			return;
@@ -154,7 +169,8 @@ const ContentPanel = () => {
 											text={"" + idx}
 											moveCard={moveCard}
 											removeCard={removeCard}
-											value={card?.url ?? card?.id}
+											value={card?.url}
+											onChange = {handleCardChange}
 										/>
 									))}
 								</Stack>
@@ -162,6 +178,33 @@ const ContentPanel = () => {
 						</Box>
 					</Box>
 				</ConfigBox>
+				<ConfigBox>
+					<Box>
+						<Stack gap={theme.spacing(6)}>
+							<Typography component="h2">Features</Typography>
+							<Typography component="p">Show more details on the status page</Typography>
+						</Stack>
+					</Box>
+					<Stack						
+					>
+						<Checkbox
+							id="show-barcode"
+							label={`Show Barcode`}
+							isChecked={localData.showBarcode}
+							value={"localData.showBarcode"}
+							onChange={handleChange}
+							onBlur={handleBlur}
+						/>
+						<Checkbox
+							id="show-uptime-percentage"
+							label={`Show Uptime Percentage`}
+							isChecked={localData.showUptimePercentage}
+							value={"localData.showUptimePercentage"}
+							onChange={handleChange}
+							onBlur={handleBlur}
+						/>						
+					</Stack>
+				</ConfigBox>
 
 				<Stack
 					direction="row"

Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx

@@ -194,8 +194,7 @@ const GeneralSettingsPanel = () => {
 							type="url"
 							label="SubURL"
 							value={localData.url}
-							startAdornment={<HttpAdornment https={true} />}
-							//prefix={"http://uptimegenie.com/"}
+							startAdornment={<HttpAdornment prefix = {"http://uptimegenie.com/"} https={false} />}
 							onChange={handleChange}
 							onBlur={handleBlur}
 							helperText={errors["url"]}