Skip to content
Snippets Groups Projects
Commit 50251f23 authored by Heinz-Ullrich Rings's avatar Heinz-Ullrich Rings
Browse files

changed styling of the navbar, also some bug fixes on newProjectButton

parent d2112740
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
UnicadoGUI/Frontend/src/lib/DeleteProjectByIdButton.svelte
+ 1
− 1
View file @ 50251f23
......@@ -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>
......
UnicadoGUI/Frontend/src/lib/NewProjectButton.svelte
+ 23
− 13
View file @ 50251f23
<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>
UnicadoGUI/Frontend/src/routes/+layout.svelte
+ 146
− 102
View file @ 50251f23
<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 />
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment