Change port start developping

frontend/src/components/AddNewService.tsx

@@ -7,7 +7,9 @@ import { ImCross } from "react-icons/im"
 type ServiceAddForm = {
     name:string,
     port:number,
-    autostart: boolean
+    autostart: boolean,
+    chosenInternalPort: boolean,
+    internalPort: number
 }
 
 function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
@@ -36,9 +38,9 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
     const [submitLoading, setSubmitLoading] = useState(false)
     const [error, setError] = useState<string|null>(null)
  
-    const submitRequest = ({ name, port, autostart }:ServiceAddForm) =>{
+    const submitRequest = ({ name, port, autostart, chosenInternalPort, internalPort }:ServiceAddForm) =>{
         setSubmitLoading(true)
-        addservice({ name, port }).then( res => {
+        addservice(chosenInternalPort?{ internalPort, name, port }:{ name, port }).then( res => {
             if (res.status === "ok"){
                 setSubmitLoading(false)
                 close();

frontend/src/components/ServiceRow/index.tsx

@@ -9,6 +9,7 @@ import { deleteservice, errorNotify, fireUpdateRequest, okNotify, pauseservice,
 import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
 import { TbNumbers } from 'react-icons/tb';
 import { BiRename } from 'react-icons/bi'
+import ChangeInternalPort from './ChangeInternalPort';
 
 //"status":"stop"/"wait"/"active"/"pause",
 function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
@@ -26,6 +27,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
     const [deleteModal, setDeleteModal] = useState(false)
     const [changePortModal, setChangePortModal] = useState(false)
+    const [chooseInternalPortModal, setChooseInternalPortModal] = useState(false)
 
     const stopService = async () => {
         setButtonLoading(true)
@@ -149,7 +151,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
                         <Divider />
                         <Menu.Label><b>Internal proxy port</b></Menu.Label>
                         <Menu.Item icon={<BsArrowRepeat size={18} />} onClick={()=>setChangePortModal(true)}>Regen port</Menu.Item>
-                        <Menu.Item icon={<TbNumbers size={18} />} onClick={()=>{}}>Choose port</Menu.Item>
+                        <Menu.Item icon={<TbNumbers size={18} />} onClick={()=>setChooseInternalPortModal(true)}>Choose port</Menu.Item>
                         <Divider />
                         <Menu.Label><b>Delete service</b></Menu.Label>
                         <Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
@@ -217,6 +219,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
             action={changePort}
             opened={changePortModal}
         />
+        <ChangeInternalPort service={service} onClose={()=> setChooseInternalPortModal(false)} opened={chooseInternalPortModal} />
     </>
 }
 

frontend/src/js/models.ts

@@ -16,7 +16,8 @@ export type Service = {
 
 export type ServiceAddForm = {
     name:string,
-    port:number
+    port:number,
+    internalPort?:number
 }
 
 export type ServerResponse = {
@@ -27,6 +28,11 @@ export type ServerResponseWithID = {
     id:string
 }
 
+export type ChangePort = {
+    port?: number,
+    internalPort?: number
+}
+
 export type ServerResponseToken = {
     status:string,
     access_token?:string

frontend/src/js/utils.tsx

@@ -1,7 +1,7 @@
 import { showNotification } from "@mantine/notifications";
 import { ImCross } from "react-icons/im";
 import { TiTick } from "react-icons/ti"
-import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken, ServerResponseWithID } from "./models";
+import { GeneralStats, Service, ServiceAddForm, ServerResponse, RegexFilter, RegexAddForm, ServerStatusResponse, PasswordSend, ChangePassword, LoginResponse, ServerResponseToken, ServerResponseWithID, ChangePort } from "./models";
 
 var Buffer = require('buffer').Buffer 
 
@@ -128,6 +128,11 @@ export async function regenport(service_id:string){
     return status === "ok"?undefined:status
 }
 
+export async function changeports(service_id:string, data:ChangePort){
+    const { status } = await postapi(`service/${service_id}/change-ports`,data) as ServerResponse;
+    return status === "ok"?undefined:status
+}
+
 export async function addservice(data:ServiceAddForm) {
     return await postapi("services/add",data) as ServerResponseWithID;
 }