coolify/resources/views/livewire/terminal/index.blade.php

44 lines
2.1 KiB
PHP
Raw Normal View History

2024-01-07 15:23:41 +00:00
<div>
2024-06-07 09:01:10 +00:00
<x-slot:title>
Terminal | Coolify
2024-06-07 09:01:10 +00:00
</x-slot>
<h1>Terminal</h1>
<div class="flex gap-2 items-end subtitle">
<div>Execute commands on your servers and containers without leaving the browser.</div>
<x-helper
helper="If you're having trouble connecting to your server, make sure that the port is open.<br><br><a class='underline' href='https://coolify.io/docs/knowledge-base/server/firewall/#terminal' target='_blank'>Documentation</a>"></x-helper>
</div>
2024-11-12 08:52:22 +00:00
<div x-init="$wire.loadContainers()">
@if ($isLoadingContainers)
<div class="pt-1">
<x-loading text="Loading servers and containers..." />
</div>
@else
@if ($servers->count() > 0)
<form class="flex flex-col gap-2 justify-center xl:items-end xl:flex-row"
wire:submit="$dispatchSelf('connectToContainer')">
feat: replace terminal dropdown with searchable datalist component Enhanced the terminal server/container selection with a new searchable datalist component: **Terminal View Changes:** - Replaced `x-forms.select` with `x-forms.datalist` for server/container selection - Added search functionality for filtering servers and containers - Fixed form validation by adding hidden input for proper HTML5 validation - Prevented error messages when clearing selection (sets to 'default') **Datalist Component (Single Selection):** - Implemented Alpine.js-powered dropdown with search functionality - Added visual dropdown arrow that rotates when opened - Proper entangle binding for wire:model support - Keyboard support (Escape to close) - Click outside to close behavior - Disabled options filtering (skips disabled options) - Consistent styling with input/textarea components **Styling Improvements:** - Explicit background colors: `bg-white` (light) and `dark:bg-coolgray-100` (dark) - Proper ring border: `ring-1 ring-inset ring-neutral-200 dark:ring-coolgray-300` - Focus states: `focus-within:ring-2 focus-within:ring-coollabs dark:focus-within:ring-warning` - Text colors: `text-black dark:text-white` - Added custom scrollbar styling for dropdown lists - Wire:dirty state support for visual feedback - Proper padding and spacing (`py-1.5`, `px-1`, `px-2`) **Multiple Selection Mode:** - Also updated for consistent styling and scrollbar support - Added proper background colors and focus states 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-12 12:57:45 +00:00
<x-forms.datalist id="selected_uuid" required wire:model.live="selected_uuid" placeholder="Search servers or containers...">
@foreach ($servers as $server)
@if ($loop->first)
<option disabled value="default">Select a server or container</option>
2024-11-12 08:52:22 +00:00
@endif
<option value="{{ $server->uuid }}">{{ $server->name }}</option>
@foreach ($containers as $container)
@if ($container['server_uuid'] == $server->uuid)
<option value="{{ $container['uuid'] }}">
{{ $server->name }} -> {{ $container['name'] }}
</option>
@endif
@endforeach
2024-11-12 08:52:22 +00:00
@endforeach
feat: replace terminal dropdown with searchable datalist component Enhanced the terminal server/container selection with a new searchable datalist component: **Terminal View Changes:** - Replaced `x-forms.select` with `x-forms.datalist` for server/container selection - Added search functionality for filtering servers and containers - Fixed form validation by adding hidden input for proper HTML5 validation - Prevented error messages when clearing selection (sets to 'default') **Datalist Component (Single Selection):** - Implemented Alpine.js-powered dropdown with search functionality - Added visual dropdown arrow that rotates when opened - Proper entangle binding for wire:model support - Keyboard support (Escape to close) - Click outside to close behavior - Disabled options filtering (skips disabled options) - Consistent styling with input/textarea components **Styling Improvements:** - Explicit background colors: `bg-white` (light) and `dark:bg-coolgray-100` (dark) - Proper ring border: `ring-1 ring-inset ring-neutral-200 dark:ring-coolgray-300` - Focus states: `focus-within:ring-2 focus-within:ring-coollabs dark:focus-within:ring-warning` - Text colors: `text-black dark:text-white` - Added custom scrollbar styling for dropdown lists - Wire:dirty state support for visual feedback - Proper padding and spacing (`py-1.5`, `px-1`, `px-2`) **Multiple Selection Mode:** - Also updated for consistent styling and scrollbar support - Added proper background colors and focus states 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-12 12:57:45 +00:00
</x-forms.datalist>
<x-forms.button type="submit">Connect</x-forms.button>
</form>
@else
<div>No servers with terminal access found.</div>
@endif
2024-11-12 08:52:22 +00:00
@endif
2024-11-14 11:33:59 +00:00
<livewire:project.shared.terminal />
2024-09-17 10:29:36 +00:00
</div>
2024-01-07 15:23:41 +00:00
</div>