server/frontend/src/App.svelte

<script>
  import logo from "./assets/images/logo-universal.png";
  import { GetStatus, Weed, GetProjects, 
    StartFar, GetDisks, GetDownloads, 
    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 {BrowserOpenURL} from '../wailsjs/runtime/runtime.js'

  let resultText = "Ваше имя 👇";
  let local = servers;
  let projects = [];
  let disks = [];
  let downloads = "";
  let cnt_pic = "0";
  let pics = true;

  function get_disks() {
    console.log("get disks");
    GetDisks().then((result) => {
      console.log("получена информация о дисках:", result);
      disks = result;
      disks[0].normal = disks[0].Free > 20;
      disks[1].normal = disks[1].Free > 50;
    });
  }

  function get_downloads() {
    console.log("get downloads");
    GetDownloads().then((result) => {
      console.log("получена информация о downloads:", result);
      downloads = result;
    });
  }

  function start_far(project) {
    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";
      local = local;
    });
  }

  function weed() {
    // console.log("weed");
    Weed().then(() => {
      get_status();
    });
  }

  function get_status() {
    console.log("запрос downloads");
    get_downloads();

    console.log("запрос дисков");
    get_disks();

    console.log("запрос статуса");
    GetStatus().then((result) => {
      console.log("result:", result);
      cnt_pic = result;
      // сразу сбросим признак работающего сервера
      local = local.map((server) => {
        server.run = "idle";
        return server;
      });
    });

    console.log("запрос проектов");
    GetProjects().then((result) => {
      console.log("projects:", result);
      projects = result;
    });
  }

  get_status();
</script>

<TailwindCss />

<div class="container mx-auto pt-4 mb-4">
  <div class="disk-panel text-neutral-300">
    {#each disks as disk}
      <div>
        {disk.Name}
        <a href="#" on:click={StartFarDisks} class={disk.normal ? "info" : "danger"}>
          {disk.Free} Gb
        </a>
      </div>
    {/each}
  </div>
</div>

<div class="container mx-auto pt-4 mb-4">
  <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">
  <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" />

<div class="container mx-auto pt-4 mb-8">
  <h1 class="text-blue-200 text-2xl">ПРОЕКТЫ</h1>
  {#each projects as project}
    <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_far(project)}>
        {project.last_directory}
      </button>

      <div class="text-neutral-300">
        <span class="info"> {project.name} </span>
      </div>
    </div>
  {/each}
</div>

<!-- панель кнопок -->
<button
  on:click={get_status}
  class="absolute right-4 bottom-4
    bg-slate-700 hover:bg-slate-500
    p-2 rounded-full"
>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-ccw cursor-pointer">
    <polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
  </svg>
</button>

<style>
  .disk-panel {
    display: flex;
    justify-content: space-around;
  }
  .info {
    color: lightgreen;
  }
  .danger {
    color: red;
  }
  .warning {
    color: orange;
  }
</style>