Skip to content

Commit b5d4db7

Browse files
MaxTheGeeekMaxTheGeeek
committed
FIX: edit box
1 parent 06b2b5a commit b5d4db7

File tree

2 files changed

+51
-43
lines changed

2 files changed

+51
-43
lines changed

‎launcher/public/output.css‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3031,6 +3031,10 @@ video {
30313031
row-gap: 0.5rem;
30323032
}
30333033

3034+
.gap-y-3{
3035+
row-gap: 0.75rem;
3036+
}
3037+
30343038
.gap-y-4{
30353039
row-gap: 1rem;
30363040
}
@@ -3043,10 +3047,6 @@ video {
30433047
row-gap: 1px;
30443048
}
30453049

3046-
.gap-y-3{
3047-
row-gap: 0.75rem;
3048-
}
3049-
30503050
.space-x-1 > :not([hidden]) ~ :not([hidden]){
30513051
--tw-space-x-reverse: 0;
30523052
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -4060,6 +4060,11 @@ video {
40604060
background-color: rgb(42 42 48 / var(--tw-bg-opacity, 1));
40614061
}
40624062

4063+
.bg-\[\#2a2a2c\]{
4064+
--tw-bg-opacity: 1;
4065+
background-color: rgb(42 42 44 / var(--tw-bg-opacity, 1));
4066+
}
4067+
40634068
.bg-\[\#2a2e30\]{
40644069
--tw-bg-opacity: 1;
40654070
background-color: rgb(42 46 48 / var(--tw-bg-opacity, 1));
@@ -4507,11 +4512,6 @@ video {
45074512
background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
45084513
}
45094514

4510-
.bg-\[\#2a2a2c\]{
4511-
--tw-bg-opacity: 1;
4512-
background-color: rgb(42 42 44 / var(--tw-bg-opacity, 1));
4513-
}
4514-
45154515
.bg-opacity-60{
45164516
--tw-bg-opacity: 0.6;
45174517
}
@@ -4547,18 +4547,18 @@ video {
45474547
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
45484548
}
45494549

4550-
.from-gray-200{
4551-
--tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
4552-
--tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
4553-
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
4554-
}
4555-
45564550
.from-\[\#336666\]{
45574551
--tw-gradient-from: #336666 var(--tw-gradient-from-position);
45584552
--tw-gradient-to: rgb(51 102 102 / 0) var(--tw-gradient-to-position);
45594553
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
45604554
}
45614555

4556+
.from-gray-200{
4557+
--tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
4558+
--tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
4559+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
4560+
}
4561+
45624562
.from-10\%{
45634563
--tw-gradient-from-position: 10%;
45644564
}
@@ -4581,14 +4581,14 @@ video {
45814581
--tw-gradient-to: #264744 var(--tw-gradient-to-position);
45824582
}
45834583

4584-
.to-gray-200{
4585-
--tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
4586-
}
4587-
45884584
.to-\[\#4a8080\]{
45894585
--tw-gradient-to: #4a8080 var(--tw-gradient-to-position);
45904586
}
45914587

4588+
.to-gray-200{
4589+
--tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
4590+
}
4591+
45924592
.to-95\%{
45934593
--tw-gradient-to-position: 95%;
45944594
}
@@ -6510,6 +6510,11 @@ html body {
65106510
--scrollbar-thumb-hover: #115e59 !important;
65116511
}
65126512

6513+
.focus\:border-\[\#336666\]:focus{
6514+
--tw-border-opacity: 1;
6515+
border-color: rgb(51 102 102 / var(--tw-border-opacity, 1));
6516+
}
6517+
65136518
.focus\:border-blue-500:focus{
65146519
--tw-border-opacity: 1;
65156520
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -6520,11 +6525,6 @@ html body {
65206525
border-color: rgb(20 184 166 / var(--tw-border-opacity, 1));
65216526
}
65226527

6523-
.focus\:border-\[\#336666\]:focus{
6524-
--tw-border-opacity: 1;
6525-
border-color: rgb(51 102 102 / var(--tw-border-opacity, 1));
6526-
}
6527-
65286528
.focus\:outline-none:focus{
65296529
outline: 2px solid transparent;
65306530
outline-offset: 2px;

‎launcher/src/components/UI/server-management/components/server-settings/ServerSettings.vue‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div
3-
class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full bg-[#1b1b1d] rounded-md grid grid-cols-12 grid-rows-12 p-2 space-y-2"
3+
class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full bg-[#1b1b1d] rounded-md grid grid-cols-12 grid-rows-12 p-2 space-y-2 divide-y divide-gray-500"
44
>
5-
<div class="col-start-1 col-span-full row-start-1 row-span-2 border-b border-gray-700 p-1 grid grid-cols-12 grid-rows-2">
5+
<div class="col-start-1 col-span-full row-start-1 row-span-2 p-1 grid grid-cols-12 grid-rows-2">
66
<div class="col-start-1 col-span-full row-start-1 row-span-1 text-xs font-bold uppercase text-[#336666]">
77
{{ t("serverSetting.nodeServerTtl") }}
88
</div>
@@ -27,13 +27,16 @@
2727
</label>
2828
</div>
2929
</div>
30-
<div
31-
v-if="isAutoUpdateEnabled"
32-
class="col-start-1 col-span-full row-start-3 row-span-8 border-b border-gray-700 p-1 grid grid-cols-12 grid-rows-7 gap-y-3"
33-
>
34-
<div class="col-start-1 col-span-full row-start-1 row-span-1 text-xs font-bold uppercase text-[#336666]">
30+
<div v-if="isAutoUpdateEnabled" class="col-start-1 col-span-full row-start-3 row-span-8 p-1 grid grid-cols-12 grid-rows-7 gap-y-3">
31+
<div class="col-start-1 col-span-10 row-start-1 row-span-1 text-xs font-bold uppercase text-[#336666]">
3532
Set your update time and date
3633
</div>
34+
<div
35+
class="col-start-12 col-span-1 row-start-1 row-span-1 flex items-center justify-center p-1 w-8 h-full bg-black rounded-md cursor-pointer hover:scale-110 active:scale-95 transition-all duration-300 ease-in-out"
36+
@click="activeEdit"
37+
>
38+
<img src="/img/icon/service-setting-icons/edit.png" alt="Edit" class="w-6 h-6" />
39+
</div>
3740

3841
<div v-if="inputMsg" class="col-start-1 col-span-full row-start-2 row-span-1 text-xs text-red-500 bg-[#2a2a2c] p-2 rounded-md">
3942
{{ inputMsg }}
@@ -48,6 +51,8 @@
4851
min="1"
4952
max="100"
5053
class="w-full h-7 bg-[#2a2a2c] text-white border border-gray-700 rounded-md p-2 text-sm focus:border-[#336666] focus:outline-none transition-colors"
54+
:class="!isEditActive ? 'cursor-not-allowed opacity-50' : ''"
55+
:disabled="!isEditActive"
5156
placeholder="1-100"
5257
/>
5358
</div>
@@ -63,6 +68,8 @@
6368
max="23"
6469
class="w-full h-7 bg-[#2a2a2c] text-white border border-gray-700 rounded-md p-2 text-sm focus:border-[#336666] focus:outline-none transition-colors"
6570
placeholder="0-23"
71+
:class="!isEditActive ? 'cursor-not-allowed opacity-50' : ''"
72+
:disabled="!isEditActive"
6673
/>
6774
</div>
6875
</div>
@@ -77,14 +84,17 @@
7784
max="59"
7885
class="w-full h-7 bg-[#2a2a2c] text-white border border-gray-700 rounded-md p-2 text-sm focus:border-[#336666] focus:outline-none transition-colors"
7986
placeholder="0-59"
87+
:class="!isEditActive ? 'cursor-not-allowed opacity-50' : ''"
88+
:disabled="!isEditActive"
8089
/>
8190
</div>
8291
</div>
8392

8493
<button
8594
@click="confirmChanges"
8695
class="col-start-1 col-span-full row-start-7 row-span-1 bg-gradient-to-r from-[#336666] to-[#4a8080] hover:from-[#4a8080] hover:to-[#336666] text-xs uppercase text-white font-medium py-1 px-4 rounded-md transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
87-
:disabled="!areInputsValid"
96+
:class="!isEditActive ? 'cursor-not-allowed opacity-50 pointer-events-none' : ''"
97+
:disabled="!areInputsValid || !isEditActive"
8898
>
8999
Confirm
90100
</button>
@@ -108,6 +118,7 @@ const hourInput = ref(3);
108118
const minuteInput = ref(0);
109119
const isChangesConfirmed = ref(false);
110120
const inputMsg = ref("");
121+
const isEditActive = ref(false);
111122
112123
const areInputsValid = computed(() => {
113124
if (intervalDayInput.value === null || hourInput.value === null || minuteInput.value === null) {
@@ -125,6 +136,10 @@ const onOff = computed(() => {
125136
return isAutoUpdateEnabled.value ? "absolute left-3" : "absolute right-3";
126137
});
127138
139+
const activeEdit = () => {
140+
isEditActive.value = !isEditActive.value;
141+
};
142+
128143
const turnOnOff = () => {
129144
isAutoUpdateEnabled.value = !isAutoUpdateEnabled.value;
130145
if (!isAutoUpdateEnabled.value) {
@@ -133,7 +148,7 @@ const turnOnOff = () => {
133148
}
134149
};
135150
136-
const confirmChanges = () => {
151+
const confirmChanges = async () => {
137152
if (!areInputsValid.value) {
138153
if (intervalDayInput.value < 1 || intervalDayInput.value > 100) {
139154
inputMsg.value = "Days must be between 1 and 100";
@@ -152,16 +167,18 @@ const confirmChanges = () => {
152167
153168
inputMsg.value = "";
154169
isChangesConfirmed.value = true;
170+
isEditActive.value = false;
155171
footerStore.cursorLocation = t("serverSetting.confirmed");
156172
setTimeout(() => {
157173
footerStore.cursorLocation = "";
158174
}, 2000);
175+
await updateSettings();
176+
updateConfigFile();
159177
};
160178
161179
const updateSettings = async () => {
162180
let settings = await ControlService.getStereumSettings();
163181
const unattended = settings.stereum.settings.updates.unattended;
164-
165182
unattended.install = isAutoUpdateEnabled.value;
166183
167184
if (isAutoUpdateEnabled.value && isChangesConfirmed.value) {
@@ -179,20 +196,11 @@ const updateConfigFile = async () => {
179196
config.autoUpdate = isAutoUpdateEnabled.value;
180197
await ControlService.writeConfig(config);
181198
const test = await ControlService.readConfig();
182-
console.log("test", test);
183-
console.log("Config file updated successfully");
184199
} catch (error) {
185200
console.error("Error updating config file:", error);
186201
}
187202
};
188203
189-
watch(isChangesConfirmed, (newVal) => {
190-
if (newVal) {
191-
updateSettings();
192-
updateConfigFile();
193-
}
194-
});
195-
196204
const getSettings = async () => {
197205
let settings = await ControlService.getStereumSettings();
198206
if (settings.stereum?.settings.updates.unattended.install) {

0 commit comments

Comments
 (0)