From 165212fed2689feacc2d21b8c719363507ebe868 Mon Sep 17 00:00:00 2001
From: Saeed Vaziry <mr.saeedvaziry@gmail.com>
Date: Mon, 25 Mar 2024 22:20:21 +0100
Subject: [PATCH] add stop button

---
 .../views/components/console-view.blade.php   |  2 +-
 resources/views/console/index.blade.php       | 30 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/console-view.blade.php b/resources/views/components/console-view.blade.php
index 539e4d7..92bb66a 100644
--- a/resources/views/components/console-view.blade.php
+++ b/resources/views/components/console-view.blade.php
@@ -1,5 +1,5 @@
 <div
-    {{ $attributes->merge(["class" => "h-[500px] w-full overflow-auto whitespace-pre-line rounded-md border border-gray-200 bg-black p-5 text-gray-50 dark:border-gray-700"]) }}
+    {{ $attributes->merge(["class" => "relative h-[500px] w-full overflow-auto whitespace-pre-line rounded-md border border-gray-200 bg-black p-5 text-gray-50 dark:border-gray-700"]) }}
 >
     {{ $slot }}
 </div>
diff --git a/resources/views/console/index.blade.php b/resources/views/console/index.blade.php
index 18d8a87..8204e2d 100644
--- a/resources/views/console/index.blade.php
+++ b/resources/views/console/index.blade.php
@@ -4,10 +4,12 @@
     <div
         x-data="{
             user: '{{ $server->ssh_user }}',
+            running: false,
             command: '',
             output: '',
             runUrl: '{{ route("servers.console.run", ["server" => $server]) }}',
             async run() {
+                this.running = true
                 this.output = 'Running...\n'
                 const fetchOptions = {
                     method: 'POST',
@@ -26,6 +28,11 @@
                 const decoder = new TextDecoder('utf-8')
 
                 while (true) {
+                    if (! this.running) {
+                        reader.cancel()
+                        this.output += '\nStopped!'
+                        break
+                    }
                     const { value, done } = await reader.read()
                     if (done) break
 
@@ -37,6 +44,10 @@
                         document.getElementById('console-output').scrollHeight
                 }
                 this.output += '\nDone!'
+                this.running = false
+            },
+            stop() {
+                this.running = false
             },
         }"
     >
@@ -69,7 +80,24 @@
                     class="mx-1 flex-grow"
                     autocomplete="off"
                 />
-                <x-primary-button id="btn-run" x-on:click="run" class="h-[40px]">Run</x-primary-button>
+                <x-secondary-button
+                    type="button"
+                    id="btn-stop"
+                    x-on:click="stop"
+                    class="mr-1 h-[40px]"
+                    x-bind:disabled="!running"
+                >
+                    Stop
+                </x-secondary-button>
+                <x-primary-button
+                    type="submit"
+                    id="btn-run"
+                    x-on:click="run"
+                    class="h-[40px]"
+                    x-bind:disabled="running || command === ''"
+                >
+                    Run
+                </x-primary-button>
             </form>
         </div>
     </div>