From f065f12b0de07a79b5afacbfc9ca0ef4f28eb1e6 Mon Sep 17 00:00:00 2001
From: "CTFang@WireLab" <ctfang.cs12@nycu.edu.tw>
Date: Thu, 28 Mar 2024 06:37:44 +0000
Subject: [PATCH] feat: frontend set staticIp UI
---
frontend/src/pages/SubscriberCreate.tsx | 63 +++++++++++++++++++++++++
1 file changed, 63 insertions(+)
diff --git a/frontend/src/pages/SubscriberCreate.tsx b/frontend/src/pages/SubscriberCreate.tsx
index 4a6a918..01dcd64 100644
--- a/frontend/src/pages/SubscriberCreate.tsx
+++ b/frontend/src/pages/SubscriberCreate.tsx
@@ -9,6 +9,7 @@ import {
DnnConfiguration,
AccessAndMobilitySubscriptionData,
QosFlows,
+ IpAddress,
} from "../api/api";
import Dashboard from "../Dashboard";
@@ -28,7 +29,10 @@ import {
TableCell,
TableRow,
TextField,
+ FormControlLabel,
+ Switch,
} from "@mui/material";
+import { RawOff } from "@mui/icons-material";
let isNewSubscriber = false;
@@ -117,6 +121,7 @@ export default function SubscriberCreate() {
uplink: "1000 Mbps",
downlink: "1000 Mbps",
},
+ staticIpAddress: [],
},
},
},
@@ -148,6 +153,7 @@ export default function SubscriberCreate() {
uplink: "1000 Mbps",
downlink: "1000 Mbps",
},
+ staticIpAddress: [],
},
},
},
@@ -997,6 +1003,17 @@ export default function SubscriberCreate() {
setData({ ...data });
};
+ const handleChangeStaticIp = (
+ event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+ index: number,
+ dnn: string,
+ ): void => {
+ data.SessionManagementSubscriptionData![index].dnnConfigurations![dnn][
+ "staticIpAddress"
+ ]![0].ipv4Addr = event.target.value;
+ setData({ ...data });
+ };
+
const handleChangeFilter = (
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
dnn: string,
@@ -1854,6 +1871,52 @@ export default function SubscriberCreate() {
</TableRow>
</TableBody>
</Table>
+ <Table>
+ <TableBody>
+ <TableRow>
+ <TableCell style={{ width: "33%" }}>
+ <FormControlLabel
+ style={{ justifyItems: "end" }}
+ control=<Switch
+ checked={
+ row.dnnConfigurations![dnn]["staticIpAddress"]?.length != 0
+ }
+ onChange={(event) => {
+ if (event.target.checked) {
+ var ipaddr: IpAddress = { ipv4Addr: "10.60.0.1" };
+ data.SessionManagementSubscriptionData![
+ index
+ ].dnnConfigurations![dnn]["staticIpAddress"] = [ipaddr];
+ } else {
+ data.SessionManagementSubscriptionData![
+ index
+ ].dnnConfigurations![dnn]["staticIpAddress"] = [];
+ }
+ setData({ ...data });
+ }}
+ />
+ label="Static IPv4 Address"
+ />
+ </TableCell>
+ <TableCell style={{ width: "66%" }}>
+ <TextField
+ label="StaticIpv4"
+ variant="outlined"
+ fullWidth
+ disabled={
+ row.dnnConfigurations![dnn]["staticIpAddress"]?.length == 0
+ }
+ value={
+ row.dnnConfigurations![dnn]["staticIpAddress"]?.length != 0
+ ? row.dnnConfigurations![dnn]["staticIpAddress"]![0].ipv4Addr!
+ : ""
+ }
+ onChange={(ev) => handleChangeStaticIp(ev, index, dnn)}
+ />
+ </TableCell>
+ </TableRow>
+ </TableBody>
+ </Table>
{chargingConfig(dnn, row.singleNssai!, undefined)}
--
GitLab