Added autorun and random id service generation

frontend/src/components/AddNewService.tsx

@@ -1,16 +1,22 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification, Modal } from '@mantine/core';
+import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
-import { ServiceAddForm } from '../js/models';
-import { addservice, fireUpdateRequest, okNotify } from '../js/utils';
+import { addservice, fireUpdateRequest, okNotify, startservice } from '../js/utils';
 import { ImCross } from "react-icons/im"
 
+type ServiceAddForm = {
+    name:string,
+    port:number,
+    autostart: boolean
+}
+
 function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
 
     const form = useForm({
         initialValues: {
             name:"",
             port:1,
+            autostart: true
         },
         validationRules:{
             name: (value) => value !== ""?true:false,
@@ -26,18 +32,19 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
 
     const [submitLoading, setSubmitLoading] = useState(false)
     const [error, setError] = useState<string|null>(null)
-
-    const submitRequest = (values:ServiceAddForm) =>{
+ 
+    const submitRequest = ({ name, port, autostart }:ServiceAddForm) =>{
         setSubmitLoading(true)
-        addservice(values).then( res => {
-            if (!res){
+        addservice({ name, port }).then( res => {
+            if (res.status === "ok"){
                 setSubmitLoading(false)
                 close();
                 fireUpdateRequest();
-                okNotify(`Service ${values.name} has been added`, `Successfully added ${values.name} with port ${values.port}`)
+                if (autostart) startservice(res.id)
+                okNotify(`Service ${name} has been added`, `Successfully added ${res.id} with port ${port}`)
             }else{
                 setSubmitLoading(false)
-                setError("Invalid request! [ "+res+" ]")
+                setError("Invalid request! [ "+res.status+" ]")
             }
         }).catch( err => {
             setSubmitLoading(false)
@@ -63,9 +70,13 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
                 {...form.getInputProps('port')}
             />
 
-
             <Space h="md" />
 
+            <Switch
+                label="Auto-Start Service"
+                {...form.getInputProps('autostart', { type: 'checkbox' })}
+            />
+
             <Group position="right" mt="md">
                 <Button loading={submitLoading} type="submit">Add Service</Button>
             </Group>