diff --git a/UnicadoGUI/Frontend/src/lib/DeleteProjectByIdButton.svelte b/UnicadoGUI/Frontend/src/lib/DeleteProjectByIdButton.svelte
index 4852c13fe70aec51100af65498eba816cb93c61e..9bca9e86e45379fd9966c85d4ca49bfc832b199e 100644
--- a/UnicadoGUI/Frontend/src/lib/DeleteProjectByIdButton.svelte
+++ b/UnicadoGUI/Frontend/src/lib/DeleteProjectByIdButton.svelte
@@ -25,7 +25,7 @@
}
</script>
-<Button color="danger" outline on:click={openModal}>
+<Button color="danger" outline on:click={openModal} style="fit-content">
<Icon name="trash" />
</Button>
diff --git a/UnicadoGUI/Frontend/src/lib/NewProjectButton.svelte b/UnicadoGUI/Frontend/src/lib/NewProjectButton.svelte
index 6927270890777898af16c542014f7d2fedefc8fd..06636fe9ef086e07fab7d4aa2e5f10052a1ff17e 100644
--- a/UnicadoGUI/Frontend/src/lib/NewProjectButton.svelte
+++ b/UnicadoGUI/Frontend/src/lib/NewProjectButton.svelte
@@ -1,38 +1,48 @@
<script>
- import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Icon } from "@sveltestrap/sveltestrap";
- import { addProject } from '../stores/projects';
- import { createEventDispatcher } from 'svelte';
+ import {
+ Modal,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+ Button,
+ Icon,
+ } from "@sveltestrap/sveltestrap";
+ import { addProject } from "../stores/projects";
+ import { createEventDispatcher } from "svelte";
- export let projectName = '';
+ export let projectName = "";
const dispatch = createEventDispatcher();
let isModalOpen = false;
- /** function openModal() {
+ function openModal() {
isModalOpen = true;
- dispatch('openModal');
+ dispatch("openModal");
}
-*/
+
function closeModal() {
isModalOpen = false;
- dispatch('closeModal');
+ dispatch("closeModal");
}
function handleAddProject() {
- if (projectName.trim() !== '') {
+ if (projectName.trim() !== "") {
addProject(projectName);
- projectName = '';
+ projectName = "";
closeModal();
}
}
function handleKeyDown(/** @type KeyboardEvent **/ event) {
- if (event.key === 'Enter') {
+ if (event.key === "Enter") {
handleAddProject();
}
}
-
</script>
+<Button color="success" outline on:click={openModal}>
+ <Icon name="window-plus" /> New Project
+</Button>
+
<Modal isOpen={isModalOpen} toggle={closeModal}>
<ModalHeader toggle={closeModal}>Add New Project</ModalHeader>
<ModalBody>
@@ -48,4 +58,4 @@
<Button color="primary" on:click={handleAddProject}>Add Project</Button>
<Button color="secondary" on:click={closeModal}>Cancel</Button>
</ModalFooter>
-</Modal>
\ No newline at end of file
+</Modal>
diff --git a/UnicadoGUI/Frontend/src/routes/+layout.svelte b/UnicadoGUI/Frontend/src/routes/+layout.svelte
index d0ae914fc6f9bcc6361e2464f2b137dce773b2be..472a884ee69db05799e14d503639144d3df462c7 100644
--- a/UnicadoGUI/Frontend/src/routes/+layout.svelte
+++ b/UnicadoGUI/Frontend/src/routes/+layout.svelte
@@ -1,132 +1,176 @@
<script lang="ts">
- import {Container, Image, Row, Styles, Col, Nav, NavItem, NavLink, Icon, Modal, ModalHeader, ModalBody, ModalFooter, Button} from '@sveltestrap/sveltestrap';
- import { userProjects, addProject } from '../stores/projects';
- import { onMount } from 'svelte';
- import DeleteProjectByIdButton from '$lib/DeleteProjectByIdButton.svelte';
- let projects : any[] = [];
- let showModal = false;
- let projectName = '';
-let projectIdToRemove = '';
- onMount(() => {
- const unsubscribe = userProjects.subscribe(value => {
- projects = value;
+ import {
+ Container,
+ Image,
+ Row,
+ Styles,
+ Col,
+ Nav,
+ NavItem,
+ NavLink,
+ Icon,
+ Modal,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+ Button,
+ } from "@sveltestrap/sveltestrap";
+ import { userProjects, addProject } from "../stores/projects";
+ import { onMount } from "svelte";
+ import DeleteProjectByIdButton from "$lib/DeleteProjectByIdButton.svelte";
+ let projects: any[] = [];
+ let showModal = false;
+ let projectName = "";
+ let projectIdToRemove = "";
+ onMount(() => {
+ const unsubscribe = userProjects.subscribe((value) => {
+ projects = value;
+ });
+ return () => unsubscribe();
});
- return () => unsubscribe();
- });
- function openModal() {
- showModal = true;
+ function openModal() {
+ showModal = true;
}
function closeModal() {
- showModal = false;
+ showModal = false;
}
- let openProjectIndex : any = null;
+ let openProjectIndex: any = null;
- function toggleSubItems(index : number) {
- if (openProjectIndex === index) {
- openProjectIndex = null;
- } else {
- openProjectIndex = index;
- }
- }
-function newProject() {
- if (projectName.trim() !== '') {
- addProject(projectName);
- projectName = '';
- showModal = false;
+ function toggleSubItems(index: number) {
+ if (openProjectIndex === index) {
+ openProjectIndex = null;
+ } else {
+ openProjectIndex = index;
}
}
-
</script>
<Container fluid>
<Row class="flex-nowrap">
- <Col class="auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark" style="position: fixed">
- <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
- <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
- <Image fluid alt="" src="./favicon.png" style="max-width:20%;padding-right: 10px"/>
+ <Col
+ class="auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark"
+ style="position: fixed"
+ >
+ <div
+ class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100"
+ >
+ <a
+ href="/"
+ class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none"
+ >
+ <Image
+ fluid
+ alt=""
+ src="./favicon.png"
+ style="max-width:20%;padding-right: 10px"
+ />
<span class="fs-2 d-none d-sm-inline">Unicado</span>
</a>
- <Nav class="nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start " id="menu">
+ <Nav
+ class="nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start "
+ id="menu"
+ >
<NavItem>
<NavLink href="/" class="align-middle px-0 text-light">
<Icon name="house"></Icon>
<span class="ms-1 d-none d-sm-inline">Home</span>
</NavLink>
</NavItem>
-
+
{#each projects as project, index}
<NavItem>
- <NavLink class="align-middle px-0 text-light"
- on:click={() => toggleSubItems(index)}>
+ <NavLink
+ class="align-middle px-0 text-light"
+ on:click={() => toggleSubItems(index)}
+ >
+ <div class="d-flex justify-content-between align-items-center w-100">
+ <div class="d-flex align-items-center">
<Icon name="airplane"></Icon>
- <span class="ms-1 d-none d-sm-inline">{project.name}</span>
+ <span class="ms-1 d-none d-sm-inline"
+ >{project.name}</span
+ >
+ </div>
+ <DeleteProjectByIdButton projectId={project.id} />
+ </div>
</NavLink>
- <DeleteProjectByIdButton projectId={project.id} />
-
- {#if openProjectIndex === index}
- <ul class="sub-menu">
- <NavItem>
- <NavLink href="/model" class="align-middle px-0 text-light">
- <Icon name="airplane"></Icon>
- <span class="ms-1 d-none d-sm-inline">Simulationsmodel</span>
- </NavLink>
- </NavItem>
- <NavItem>
- <NavLink href="/graphs/{project.id}" class="align-middle px-0 text-light">
- <Icon name="graph-down"></Icon>
- <span class="ms-1 d-none d-sm-inline">Graphs</span>
- </NavLink>
- </NavItem>
- <NavItem>
- <NavLink href="/reports/{project.id}" class="align-middle px-0 text-light">
- <Icon name="journal-richtext"></Icon>
- <span class="ms-1 d-none d-sm-inline">Reports</span>
- </NavLink>
- </NavItem>
- <NavItem>
- <NavLink href="/logs/{project.id}" class="align-middle px-0 text-light">
- <Icon name="card-text"></Icon>
- <span class="ms-1 d-none d-sm-inline">Logs</span>
- </NavLink>
- </NavItem>
- <NavItem>
- <NavLink href="/settings" class="align-middle px-0 text-light">
- <Icon name="gear"></Icon>
- <span class="ms-1 d-none d-sm-inline">Settings</span>
- </NavLink>
- </NavItem>
- </ul>
- {/if}
- </NavItem>
- {/each}
- <NavItem>
- <Button outline on:click={openModal}>
- <Icon name="window-plus"/>
- </Button>
- </NavItem>
- {#if showModal}
- <Modal isOpen={showModal} toggle={closeModal}>
- <ModalHeader toggle={closeModal}>Add New Project</ModalHeader>
- <ModalBody>
- <!-- Eingabefeld für neuen Projektnamen -->
- <input
- type="text"
- bind:value={projectName}
- placeholder="Enter project name..."
- />
- </ModalBody>
- <ModalFooter>
- <Button color="primary" on:click={newProject}>Add Project</Button>{' '}
- <Button color="secondary" on:click={closeModal}>Cancel</Button>
- </ModalFooter>
- </Modal>
-{/if}
+
+ {#if openProjectIndex === index}
+ <ul class="sub-menu">
+ <NavItem>
+ <NavLink
+ href="/model"
+ class="align-middle px-0 text-light"
+ >
+ <Icon name="airplane"></Icon>
+ <span
+ class="ms-1 d-none d-sm-inline"
+ >Simulationsmodel</span
+ >
+ </NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink
+ href="/graphs/{project.id}"
+ class="align-middle px-0 text-light"
+ >
+ <Icon name="graph-down"></Icon>
+ <span
+ class="ms-1 d-none d-sm-inline"
+ >Graphs</span
+ >
+ </NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink
+ href="/reports/{project.id}"
+ class="align-middle px-0 text-light"
+ >
+ <Icon name="journal-richtext"
+ ></Icon>
+ <span
+ class="ms-1 d-none d-sm-inline"
+ >Reports</span
+ >
+ </NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink
+ href="/logs/{project.id}"
+ class="align-middle px-0 text-light"
+ >
+ <Icon name="card-text"></Icon>
+ <span
+ class="ms-1 d-none d-sm-inline"
+ >Logs</span
+ >
+ </NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink
+ href="/settings"
+ class="align-middle px-0 text-light"
+ >
+ <Icon name="gear"></Icon>
+ <span
+ class="ms-1 d-none d-sm-inline"
+ >Settings</span
+ >
+ </NavLink>
+ </NavItem>
+ </ul>
+ {/if}
+ </NavItem>
+ {/each}
+ <NavItem></NavItem>
</Nav>
- <hr>
- <Nav class="pb-4" style="width: 100%; display: flex; justify-content: space-between">
+ <hr />
+ <Nav
+ class="pb-4"
+ style="width: 100%; display: flex; justify-content: space-between"
+ >
<NavItem>
<NavLink href="/" class="align-middle text-light">
<Icon name="box-arrow-in-right"></Icon>
@@ -148,4 +192,4 @@ function newProject() {
</Row>
</Container>
-<Styles/>
+<Styles />