Goroutines, Icons

CHANGELOG.md

@@ -2,6 +2,12 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+## [0.1.2] - 2025-01-08
+### Added
+- MobX store
+- Goroutine for getting states
+- Icons for items
+
 ## [0.1.1] - 2025-01-08
 ### Added
 - Variable `$ITEMNAME`

backend/internal/models/models.go

@@ -19,6 +19,7 @@ type Item struct {
 	Name  string `yaml:"name"`
 	Type  string `yaml:"type"`
 	Link  string `yaml:"link,omitempty"`
+	Icon  string `yaml:"icon,omitempty"`
 	Exec  string `yaml:"-"`
 	State string `yaml:"-"`
 }

backend/internal/web/api.go

@@ -51,6 +51,10 @@ func apiGetItems(c *gin.Context) {
 	items := yaml.Read(appConfig.ItemPath)
 	items = getAllStates(items)
 
+	sort.Slice(items, func(i, j int) bool {
+		return items[i].Name < items[j].Name
+	})
+
 	c.IndentedJSON(http.StatusOK, items)
 }
 

backend/internal/web/functions.go

@@ -1,6 +1,8 @@
 package web
 
 import (
+	"sync"
+
 	"github.com/aceberg/AnyAppStart/internal/models"
 	"github.com/aceberg/AnyAppStart/internal/service"
 	"github.com/aceberg/AnyAppStart/internal/yaml"
@@ -39,21 +41,34 @@ func toOneType(tStruct models.TypeStruct) (tmpMap map[string]string) {
 }
 
 func getAllStates(items []models.Item) (newItems []models.Item) {
-	var ok bool
+	var wg sync.WaitGroup
 
 	types := yaml.ReadTypes(appConfig.TypePath)
+	newItems = []models.Item{}
 
 	for _, item := range items {
 
-		item.Exec = "State"
-		ok, _ = service.Exec(item, types)
-		if ok {
-			item.State = "on"
-		} else {
-			item.State = "off"
-		}
-		newItems = append(newItems, item)
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			item = getOneState(item, types)
+			newItems = append(newItems, item)
+		}()
 	}
+	wg.Wait()
 
 	return newItems
 }
+
+func getOneState(item models.Item, types map[string]map[string]string) models.Item {
+
+	item.Exec = "State"
+	ok, _ := service.Exec(item, types)
+	if ok {
+		item.State = "on"
+	} else {
+		item.State = "off"
+	}
+
+	return item
+}

frontend/src/components/Body.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react"
-import { getItems, Item } from "../functions/api"
+import { getItems } from "../functions/api"
 import ItemShow from "./ItemShow";
 import { filterItems, getGroupsList, sortItems } from "../functions/sortitems";
 import BodyTabs from "./BodyTabs";
+import { Item } from "../functions/exports";
 
 let sortField:keyof Item = "Exec";
 let sortWay:boolean = true;
