inicio, grilla paraderos
Francisco Sandoval
parent
49f8c84bdf
commit
d53d73bb04
|
|
@ -31,6 +31,7 @@
|
|||
<i class="align-middle bi bi-map fs-4" />
|
||||
<span class="align-middle">Paraderos</span>
|
||||
</SideLink>
|
||||
|
||||
<SideLink to="/mapas/rutas">
|
||||
<i class="align-middle bi bi-map fs-4" />
|
||||
<span class="align-middle">Rutas</span>
|
||||
|
|
@ -38,13 +39,18 @@
|
|||
|
||||
<li class="sidebar-header">Mantenedores</li>
|
||||
|
||||
<SideLink to="/paraderos">
|
||||
<i class="align-middle bi bi-bus-front fs-4" />
|
||||
<span class="align-middle">Paraderos</span>
|
||||
</SideLink>
|
||||
|
||||
<SideLink to="/aplicaciones">
|
||||
<i class="align-middle bi bi-people fs-4" />
|
||||
<i class="align-middle bi bi-terminal fs-4" />
|
||||
<span class="align-middle">Aplicaciones</span>
|
||||
</SideLink>
|
||||
|
||||
<SideLink to="/comunas">
|
||||
<i class="align-middle bi bi-people fs-4" />
|
||||
<i class="align-middle bi bi-geo-alt fs-4" />
|
||||
<span class="align-middle">Comunas</span>
|
||||
</SideLink>
|
||||
|
||||
|
|
@ -59,7 +65,7 @@
|
|||
</SideLink>
|
||||
|
||||
<SideLink to="/roles">
|
||||
<i class="align-middle bi bi-people fs-4" />
|
||||
<i class="align-middle bi bi-person-badge fs-4" />
|
||||
<span class="align-middle">Roles</span>
|
||||
</SideLink>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
.table-paraderos td {
|
||||
min-width: 150px;
|
||||
}
|
||||
.table-paraderos td:focus {
|
||||
background: #80ffa6;
|
||||
}
|
||||
|
||||
.table-paraderos td > input {
|
||||
margin-top: -.75rem;
|
||||
margin-bottom: -.75rem;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
}
|
||||
|
||||
.table-paraderos td > input:focus {
|
||||
background-color: #80ffa6;
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<script>
|
||||
import "./Home.css"
|
||||
|
||||
let table = null
|
||||
let data = [ {} ]
|
||||
|
||||
function onKeyDownCell(ev) {
|
||||
if (ev.key === 'Escape') {
|
||||
ev.target.blur()
|
||||
return;
|
||||
}
|
||||
if (ev.key === 'Enter') {
|
||||
ev.returnValue = false;
|
||||
const {nextElementSibling: nextTd} = ev.target;
|
||||
if (nextTd && nextTd.contentEditable === 'true') {
|
||||
nextTd.focus()
|
||||
} else if (nextTd && nextTd.querySelector('input')) {
|
||||
nextTd.querySelector('input').focus()
|
||||
} else {
|
||||
ev.target.blur()
|
||||
const { cellIndex } = ev.target
|
||||
const rowTable = ev.target.parentElement
|
||||
if (rowTable.children.length === cellIndex + 1) {
|
||||
data = [ ...data, {}]
|
||||
setTimeout(() => {
|
||||
table.querySelector('tbody > tr:last-child > td').focus()
|
||||
},0)
|
||||
}
|
||||
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (ev.key === 'ArrowDown') {
|
||||
const { cellIndex } = ev.target
|
||||
const { rowIndex } = ev.target.parentElement
|
||||
const rowTable = table.querySelectorAll('tbody tr')[rowIndex] || null
|
||||
if (rowTable) {
|
||||
ev.target.blur()
|
||||
const cellTable = rowTable.querySelectorAll('td')[cellIndex]
|
||||
cellTable.focus()
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (ev.key === 'ArrowUp') {
|
||||
const { cellIndex } = ev.target
|
||||
const { rowIndex } = ev.target.parentElement
|
||||
const rowTable = table.querySelectorAll('tbody tr')[rowIndex - 2] || null
|
||||
if (rowTable) {
|
||||
ev.target.blur()
|
||||
const cellTable = rowTable.querySelectorAll('td')[cellIndex]
|
||||
cellTable.focus()
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onKeyDownInput(ev) {
|
||||
if (ev.key === 'Enter') {
|
||||
ev.returnValue = false;
|
||||
const {nextElementSibling: nextTd} = ev.target.parentElement;
|
||||
if (nextTd && nextTd.contentEditable === 'true') {
|
||||
nextTd.focus()
|
||||
} else if (nextTd.querySelector('input')) {
|
||||
nextTd.querySelector('input').focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<button class="btn btn-primary"><i class="bi bi-save"></i> Guardar</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-bordered table-paraderos" bind:this={table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Instalación</th>
|
||||
<th>Secuencia</th>
|
||||
<th>Comuna</th>
|
||||
<th>Eje</th>
|
||||
<th>Cod. Eje</th>
|
||||
<th>Desde</th>
|
||||
<th>Hasta</th>
|
||||
<th>Uso Parada</th>
|
||||
<th>Sentido</th>
|
||||
<th>Tipo Parada</th>
|
||||
<th>Nombre Corredor</th>
|
||||
<th>Refugio</th>
|
||||
<th>Categoría</th>
|
||||
<th>Nombre Parada</th>
|
||||
<th>Referencia Urbana</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data as item}
|
||||
<tr>
|
||||
<td contenteditable data-name="instalacion" bind:innerText={item.instalacion} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable data-name="secuencia" bind:innerText={item.secuencia} on:keydown={onKeyDownCell}></td>
|
||||
<!-- <td contenteditable bind:innerText={item.comuna} on:keydown={onKeyDownCell}></td> -->
|
||||
<td><input type="text" list="ex1" class="form-select" on:keydown={onKeyDownInput}></td>
|
||||
<td contenteditable bind:innerText={item.eje} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.codigo_eje} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.desde} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.hasta} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.uso_parada} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.sentido} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.tipo_parada} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.nombre_corredor} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.refugio} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.categoria} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.nombre_parada} on:keydown={onKeyDownCell}></td>
|
||||
<td contenteditable bind:innerText={item.referencia_urbana} on:keydown={onKeyDownCell}></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer"></div>
|
||||
</div>
|
||||
|
||||
<datalist id="ex1">
|
||||
<option value="prueba1"></option>
|
||||
<option value="prueba2"></option>
|
||||
<option value="prueba3"></option>
|
||||
</datalist>
|
||||
|
|
@ -13,6 +13,7 @@ import PageMapaParaderos from '$/pages/mapas/Paraderos.svelte'
|
|||
import PageMapaRutas from '$/pages/mapas/Rutas.svelte'
|
||||
import PageRoles from '$/pages/roles/Admin.svelte'
|
||||
import PageRolesyAplicaciones from '$/pages/rolesaplicaciones/Admin.svelte'
|
||||
import PageParaderos from '$/pages/paraderos/Home.svelte'
|
||||
|
||||
export const routes = [
|
||||
{ path: '/', component: PageHome },
|
||||
|
|
@ -29,6 +30,6 @@ export const routes = [
|
|||
{ path: '/personas/:rut', component: PagePersonaModifica },
|
||||
{ path: '/mapas/paraderos', component: PageMapaParaderos },
|
||||
{ path: '/mapas/rutas', component: PageMapaRutas },
|
||||
{ path: '/paraderos', component: PageParaderos },
|
||||
{ path: '*', component: PageError },
|
||||
|
||||
]
|
||||
Loading…
Reference in New Issue