feat: enable/disable nodes

Gozargah · Sep 30, 2023 · 0712061 · 0712061
1 parent c65104b
commit 0712061
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 13 deletions.
diff --git a/app/dashboard/public/locales/en.json b/app/dashboard/public/locales/en.json
@@ -108,13 +108,15 @@
   "nodes.nodeAddress": "Address",
   "nodes.nodePort": "Port",
   "nodes.nodeAPIPort": "API Port",
-  "nodes.editNode": "Edit Node",
+  "nodes.editNode": "Update Node",
   "nodes.reconnect": "Reconnect",
   "nodes.reconnecting": "Reconnecting...",
   "deleteNode.title": "Delete Node",
   "deleteNode.prompt": "Are you sure you want to delete the <b>{{name}}</b> node?",
   "deleteNode.deleteSuccess": "Node {{name}} removed successfully",
   "users": "Users",
+  "active": "active",
+  "disabled": "disabled",
   "activeUsers": "active users",
   "dataUsage": "data usage",
   "memoryUsage": "memory usage",
@@ -149,4 +151,4 @@
   "core.configuration": "Configuration",
   "core.generalErrorMessage": "Something went wrong, please check the configuration",
   "core.successMessage": "Core settings updated successfully"
-}
+}
diff --git a/app/dashboard/public/locales/fa.json b/app/dashboard/public/locales/fa.json
@@ -117,6 +117,8 @@
   "deleteNode.title": "حذف گره",
   "deleteNode.prompt": "از حذف گره <b>{{name}}</b> مطمئن هستید؟",
   "deleteNode.deleteSuccess": "گره {{name}} با موفقیت حذف شد",
+  "active": "فعال",
+  "disabled": "غیر فعال",
   "users": "کاربران",
   "activeUsers": "کاربران فعال",
   "dataUsage": "مصرف داده",
@@ -148,4 +150,4 @@
   "core.configuration": "پیکربندی",
   "core.generalErrorMessage": "مشکلی پیش آمده، لطفا پیکربندی را بررسی کنید",
   "core.successMessage": "تنظیمات هسته با موفقیت ثبت شد"
-}
+}
diff --git a/app/dashboard/src/components/NodesModal.tsx b/app/dashboard/src/components/NodesModal.tsx
@@ -23,6 +23,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  Switch,
   Text,
   Tooltip,
   useToast,
@@ -43,7 +44,7 @@ import {
   useNodesQuery,
 } from "contexts/NodesContext";
 import { FC, ReactNode, useState } from "react";
-import { useForm, UseFormReturn } from "react-hook-form";
+import { Controller, useForm, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { UseMutateFunction, useMutation, useQueryClient } from "react-query";
 import "slick-carousel/slick/slick-theme.css";
@@ -335,18 +336,55 @@ const NodeForm: NodeFormType = ({
   addAsHost = false,
 }) => {
   const { t } = useTranslation();
+
   return (
     <form onSubmit={form.handleSubmit((v) => mutate(v))}>
       <VStack>
-        <FormControl>
-          <CustomInput
-            label={t("nodes.nodeName")}
-            size="sm"
-            placeholder="Marzban-S2"
-            {...form.register("name")}
-            error={form.formState?.errors?.name?.message}
-          />
-        </FormControl>
+        <HStack w="full">
+          <FormControl>
+            <CustomInput
+              label={t("nodes.nodeName")}
+              size="sm"
+              placeholder="Marzban-S2"
+              {...form.register("name")}
+              error={form.formState?.errors?.name?.message}
+            />
+          </FormControl>
+
+          <HStack px={1}>
+            <Controller
+              name="status"
+              control={form.control}
+              render={({ field }) => {
+                return (
+                  <Tooltip
+                    key={field.value}
+                    placement="top"
+                    label={
+                      `${t("usersTable.status")}: ` +
+                      (field.value !== "disabled" ? t("active") : t("disabled"))
+                    }
+                    textTransform="capitalize"
+                  >
+                    <Box mt="6">
+                      <Switch
+                        colorScheme="primary"
+                        isChecked={field.value !== "disabled"}
+                        onChange={(e) => {
+                          if (e.target.checked) {
+                            field.onChange("connecting");
+                          } else {
+                            field.onChange("disabled");
+                          }
+                        }}
+                      />
+                    </Box>
+                  </Tooltip>
+                );
+              }}
+            />
+          </HStack>
+        </HStack>
         <HStack alignItems="flex-start">
           <Box w="50%">
             <CustomInput