2
2
x-init =" $wire.checkUpdate" x-data =" upgradeModal" >
3
3
@if ($isUpgradeAvailable )
4
4
<div :class =" { 'z-40': modalOpen }" class =" relative w-auto h-auto" >
5
- <button class =" menu-item" @click =" modalOpen=true" >
6
- @if ($showProgress )
7
- <svg xmlns =" http://www.w3.org/2000/svg"
8
- class =" w-6 h-6 text-pink-500 transition-colors hover:text-pink-300 lds-heart" viewBox =" 0 0 24 24"
9
- stroke-width =" 1.5" stroke =" currentColor" fill =" none" stroke-linecap =" round"
10
- stroke-linejoin =" round" >
11
- <path stroke =" none" d =" M0 0h24v24H0z" fill =" none" />
12
- <path d =" M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
13
- </svg >
14
- In progress
15
- @else
16
- <svg xmlns =" http://www.w3.org/2000/svg"
17
- class =" w-6 h-6 text-pink-500 transition-colors hover:text-pink-300" viewBox =" 0 0 24 24"
18
- stroke-width =" 1.5" stroke =" currentColor" fill =" none" stroke-linecap =" round"
19
- stroke-linejoin =" round" >
20
- <path stroke =" none" d =" M0 0h24v24H0z" fill =" none" />
21
- <path
22
- d =" M9 12h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v3h-6v-3z" />
23
- <path d =" M9 21h6" />
24
- <path d =" M9 18h6" />
25
- </svg >
26
- Upgrade
27
- @endif
5
+ <button class =" menu-item" @click =" modalOpen=true" x-show =" showProgress" >
6
+ <svg xmlns =" http://www.w3.org/2000/svg"
7
+ class =" w-6 h-6 text-pink-500 transition-colors hover:text-pink-300 lds-heart" viewBox =" 0 0 24 24"
8
+ stroke-width =" 1.5" stroke =" currentColor" fill =" none" stroke-linecap =" round"
9
+ stroke-linejoin =" round" >
10
+ <path stroke =" none" d =" M0 0h24v24H0z" fill =" none" />
11
+ <path d =" M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
12
+ </svg >
13
+ In progress
14
+ </button >
15
+ <button class =" menu-item" @click =" modalOpen=true" x-show =" !showProgress" >
16
+ <svg xmlns =" http://www.w3.org/2000/svg"
17
+ class =" w-6 h-6 text-pink-500 transition-colors hover:text-pink-300" viewBox =" 0 0 24 24"
18
+ stroke-width =" 1.5" stroke =" currentColor" fill =" none" stroke-linecap =" round"
19
+ stroke-linejoin =" round" >
20
+ <path stroke =" none" d =" M0 0h24v24H0z" fill =" none" />
21
+ <path
22
+ d =" M9 12h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v3h-6v-3z" />
23
+ <path d =" M9 21h6" />
24
+ <path d =" M9 18h6" />
25
+ </svg >
26
+ Upgrade
28
27
</button >
29
-
30
28
<template x-teleport =" body" >
31
29
<div x-show =" modalOpen"
32
30
class =" fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen"
@@ -45,15 +43,13 @@ class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"><
45
43
class =" relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300" >
46
44
<div class =" flex items-center justify-between pb-3" >
47
45
<h3 class =" text-lg font-semibold" >Upgrade confirmation</h3 >
48
- @if (! $showProgress )
49
- <button @click =" modalOpen=false"
50
- class =" absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50" >
51
- <svg class =" w-5 h-5" xmlns =" http://www.w3.org/2000/svg" fill =" none"
52
- viewBox =" 0 0 24 24" stroke-width =" 1.5" stroke =" currentColor" >
53
- <path stroke-linecap =" round" stroke-linejoin =" round" d =" M6 18L18 6M6 6l12 12" />
54
- </svg >
55
- </button >
56
- @endif
46
+ <button x-show =" !showProgress" @click =" modalOpen=false"
47
+ class =" absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50" >
48
+ <svg class =" w-5 h-5" xmlns =" http://www.w3.org/2000/svg" fill =" none"
49
+ viewBox =" 0 0 24 24" stroke-width =" 1.5" stroke =" currentColor" >
50
+ <path stroke-linecap =" round" stroke-linejoin =" round" d =" M6 18L18 6M6 6l12 12" />
51
+ </svg >
52
+ </button >
57
53
</div >
58
54
<div class =" relative w-auto pb-8" >
59
55
<p >Are you sure you would like to upgrade your instance to {{ $latestVersion } } ?</p >
@@ -65,22 +61,18 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5
65
61
<a class =" font-bold underline dark:text-white" href =" https://coolify.io/docs/upgrade"
66
62
target =" _blank" >guide</a > on what to do.
67
63
</p >
68
- @if ($showProgress )
69
- <div class =" flex flex-col pt-4" >
70
- <h2 >Progress <x-loading /></h2 >
71
- <div x-html =" currentStatus" ></div >
72
- </div >
73
- @endif
64
+ <div class =" flex flex-col pt-4" x-show =" showProgress" >
65
+ <h2 >Progress <x-loading /></h2 >
66
+ <div x-html =" currentStatus" ></div >
67
+ </div >
74
68
</div >
75
- <div class =" flex gap-4" >
76
- @if (! $showProgress )
77
- <x-forms .button @click =" modalOpen=false"
78
- class =" w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300" >Cancel
79
- </x-forms .button >
80
- <div class =" flex-1" ></div >
81
- <x-forms .button @click =" confirmed" class =" w-24" isHighlighted type =" button" >Continue
82
- </x-forms .button >
83
- @endif
69
+ <div class =" flex gap-4" x-show =" !showProgress" >
70
+ <x-forms .button @click =" modalOpen=false"
71
+ class =" w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300" >Cancel
72
+ </x-forms .button >
73
+ <div class =" flex-1" ></div >
74
+ <x-forms .button @click =" confirmed" class =" w-24" isHighlighted type =" button" >Continue
75
+ </x-forms .button >
84
76
</div >
85
77
</div >
86
78
</div >
@@ -93,12 +85,12 @@ class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">Cancel
93
85
document .addEventListener (' alpine:init' , () => {
94
86
Alpine .data (' upgradeModal' , () => ({
95
87
modalOpen: false ,
96
- showProgress: @js ( $showProgress ) ,
88
+ showProgress: false ,
97
89
currentStatus: ' ' ,
98
90
confirmed () {
91
+ this .showProgress = true ;
99
92
this .$wire .$call (' upgrade' )
100
93
this .upgrade ();
101
- this .$wire .showProgress = true ;
102
94
window .addEventListener (' beforeunload' , (event ) => {
103
95
event .preventDefault ();
104
96
event .returnValue = ' ' ;
0 commit comments