wip: services

resources/views/components/forms/textarea.blade.php

@@ -1,41 +1,21 @@
 <div class="form-control">
     @if ($label)
-        <label class="flex items-center gap-1 mb-1 text-sm font-medium">
-            <span>
-                @if ($label)
-                    {{ $label }}
-                @else
-                    {{ $id }}
-                @endif
-                @if ($required)
-                    <x-highlighted text="*" />
-                @endif
-                @if ($helper)
-                    <div class="group">
-                        <div class="cursor-pointer text-warning">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                class="w-4 h-4 stroke-current">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                            </svg>
-                        </div>
-                        <div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
-                            <div class="p-4 card-body">
-                                {!! $helper !!}
-                            </div>
-                        </div>
-                    </div>
-                @endif
-            </span>
+        <label for="small-input" class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
+            @if ($required)
+                <x-highlighted text="*" />
+            @endif
+            @if ($helper)
+                <x-helper :helper="$helper" />
+            @endif
         </label>
     @endif
     <textarea placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
         @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
         @else
         wire:model.defer={{ $value ?? $id }}
-        wire:dirty.class="input-warning"@endif
+        wire:dirty.class="input-warning" @endif
         @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}" name="{{ $name }}"
-        name={{ $id }}  ></textarea>
+        name={{ $id }}></textarea>
     @error($id)
         <label class="label">
             <span class="text-red-500 label-text-alt">{{ $message }}</span>

resources/views/errors/500.blade.php

@@ -7,14 +7,14 @@
             <p class="mt-6 text-base leading-7 text-neutral-300">There has been an error, we are working on it.
             </p>
             @if ($exception->getMessage() !== '')
-                <p class="mt-6 text-base leading-7 text-red-500">Error: {{ $exception->getMessage() }}
+                <p class="mt-6 text-xs leading-7 text-left text-red-500">Error: {{ $exception->getMessage() }}
                 </p>
             @endif
             <div class="flex items-center justify-center mt-10 gap-x-6">
                 <a href="/">
                     <x-forms.button>Go back home</x-forms.button>
                 </a>
-                <a href="https://docs.coollabs.io/contact.html" class="font-semibold text-white ">Contact
+                <a href="https://docs.coollabs.io/contact.html" class="font-semibold text-white">Contact
                     support
                     <span aria-hidden="true">&rarr;</span></a>
             </div>

resources/views/livewire/dashboard.blade.php

@@ -35,5 +35,6 @@
             <div class="stat-value">{{ $s3s }}</div>
         </div>
     </div>
+    
     {{-- <x-forms.button wire:click='getIptables'>Get IPTABLES</x-forms.button> --}}
 </div>

resources/views/livewire/project/application/general.blade.php

@@ -27,11 +27,22 @@
                 @endif
             </div>
             <div class="flex items-end gap-2">
-                <x-forms.select id="application.build_pack" label="Build Pack" required>
-                    <option value="nixpacks">Nixpacks</option>
-                    <option value="dockerfile">Dockerfile</option>
-                    <option disabled value="compose">Compose</option>
-                </x-forms.select>
+                @if ($application->build_pack === 'dockerfile')
+                    <x-forms.select disabled id="application.build_pack" label="Build Pack" required>
+                        <option value="dockerfile">Dockerfile</option>
+                    </x-forms.select>
+                @elseif ($application->build_pack === 'dockercompose')
+                    <x-forms.select disabled id="application.build_pack" label="Build Pack" required>
+                        <option selected value="dockercompose">Docker Compose</option>
+                    </x-forms.select>
+                @else
+                    <x-forms.select id="application.build_pack" label="Build Pack" required>
+                        <option value="nixpacks">Nixpacks</option>
+                        <option value="dockerfile">Dockerfile</option>
+                        <option disabled value="dockercompose">Docker Compose</option>
+                    </x-forms.select>
+                @endif
+
             </div>
             @if ($application->settings->is_static)
                 <x-forms.select id="application.static_image" label="Static Image" required>
@@ -47,7 +58,6 @@
                     <x-forms.input placeholder="pnpm build" id="application.build_command" label="Build Command" />
                     <x-forms.input placeholder="pnpm start" id="application.start_command" label="Start Command" />
                 </div>
-
                 <div class="flex flex-col gap-2 xl:flex-row">
                     <x-forms.input placeholder="/" id="application.base_directory" label="Base Directory"
                         helper="Directory to use as root. Useful for monorepos. WIP" disabled />