@@ -69,20 +70,20 @@ function Body() {
             <thead>
               <tr>
                 <th style={{ width: "1%" }}></th>
-                <th><i className="bi bi-circle-fill"></i><i onClick={() => handleSort("State")} className="bi bi-sort-down-alt text-primary shade-hover"></i></th>
-                <th>Group<i onClick={() => handleSort("Group")} className="bi bi-sort-down-alt text-primary shade-hover"></i></th>
-                <th>Name<i onClick={() => handleSort("Name")} className="bi bi-sort-down-alt text-primary shade-hover"></i></th>
+                <th><i className="bi bi-circle"></i><i onClick={() => handleSort("State")} className="bi bi-sort-down-alt text-primary shade-hover"></i></th>
                 <th>Type<i onClick={() => handleSort("Type")} className="bi bi-sort-down-alt text-primary shade-hover"></i></th>
+                <th>Icon</th>
+                <th>Name<i onClick={() => handleSort("Name")} className="bi bi-sort-down-alt text-primary shade-hover"></i></th>
+                <th>Group<i onClick={() => handleSort("Group")} className="bi bi-sort-down-alt text-primary shade-hover"></i></th>
                 <th>&nbsp;&nbsp;Action</th>
                 <th>Logs</th>
                 <th>Edit</th>
-                <th style={{ width: "1%" }}>Link</th>
               </tr>
             </thead>
             <tbody>
             {items?.map((item, i) => (
               <tr key={i}>
-                <td className="text-primary text-opacity-75">{i}.</td>
+                <td className="text-primary text-opacity-75">{i+1}.</td>
                 <ItemShow item={item} setUpdBody={setUpdBody}></ItemShow>
               </tr>
             ))}

frontend/src/components/BodyAddItem.tsx

@@ -1,4 +1,4 @@
-import { Item } from "../functions/api";
+import { Item } from "../functions/exports";
 import EditItem from "./EditItem"
 
 
@@ -9,6 +9,7 @@ function BodyAddItem(_props: any) {
     Name: "",
     Type: "",
     Link: "",
+    Icon: "",
     State: "",
     Exec: ""
   };

frontend/src/components/BodyHeader.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { Item } from "../functions/api";
 import BodyAddItem from "./BodyAddItem";
+import { Item } from "../functions/exports";
 
 function BodyHeader(_props: any) {
 

frontend/src/components/ConfigSettings.tsx

@@ -1,9 +1,12 @@
 import { useState } from "react";
 import BootstrapModal from "./Modal";
-import { apiSaveConf, appConfig, Conf } from "../functions/api";
+import { apiSaveConf } from "../functions/api";
+import mobxStore from "../functions/store";
+import { Conf } from "../functions/exports";
 
 function ConfigSettings(_props: any) {
 
+  const appConfig = mobxStore.appConfig;
   const [isModalOpen, setModalOpen] = useState<boolean>(false);
   const [formData, setFormData] = useState<Conf>(appConfig);
 
@@ -25,6 +28,7 @@ function ConfigSettings(_props: any) {
   const saveChanges = async () => {
     if (JSON.stringify(formData) !== JSON.stringify(appConfig)) {
       await apiSaveConf(formData);
+      mobxStore.setAppConfig(formData);
       console.log("SAVE:", formData);
       _props.headUpd(true);
     }

frontend/src/components/EditItem.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import BootstrapModal from "./Modal";
-import { apiSaveItem, Item } from "../functions/api";
+import { apiSaveItem } from "../functions/api";
 import mobxStore from "../functions/store";
+import { Item } from "../functions/exports";
 
 function EditItem(_props: any) {
 
@@ -10,6 +11,7 @@ function EditItem(_props: any) {
     Name: _props.item.Name,
     Type: _props.item.Type,
     Link: _props.item.Link,
+    Icon: _props.item.Icon,
     Exec: "",
     State: ""
   };
@@ -82,8 +84,10 @@ function EditItem(_props: any) {
                 <option key={i} value={t.Name}>{t.Name}</option>
               ))}
             </select>
+            <label htmlFor="iid" className="form-label text-primary">Icon</label>
+            <input className="form-control mb-3" defaultValue={item.Icon} id="iid" name="Icon" onChange={handleChange} placeholder="Link to Icon (optional)"></input>
             <label htmlFor="lid" className="form-label text-primary">Link</label>
-            <input className="form-control mb-3" defaultValue={item.Link} id="lid" name="Link" onChange={handleChange} placeholder="URL"></input>
+            <input className="form-control mb-3" defaultValue={item.Link} id="lid" name="Link" onChange={handleChange} placeholder="URL (optional)"></input>
             <hr></hr>
             <div className='d-flex justify-content-between'>
               <button className="btn btn-danger" type="button" onClick={handleDel}>Delete</button>

frontend/src/components/Header.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
-import { getConfig, appConfig } from "../functions/api";
+import { getConfig } from "../functions/api";
 import ConfigDropdown from "./ConfigDropdown";
 import TypesDropdown from "./TypesDropdown";
+import mobxStore from "../functions/store";
 
 function Header() {
 
@@ -13,7 +14,8 @@ function Header() {
 
     const fetchData = async () => {
 
-      await getConfig();
+      const appConfig = await getConfig();
+      mobxStore.setAppConfig(appConfig);
 
       if (appConfig.NodePath == '') {
         setThemePath("https://cdn.jsdelivr.net/npm/[email protected]/dist/"+appConfig.Theme+"/bootstrap.min.css");

frontend/src/components/ItemShow.tsx

@@ -21,9 +21,22 @@ function ItemShow(_props: any) {
   return (
     <>
       <td><i className={_props.item.State == "on" ? stateOn : stateOff }></i></td>
-      <td>{_props.item.Group}</td>
-      <td>{_props.item.Name}</td>
       <td>{_props.item.Type}</td>
+      <td>
+        {_props.item.Icon
+        ? <a href={_props.item.Link} target="_blank">
+            <img src={_props.item.Icon} width={30} height={30}></img>
+          </a>
+        : <></>
+        }
+      </td>
+      <td>
+        {_props.item.Link
+          ? <a href={_props.item.Link} target="_blank">{_props.item.Name}</a> 
+          : _props.item.Name
+        }
+      </td>
+      <td>{_props.item.Group}</td>
       <td>
         <i className="bi bi-play shade-hover me-1 fs-5" onClick={() => handleExec("Start")} title="Start"></i>
         <i className="bi bi-arrow-clockwise shade-hover me-1 fs-5" onClick={() => handleExec("Restart")} title="Restart"></i>
@@ -37,14 +50,6 @@ function ItemShow(_props: any) {
           btnContent={<i className="bi bi-three-dots-vertical shade-hover fs-5" title="Edit"></i>}>  
         </EditItem>
       </td>
-      <td>
-        {_props.item.Link
-          ? <a href={_props.item.Link} target="_blank">
-              <i className="bi bi-box-arrow-up-right shade-hover fs-5"></i>
-            </a> 
-          : <></>
-        }
-      </td>
     </>
   )
 }

frontend/src/components/TypeAdd.tsx

@@ -1,4 +1,4 @@
-import { TypeStruct } from "../functions/api"
+import { TypeStruct } from "../functions/exports"
 import TypeEdit from "./TypeEdit"
 
 function TypeAdd(_props:any) {

frontend/src/components/TypeEdit.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import BootstrapModal from "./Modal";
-import { apiSaveType, TypeStruct } from "../functions/api";
+import { apiSaveType } from "../functions/api";
+import { TypeStruct } from "../functions/exports";
 
 function TypeEdit(_props: any) {
 

frontend/src/components/TypesList.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
-import { getTypes, TypeStruct } from "../functions/api";
+import { getTypes } from "../functions/api";
 import TypeEdit from "./TypeEdit";
 import mobxStore from "../functions/store";
+import { TypeStruct } from "../functions/exports";
 
 function TypesList(_props:any) {
 

frontend/src/functions/api.tsx

@@ -1,49 +1,10 @@
-const api = 'http://0.0.0.0:8830';
-
-export interface Item {
-    Group: string;
-    Name: string;
-    Type: string;
-    Link: string;
-    Exec: string;
-    State: string;
-};
-
-export interface Conf {
-    Host: string;
-    Port: string;
-    Theme: string;
-    Color: string;
-    NodePath: string;
-};
-
-export interface TypeStruct {
-    Name: string;
-    Start: string;
-    Stop: string;
-    Restart: string;
-    Logs: string;
-    State: string;
-};
-
-export let appConfig:Conf = {
-    Host: "",
-    Port: "",
-    Theme: "",
-    Color: "",
-    NodePath: ""
-};
+import { Conf, Item, TypeStruct } from "./exports";
 
-export interface ToFilter {
-    Field: keyof Item;
-    Option: string;
-};
+const api = 'http://0.0.0.0:8830';
 
 export const getConfig = async () => {
     const url = api+'/api/conf';
     const conf = await (await fetch(url)).json();
-
-    appConfig = conf;
 
     return conf;
 };

frontend/src/functions/exports.tsx

@@ -0,0 +1,31 @@
+export interface Item {
+    Group: string;
+    Name: string;
+    Type: string;
+    Link: string;
+    Icon: string;
+    Exec: string;
+    State: string;
+};
+
+export interface Conf {
+    Host: string;
+    Port: string;
+    Theme: string;
+    Color: string;
+    NodePath: string;
+};
+
+export interface TypeStruct {
+    Name: string;
+    Start: string;
+    Stop: string;
+    Restart: string;
+    Logs: string;
+    State: string;
+};
+
+export interface ToFilter {
+    Field: keyof Item;
+    Option: string;
+};

frontend/src/functions/sortitems.tsx

@@ -1,4 +1,4 @@
-import { Item } from "./api";
+import { Item } from "./exports";
 
 export const sortItems = (items:Item[], field:keyof Item, asc:boolean, trig:boolean) => {
   trig = !trig; // trigger to run sort