fix: monaco editor

fix: apex charts
This commit is contained in:
Andras Bacsai 2024-06-24 11:21:39 +02:00
parent f2c8a6bac5
commit 5201818f52
12 changed files with 492 additions and 582 deletions

View File

@ -12,26 +12,26 @@ class MonacoEditor extends Component
'configurationChanged' => '$refresh',
];
public $language;
public function __construct(
public ?string $id = null,
public ?string $name = null,
public ?string $type = 'text',
public ?string $monacoContent = null,
public ?string $value = null,
public ?string $label = null,
public ?string $placeholder = null,
public bool $required = false,
public bool $disabled = false,
public bool $readonly = false,
public bool $allowTab = false,
public bool $spellcheck = false,
public ?string $helper = null,
public bool $realtimeValidation = false,
public bool $allowToPeak = true,
public string $defaultClass = 'input scrollbar font-mono',
public string $defaultClassInput = 'input'
public ?string $id,
public ?string $name,
public ?string $type,
public ?string $monacoContent,
public ?string $value,
public ?string $label,
public ?string $placeholder,
public bool $required,
public bool $disabled,
public bool $readonly,
public bool $allowTab,
public bool $spellcheck,
public ?string $helper,
public bool $realtimeValidation,
public bool $allowToPeak,
public string $defaultClass,
public string $defaultClassInput,
public ?string $language
) {
//
}

View File

@ -59,15 +59,6 @@ public function loadContainers($server_id)
}
}
public function loadMetrics()
{
return;
$server = data_get($this->resource, 'destination.server');
if ($server->isFunctional()) {
$this->cpu = $server->getCpuMetrics();
}
}
public function mount()
{
try {
@ -122,7 +113,6 @@ public function mount()
}
$this->loadMetrics();
} catch (\Exception $e) {
return handleError($e, $this);
}

View File

@ -1,34 +0,0 @@
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class ApexCharts extends Component
{
public string $chartId;
public $seriesData;
public $categories;
public $seriesName;
public function __construct($chartId, $seriesData, $categories, $seriesName = '')
{
$this->chartId = $chartId;
$this->seriesData = $seriesData;
$this->categories = $categories;
$this->seriesName = $seriesName ?? 'Series';
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.apex-charts');
}
}

View File

@ -4,7 +4,6 @@
html,
body {
zoom: 0.95;
@apply h-full bg-neutral-50 text-neutral-800 dark:bg-base dark:text-neutral-400;
}
@ -12,6 +11,18 @@ body {
@apply text-sm antialiased scrollbar;
}
.apexcharts-tooltip {
@apply dark:text-white dark:border-coolgray-300 dark:bg-coolgray-200 shadow-none !important;
}
.apexcharts-tooltip-title {
@apply hidden !important;
}
.apexcharts-xaxistooltip {
@apply hidden !important;
}
.input,
.select {
@apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300;
@ -116,15 +127,19 @@ .alert-success {
.alert-error {
@apply flex items-center gap-2 text-error;
}
.tag {
@apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200;
}
.add-tag {
@apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 group-hover:dark:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
}
.dropdown-item {
@apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
}
.dropdown-item-no-padding {
@apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
}
@ -200,12 +215,15 @@ .kbd-custom {
.box {
@apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
}
.box-boarding {
@apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black;
}
.box-without-bg {
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem] border border-neutral-200 dark:border-black;
}
.box-without-bg-without-border {
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem];
}

View File

@ -1,7 +1,5 @@
<div wire:key="{{ rand() }}" class="coolify-monaco-editor flex-1">
<div
x-ref="monacoRef"
x-data="{
<div x-ref="monacoRef" x-data="{
monacoContent: @entangle($id),
monacoLanguage: '',
monacoPlaceholder: true,
@ -25,383 +23,382 @@
this.monacoPlaceholder = value === '';
},
monacoEditorFocus() {
document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId }}));
document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId } }));
},
monacoEditorAddLoaderScriptToHead() {
let script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/loader.min.js';
document.head.appendChild(script);
}
}"
x-modelable="monacoContent"
>
<div
x-cloak x-init="
if(typeof _amdLoaderGlobal == 'undefined') {
}" x-modelable="monacoContent">
<div x-cloak x-init="if (typeof _amdLoaderGlobal == 'undefined') {
monacoEditorAddLoaderScriptToHead();
}
checkTheme();
let monacoLoaderInterval = setInterval(() => {
if(typeof _amdLoaderGlobal !== 'undefined') {
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' }});
if (typeof _amdLoaderGlobal !== 'undefined') {
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' } });
let proxy = URL.createObjectURL(new Blob([` self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/base/worker/workerMain.min.js');`], { type: 'text/javascript' }));
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
require(['vs/editor/editor.main'], () => {
monaco.editor.defineTheme('blackboard', {
'base': 'vs-dark',
'inherit': true,
'rules': [
{
'background': '24292e',
'token': ''
},
{
'foreground': '959da5',
'token': 'comment'
},
{
'foreground': '959da5',
'token': 'punctuation.definition.comment'
},
{
'foreground': '959da5',
'token': 'string.comment'
},
{
'foreground': 'c8e1ff',
'token': 'constant'
},
{
'foreground': 'c8e1ff',
'token': 'entity.name.constant'
},
{
'foreground': 'c8e1ff',
'token': 'variable.other.constant'
},
{
'foreground': 'c8e1ff',
'token': 'variable.language'
},
{
'foreground': 'b392f0',
'token': 'entity'
},
{
'foreground': 'b392f0',
'token': 'entity.name'
},
{
'foreground': 'f6f8fa',
'token': 'variable.parameter.function'
},
{
'foreground': '7bcc72',
'token': 'entity.name.tag'
},
{
'foreground': 'ea4a5a',
'token': 'keyword'
},
{
'foreground': 'ea4a5a',
'token': 'storage'
},
{
'foreground': 'ea4a5a',
'token': 'storage.type'
},
{
'foreground': 'f6f8fa',
'token': 'storage.modifier.package'
},
{
'foreground': 'f6f8fa',
'token': 'storage.modifier.import'
},
{
'foreground': 'f6f8fa',
'token': 'storage.type.java'
},
{
'foreground': '79b8ff',
'token': 'string'
},
{
'foreground': '79b8ff',
'token': 'punctuation.definition.string'
},
{
'foreground': '79b8ff',
'token': 'string punctuation.section.embedded source'
},
{
'foreground': 'c8e1ff',
'token': 'support'
},
{
'foreground': 'c8e1ff',
'token': 'meta.property-name'
},
{
'foreground': 'fb8532',
'token': 'variable'
},
{
'foreground': 'f6f8fa',
'token': 'variable.other'
},
{
'foreground': 'd73a49',
'fontStyle': 'bold italic underline',
'token': 'invalid.broken'
},
{
'foreground': 'd73a49',
'fontStyle': 'bold italic underline',
'token': 'invalid.deprecated'
},
{
'foreground': 'fafbfc',
'background': 'd73a49',
'fontStyle': 'italic underline',
'token': 'invalid.illegal'
},
{
'foreground': 'fafbfc',
'background': 'd73a49',
'fontStyle': 'italic underline',
'token': 'carriage-return'
},
{
'foreground': 'd73a49',
'fontStyle': 'bold italic underline',
'token': 'invalid.unimplemented'
},
{
'foreground': 'd73a49',
'token': 'message.error'
},
{
'foreground': 'f6f8fa',
'token': 'string source'
},
{
'foreground': 'c8e1ff',
'token': 'string variable'
},
{
'foreground': '79b8ff',
'token': 'source.regexp'
},
{
'foreground': '79b8ff',
'token': 'string.regexp'
},
{
'foreground': '79b8ff',
'token': 'string.regexp.character-class'
},
{
'foreground': '79b8ff',
'token': 'string.regexp constant.character.escape'
},
{
'foreground': '79b8ff',
'token': 'string.regexp source.ruby.embedded'
},
{
'foreground': '79b8ff',
'token': 'string.regexp string.regexp.arbitrary-repitition'
},
{
'foreground': '7bcc72',
'fontStyle': 'bold',
'token': 'string.regexp constant.character.escape'
},
{
'foreground': 'c8e1ff',
'token': 'support.constant'
},
{
'foreground': 'c8e1ff',
'token': 'support.variable'
},
{
'foreground': 'c8e1ff',
'token': 'meta.module-reference'
},
{
'foreground': 'fb8532',
'token': 'markup.list'
},
{
'foreground': '0366d6',
'fontStyle': 'bold',
'token': 'markup.heading'
},
{
'foreground': '0366d6',
'fontStyle': 'bold',
'token': 'markup.heading entity.name'
},
{
'foreground': 'c8e1ff',
'token': 'markup.quote'
},
{
'foreground': 'f6f8fa',
'fontStyle': 'italic',
'token': 'markup.italic'
},
{
'foreground': 'f6f8fa',
'fontStyle': 'bold',
'token': 'markup.bold'
},
{
'foreground': 'c8e1ff',
'token': 'markup.raw'
},
{
'foreground': 'b31d28',
'background': 'ffeef0',
'token': 'markup.deleted'
},
{
'foreground': 'b31d28',
'background': 'ffeef0',
'token': 'meta.diff.header.from-file'
},
{
'foreground': 'b31d28',
'background': 'ffeef0',
'token': 'punctuation.definition.deleted'
},
{
'foreground': '176f2c',
'background': 'f0fff4',
'token': 'markup.inserted'
},
{
'foreground': '176f2c',
'background': 'f0fff4',
'token': 'meta.diff.header.to-file'
},
{
'foreground': '176f2c',
'background': 'f0fff4',
'token': 'punctuation.definition.inserted'
},
{
'foreground': 'b08800',
'background': 'fffdef',
'token': 'markup.changed'
},
{
'foreground': 'b08800',
'background': 'fffdef',
'token': 'punctuation.definition.changed'
},
{
'foreground': '2f363d',
'background': '959da5',
'token': 'markup.ignored'
},
{
'foreground': '2f363d',
'background': '959da5',
'token': 'markup.untracked'
},
{
'foreground': 'b392f0',
'fontStyle': 'bold',
'token': 'meta.diff.range'
},
{
'foreground': 'c8e1ff',
'token': 'meta.diff.header'
},
{
'foreground': '0366d6',
'fontStyle': 'bold',
'token': 'meta.separator'
},
{
'foreground': '0366d6',
'token': 'meta.output'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.tag'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.curly'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.round'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.square'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.angle'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.quote'
},
{
'foreground': 'd73a49',
'token': 'brackethighlighter.unmatched'
},
{
'foreground': 'd73a49',
'token': 'sublimelinter.mark.error'
},
{
'foreground': 'fb8532',
'token': 'sublimelinter.mark.warning'
},
{
'foreground': '6a737d',
'token': 'sublimelinter.gutter-mark'
},
{
'foreground': '79b8ff',
'fontStyle': 'underline',
'token': 'constant.other.reference.link'
},
{
'foreground': '79b8ff',
'fontStyle': 'underline',
'token': 'string.other.link'
}
],
'colors': {
'editor.foreground': '#f6f8fa',
'editor.background': '#24292e',
'editor.selectionBackground': '#4c2889',
'editor.inactiveSelectionBackground': '#444d56',
'editor.lineHighlightBackground': '#444d56',
'editorCursor.foreground': '#ffffff',
'editorWhitespace.foreground': '#6a737d',
'editorIndentGuide.background': '#6a737d',
'editorIndentGuide.activeBackground': '#f6f8fa',
'editor.selectionHighlightBorder': '#444d56'
'base': 'vs-dark',
'inherit': true,
'rules': [{
'background': editorBackground,
'token': ''
},
{
'foreground': '959da5',
'token': 'comment'
},
{
'foreground': '959da5',
'token': 'punctuation.definition.comment'
},
{
'foreground': '959da5',
'token': 'string.comment'
},
{
'foreground': 'c8e1ff',
'token': 'constant'
},
{
'foreground': 'c8e1ff',
'token': 'entity.name.constant'
},
{
'foreground': 'c8e1ff',
'token': 'variable.other.constant'
},
{
'foreground': 'c8e1ff',
'token': 'variable.language'
},
{
'foreground': 'b392f0',
'token': 'entity'
},
{
'foreground': 'b392f0',
'token': 'entity.name'
},
{
'foreground': 'f6f8fa',
'token': 'variable.parameter.function'
},
{
'foreground': '7bcc72',
'token': 'entity.name.tag'
},
{
'foreground': 'ea4a5a',
'token': 'keyword'
},
{
'foreground': 'ea4a5a',
'token': 'storage'
},
{
'foreground': 'ea4a5a',
'token': 'storage.type'
},
{
'foreground': 'f6f8fa',
'token': 'storage.modifier.package'
},
{
'foreground': 'f6f8fa',
'token': 'storage.modifier.import'
},
{
'foreground': 'f6f8fa',
'token': 'storage.type.java'
},
{
'foreground': '79b8ff',
'token': 'string'
},
{
'foreground': '79b8ff',
'token': 'punctuation.definition.string'
},
{
'foreground': '79b8ff',
'token': 'string punctuation.section.embedded source'
},
{
'foreground': 'c8e1ff',
'token': 'support'
},
{
'foreground': 'c8e1ff',
'token': 'meta.property-name'
},
{
'foreground': 'fb8532',
'token': 'variable'
},
{
'foreground': 'f6f8fa',
'token': 'variable.other'
},
{
'foreground': 'd73a49',
'fontStyle': 'bold italic underline',
'token': 'invalid.broken'
},
{
'foreground': 'd73a49',
'fontStyle': 'bold italic underline',
'token': 'invalid.deprecated'
},
{
'foreground': 'fafbfc',
'background': 'd73a49',
'fontStyle': 'italic underline',
'token': 'invalid.illegal'
},
{
'foreground': 'fafbfc',
'background': 'd73a49',
'fontStyle': 'italic underline',
'token': 'carriage-return'
},
{
'foreground': 'd73a49',
'fontStyle': 'bold italic underline',
'token': 'invalid.unimplemented'
},
{
'foreground': 'd73a49',
'token': 'message.error'
},
{
'foreground': 'f6f8fa',
'token': 'string source'
},
{
'foreground': 'c8e1ff',
'token': 'string variable'
},
{
'foreground': '79b8ff',
'token': 'source.regexp'
},
{
'foreground': '79b8ff',
'token': 'string.regexp'
},
{
'foreground': '79b8ff',
'token': 'string.regexp.character-class'
},
{
'foreground': '79b8ff',
'token': 'string.regexp constant.character.escape'
},
{
'foreground': '79b8ff',
'token': 'string.regexp source.ruby.embedded'
},
{
'foreground': '79b8ff',
'token': 'string.regexp string.regexp.arbitrary-repitition'
},
{
'foreground': '7bcc72',
'fontStyle': 'bold',
'token': 'string.regexp constant.character.escape'
},
{
'foreground': 'c8e1ff',
'token': 'support.constant'
},
{
'foreground': 'c8e1ff',
'token': 'support.variable'
},
{
'foreground': 'c8e1ff',
'token': 'meta.module-reference'
},
{
'foreground': 'fb8532',
'token': 'markup.list'
},
{
'foreground': '0366d6',
'fontStyle': 'bold',
'token': 'markup.heading'
},
{
'foreground': '0366d6',
'fontStyle': 'bold',
'token': 'markup.heading entity.name'
},
{
'foreground': 'c8e1ff',
'token': 'markup.quote'
},
{
'foreground': 'f6f8fa',
'fontStyle': 'italic',
'token': 'markup.italic'
},
{
'foreground': 'f6f8fa',
'fontStyle': 'bold',
'token': 'markup.bold'
},
{
'foreground': 'c8e1ff',
'token': 'markup.raw'
},
{
'foreground': 'b31d28',
'background': 'ffeef0',
'token': 'markup.deleted'
},
{
'foreground': 'b31d28',
'background': 'ffeef0',
'token': 'meta.diff.header.from-file'
},
{
'foreground': 'b31d28',
'background': 'ffeef0',
'token': 'punctuation.definition.deleted'
},
{
'foreground': '176f2c',
'background': 'f0fff4',
'token': 'markup.inserted'
},
{
'foreground': '176f2c',
'background': 'f0fff4',
'token': 'meta.diff.header.to-file'
},
{
'foreground': '176f2c',
'background': 'f0fff4',
'token': 'punctuation.definition.inserted'
},
{
'foreground': 'b08800',
'background': 'fffdef',
'token': 'markup.changed'
},
{
'foreground': 'b08800',
'background': 'fffdef',
'token': 'punctuation.definition.changed'
},
{
'foreground': '2f363d',
'background': '959da5',
'token': 'markup.ignored'
},
{
'foreground': '2f363d',
'background': '959da5',
'token': 'markup.untracked'
},
{
'foreground': 'b392f0',
'fontStyle': 'bold',
'token': 'meta.diff.range'
},
{
'foreground': 'c8e1ff',
'token': 'meta.diff.header'
},
{
'foreground': '0366d6',
'fontStyle': 'bold',
'token': 'meta.separator'
},
{
'foreground': '0366d6',
'token': 'meta.output'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.tag'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.curly'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.round'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.square'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.angle'
},
{
'foreground': 'ffeef0',
'token': 'brackethighlighter.quote'
},
{
'foreground': 'd73a49',
'token': 'brackethighlighter.unmatched'
},
{
'foreground': 'd73a49',
'token': 'sublimelinter.mark.error'
},
{
'foreground': 'fb8532',
'token': 'sublimelinter.mark.warning'
},
{
'foreground': '6a737d',
'token': 'sublimelinter.gutter-mark'
},
{
'foreground': '79b8ff',
'fontStyle': 'underline',
'token': 'constant.other.reference.link'
},
{
'foreground': '79b8ff',
'fontStyle': 'underline',
'token': 'string.other.link'
}
],
'colors': {
'editor.foreground': '#f6f8fa',
'editor.background': editorBackground,
'editor.selectionBackground': '#4c2889',
'editor.inactiveSelectionBackground': '#444d56',
'editor.lineHighlightBackground': '#444d56',
'editorCursor.foreground': '#ffffff',
'editorWhitespace.foreground': '#6a737d',
'editorIndentGuide.background': '#6a737d',
'editorIndentGuide.activeBackground': '#f6f8fa',
'editor.selectionHighlightBorder': '#444d56'
}
});
const editor = monaco.editor.create($refs.monacoEditorElement, {
value: monacoContent,
theme: 'blackboard',
theme: editorTheme,
wordWrap: 'on',
readOnly: '{{ $readonly ?? false }}',
minimap: { enabled: false },
fontSize: monacoFontSize,
lineNumbersMinChars: 3,
automaticLayout: true,
language: '{{$language}}'
language: '{{ $language }}'
});
@ -427,25 +424,14 @@
monacoLoader = false;
}
}, 5);
"
:id="monacoId">
}, 5);" :id="monacoId">
</div>
<div x-show="monacoLoader"
class="absolute inset-0 z-20 flex items-center justify-center w-full h-full duration-1000 ease-out">
<svg class="w-4 h-4 text-gray-400 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<div x-show="!monacoLoader" class="relative z-10 w-full h-full">
<div class="relative z-10 w-full h-full">
<div x-ref="monacoEditorElement" class="w-full h-96 text-md"></div>
<div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
:style="'font-size: ' + monacoFontSize"
class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0"
x-text="monacoPlaceholderText"></div>
:style="'font-size: ' + monacoFontSize"
class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0"
x-text="monacoPlaceholderText"></div>
</div>
</div>
</div>

View File

@ -24,57 +24,53 @@ function handleKeydown(e) {
@endif
</label>
@endif
@if($useMonacoEditor)
<x-forms.monaco-editor
id="{{ $id }}"
language="{{$monacoEditorLanguage }}"
name="{{ $name }}"
name="{{ $id }}"
model="{{ $value ?? $id }}"
wire:model="{{ $value ?? $id }}"
label="dockerfile"
/>
@if ($useMonacoEditor)
<x-forms.monaco-editor id="{{ $id }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
name="{{ $id }}" model="{{ $value ?? $id }}" wire:model="{{ $value ?? $id }}"
readonly="{{ $readonly }}" label="dockerfile" />
@else
@if ($type === 'password')
<div class="relative" x-data="{ type: 'password' }">
@if ($allowToPeak)
<div x-on:click="changePasswordFieldType"
class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer hover:dark:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
</svg>
</div>
@endif
<input x-cloak x-show="type === 'password'" value="{{ $value }}"
{{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
@if ($id !== 'null') wire:model={{ $id }} @endif
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
aria-placeholder="{{ $attributes->get('placeholder') }}">
<textarea x-cloak x-show="type !== 'password'" placeholder="{{ $placeholder }}"
{{ $attributes->merge(['class' => $defaultClass]) }}
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
@if ($type === 'password')
<div class="relative" x-data="{ type: 'password' }">
@if ($allowToPeak)
<div x-on:click="changePasswordFieldType"
class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer hover:dark:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path
d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
</svg>
</div>
@endif
<input x-cloak x-show="type === 'password'" value="{{ $value }}"
{{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
@if ($id !== 'null') wire:model={{ $id }} @endif
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
aria-placeholder="{{ $attributes->get('placeholder') }}">
<textarea x-cloak x-show="type !== 'password'" placeholder="{{ $placeholder }}"
{{ $attributes->merge(['class' => $defaultClass]) }}
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
@else
wire:model={{ $value ?? $id }}
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
name="{{ $name }}" name={{ $id }}></textarea>
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
name="{{ $name }}" name={{ $id }}></textarea>
</div>
@else
<textarea {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}" {{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
</div>
@else
<textarea {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}"
{{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
@else
wire:model={{ $value ?? $id }}
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
name="{{ $name }}" name={{ $id }}></textarea>
@endif
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
name="{{ $name }}" name={{ $id }}></textarea>
@endif
@endif
@error($id)
<label class="label">

View File

@ -63,15 +63,21 @@
let theme = localStorage.theme
let baseColor = '#FCD452'
let textColor = '#ffffff'
let editorBackground = '#181818'
let editorTheme = 'blackboard'
function checkTheme() {
theme = localStorage.theme
if (theme == 'dark') {
baseColor = '#FCD452'
textColor = '#ffffff'
editorBackground = '#181818'
editorTheme = 'blackboard'
} else {
baseColor = 'black'
textColor = '#000000'
editorBackground = '#ffffff'
editorTheme = null
}
}
@auth

View File

@ -73,7 +73,7 @@
<option value="www">Redirect to www.</option>
<option value="non-www">Redirect to non-www.</option>
</x-forms.select>
<x-modal-confirmation action="set_redirect" >
<x-modal-confirmation action="set_redirect">
<x-slot:customButton>
<div class="w-[7.2rem]">Set Direction</div>
</x-slot:customButton>
@ -231,10 +231,12 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
@if ($application->settings->is_raw_compose_deployment_enabled)
<x-forms.textarea rows="10" readonly id="application.docker_compose_raw"
label="Docker Compose Content (applicationId: {{ $application->id }})"
helper="You need to modify the docker compose file." />
helper="You need to modify the docker compose file." monacoEditorLanguage="yaml"
useMonacoEditor />
@else
<x-forms.textarea rows="10" readonly id="application.docker_compose"
label="Docker Compose Content" helper="You need to modify the docker compose file." />
label="Docker Compose Content" helper="You need to modify the docker compose file."
monacoEditorLanguage="yaml" useMonacoEditor />
@endif
<div class="w-72">
<x-forms.checkbox label="Escape special characters in labels?"
@ -246,7 +248,8 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
@endif
@if ($application->dockerfile)
<x-forms.textarea label="Dockerfile" id="application.dockerfile" monacoEditorLanguage="dockerfile" useMonacoEditor="{{true}}" rows="6"> </x-forms.textarea>
<x-forms.textarea label="Dockerfile" id="application.dockerfile" monacoEditorLanguage="dockerfile"
useMonacoEditor rows="6"> </x-forms.textarea>
@endif
@if ($application->build_pack !== 'dockercompose')
<h3 class="pt-8">Network</h3>
@ -263,7 +266,9 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
helper="A comma separated list of ports you would like to map to the host system. Useful when you do not want to use domains.<br><br><span class='inline-block font-bold dark:text-warning'>Example:</span><br>3000:3000,3002:3002<br><br>Rolling update is not supported if you have a port mapped to the host." />
@endif
</div>
<x-forms.textarea label="Container Labels" rows="15" id="customLabels"></x-forms.textarea>
<x-forms.textarea label="Container Labels" rows="15" id="customLabels"
monacoEditorLanguage="ini" useMonacoEditor></x-forms.textarea>
<div class="w-72">
<x-forms.checkbox label="Escape special characters in labels?"
helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."

View File

@ -6,7 +6,8 @@
<h2>Docker Compose</h2>
<x-forms.button type="submit">Save</x-forms.button>
</div>
<x-forms.textarea useMonacoEditor="{{true}}" monacoEditorLanguage="yaml" label="Docker Compose file" rows="20" id="dockerComposeRaw"
<x-forms.textarea useMonacoEditor monacoEditorLanguage="yaml" label="Docker Compose file" rows="20"
id="dockerComposeRaw"
placeholder='services:
ghost:
documentation: https://ghost.org/docs/config

View File

@ -60,78 +60,4 @@
@endforelse
</div>
@endif
{{-- <section x-data="apex_app" class="container p-5 mx-auto my-20 bg-white drop-shadow-xl rounded-xl">
<div class="w-full" x-ref="chart"></div>
</section>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("apex_app", () => ({
data: @js($cpu),
init() {
let chart = new ApexCharts(this.$refs.chart, this.options);
chart.render();
this.$watch("data", () => {
chart.updateOptions(this.options);
});
},
get options() {
return {
colors: [function({
value,
seriesIndex,
w
}) {
if (value < 55) {
return '#7E36AF'
} else {
return '#D9534F'
}
}, function({
value,
seriesIndex,
w
}) {
if (value < 111) {
return '#7E36AF'
} else {
return '#D9534F'
}
}],
xaxis: {
type: 'datetime'
},
dataLabels: {
enabled: false
},
series: [{
name: "Series name",
data: this.data
}],
tooltip: {
enabled: true
},
chart: {
stroke: {
curve: 'smooth',
},
height: 500,
width: "100%",
type: "line",
toolbar: {
show: true
},
animations: {
initialAnimation: {
enabled: false
}
}
},
};
}
}));
});
</script> --}}
</div>

View File

@ -40,15 +40,15 @@ class="pt-5">
id: '{!! $chartId !!}-cpu',
type: 'area',
toolbar: {
show: false,
show: true,
tools: {
download: true,
download: false,
selection: false,
zoom: false,
zoom: true,
zoomin: false,
zoomout: false,
pan: false,
reset: false
reset: true
},
},
animations: {
@ -77,6 +77,7 @@ class="pt-5">
type: 'datetime',
},
series: [{
name: "CPU %",
data: []
}],
noData: {
@ -86,7 +87,10 @@ class="pt-5">
}
},
tooltip: {
enabled: false,
enabled: true,
marker: {
show: false,
}
},
legend: {
show: false
@ -145,15 +149,15 @@ class="pt-5">
id: '{!! $chartId !!}-memory',
type: 'area',
toolbar: {
show: false,
show: true,
tools: {
download: true,
download: false,
selection: false,
zoom: false,
zoom: true,
zoomin: false,
zoomout: false,
pan: false,
reset: false
reset: true
},
},
animations: {
@ -188,6 +192,7 @@ class="pt-5">
}
},
series: [{
name: "Memory (MB)",
data: []
}],
noData: {
@ -197,7 +202,10 @@ class="pt-5">
}
},
tooltip: {
enabled: false,
enabled: true,
marker: {
show: false,
}
},
legend: {
show: false

View File

@ -22,15 +22,15 @@
id: '{!! $chartId !!}-cpu',
type: 'area',
toolbar: {
show: false,
show: true,
tools: {
download: true,
download: false,
selection: false,
zoom: false,
zoom: true,
zoomin: false,
zoomout: false,
pan: false,
reset: false
reset: true
},
},
animations: {
@ -59,6 +59,7 @@
type: 'datetime',
},
series: [{
name: 'CPU %',
data: []
}],
noData: {
@ -68,7 +69,10 @@
}
},
tooltip: {
enabled: false,
enabled: true,
marker: {
show: false,
}
},
legend: {
show: false
@ -129,15 +133,15 @@
id: '{!! $chartId !!}-memory',
type: 'area',
toolbar: {
show: false,
show: true,
tools: {
download: true,
download: false,
selection: false,
zoom: false,
zoom: true,
zoomin: false,
zoomout: false,
pan: false,
reset: false
reset: true
},
},
animations: {
@ -172,6 +176,7 @@
}
},
series: [{
name: "Memory (MB)",
data: []
}],
noData: {
@ -181,7 +186,10 @@
}
},
tooltip: {
enabled: false,
enabled: true,
marker: {
show: false,
}
},
legend: {
show: false