Компоненты

frontend/src/App.svelte

@@ -1,14 +1,13 @@
 <script>
   import logo from "./assets/images/logo-universal.png";
-  import { GetStatus, Weed, GetProjects, 
+  import { GetStatus, GetProjects, 
-    StartFar, GetDisks, GetDownloads, 
+    StartFar, GetDisks, GetDownloads } from "../wailsjs/go/main/App.js";
-    StartFarDownloads, StartFarBooks,
-    StartFarDisks } from "../wailsjs/go/main/App.js";
 
-  import { StartServer } from "../wailsjs/go/main/App.js";
   import TailwindCss from "./TailwindCSS.svelte";
   import servers from "./servers.js";
   import DiskStatus from "./DiskStatus.svelte";
+  import Servers from "./Servers.svelte";
+  import Utility from "./Utility.svelte";
   // import {BrowserOpenURL} from '../wailsjs/runtime/runtime.js'
 
   // Определение интерфейса для типа Disk
@@ -50,25 +49,6 @@
     StartFar(project.last_directory_path);
   }
 
-  function start_server(server) {
-    const s = JSON.stringify(server);
-    console.log(s);
-    StartServer(s).then((result) => {
-      resultText = result;
-      console.log(resultText);
-      server.run = "running";
-      // Обновляем локальную переменную для реактивности Svelte
-      local = [...local];
-    });
-  }
-
-  function weed() {
-    // console.log("weed");
-    Weed().then(() => {
-      get_status();
-    });
-  }
-
   function get_status() {
     console.log("запрос downloads");
     get_downloads();
@@ -101,50 +81,11 @@
 
 <DiskStatus {disks} />
 
-<div class="container mx-auto pt-4 mb-4">
+<Servers servers={local} />
-  <h1 class="text-blue-200 text-2xl">СЕРВЕРА</h1>
-  {#each local as server}
-    <div class="flex justify-between px-4">
-      <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" on:click={() => start_server(server)}>
-        {server.name}
-      </button>
-
-      <button class="text-neutral-300">
-        <span class:text-red-300={server.run === "running"}>
-          {server.run}
-        </span>
-      </button>
-    </div>
-  {/each}
-</div>
 
 <hr class="mb-2 mx-4 text-slate-600" />
 
-<div class="container mx-auto pt-4 mb-8">
+<Utility {cnt_pic} {downloads} {pics} on:status={get_status} />
-  <h1 class="text-blue-200 text-2xl">УТИЛИТЫ</h1>
-  <div class="flex flex-col h-full justify-between">
-    <div class="h-24">
-      <div class="flex justify-between px-4">
-        <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" on:click={weed}> Weed (python) </button>
-
-        <div class="text-neutral-300">
-          <span class={pics ? "warning" : "info"}>{cnt_pic}</span>
-        </div>
-      </div>
-      <div class="flex justify-between px-4">
-        <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" 
-        on:click={StartFarDownloads}> Download </button>
-        <div class="text-neutral-300">
-          <span class="info">{downloads}</span>
-        </div>
-      </div>
-      <div class="flex justify-between px-4">
-        <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" 
-        on:click={StartFarBooks}> Books </button>
-      </div>
-    </div>
-  </div>
-</div>
 
 <hr class="mb-2 mx-4 text-slate-600" />
 
@@ -182,10 +123,6 @@
    * - warning (оранжевый): требует внимания
    * - danger (красный): критическое состояние, требует немедленного вмешательства
    */
-  .disk-panel {
-    display: flex;
-    justify-content: space-around;
-  }
   .info {
     color: lightgreen;
   }
@@ -195,7 +132,4 @@
   .warning {
     color: orange;
   }
-  a:hover {
-    text-decoration: underline;
-  }
 </style>

frontend/src/Servers.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { StartServer } from "../wailsjs/go/main/App.js";
+  
+  /** @type {Array<{name: string, run: string}>} */
+  export let servers = [];
+
+  function start_server(server) {
+    const s = JSON.stringify(server);
+    console.log(s);
+    StartServer(s).then((result) => {
+      console.log(result);
+      server.run = "running";
+      // Обновляем локальную переменную для реактивности Svelte
+      servers = [...servers];
+    });
+  }
+</script>
+
+<div class="container mx-auto pt-4 mb-4">
+  <h1 class="text-blue-200 text-2xl">СЕРВЕРА</h1>
+  {#each servers as server}
+    <div class="flex justify-between px-4">
+      <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" on:click={() => start_server(server)}>
+        {server.name}
+      </button>
+
+      <button class="text-neutral-300">
+        <span class:text-red-300={server.run === "running"}>
+          {server.run}
+        </span>
+      </button>
+    </div>
+  {/each}
+</div> 

frontend/src/Utility.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { Weed, StartFarDownloads, StartFarBooks } from "../wailsjs/go/main/App.js";
+  
+  export let cnt_pic = "0";
+  export let downloads = "";
+  export let pics = true;
+
+  function weed() {
+    Weed().then(() => {
+      // Вызываем событие для обновления статуса
+      dispatch('status');
+    });
+  }
+
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+</script>
+
+<div class="container mx-auto pt-4 mb-8">
+  <h1 class="text-blue-200 text-2xl">УТИЛИТЫ</h1>
+  <div class="flex flex-col h-full justify-between">
+    <div class="h-24">
+      <div class="flex justify-between px-4">
+        <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" on:click={weed}> Weed (python) </button>
+
+        <div class="text-neutral-300">
+          <span class={pics ? "warning" : "info"}>{cnt_pic}</span>
+        </div>
+      </div>
+      <div class="flex justify-between px-4">
+        <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" 
+        on:click={StartFarDownloads}> Download </button>
+        <div class="text-neutral-300">
+          <span class="info">{downloads}</span>
+        </div>
+      </div>
+      <div class="flex justify-between px-4">
+        <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" 
+        on:click={StartFarBooks}> Books </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .info {
+    color: lightgreen;
+  }
+  .warning {
+    color: orange;
+  }
+</style>