@@ -62,6 +72,19 @@
             @if ($application->dockerfile)
                 <x-forms.textarea label="Dockerfile" id="application.dockerfile" rows="6"> </x-forms.textarea>
             @endif
+            @if ($application->dockercompose_raw)
+                <h3>Services </h3>
+                @foreach ($services as $serviceName => $service)
+                    <x-forms.input id="application.service_configurations.{{$serviceName}}.fqdn" label="{{ $serviceName }} FQDN">
+                    </x-forms.input>
+                @endforeach
+                {{-- <x-forms.textarea label="Docker Compose (Raw)" id="application.dockercompose_raw" rows="16">
+                </x-forms.textarea> --}}
+                {{-- <x-forms.textarea readonly helper="Added all required fields" label="Docker Compose (Coolified)"
+                    id="application.dockercompose" rows="6">
+                </x-forms.textarea> --}}
+
+            @endif
 
             <h3>Network</h3>
             <div class="flex flex-col gap-2 xl:flex-row">

resources/views/livewire/project/new/docker-compose.blade.php

@@ -0,0 +1,49 @@
+<div>
+    <h1>Create a new Application</h1>
+    <div class="pb-4">You can deploy complex application easily with Docker Compose.</div>
+    <form wire:submit.prevent="submit">
+        <div class="flex gap-2 pb-1">
+            <h2>Docker Compose</h2>
+
+
+            <x-forms.button type="submit">Save</x-forms.button>
+        </div>
+        <pre>
+# Application generated variables
+# You can use these variables in your docker-compose.yml file and Coolify will create default values or replace them with the values you set in the application creation form.
+# SERVICE_FQDN_*: FQDN coming from your application (https://coolify.io)
+# SERVICE_URL_*: URL coming from your application (coolify.io)
+# SERVICE_USER_*: Generated by your application, username (not encrypted)
+# SERVICE_PASSWORD_*: Generated by your application, password (encrypted)
+        </pre>
+        <x-forms.textarea rows="20" id="dockercompose"
+            placeholder='services:
+  ghost:
+    documentation: https://docs.ghost.org/docs/config
+    image: ghost:5
+    volumes:
+      - ghost-content-data:/var/lib/ghost/content
+    environment:
+      - url=$SERVICE_FQDN_GHOST
+      - database__client=mysql
+      - database__connection__host=mysql
+      - database__connection__user=$SERVICE_USER_MYSQL
+      - database__connection__password=$SERVICE_PASSWORD_MYSQL
+      - database__connection__database=${MYSQL_DATABASE-ghost}
+    ports:
+      - "2368"
+    depends_on:
+      - mysql
+  mysql:
+    documentation: https://hub.docker.com/_/mysql
+    image: mysql:8.0
+    volumes:
+      - ghost-mysql-data:/var/lib/mysql
+    environment:
+      - MYSQL_USER=${SERVICE_USER_MYSQL}
+      - MYSQL_PASSWORD=${SERVICE_PASSWORD_MYSQL}
+      - MYSQL_DATABASE=${MYSQL_DATABASE}
+      - MYSQL_ROOT_PASSWORD=${SERVICE_PASSWORD_MYSQL_ROOT}
+'></x-forms.textarea>
+    </form>
+</div>

resources/views/livewire/project/new/select.blade.php

@@ -52,6 +52,18 @@
                         </div>
                     </div>
                 </div>
+                @if (isDev())
+                    <div class="box group" wire:click="setType('dockercompose')">
+                        <div class="flex flex-col mx-6">
+                            <div class="group-hover:text-white">
+                                Based on a Docker Compose
+                            </div>
+                            <div class="text-xs group-hover:text-white">
+                                You can deploy complex application easily with Docker Compose.
+                            </div>
+                        </div>
+                    </div>
+                @endif
             </div>
             <h2 class="py-4">Databases</h2>
             <div class="grid justify-start grid-cols-1 gap-2 text-left xl:grid-cols-3">

resources/views/project/new.blade.php

@@ -7,6 +7,8 @@
         <livewire:project.new.github-private-repository-deploy-key :type="$type" />
     @elseif ($type === 'dockerfile')
         <livewire:project.new.simple-dockerfile :type="$type" />
+    @elseif ($type === 'dockercompose')
+        <livewire:project.new.docker-compose :type="$type" />
     @else
         <livewire:project.new.select />
     @endif