Skip to content

Commit f96509c

Browse files
xdeqxdeq
committed
fix lumina modal
1 parent 7974c24 commit f96509c

3 files changed

Lines changed: 119 additions & 145 deletions

File tree

‎components/modals/LightNodeModal.vue‎

Lines changed: 10 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -154,50 +154,13 @@ const handleOpenSettings = () => {
154154
*/
155155
const showDetails = ref(false)
156156
const showLogs = ref(false)
157-
const showBootnodes = ref(false)
158157
const showSquare = ref(false)
159158
160159
/**
161160
* Bootnodes
162161
*/
163-
const bootnodes = ref([])
164-
const rawBootnodes = ref([])
165162
const config = ref()
166163
167-
const isBootnodesChanged = ref(false)
168-
const handleRevertBootnodesChanges = () => {
169-
isBootnodesChanged.value = false
170-
171-
bootnodes.value = rawBootnodes.value
172-
bootnodesTerm.value = bootnodes.value.join("\n")
173-
174-
setTimeout(() => resizeTextarea(), 0)
175-
}
176-
177-
const hasWrongBootnode = ref(false)
178-
const bootnodesTerm = ref()
179-
180-
const textareaEl = ref()
181-
const resizeTextarea = () => {
182-
textareaEl.value.style.height = "auto"
183-
textareaEl.value.style.height = 12 + textareaEl.value.scrollHeight + "px"
184-
}
185-
const handleTextareaKeyup = (e) => {
186-
e.stopPropagation()
187-
188-
resizeTextarea()
189-
190-
const newBootnodes = bootnodesTerm.value.split("\n").filter((b) => b.length)
191-
newBootnodes.forEach((b) => {
192-
hasWrongBootnode.value = !b.startsWith("/") || b.split("/").filter((b) => b.length).length !== 4
193-
})
194-
195-
config.value.bootnodes = newBootnodes
196-
bootnodes.value = config.value.bootnodes
197-
198-
if (!isBootnodesChanged.value) isBootnodesChanged.value = true
199-
}
200-
201164
/**
202165
* Timing
203166
*/
@@ -257,19 +220,14 @@ const getEventsLogIconColor = () => {
257220
258221
const initConfig = () => {
259222
config.value = NodeConfig.default(selectedNetwork.value)
260-
rawBootnodes.value = config.value.bootnodes
261-
bootnodes.value = config.value.bootnodes
262-
263-
bootnodesTerm.value = bootnodes.value.join("\n")
223+
nodeStore.rawBootnodes = config.value.bootnodes
224+
nodeStore.bootnodes = config.value.bootnodes
264225
}
265226
266227
watch(
267-
() => showBootnodes.value,
268-
async () => {
269-
if (!showBootnodes.value) return
270-
271-
await nextTick()
272-
resizeTextarea()
228+
() => nodeStore.bootnodes,
229+
() => {
230+
config.value.bootnodes = nodeStore.bootnodes
273231
},
274232
)
275233
@@ -503,20 +461,7 @@ watch(
503461
</Text>
504462
</Flex>
505463

506-
<Flex align="center" gap="6">
507-
<Tooltip position="end">
508-
<Icon name="info" size="14" color="secondary" />
509-
510-
<template #content>
511-
<Flex align="end" direction="column" gap="6">
512-
<Text>Light node tooltip (WIP)</Text>
513-
<Text color="tertiary"></Text>
514-
</Flex>
515-
</template>
516-
</Tooltip>
517-
518-
<Icon @click="handleOpenSettings" name="settings" size="14" color="secondary" style="cursor: pointer" />
519-
</Flex>
464+
<Icon @click="handleOpenSettings" name="settings" size="14" color="secondary" style="cursor: pointer" />
520465
</Flex>
521466

522467
<Flex direction="column" gap="8">
@@ -588,7 +533,7 @@ watch(
588533
<Flex direction="column" gap="6">
589534
<Text size="12" weight="600" color="primary">Caution about running a node on a mobile</Text>
590535
<Text size="12" weight="500" color="tertiary" height="140">
591-
Running a light node on mobile devices can affect the performance of your device and cause your phone to
536+
Running a light node on mobile devices may affect the performance of your device and cause your phone to
592537
discharge quickly. Therefore, a node can be started with the charger connected.
593538
</Text>
594539
</Flex>
@@ -702,58 +647,6 @@ watch(
702647
</Flex>
703648
</Flex>
704649

705-
<Flex direction="column" gap="4" :class="$style.secondary_card">
706-
<Flex @click="showBootnodes = !showBootnodes" align="center" justify="between" :class="$style.header">
707-
<Text size="12" weight="600" color="secondary">
708-
Bootnodes&nbsp; <Text color="tertiary">{{ bootnodes.length }}</Text>
709-
</Text>
710-
<Icon
711-
name="chevron"
712-
size="12"
713-
color="secondary"
714-
:style="{ transform: `rotate(${showBootnodes ? '180deg' : '0'})` }"
715-
/>
716-
</Flex>
717-
718-
<Flex v-if="showBootnodes" direction="column" gap="12" :class="$style.content">
719-
<textarea
720-
ref="textareaEl"
721-
v-model="bootnodesTerm"
722-
@keyup="handleTextareaKeyup"
723-
autocomplete="false"
724-
spellcheck="false"
725-
:class="[$style.bootnodes_container, status === StatusMap.Started && $style.disabled]"
726-
>
727-
</textarea>
728-
729-
<Flex align="center" justify="between" wide>
730-
<Flex align="center" gap="4">
731-
<Icon name="info" size="12" :color="hasWrongBootnode ? 'yellow' : 'tertiary'" />
732-
733-
<Text v-if="!hasWrongBootnode" size="12" weight="600" color="tertiary">
734-
Each address on a new line.
735-
</Text>
736-
<Text v-else size="12" weight="600" color="yellow"> Specified bootnodes contains an error </Text>
737-
738-
<Text v-if="status === StatusMap.Started" size="12" weight="600" color="tertiary">
739-
Editing disabled.
740-
</Text>
741-
</Flex>
742-
743-
<Flex
744-
v-if="isBootnodesChanged"
745-
@click="handleRevertBootnodesChanges"
746-
align="center"
747-
gap="4"
748-
style="cursor: pointer"
749-
>
750-
<Icon name="revert" size="12" color="primary" />
751-
<Text size="12" weight="600" color="secondary"> Revert to default</Text>
752-
</Flex>
753-
</Flex>
754-
</Flex>
755-
</Flex>
756-
757650
<Flex direction="column" gap="4" :class="$style.secondary_card">
758651
<Flex
759652
@click="showSquare = !showSquare"
@@ -762,7 +655,8 @@ watch(
762655
:class="[$style.header, status !== StatusMap.Started && $style.disabled]"
763656
>
764657
<Text size="12" weight="600" color="secondary">
765-
Square Visualization <Text color="tertiary">for {{ comma(frontHead) }}</Text>
658+
Square Visualization
659+
<Text v-if="status === StatusMap.Started" color="tertiary">for {{ comma(frontHead) }}</Text>
766660
</Text>
767661

768662
<Icon
@@ -793,7 +687,7 @@ watch(
793687
type="secondary"
794688
size="small"
795689
wide
796-
:disabled="[StatusMap.Starting, StatusMap.Started].includes(status) || !bootnodes.length"
690+
:disabled="[StatusMap.Starting, StatusMap.Started].includes(status) || !nodeStore.bootnodes.length"
797691
>
798692
<Icon v-if="status === StatusMap.Started" name="zap-circle" size="12" color="brand" />
799693
{{
@@ -1004,29 +898,6 @@ watch(
1004898
}
1005899
}
1006900
1007-
.bootnode_label {
1008-
white-space: nowrap;
1009-
1010-
overflow: hidden;
1011-
text-overflow: ellipsis;
1012-
}
1013-
1014-
.bootnodes_container {
1015-
all: unset;
1016-
1017-
font-size: 12px;
1018-
line-height: 100%;
1019-
font-weight: 500;
1020-
color: var(--txt-secondary);
1021-
white-space: nowrap;
1022-
1023-
&.disabled {
1024-
pointer-events: none;
1025-
1026-
color: var(--txt-tertiary);
1027-
}
1028-
}
1029-
1030901
.warning {
1031902
background: var(--op-5);
1032903
border-radius: 8px;

‎components/modals/LightNodeSettingsModal.vue‎

Lines changed: 106 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Dropdown, DropdownItem, DropdownTitle } from "@/components/ui/Dropdown"
88
99
/** Services */
1010
import amp from "@/services/amp"
11+
import { StatusMap } from "@/services/constants/node.js"
1112
1213
/** Stores */
1314
import { useNodeStore } from "@/store/node"
@@ -20,6 +21,8 @@ const props = defineProps({
2021
show: Boolean,
2122
})
2223
24+
const status = computed(() => nodeStore.status)
25+
2326
onMounted(async () => {
2427
indexDBStores.value = await window.indexedDB.databases()
2528
})
@@ -41,6 +44,40 @@ watch(
4144
},
4245
)
4346
47+
const hasWrongBootnode = ref(false)
48+
const bootnodesTerm = ref()
49+
const isBootnodesChanged = ref(false)
50+
51+
const textareaEl = ref()
52+
const resizeTextarea = () => {
53+
textareaEl.value.style.height = "auto"
54+
textareaEl.value.style.height = 12 + textareaEl.value.scrollHeight + "px"
55+
}
56+
const handleTextareaKeyup = (e) => {
57+
e.stopPropagation()
58+
resizeTextarea()
59+
if (!/^[a-z0-9]+$/i.test(e.key) || e.key.length !== 1) return
60+
61+
const newBootnodes = bootnodesTerm.value.split("\n").filter((b) => b.length)
62+
newBootnodes.forEach((b) => {
63+
hasWrongBootnode.value = !b.startsWith("/") || b.split("/").filter((b) => b.length).length !== 4
64+
})
65+
66+
nodeStore.bootnodes = newBootnodes
67+
68+
if (!isBootnodesChanged.value) isBootnodesChanged.value = true
69+
}
70+
71+
const handleRevertBootnodesChanges = () => {
72+
isBootnodesChanged.value = false
73+
74+
nodeStore.bootnodes = nodeStore.rawBootnodes
75+
bootnodesTerm.value = nodeStore.bootnodes.join("\n")
76+
hasWrongBootnode.value = false
77+
78+
setTimeout(() => resizeTextarea(), 0)
79+
}
80+
4481
const handleSelectNetwork = (network) => {
4582
nodeStore.settings.network = network
4683
}
@@ -61,6 +98,19 @@ const handleDeleteIndexDBStore = (name) => {
6198
},
6299
})
63100
}
101+
102+
watch(
103+
() => props.show,
104+
async () => {
105+
if (props.show) {
106+
bootnodesTerm.value = nodeStore.bootnodes.join("\n")
107+
108+
await nextTick()
109+
110+
resizeTextarea()
111+
}
112+
},
113+
)
64114
</script>
65115

66116
<template>
@@ -78,14 +128,14 @@ const handleDeleteIndexDBStore = (name) => {
78128
<Toggle v-model="nodeStore.settings.autostart" />
79129
</Flex>
80130

81-
<Flex justify="between" :class="$style.disabled">
131+
<!-- <Flex justify="between" :class="$style.disabled">
82132
<Flex direction="column" gap="6">
83133
<Text size="13" weight="600" color="primary">Battery charger requiremenet</Text>
84134
<Text size="12" weight="500" color="tertiary">Prohibit node startup if no charger is connected on mobile</Text>
85135
</Flex>
86136
87137
<Toggle v-model="nodeStore.settings.charger" :disabled="true" />
88-
</Flex>
138+
</Flex> -->
89139

90140
<Flex justify="between">
91141
<Flex direction="column" gap="6">
@@ -143,6 +193,44 @@ const handleDeleteIndexDBStore = (name) => {
143193
</template>
144194
</Dropdown>
145195
</Flex>
196+
197+
<div :class="$style.divider" />
198+
199+
<Flex direction="column" gap="12">
200+
<Text size="13" weight="600" color="primary">Bootnodes</Text>
201+
202+
<textarea
203+
ref="textareaEl"
204+
v-model="bootnodesTerm"
205+
@keyup="handleTextareaKeyup"
206+
autocomplete="false"
207+
spellcheck="false"
208+
:class="[$style.bootnodes_container, status === StatusMap.Started && $style.disabled]"
209+
>
210+
</textarea>
211+
212+
<Flex align="center" justify="between" wide>
213+
<Flex align="center" gap="4">
214+
<Icon name="info" size="12" :color="hasWrongBootnode ? 'yellow' : 'tertiary'" />
215+
216+
<Text v-if="!hasWrongBootnode" size="12" weight="600" color="tertiary"> Each address on a new line. </Text>
217+
<Text v-else size="12" weight="600" color="yellow"> Specified bootnodes contains an error </Text>
218+
219+
<Text v-if="status === StatusMap.Started" size="12" weight="600" color="tertiary"> Editing disabled. </Text>
220+
</Flex>
221+
222+
<Flex
223+
v-if="isBootnodesChanged"
224+
@click="handleRevertBootnodesChanges"
225+
align="center"
226+
gap="4"
227+
style="cursor: pointer"
228+
>
229+
<Icon name="revert" size="12" color="primary" />
230+
<Text size="12" weight="600" color="secondary"> Revert to default</Text>
231+
</Flex>
232+
</Flex>
233+
</Flex>
146234
</Flex>
147235
</Flex>
148236
</Modal>
@@ -160,4 +248,20 @@ const handleDeleteIndexDBStore = (name) => {
160248
opacity: 0.3;
161249
pointer-events: none;
162250
}
251+
252+
.bootnodes_container {
253+
all: unset;
254+
255+
font-size: 12px;
256+
line-height: 100%;
257+
font-weight: 500;
258+
color: var(--txt-secondary);
259+
white-space: nowrap;
260+
261+
&.disabled {
262+
pointer-events: none;
263+
264+
color: var(--txt-tertiary);
265+
}
266+
}
163267
</style>

‎store/node.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
/** Constants */
22
import { StatusMap } from "@/services/constants/node.js"
33

4-
/** Utils */
5-
import { getNetworkName } from "@/services/utils/general"
6-
74
export const useNodeStore = defineStore("node", () => {
85
const status = ref(StatusMap.Default)
96
const percentage = ref(0)
7+
const bootnodes = ref([])
8+
const rawBootnodes = ref([])
109

1110
const settings = reactive({
1211
autostart: false,
@@ -15,5 +14,5 @@ export const useNodeStore = defineStore("node", () => {
1514
network: "",
1615
})
1716

18-
return { status, percentage, settings }
17+
return { status, percentage, bootnodes, rawBootnodes, settings }
1918
})

0 commit comments

Comments
 (0)