Skip to content

Commit 0b9cbbc

Browse files
AlanAlvarez21AlanAlvarez21
committed
feat: improve config view
1 parent 994167a commit 0b9cbbc

File tree

4 files changed

+215
-107
lines changed

4 files changed

+215
-107
lines changed

‎app/javascript/controllers/serial_controller.js‎

Lines changed: 130 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Controller } from "@hotwired/stimulus"
22

33
export default class extends Controller {
4-
static targets = ["status", "weight", "port", "logs", "printerStatus", "readButton"]
4+
static targets = ["status", "weight", "scalePort", "printerPort", "logs", "printerStatus", "readButton"]
55
static values = {
66
baseUrl: String,
77
autoConnect: Boolean,
@@ -34,10 +34,17 @@ export default class extends Controller {
3434
this.startHealthCheck()
3535
}
3636

37-
// Add event listener for port selection changes
38-
if (this.hasPortTarget) {
39-
this.portTarget.addEventListener('change', (event) => {
40-
this.onPortChange(event)
37+
// Add event listener for scale port selection changes
38+
if (this.hasScalePortTarget) {
39+
this.scalePortTarget.addEventListener('change', (event) => {
40+
this.onScalePortChange(event)
41+
})
42+
}
43+
44+
// Add event listener for printer port selection changes
45+
if (this.hasPrinterPortTarget) {
46+
this.printerPortTarget.addEventListener('change', (event) => {
47+
this.onPrinterPortChange(event)
4148
})
4249
}
4350

@@ -53,9 +60,14 @@ export default class extends Controller {
5360
fetch('/admin/configurations/saved_config')
5461
.then(response => response.json())
5562
.then(data => {
56-
if (data.serial_port && this.hasPortTarget) {
57-
// Establecer el puerto guardado en el select
58-
this.portTarget.value = data.serial_port;
63+
if (data.serial_port && this.hasScalePortTarget) {
64+
// Establecer el puerto guardado en el select de la báscula
65+
this.scalePortTarget.value = data.serial_port;
66+
}
67+
68+
if (data.printer_port && this.hasPrinterPortTarget) {
69+
// Establecer el puerto guardado en el select de la impresora
70+
this.printerPortTarget.value = data.printer_port;
5971
}
6072
})
6173
.catch(error => {
@@ -107,48 +119,92 @@ export default class extends Controller {
107119
const response = await fetch(`${this.baseUrlValue}/ports`)
108120
const data = await response.json()
109121

110-
if (data.status === 'success' && this.hasPortTarget) {
111-
// Guardar el puerto actualmente seleccionado
112-
const currentSelection = this.portTarget.value;
113-
114-
// Limpiar opciones actuales
115-
this.portTarget.innerHTML = '<option value="">Detectando puertos...</option>'
122+
if (data.status === 'success') {
123+
// Cargar puertos en el dropdown de la báscula si existe
124+
if (this.hasScalePortTarget) {
125+
// Guardar el puerto actualmente seleccionado
126+
const currentScaleSelection = this.scalePortTarget.value;
127+
128+
// Limpiar opciones actuales
129+
this.scalePortTarget.innerHTML = '<option value="">Detectando puertos...</option>'
130+
131+
// Agregar puertos disponibles
132+
if (data.ports && data.ports.length > 0) {
133+
this.scalePortTarget.innerHTML = '<option value="">Seleccionar puerto...</option>'
134+
data.ports.forEach(port => {
135+
const option = document.createElement('option')
136+
option.value = port.device
137+
option.textContent = `${port.device} - ${port.description || 'Dispositivo serial'}`
138+
this.scalePortTarget.appendChild(option)
139+
})
140+
141+
// Restaurar selección anterior si existe
142+
if (currentScaleSelection) {
143+
this.scalePortTarget.value = currentScaleSelection
144+
}
145+
} else {
146+
this.scalePortTarget.innerHTML = '<option value="">No se encontraron puertos</option>'
147+
}
148+
}
116149

117-
// Agregar puertos disponibles
118-
if (data.ports && data.ports.length > 0) {
119-
this.portTarget.innerHTML = '<option value="">Seleccionar puerto...</option>'
120-
data.ports.forEach(port => {
121-
const option = document.createElement('option')
122-
option.value = port.device
123-
option.textContent = `${port.device} - ${port.description || 'Dispositivo serial'}`
124-
this.portTarget.appendChild(option)
125-
})
150+
// Cargar puertos en el dropdown de la impresora si existe
151+
if (this.hasPrinterPortTarget) {
152+
// Guardar el puerto actualmente seleccionado
153+
const currentPrinterSelection = this.printerPortTarget.value;
154+
155+
// Limpiar opciones actuales
156+
this.printerPortTarget.innerHTML = '<option value="">Detectando puertos...</option>'
126157

127-
// Restaurar selección anterior si existe
128-
if (currentSelection) {
129-
this.portTarget.value = currentSelection
158+
// Agregar puertos disponibles
159+
if (data.ports && data.ports.length > 0) {
160+
this.printerPortTarget.innerHTML = '<option value="">Seleccionar puerto...</option>'
161+
data.ports.forEach(port => {
162+
const option = document.createElement('option')
163+
option.value = port.device
164+
option.textContent = `${port.device} - ${port.description || 'Dispositivo serial'}`
165+
this.printerPortTarget.appendChild(option)
166+
})
167+
168+
// Restaurar selección anterior si existe
169+
if (currentPrinterSelection) {
170+
this.printerPortTarget.value = currentPrinterSelection
171+
}
130172
} else {
131-
// Cargar configuración guardada si no hay selección previa
132-
this.loadSavedConfiguration()
173+
this.printerPortTarget.innerHTML = '<option value="">No se encontraron puertos</option>'
133174
}
134-
} else {
135-
this.portTarget.innerHTML = '<option value="">No se encontraron puertos</option>'
175+
}
176+
177+
178+
} else {
179+
// Handle case where API returns non-success status
180+
if (this.hasScalePortTarget) {
181+
this.scalePortTarget.innerHTML = '<option value="">No se encontraron puertos</option>'
182+
}
183+
if (this.hasPrinterPortTarget) {
184+
this.printerPortTarget.innerHTML = '<option value="">No se encontraron puertos</option>'
136185
}
137186
}
138187
} catch (error) {
139188
this.log(`Error loading ports: ${error.message}`)
140-
if (this.hasPortTarget) {
141-
this.portTarget.innerHTML = '<option value="">Error al detectar puertos</option>'
189+
if (this.hasScalePortTarget) {
190+
this.scalePortTarget.innerHTML = '<option value="">Error al detectar puertos</option>'
191+
}
192+
if (this.hasPrinterPortTarget) {
193+
this.printerPortTarget.innerHTML = '<option value="">Error al detectar puertos</option>'
142194
}
143195
}
144196
}
145197

146198
async refreshPorts(event) {
147199
if (event) event.preventDefault();
148200

149-
// Mostrar mensaje de carga
150-
if (this.hasPortTarget) {
151-
this.portTarget.innerHTML = '<option value="">Detectando puertos...</option>';
201+
// Mostrar mensaje de carga en ambos dropdowns
202+
if (this.hasScalePortTarget) {
203+
this.scalePortTarget.innerHTML = '<option value="">Detectando puertos...</option>';
204+
}
205+
206+
if (this.hasPrinterPortTarget) {
207+
this.printerPortTarget.innerHTML = '<option value="">Detectando puertos...</option>';
152208
}
153209

154210
// Cargar puertos
@@ -160,7 +216,7 @@ export default class extends Controller {
160216
async connectScale(event) {
161217
event.preventDefault()
162218

163-
const port = this.hasPortTarget ? this.portTarget.value : '/dev/ttyS0'
219+
const port = this.hasScalePortTarget ? this.scalePortTarget.value : '/dev/ttyS0'
164220
const baudrate = 115200
165221

166222
if (!port) {
@@ -330,19 +386,31 @@ export default class extends Controller {
330386
async connectPrinter(event) {
331387
event.preventDefault()
332388

389+
// Get the selected printer port if available
390+
const printerPort = this.hasPrinterPortTarget ? this.printerPortTarget.value : null
391+
333392
try {
393+
const requestBody = {}
394+
if (printerPort) {
395+
requestBody.port = printerPort
396+
}
397+
334398
const response = await fetch(`${this.baseUrlValue}/connect_printer`, {
335-
method: 'POST'
399+
method: 'POST',
400+
headers: { 'Content-Type': 'application/json' },
401+
body: JSON.stringify(requestBody)
336402
})
337403

338404
const data = await response.json()
339405

340406
if (data.status === 'success') {
341407
this.updatePrinterStatus("✓ Printer connected", "success")
342-
this.log("Printer connected")
408+
this.log(`Printer connected on ${printerPort || 'auto-detected port'}`)
343409

344-
// Trigger Rails form submission for automatic saving
345-
this.saveConfiguration({ printer_port: 'auto_detected' })
410+
// Trigger Rails form submission for automatic saving if we have a specific port
411+
if (printerPort) {
412+
this.saveConfiguration({ printer_port: printerPort })
413+
}
346414
} else {
347415
this.updatePrinterStatus("✗ Failed to connect printer", "error")
348416
this.log(`Printer connection failed: ${data.message}`)
@@ -557,23 +625,33 @@ export default class extends Controller {
557625
}
558626
}
559627

560-
// Método para manejar cambios en la selección de puerto
561-
onPortChange(event) {
628+
// Método para manejar cambios en la selección de puerto de la báscula
629+
onScalePortChange(event) {
562630
const selectedPort = event.target.value
563631
if (selectedPort) {
564-
// Guardar el puerto seleccionado antes de guardar la configuración
565-
const selectedPortText = event.target.options[event.target.selectedIndex].text;
566-
567632
// Trigger Rails form submission for automatic saving
568633
this.saveConfiguration({ serial_port: selectedPort })
569-
this.log(`Puerto seleccionado: ${selectedPort}`)
634+
this.log(`Puerto de báscula seleccionado: ${selectedPort}`)
570635

571-
// Restaurar el puerto seleccionado después de guardar
572-
setTimeout(() => {
573-
if (this.hasPortTarget) {
574-
this.portTarget.value = selectedPort;
575-
}
576-
}, 100);
636+
// If both scale and printer ports are the same, update the printer port selection too
637+
if (this.hasPrinterPortTarget && this.printerPortTarget.value === selectedPort) {
638+
this.saveConfiguration({ printer_port: selectedPort })
639+
}
640+
}
641+
}
642+
643+
// Método para manejar cambios en la selección de puerto de la impresora
644+
onPrinterPortChange(event) {
645+
const selectedPort = event.target.value
646+
if (selectedPort) {
647+
// Trigger Rails form submission for automatic saving
648+
this.saveConfiguration({ printer_port: selectedPort })
649+
this.log(`Puerto de impresora seleccionado: ${selectedPort}`)
650+
651+
// If both scale and printer ports are the same, update the scale port selection too
652+
if (this.hasScalePortTarget && this.scalePortTarget.value === selectedPort) {
653+
this.saveConfiguration({ serial_port: selectedPort })
654+
}
577655
}
578656
}
579657

‎app/views/admin/configurations/show.html.erb‎

Lines changed: 41 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -19,56 +19,8 @@
1919

2020
<!-- Formulario de Configuración -->
2121
<div class="px-6 pb-6">
22-
<%= form_with model: @admin.company, url: admin_configurations_path, local: true, method: :patch, class: "mb-8" do |form| %>
23-
<div class="bg-white rounded-xl border border-blue-gem-200 shadow-sm p-6">
24-
<div class="flex items-center justify-between mb-6">
25-
<h2 class="text-xl font-bold text-gray-900">Configuración General</h2>
26-
<div class="p-2 rounded-full bg-blue-gem-100">
27-
<i class="fa-solid fa-gear text-blue-gem-600"></i>
28-
</div>
29-
</div>
30-
31-
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
32-
<!-- Companies -->
33-
<div>
34-
<label for="companies" class="block text-sm font-medium text-gray-700 mb-2">
35-
Nombre de la Empresa
36-
</label>
37-
<%= form.text_field :name,
38-
id: "companies",
39-
placeholder: "Nombre de la empresa",
40-
class: "block w-full text-sm rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500",
41-
value: @admin.company&.name %>
42-
<p class="mt-1 text-xs text-gray-500">
43-
Nombre de la empresa asociada.
44-
</p>
45-
</div>
46-
47-
<!-- Serial Service URL -->
48-
<div>
49-
<label for="serial_service_url" class="block text-sm font-medium text-gray-700 mb-2">
50-
URL del Servicio Serial
51-
</label>
52-
<%= form.text_field :serial_service_url,
53-
id: "serial_service_url",
54-
placeholder: "http://192.168.1.91:5000",
55-
class: "block w-full text-sm rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500",
56-
value: @admin.company&.serial_service_url %>
57-
<p class="mt-1 text-xs text-gray-500">
58-
La URL del servicio serial para la báscula e impresora.
59-
</p>
60-
</div>
61-
</div>
62-
63-
<div class="mt-6">
64-
<%= form.submit "Guardar Configuración",
65-
class: "px-4 py-2 bg-blue-gem-500 text-white text-sm font-medium rounded-lg hover:bg-blue-gem-600 transition-colors" %>
66-
</div>
67-
</div>
68-
<% end %>
69-
70-
<!-- Layout 2 Columnas -->
71-
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
22+
<!-- Layout 2 Columnas: Comunicación Serial y Estado de Configuración -->
23+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
7224
<!-- Columna Izquierda: Comunicación Serial -->
7325
<div class="bg-white rounded-xl border border-blue-gem-200 shadow-sm p-6">
7426
<div class="flex items-center justify-between mb-6">
@@ -96,7 +48,45 @@
9648
</div>
9749
</div>
9850

99-
<div class="space-y-4">
51+
<%= form_with model: @admin.company, url: admin_configurations_path, local: true, method: :patch, class: "space-y-6" do |form| %>
52+
<div class="space-y-6">
53+
<div>
54+
<label for="companies" class="block text-sm font-medium text-gray-700 mb-2">
55+
Nombre de la Empresa
56+
</label>
57+
<%= form.text_field :name,
58+
id: "companies",
59+
placeholder: "Nombre de la empresa",
60+
class: "block w-full text-sm rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500",
61+
value: @admin.company&.name %>
62+
<p class="mt-1 text-xs text-gray-500">
63+
Flexiempaques
64+
Nombre de la empresa asociada.
65+
</p>
66+
</div>
67+
68+
<div>
69+
<label for="serial_service_url" class="block text-sm font-medium text-gray-700 mb-2">
70+
URL del Servicio Serial
71+
</label>
72+
<%= form.text_field :serial_service_url,
73+
id: "serial_service_url",
74+
placeholder: "https://1xhof6kqlfil.share.zrok.io",
75+
class: "block w-full text-sm rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500",
76+
value: @admin.company&.serial_service_url %>
77+
<p class="mt-1 text-xs text-gray-500">
78+
La URL del servicio serial para la báscula e impresora.
79+
</p>
80+
</div>
81+
</div>
82+
83+
<div class="mt-6">
84+
<%= form.submit "Guardar Configuración",
85+
class: "px-4 py-2 bg-blue-gem-500 text-white text-sm font-medium rounded-lg hover:bg-blue-gem-600 transition-colors" %>
86+
</div>
87+
<% end %>
88+
89+
<div class="space-y-4 mt-6 pt-6 border-t border-black">
10090
<div class="flex items-center justify-between">
10191
<span class="text-sm text-gray-600">Puerto Serie (Báscula):</span>
10292
<% if @admin.company&.serial_port.present? %>

0 commit comments

Comments
 (0)