inicio, grilla paraderos

src/layouts/Sidebar.svelte

@@ -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>
 

src/pages/paraderos/Home.css

@@ -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;
+}

src/pages/paraderos/Home.svelte

@@ -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>

src/routes/user.routes.js

@@ -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 },
-    
 ]