refactoring (#116)

- refactoring architecture
- fix incomplete ssh logs
- code editor for scripts in the app
- remove Jobs and SSHCommands

resources/views/components/alert-danger.blade.php

@@ -0,0 +1,5 @@
+<div
+    class="rounded-lg border-2 border-red-500 border-opacity-50 bg-red-50 p-4 text-red-500 dark:bg-red-500 dark:bg-opacity-10 dark:text-white"
+>
+    {{ $slot }}
+</div>

resources/views/components/alert-success.blade.php

@@ -0,0 +1,5 @@
+<div
+    class="rounded-lg border-2 border-green-500 border-opacity-50 bg-green-50 p-4 text-green-500 dark:bg-green-500 dark:bg-opacity-10 dark:text-white"
+>
+    {{ $slot }}
+</div>

resources/views/components/alert-warning.blade.php

@@ -0,0 +1,5 @@
+<div
+    class="rounded-lg border-2 border-yellow-500 border-opacity-50 bg-yellow-50 p-4 text-yellow-500 dark:bg-yellow-500 dark:bg-opacity-10 dark:text-white"
+>
+    {{ $slot }}
+</div>

resources/views/components/alert.blade.php

@@ -0,0 +1,5 @@
+<div
+    class="rounded-lg border-2 border-gray-500 border-opacity-50 bg-gray-50 p-4 text-gray-500 dark:bg-gray-500 dark:bg-opacity-10 dark:text-white"
+>
+    {{ $slot }}
+</div>

resources/views/components/code-editor.blade.php

@@ -0,0 +1,45 @@
+@props([
+    "id",
+    "name",
+    "disabled" => false,
+    "lang" => "text",
+])
+
+<div
+    x-data="{
+        editorId: @js($id),
+        disabled: @js($disabled),
+        lang: @js($lang),
+        init() {
+            document.body.addEventListener('htmx:afterSettle', (event) => {
+                let editor = null
+                let theme =
+                    document.documentElement.className === 'dark'
+                        ? 'one-dark'
+                        : 'github'
+                editor = window.ace.edit(this.editorId)
+                let contentElement = document.getElementById(
+                    `text-${this.editorId}`,
+                )
+                editor.setValue(contentElement.innerText, 1)
+                if (this.disabled) {
+                    editor.setReadOnly(true)
+                }
+                editor.getSession().setMode(`ace/mode/${this.lang}`)
+                editor.setTheme(`ace/theme/${theme}`)
+                editor.setFontSize('15px')
+                editor.setShowPrintMargin(false)
+                editor.on('change', () => {
+                    contentElement.innerHTML = editor.getValue()
+                })
+                document.body.addEventListener('color-scheme-changed', (event) => {
+                    theme = event.detail.theme === 'dark' ? 'one-dark' : 'github'
+                    editor.setTheme(`ace/theme/${theme}`)
+                })
+            })
+        },
+    }"
+>
+    <div id="{{ $id }}" class="min-h-[400px] w-full rounded-md border border-gray-200 dark:border-gray-700"></div>
+    <textarea id="text-{{ $id }}" name="{{ $name }}" class="hidden">{{ $slot }}</textarea>
+</div>

resources/views/components/console-view.blade.php

@@ -1,5 +1,5 @@
 <div
-    class="h-96 w-full overflow-auto whitespace-pre-line rounded-md border border-gray-200 bg-gray-900 p-5 text-gray-50 dark:border-gray-800"
+    class="h-[500px] w-full overflow-auto whitespace-pre-line rounded-md border border-gray-200 bg-gray-900 p-5 text-gray-50 dark:border-gray-700"
 >
     {{ $slot }}
 </div>

resources/views/components/live.blade.php

@@ -1,13 +1,19 @@
 @props([
     "interval" => "30s",
     "id",
+    "target" => null,
 ])
 
 <div
     id="{{ $id }}"
     hx-get="{{ request()->getUri() }}"
     hx-trigger="every {{ $interval }}"
-    hx-select="#{{ $id }}"
+    @if ($target)
+        hx-target="{{ $target }}"
+        hx-select="{{ $target }}"
+    @else
+        hx-select="#{{ $id }}"
+    @endif
     hx-swap="outerHTML"
 >
     {{ $slot }}