Fetch Items, Toast

backend/internal/service/exec.go

@@ -1,7 +1,7 @@
 package service
 
 import (
-	"log"
+	// "log"
 	"os/exec"
 	"strings"
 
@@ -25,7 +25,7 @@ func Exec(item models.Item, typesMap map[string]map[string]string) (bool, string
 				str = ssh + " " + str
 			}
 
-			log.Println("EXEC:", str)
+			// log.Println("EXEC:", str)
 			cmd := exec.Command("sh", "-c", str)
 
 			out, err := cmd.CombinedOutput()

backend/internal/web/api.go

@@ -76,7 +76,7 @@ func apiSaveItem(c *gin.Context) {
 		items = append(items, newItem)
 	} else {
 		for _, item := range yaml.Read(appConfig.ItemPath) {
-			if item == oldItem {
+			if item.Name == oldItem.Name && item.Type == oldItem.Type {
 				if newItem.Name != "" {
 					items = append(items, newItem)
 				}

frontend/package.json

@@ -14,7 +14,8 @@
     "mobx": "^6.13.5",
     "mobx-react-lite": "^4.1.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.5.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

frontend/src/App.tsx

@@ -3,25 +3,12 @@ import './App.css'
 import Body from './components/Body'
 import Header from './components/Header'
 import { useEffect } from "react";
-import { updAllItems } from "./functions/updstate";
-import { getItems } from "./functions/api";
-import mobxStore from "./functions/store";
+import { fetchItems, updAllItems } from "./functions/updstate";
 
 function App() {
 
-  const fetchData = async () => {
-
-    const items = await getItems();
-    mobxStore.setItemList(items);
-    mobxStore.setUpdBody(true);
-  }
-
   useEffect(() => {
-    fetchData();
-
-    setTimeout(() => {
-      updAllItems();
-    }, 1000);
+    fetchItems();
 
     setInterval(() => {
       updAllItems();

frontend/src/components/EditItem.tsx

@@ -3,6 +3,7 @@ import BootstrapModal from "./Modal";
 import { apiSaveItem } from "../functions/api";
 import mobxStore from "../functions/store";
 import { Item } from "../functions/exports";
+import { fetchItems } from "../functions/updstate";
 
 function EditItem(_props: any) {
 
@@ -42,10 +43,10 @@ function EditItem(_props: any) {
   const saveChanges = async () => {
     if (JSON.stringify(formData) !== JSON.stringify(item)) {
       await apiSaveItem(item, formData);
-      console.log("SAVE (before):", item);
-      console.log("SAVE (after):", formData);
-      // _props.setUpdBody(true);
-      mobxStore.setUpdBody(true);
+
+      setTimeout(() => {
+        fetchItems();
+      }, 1000);
     }
   }
 

frontend/src/components/ItemShow.tsx

@@ -1,24 +1,31 @@
 import { apiExec } from "../functions/api";
 import Logs from "./Logs";
 import EditItem from "./EditItem";
-import mobxStore from "../functions/store";
-
+import { updItemState } from "../functions/updstate";
+import toast, { Toaster } from 'react-hot-toast';
 
 function ItemShow(_props: any) {
 
   const handleExec = async (exec: string) => {
     _props.item.Exec = exec;
 
     console.log("EXEC:", _props.item);
-    await apiExec(_props.item);
-    setTimeout(() => {
-      mobxStore.setUpdBody(true);
-    }, 1000);
+    const res = await apiExec(_props.item);
+    updItemState(_props.item);
+    if (res.Ok) {
+      toast('"'+ exec +'" executed on "'+ _props.item.Name +'"', {
+        style: {
+          borderRadius: '10px',
+          background: '#000',
+          color: '#fff',
+        },
+      });
+    }
   }
 
   return (
     <>
-      <td>{_props.item.Type}</td>
+      <td>{_props.item.Type}<Toaster position="top-center"/></td>
       <td>
         {_props.item.Icon
         ? <a href={_props.item.Link} target="_blank">

frontend/src/components/TypeEdit.tsx

@@ -72,7 +72,7 @@ function TypeEdit(_props: any) {
             <label htmlFor="nid" className="form-label text-primary">Name</label>
             <input className="form-control mb-3" defaultValue={oldType.Name} id="nid" name="Name" onChange={handleChange} placeholder="Not empty string"></input>
             <label htmlFor="sshid" className="form-label text-primary">SSH (optional)</label>
-            <input className="form-control mb-3" defaultValue={oldType.SSH} id="sshid" name="SSH" onChange={handleChange} placeholder=""></input>
+            <input className="form-control mb-3" defaultValue={oldType.SSH} id="sshid" name="SSH" onChange={handleChange} placeholder="ssh -i /data/AnyAppStart/your_key -oStrictHostKeyChecking=no [email protected] -f"></input>
             <p>Use variable <code>$ITEMNAME</code> in the commands below</p>
             <label htmlFor="gid" className="form-label text-primary">Start</label>
             <input className="form-control mb-3" defaultValue={oldType.Start} id="gid" name="Start" onChange={handleChange} placeholder="docker start $ITEMNAME"></input>

frontend/src/functions/updstate.ts

@@ -1,4 +1,4 @@
-import { apiExec } from "./api";
+import { apiExec, getItems } from "./api";
 import { Item } from "./exports";
 import mobxStore from "./store";
 
@@ -7,7 +7,7 @@ interface Res {
   Out: string;
 }
 
-async function updItemState(item:Item) {
+export async function updItemState(item:Item) {
 
   let res:Res;
   item.Exec = "State";
@@ -39,4 +39,15 @@ export function updAllItems() {
     // console.log("ITEM", item);
     updItemState(item);
   }
+}
+
+export const fetchItems = async () => {
+
+  const items = await getItems();
+  mobxStore.setItemList(items);
+  mobxStore.setUpdBody(true);
+
+  setTimeout(() => {
+    updAllItems();
+  }, 1000);
 }