Skip to content

Commit ccda11d

Browse files
tinicclaude
tinic
and
claude
committed
refactor: extract SettingsPanel.vue
The settings menu panel (display mode, default units, encoder scales). Model-value + emit pattern wires the four settings refs through. Also removes the now-unused InputNumber import from App.vue. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent eb9708d commit ccda11d

2 files changed

Lines changed: 145 additions & 101 deletions

File tree

‎elle-app/elle-frontend/src/App.vue‎

Lines changed: 12 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { ref, onMounted, onUnmounted, computed, watch, defineAsyncComponent } fr
33
import { useDialog } from 'primevue/usedialog'
44
import Popover from 'primevue/popover'
55
import Dialog from 'primevue/dialog'
6-
import InputNumber from 'primevue/inputnumber'
76
87
import Numpad from './components/Numpad.vue'
98
import DRODisplay from './components/DRODisplay.vue'
109
import HalStatusPanel from './components/HalStatusPanel.vue'
1110
import OperationPreview from './components/OperationPreview.vue'
1211
import ParameterButton from './components/ParameterButton.vue'
12+
import SettingsPanel from './components/SettingsPanel.vue'
1313
import ToolTable from './components/ToolTable.vue'
1414
import { useHAL } from './composables/useHAL'
1515
import {
@@ -1738,106 +1738,17 @@ onUnmounted(() => {
17381738
@start="startHAL"
17391739
@stop="stopHAL"
17401740
/>
1741-
<div v-if="selectedMenu == MenuType.settings" class="flex-grow-1 p-4">
1742-
<div class="dro-font-mode">
1743-
<h2 class="mb-4">Settings</h2>
1744-
1745-
<div class="grid grid-nogutter">
1746-
<!-- Diameter Mode Setting -->
1747-
<div class="col-12 mb-4">
1748-
<div class="grid grid-nogutter align-items-center">
1749-
<div class="col-6 text-right pr-4">
1750-
<label class="text-lg font-semibold">Display Mode:</label>
1751-
</div>
1752-
<div class="col-6">
1753-
<div class="flex gap-3">
1754-
<button
1755-
:class="['button-mode p-2 px-4', { 'bg-primary': !diameterMode }]"
1756-
@click="diameterMode = false"
1757-
>
1758-
Radius
1759-
</button>
1760-
<button
1761-
:class="['button-mode p-2 px-4', { 'bg-primary': diameterMode }]"
1762-
@click="diameterMode = true"
1763-
>
1764-
Diameter
1765-
</button>
1766-
</div>
1767-
</div>
1768-
</div>
1769-
</div>
1770-
1771-
<!-- Default Units Setting -->
1772-
<div class="col-12 mb-4">
1773-
<div class="grid grid-nogutter align-items-center">
1774-
<div class="col-6 text-right pr-4">
1775-
<label class="text-lg font-semibold">Default Units:</label>
1776-
</div>
1777-
<div class="col-6">
1778-
<div class="flex gap-3">
1779-
<button
1780-
:class="['button-mode p-2 px-4', { 'bg-primary': defaultMetricOnStartup }]"
1781-
@click="defaultMetricOnStartup = true"
1782-
>
1783-
Metric (mm)
1784-
</button>
1785-
<button
1786-
:class="['button-mode p-2 px-4', { 'bg-primary': !defaultMetricOnStartup }]"
1787-
@click="defaultMetricOnStartup = false"
1788-
>
1789-
Imperial (inch)
1790-
</button>
1791-
</div>
1792-
</div>
1793-
</div>
1794-
</div>
1795-
1796-
<!-- Encoder Scale Settings -->
1797-
<div class="col-12 mb-4">
1798-
<div class="grid grid-nogutter align-items-center">
1799-
<div class="col-6 text-right pr-4">
1800-
<label class="text-lg font-semibold">Encoder Scale Z:</label>
1801-
</div>
1802-
<div class="col-6">
1803-
<div class="flex gap-3">
1804-
<InputNumber
1805-
v-model="encoderScaleZ"
1806-
:min="-1"
1807-
:max="1"
1808-
:step="0.0001"
1809-
:min-fraction-digits="4"
1810-
:max-fraction-digits="4"
1811-
class="w-8rem"
1812-
/>
1813-
</div>
1814-
</div>
1815-
</div>
1816-
</div>
1817-
1818-
<div class="col-12 mb-4">
1819-
<div class="grid grid-nogutter align-items-center">
1820-
<div class="col-6 text-right pr-4">
1821-
<label class="text-lg font-semibold">Encoder Scale X:</label>
1822-
</div>
1823-
<div class="col-6">
1824-
<div class="flex gap-3">
1825-
<InputNumber
1826-
v-model="encoderScaleX"
1827-
:min="-1"
1828-
:max="1"
1829-
:step="0.0001"
1830-
:min-fraction-digits="4"
1831-
:max-fraction-digits="4"
1832-
class="w-8rem"
1833-
/>
1834-
</div>
1835-
</div>
1836-
</div>
1837-
</div>
1838-
</div>
1839-
</div>
1840-
</div>
1741+
<SettingsPanel
1742+
v-if="selectedMenu == MenuType.settings"
1743+
:diameter-mode="diameterMode"
1744+
:default-metric-on-startup="defaultMetricOnStartup"
1745+
:encoder-scale-z="encoderScaleZ"
1746+
:encoder-scale-x="encoderScaleX"
1747+
@update:diameter-mode="diameterMode = $event"
1748+
@update:default-metric-on-startup="defaultMetricOnStartup = $event"
1749+
@update:encoder-scale-z="encoderScaleZ = $event"
1750+
@update:encoder-scale-x="encoderScaleX = $event"
1751+
/>
18411752
</div>
18421753

18431754
<!-- Tool Table Modal -->

‎elle-app/elle-frontend/src/components/SettingsPanel.vue‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<script setup lang="ts">
2+
import InputNumber from 'primevue/inputnumber'
3+
4+
defineProps<{
5+
diameterMode: boolean
6+
defaultMetricOnStartup: boolean
7+
encoderScaleZ: number
8+
encoderScaleX: number
9+
}>()
10+
11+
defineEmits<{
12+
'update:diameterMode': [value: boolean]
13+
'update:defaultMetricOnStartup': [value: boolean]
14+
'update:encoderScaleZ': [value: number]
15+
'update:encoderScaleX': [value: number]
16+
}>()
17+
</script>
18+
19+
<template>
20+
<div class="flex-grow-1 p-4">
21+
<div class="dro-font-mode">
22+
<h2 class="mb-4">Settings</h2>
23+
24+
<div class="grid grid-nogutter">
25+
<div class="col-12 mb-4">
26+
<div class="grid grid-nogutter align-items-center">
27+
<div class="col-6 text-right pr-4">
28+
<label class="text-lg font-semibold">Display Mode:</label>
29+
</div>
30+
<div class="col-6">
31+
<div class="flex gap-3">
32+
<button
33+
:class="['button-mode p-2 px-4', { 'bg-primary': !diameterMode }]"
34+
@click="$emit('update:diameterMode', false)"
35+
>
36+
Radius
37+
</button>
38+
<button
39+
:class="['button-mode p-2 px-4', { 'bg-primary': diameterMode }]"
40+
@click="$emit('update:diameterMode', true)"
41+
>
42+
Diameter
43+
</button>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
49+
<div class="col-12 mb-4">
50+
<div class="grid grid-nogutter align-items-center">
51+
<div class="col-6 text-right pr-4">
52+
<label class="text-lg font-semibold">Default Units:</label>
53+
</div>
54+
<div class="col-6">
55+
<div class="flex gap-3">
56+
<button
57+
:class="['button-mode p-2 px-4', { 'bg-primary': defaultMetricOnStartup }]"
58+
@click="$emit('update:defaultMetricOnStartup', true)"
59+
>
60+
Metric (mm)
61+
</button>
62+
<button
63+
:class="['button-mode p-2 px-4', { 'bg-primary': !defaultMetricOnStartup }]"
64+
@click="$emit('update:defaultMetricOnStartup', false)"
65+
>
66+
Imperial (inch)
67+
</button>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<div class="col-12 mb-4">
74+
<div class="grid grid-nogutter align-items-center">
75+
<div class="col-6 text-right pr-4">
76+
<label class="text-lg font-semibold">Encoder Scale Z:</label>
77+
</div>
78+
<div class="col-6">
79+
<div class="flex gap-3">
80+
<InputNumber
81+
:model-value="encoderScaleZ"
82+
:min="-1"
83+
:max="1"
84+
:step="0.0001"
85+
:min-fraction-digits="4"
86+
:max-fraction-digits="4"
87+
class="w-8rem"
88+
@update:model-value="$emit('update:encoderScaleZ', Number($event ?? 0))"
89+
/>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
95+
<div class="col-12 mb-4">
96+
<div class="grid grid-nogutter align-items-center">
97+
<div class="col-6 text-right pr-4">
98+
<label class="text-lg font-semibold">Encoder Scale X:</label>
99+
</div>
100+
<div class="col-6">
101+
<div class="flex gap-3">
102+
<InputNumber
103+
:model-value="encoderScaleX"
104+
:min="-1"
105+
:max="1"
106+
:step="0.0001"
107+
:min-fraction-digits="4"
108+
:max-fraction-digits="4"
109+
class="w-8rem"
110+
@update:model-value="$emit('update:encoderScaleX', Number($event ?? 0))"
111+
/>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
</template>
120+
121+
<style scoped>
122+
.button-mode {
123+
background: #333;
124+
color: #ffffff;
125+
}
126+
127+
.dro-font-mode {
128+
font-family: 'iosevka';
129+
font-weight: bold;
130+
font-size: 1.1em;
131+
text-align: center;
132+
}
133+
</style>

0 commit comments

Comments
 (0)