marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar servicios.html

Browse Source
This commit is contained in:
marsalva
2026-02-10 08:33:52 +00:00
parent 9cc0db8cad
commit a13bed595d
1 changed files with 7 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
servicios.html
View File

@@ -88,22 +88,10 @@
<input type="text" id="sName" required class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"> <input type="text" id="sName" required class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
</div> </div>
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Provincia</label>
<select id="sProvince" class="w-full px-3 py-2 border rounded-lg bg-white outline-none focus:border-blue-500" onchange="loadTowns(this.value)">
<option value="">-- Seleccionar --</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Población / Municipio *</label>
<select id="sTown" class="w-full px-3 py-2 border rounded-lg bg-gray-50 outline-none focus:border-blue-500" disabled onchange="checkAutoAssign(this.value)">
<option value="">-- Elige provincia primero --</option>
</select>
</div>
<div class="md:col-span-2"> <div class="md:col-span-2">
<label class="block text-xs font-bold text-gray-600 mb-1">Dirección (Calle y número) *</label> <label class="block text-xs font-bold text-gray-600 mb-1">Dirección Completa *</label>
<div class="flex gap-2"> <div class="flex gap-2">
<input type="text" id="sAddress" required placeholder="Ej: C/ Mayor 12, 3ºB" class="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"> <input type="text" id="sAddress" required placeholder="Ej: C/ Mayor 12, 3ºB, Madrid" class="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
<select id="sAddressSelect" class="hidden w-1/3 border rounded-lg text-sm bg-gray-50 focus:ring-2 focus:ring-blue-500" onchange="selectAddress(this.value)"> <select id="sAddressSelect" class="hidden w-1/3 border rounded-lg text-sm bg-gray-50 focus:ring-2 focus:ring-blue-500" onchange="selectAddress(this.value)">
<option value="">Otras direcciones...</option> <option value="">Otras direcciones...</option>
</select> </select>
@@ -127,7 +115,6 @@
<select id="sGuild" class="w-full px-3 py-2 border border-blue-200 rounded-lg bg-white outline-none focus:border-blue-500" onchange="loadOperators(this.value)"> <select id="sGuild" class="w-full px-3 py-2 border border-blue-200 rounded-lg bg-white outline-none focus:border-blue-500" onchange="loadOperators(this.value)">
<option value="">-- Seleccionar Gremio --</option> <option value="">-- Seleccionar Gremio --</option>
</select> </select>
<p id="zoneInfo" class="text-[10px] text-blue-600 mt-2 italic hidden"></p>
</div> </div>
<div> <div>
<label class="block text-xs font-bold text-blue-800 mb-1">Asignar Operario</label> <label class="block text-xs font-bold text-blue-800 mb-1">Asignar Operario</label>
@@ -263,7 +250,7 @@
</div> </div>
</div> </div>
<div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"><span id="toastMsg">Msg</span></div> <div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl hidden"><span id="toastMsg"></span></div>
<script src="js/layout.js"></script> <script src="js/layout.js"></script>
<script> <script>
@@ -278,7 +265,6 @@
fetchServices(); fetchServices();
loadCompanies(); loadCompanies();
loadGuilds(); loadGuilds();
loadProvinces(); // NUEVO: Cargar provincias
}); });
// 1. FUNCIÓN GLOBAL PARA GOOGLE MAPS // 1. FUNCIÓN GLOBAL PARA GOOGLE MAPS
@@ -288,7 +274,7 @@
try { try {
autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] }); autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
input.addEventListener('keydown', function(e) { if (e.key === "Enter") e.preventDefault(); }); input.addEventListener('keydown', function(e) { if (e.key === "Enter") e.preventDefault(); });
} catch(e) { console.warn("Google Maps no cargó correctamente (revisa tu API Key)"); } } catch(e) { console.warn("Google Maps no cargó correctamente"); }
} }
}; };
@@ -305,75 +291,7 @@
} }
} }
// --- LÓGICA GEOGRÁFICA (NUEVO) --- // --- FUNCIONES CORE ---
async function loadProvinces() {
try {
const res = await fetch(`${API_URL}/provinces`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
const sel = document.getElementById('sProvince');
sel.innerHTML = '<option value="">-- Seleccionar --</option>';
data.provinces.forEach(p => sel.innerHTML += `<option value="${p.id}">${p.name}</option>`);
} catch(e) {}
}
async function loadTowns(provId) {
const sel = document.getElementById('sTown');
sel.innerHTML = '<option value="">Cargando...</option>';
sel.disabled = true;
if(!provId) return;
try {
const res = await fetch(`${API_URL}/provinces/${provId}/towns`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
sel.innerHTML = '<option value="">-- Seleccionar Población --</option>';
data.towns.forEach(t => sel.innerHTML += `<option value="${t.id}">${t.name}</option>`);
sel.disabled = false;
} catch(e) {}
}
// --- AUTO ASIGNACIÓN (NUEVO) ---
async function checkAutoAssign(townId) {
if(!townId) return;
const res = await fetch(`${API_URL}/towns/${townId}/auto-assign`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
const opSelect = document.getElementById('sOperator');
const info = document.getElementById('zoneInfo');
if(data.found) {
info.innerHTML = `Detectada zona: <b>${data.zone_name}</b>`;
info.classList.remove('hidden');
opSelect.innerHTML = '<option value="">-- Seleccionar de Zona --</option>';
data.operators.forEach(op => {
opSelect.innerHTML += `<option value="${op.id}" class="font-bold text-blue-600">⭐ ${op.full_name}</option>`;
});
opSelect.innerHTML += '<option disabled>──────────</option><option value="load_all">Ver todos los operarios...</option>';
opSelect.onchange = function() { if(this.value === 'load_all') loadAllOperators(); };
} else {
info.classList.add('hidden');
loadOperators(document.getElementById('sGuild').value);
}
}
async function loadAllOperators() {
const res = await fetch(`${API_URL}/operators`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
const sel = document.getElementById('sOperator');
const currentVal = sel.value;
sel.innerHTML = '<option value="">-- Todos los operarios --</option>';
data.operators.forEach(op => sel.innerHTML += `<option value="${op.id}">${op.full_name}</option>`);
sel.value = currentVal !== 'load_all' ? currentVal : "";
sel.onchange = null;
}
// --- FUNCIONES ORIGINALES ---
async function fetchStatuses() { async function fetchStatuses() {
try { try {
const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
@@ -586,11 +504,7 @@
document.getElementById('sPhone').value = s.contact_phone; document.getElementById('sPhone').value = s.contact_phone;
document.getElementById('sName').value = s.contact_name; document.getElementById('sName').value = s.contact_name;
document.getElementById('sAddress').value = s.address;
let addr = s.address;
if(addr.includes(", ")) addr = addr.split(", ")[0];
document.getElementById('sAddress').value = addr;
document.getElementById('sEmail').value = s.email || ''; document.getElementById('sEmail').value = s.email || '';
document.getElementById('sDesc').value = s.description || ''; document.getElementById('sDesc').value = s.description || '';
@@ -632,16 +546,10 @@
const editId = document.getElementById('editServiceId').value; const editId = document.getElementById('editServiceId').value;
const isEdit = !!editId; const isEdit = !!editId;
let fullAddress = document.getElementById('sAddress').value;
const townSelect = document.getElementById('sTown');
if(townSelect.value) {
fullAddress += `, ${townSelect.options[townSelect.selectedIndex].text}`;
}
const data = { const data = {
phone: document.getElementById('sPhone').value, phone: document.getElementById('sPhone').value,
name: document.getElementById('sName').value, name: document.getElementById('sName').value,
address: fullAddress, address: document.getElementById('sAddress').value,
email: document.getElementById('sEmail').value, email: document.getElementById('sEmail').value,
description: document.getElementById('sDesc').value, description: document.getElementById('sDesc').value,
scheduled_date: document.getElementById('sDate').value, scheduled_date: document.getElementById('sDate').value,
@@ -704,9 +612,6 @@
function resetForm() { function resetForm() {
document.querySelector('form').reset(); document.querySelector('form').reset();
document.getElementById('editServiceId').value = ""; document.getElementById('editServiceId').value = "";
document.getElementById('sTown').innerHTML = '<option value="">-- Elige provincia primero --</option>';
document.getElementById('sTown').disabled = true;
document.getElementById('zoneInfo').classList.add('hidden');
} }
</script> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY_AQUI&libraries=places&callback=initAutocomplete" async defer></script> <script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY_AQUI&libraries=places&callback=initAutocomplete" async defer></script>