añadido boton para cerrar sesion
This commit is contained in:
@@ -0,0 +1,21 @@
|
|||||||
|
<!--
|
||||||
|
category: System
|
||||||
|
tags: [exit, shut, unplug, close]
|
||||||
|
version: "1.4"
|
||||||
|
unicode: "eba8"
|
||||||
|
-->
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
|
||||||
|
<path d="M9 12h12l-3 -3" />
|
||||||
|
<path d="M18 15l3 -3" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 451 B |
@@ -1,126 +1,166 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Navbar, NavbarBrand, NavbarToggler, Nav, Collapse } from "@sveltestrap/sveltestrap";
|
import {
|
||||||
import { onMount } from "svelte";
|
Navbar,
|
||||||
import { writable } from 'svelte/store';
|
NavbarBrand,
|
||||||
import { link, links } from "svelte-routing";
|
NavbarToggler,
|
||||||
import './css/popup.css';
|
Nav,
|
||||||
import type { Grupo } from "../types";
|
Collapse,
|
||||||
|
Button,
|
||||||
|
} from "@sveltestrap/sveltestrap";
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { writable } from "svelte/store";
|
||||||
|
import { link, links } from "svelte-routing";
|
||||||
|
import "./css/popup.css";
|
||||||
|
import type { Grupo } from "../types";
|
||||||
|
|
||||||
import { urlG } from "../stores/urlStore";
|
import { urlG } from "../stores/urlStore";
|
||||||
import { navigate } from "svelte-routing";
|
import { navigate } from "svelte-routing";
|
||||||
|
|
||||||
let isOpen: boolean = $state(false);
|
|
||||||
let hayNotis:boolean = $state(false);
|
|
||||||
|
|
||||||
const permisos = writable<Grupo[]>([]);
|
let isOpen: boolean = $state(false);
|
||||||
const email = localStorage.getItem('email');
|
let hayNotis: boolean = $state(false);
|
||||||
const token = sessionStorage.getItem('token');
|
|
||||||
|
|
||||||
async function obtenerPermisos(){
|
const permisos = writable<Grupo[]>([]);
|
||||||
try {
|
const email = localStorage.getItem("email");
|
||||||
const response = await fetch(String($urlG)+"/api/acciones",{
|
const token = sessionStorage.getItem("token");
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Auth' : String(token),
|
|
||||||
'Email' : String(email),
|
|
||||||
'Content-Type' : "application/json"
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (response.ok){
|
|
||||||
const json = await response.json();
|
|
||||||
|
|
||||||
permisos.set(json);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount( () => {
|
|
||||||
obtenerPermisos();
|
|
||||||
obtenerNotis();
|
|
||||||
})
|
|
||||||
|
|
||||||
async function obtenerNotis() {
|
async function obtenerPermisos() {
|
||||||
try {
|
try {
|
||||||
const responce = await fetch($urlG+"/api/notificaciones/haySinLeer", {
|
const response = await fetch(String($urlG) + "/api/acciones", {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
"Auth": String(token)
|
Auth: String(token),
|
||||||
|
Email: String(email),
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (response.ok) {
|
||||||
|
const json = await response.json();
|
||||||
|
|
||||||
|
permisos.set(json);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
if(responce.ok) {
|
|
||||||
let data = await responce.json();
|
|
||||||
hayNotis = data.message;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function redirijir(path: string){
|
onMount(() => {
|
||||||
navigate(path);
|
obtenerPermisos();
|
||||||
}
|
obtenerNotis();
|
||||||
|
});
|
||||||
|
|
||||||
let theme = $state(localStorage.getItem("theme") ?? "light");
|
async function obtenerNotis() {
|
||||||
const toggleTheme = () => {
|
try {
|
||||||
theme = theme === "light" ? "dark" : "light";
|
const responce = await fetch(
|
||||||
document.body.setAttribute("data-bs-theme", theme);
|
$urlG + "/api/notificaciones/haySinLeer",
|
||||||
localStorage.setItem("theme", theme);
|
{
|
||||||
};
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
Auth: String(token),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (responce.ok) {
|
||||||
|
let data = await responce.json();
|
||||||
|
hayNotis = data.message;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function redirijir(path: string) {
|
||||||
|
navigate(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
let theme = $state(localStorage.getItem("theme") ?? "light");
|
||||||
|
const toggleTheme = () => {
|
||||||
|
theme = theme === "light" ? "dark" : "light";
|
||||||
|
document.body.setAttribute("data-bs-theme", theme);
|
||||||
|
localStorage.setItem("theme", theme);
|
||||||
|
};
|
||||||
|
|
||||||
|
function cerrarSesion() {
|
||||||
|
localStorage.removeItem("email");
|
||||||
|
sessionStorage.removeItem("token");
|
||||||
|
navigate("/");
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Navbar container="xxl" expand="md" color="dark-subtle">
|
<Navbar container="xxl" expand="md" color="dark-subtle">
|
||||||
<NavbarBrand href="/">
|
<NavbarBrand href="/">AlquilaFacil</NavbarBrand>
|
||||||
AlquilaFacil
|
<div class="d-flex gap-2">
|
||||||
</NavbarBrand>
|
<div class="badge" style="background-color: turquoise;" use:links>
|
||||||
<div>
|
<a href="/Menu">
|
||||||
<div class="badge" style="background-color: turquoise;" use:links>
|
<img src="/home.svg" alt="Volver al Menú" />
|
||||||
<a href="/Menu">
|
</a>
|
||||||
<img src="/home.svg" alt="Volver al Menú"/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<button class="badge btn" onclick={toggleTheme} style="background-color: cadetblue;">
|
|
||||||
{#if theme === "light" }
|
|
||||||
<img src="/toggle-left.svg" alt=""/>
|
|
||||||
{:else}
|
|
||||||
<img src="/toggle-right.svg" alt=""/>
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
<button class="badge btn btn-info position-relative" onclick={()=>navigate("/notificaciones")}>
|
|
||||||
<img src="/bell.svg" alt="">
|
|
||||||
{#if hayNotis}
|
|
||||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
|
||||||
!
|
|
||||||
<span class="visually-hidden">unread messages</span>
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
|
||||||
<Collapse isOpen={isOpen} navbar expand="md">
|
|
||||||
<Nav class="ms-auto" navbar >
|
|
||||||
{#each $permisos as item }
|
|
||||||
<div class="dropdown">
|
|
||||||
<div class="btn-group" style="margin-left: 3px; margin-top: 3px">
|
|
||||||
<button class="btn btn-secondary" onclick={() => redirijir("/grupo/"+item.nombre)} >{item.nombre}</button>
|
|
||||||
<button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<span class="visually-hidden">Toggle Dropdown</span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end" use:links>
|
|
||||||
{#each item.idpermisos as perm}
|
|
||||||
<a class="dropdown-item link-underline-opacity-0 link-underline" href="/accion/{perm.id}" >{perm.descripcion}</a>
|
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<button
|
||||||
{/each}
|
class="badge btn"
|
||||||
</Nav>
|
onclick={toggleTheme}
|
||||||
</Collapse>
|
style="background-color: cadetblue;"
|
||||||
|
>
|
||||||
|
{#if theme === "light"}
|
||||||
|
<img src="/toggle-left.svg" alt="" />
|
||||||
|
{:else}
|
||||||
|
<img src="/toggle-right.svg" alt="" />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="badge btn btn-info position-relative"
|
||||||
|
onclick={() => navigate("/notificaciones")}
|
||||||
|
>
|
||||||
|
<img src="/bell.svg" alt="" />
|
||||||
|
{#if hayNotis}
|
||||||
|
<span
|
||||||
|
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
|
||||||
|
>
|
||||||
|
!
|
||||||
|
<span class="visually-hidden">unread messages</span>
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
<div class="vr"></div>
|
||||||
|
<button class="badge btn btn-danger" onclick={cerrarSesion}>
|
||||||
|
<img src="/logout.svg" alt="CerrarSesion" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
||||||
|
<Collapse {isOpen} navbar expand="md">
|
||||||
|
<Nav class="ms-auto" navbar>
|
||||||
|
{#each $permisos as item}
|
||||||
|
<div class="dropdown">
|
||||||
|
<div
|
||||||
|
class="btn-group"
|
||||||
|
style="margin-left: 3px; margin-top: 3px"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
onclick={() => redirijir("/grupo/" + item.nombre)}
|
||||||
|
>{item.nombre}</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
|
||||||
|
type="button"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" use:links>
|
||||||
|
{#each item.idpermisos as perm}
|
||||||
|
<a
|
||||||
|
class="dropdown-item link-underline-opacity-0 link-underline"
|
||||||
|
href="/accion/{perm.id}"
|
||||||
|
>{perm.descripcion}</a
|
||||||
|
>
|
||||||
|
<li><hr class="dropdown-divider" /></li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</Nav>
|
||||||
|
</Collapse>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
|
|||||||
Reference in New Issue
Block a user