Files
administracion-redmine-api/src/App.svelte
2025-12-15 20:05:40 -03:00

96 lines
3.2 KiB
Svelte

<script lang="ts">
import Header from "./componentes/header.svelte";
import CalcularDias from "./componentes/paginas/CalcularDias.svelte";
import CaminoCritico from "./componentes/paginas/CaminoCritico.svelte";
import IndiceDeControl from "./componentes/paginas/IndiceDeControl.svelte";
import RelacionesNodos from "./componentes/paginas/RelacionesNodos.svelte";
import { TablaNodos } from "./componentes/paginas/TablaNodos.svelte";
import TablaProyect from "./componentes/paginas/TablaProyect.svelte";
import Tarjeta from "./componentes/tarjeta.svelte";
import html2canvas from "html2canvas";
let pagina = $state(0);
let issues: any[] = $state([]);
$effect(() => {
obtener_issues();
});
async function obtener_issues() {
/*
const req = await fetch(
"https://fedesrv.ddns.net/redmine/issues.json?key={key}&proyect_id=1&limit=100&status_id=2&tracker_id=1",
);
if (req.ok) {
issues = await req.json();
}
*/
const data = await import("./assets/issues.json");
issues = data.issues;
}
async function exportToPNG(issue: any) {
setTimeout(() => {}, 100);
const element = document.getElementById(`card-${issue.id}`);
if (element) {
const canvas = await html2canvas(element);
const image = canvas.toDataURL("image/png");
const link = document.createElement("a");
link.download = `issue-${issue.id}.png`;
link.href = image;
link.click();
}
setTimeout(() => {}, 100);
}
async function exportAllToPNG(issues: any[]) {
issues.forEach(async (issue) => {
const element = document.getElementById(`card-${issue.id}`);
if (element) {
const canvas = await html2canvas(element);
const image = canvas.toDataURL("image/png");
const link = document.createElement("a");
link.download = `issue-${issue.id}.png`;
link.href = image;
link.click();
}
});
}
</script>
<main>
<Header bind:pagina></Header>
{#if pagina == 0}
<button
onclick={() => exportAllToPNG(issues)}
class="btn btn-primary mt-3">Exportar a PNG</button
>
{#if issues.length == 0}
<p>Cargando...</p>
{:else}
<div class="d-flex justify-center flex-column align-items-center">
{#each issues as issue}
<div class="m-2 w-75">
<Tarjeta {issue} />
<!--
<button
onclick={() => exportToPNG(issue)}
class="btn btn-primary mt-3">Exportar a PNG</button
>
-->
</div>
{/each}
</div>
{/if}
{:else if pagina === 1}
<CalcularDias issuesp={issues} />
{:else if pagina === 2}
<IndiceDeControl {issues} />
{:else if pagina === 3}
<TablaProyect {issues} />
{:else if pagina === 4}
<RelacionesNodos />
{:else if pagina === 5}
<CaminoCritico />
{/if}
</main>