created a component for every button for actions with the Project list

UnicadoGUI/Frontend/src/lib/BaseButton.svelte

+<script>
+    import { Button, Icon } from "@sveltestrap/sveltestrap";
+
+    export let color = "primary";
+    export let outline = false;
+    export let iconName = "";
+    export let text = "";
+    export let onClick = () => {};
+
+</script>
+
+<Button {color} {outline} on:click={onClick}>
+    {#if iconName}
+        <Icon name={iconName} />{' '}
+    {/if}
+    {text}
+</Button>

UnicadoGUI/Frontend/src/lib/DeleteProjectByIdButton.svelte

+<script lang="ts">
+    import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Icon } from "@sveltestrap/sveltestrap";
+    import { removeProjectById, getProjectNameById } from '../stores/projects';
+    import { createEventDispatcher } from 'svelte';
+
+    export let projectId : number;
+    const dispatch = createEventDispatcher();
+    let isModalOpen = false;
+
+    function openModal() {
+        isModalOpen = true;
+        dispatch('openModal');
+    }
+
+    function closeModal() {
+        isModalOpen = false;
+        dispatch('closeModal');
+    }
+
+    function handleDeleteProject() {
+        if (projectId) {
+            removeProjectById(projectId);
+            closeModal();
+        }
+    }
+</script>
+
+<Button color="danger" outline on:click={openModal}>
+    <Icon name="trash" />
+</Button>
+
+<Modal isOpen={isModalOpen} toggle={closeModal}>
+    <ModalHeader toggle={closeModal}>Remove Project</ModalHeader>
+    <ModalBody>
+        <p>Are you sure you want to remove the project with the name: <strong>{getProjectNameById(projectId)}</strong>?</p>
+    </ModalBody>
+    <ModalFooter>
+        <Button color="danger" on:click={handleDeleteProject}>Remove Project</Button>
+        <Button color="secondary" on:click={closeModal}>Cancel</Button>
+    </ModalFooter>
+</Modal>
\ No newline at end of file

UnicadoGUI/Frontend/src/lib/DeleteProjectByNameButton.svelte

+<script lang="ts">
+    import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Icon } from "@sveltestrap/sveltestrap";
+    import { removeProject } from '../stores/projects';
+    import { createEventDispatcher } from 'svelte';
+
+    export let projectToRemove = ''; // Der Name des zu löschenden Projekts
+    const dispatch = createEventDispatcher();
+    let isModalOpen = false;
+
+    function openModal() {
+        isModalOpen = true;
+        dispatch('openModal'); // Optional: Benachrichtige Hauptkomponente
+    }
+
+    function closeModal() {
+        isModalOpen = false;
+        dispatch('closeModal'); // Optional: Benachrichtige Hauptkomponente
+    }
+
+    function handleDeleteProject() {
+        if (projectToRemove.trim() !== '') {
+            removeProject(projectToRemove);
+            projectToRemove = ''; // Eingabefeld leeren
+            closeModal(); // Modal schließen nach dem Löschen
+        }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+        if (event.key === 'Enter') {
+            handleDeleteProject();
+        }
+    }
+</script>
+
+<!-- Button zum Öffnen des Modals -->
+<Button color="danger" outline on:click={openModal}>
+    <Icon name="trash" /> Remove Project
+</Button>
+
+<!-- Modal zum Löschen eines Projekts -->
+<Modal isOpen={isModalOpen} toggle={closeModal}>
+    <ModalHeader toggle={closeModal}>Remove Project</ModalHeader>
+    <ModalBody>
+        <input
+            type="text"
+            bind:value={projectToRemove}
+            placeholder="Enter project name to remove..."
+            class="form-control"
+            on:keydown={handleKeyDown}
+        />
+    </ModalBody>
+    <ModalFooter>
+        <Button color="danger" on:click={handleDeleteProject}>Remove Project</Button>
+        <Button color="secondary" on:click={closeModal}>Cancel</Button>
+    </ModalFooter>
+</Modal>

UnicadoGUI/Frontend/src/lib/LoadProjectsFromServerButton.svelte

+<script>
+    import { Button, Icon } from "@sveltestrap/sveltestrap";
+    import { loadProjectsFromServer } from '../stores/projects';
+
+    const triggerFileDownload = async () => {
+    try {
+            await loadProjectsFromServer(); 
+                console.log("Project list Loaded successfully");
+            } catch (error) {
+                console.error("Error while trying to load the project list", error);
+    }
+  }
+</script>
+
+<Button on:click={triggerFileDownload}>
+    <Icon name="cloud-upload"/>
+    Load project Liste from the server
+</Button>
\ No newline at end of file

UnicadoGUI/Frontend/src/lib/LoadProjectsFromZipButton.svelte

+<script lang="ts">
+import { Button, Icon} from "@sveltestrap/sveltestrap";
+import { loadProjectsFromZip } from '../stores/projects';
+
+function handleFileUpload(event : Event) {
+    const target = event.target as HTMLInputElement;
+    const selectedFile = target.files ? target.files[0] : null;
+    if (selectedFile) {
+      loadProjectsFromZip(selectedFile);
+    }
+  }
+
+function triggerFileInput() {
+    const fileInput = document.getElementById('file-input');
+    if (fileInput) {
+       fileInput.click();
+     } else {
+      console.error('file-input not found');
+    }
+  }
+</script>
+
+<input type="file" accept=".zip" id="file-input" on:change={handleFileUpload} style="display: none;" />
+
+
+<Button on:click={triggerFileInput}>
+    <Icon name="cloud-upload"/>
+    Load project Liste von zip-file
+</Button>
\ No newline at end of file

UnicadoGUI/Frontend/src/lib/NewProjectButton.svelte

+<script>
+    import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Icon } from "@sveltestrap/sveltestrap";
+    import { addProject } from '../stores/projects';
+    import { createEventDispatcher } from 'svelte';
+
+    export let projectName = '';
+    const dispatch = createEventDispatcher();
+    let isModalOpen = false;
+
+  /**  function openModal() {
+        isModalOpen = true;
+        dispatch('openModal');
+    }
+*/
+    function closeModal() {
+        isModalOpen = false;
+        dispatch('closeModal');
+    }
+
+    function handleAddProject() {
+        if (projectName.trim() !== '') {
+            addProject(projectName);
+            projectName = '';
+            closeModal();
+        }
+    }
+
+    function handleKeyDown(/** @type KeyboardEvent **/ event) {
+        if (event.key === 'Enter') {
+            handleAddProject();
+        }
+    }
+
+</script>
+
+<Modal isOpen={isModalOpen} toggle={closeModal}>
+    <ModalHeader toggle={closeModal}>Add New Project</ModalHeader>
+    <ModalBody>
+        <input
+            type="text"
+            bind:value={projectName}
+            placeholder="Enter project name..."
+            class="form-control"
+            on:keydown={handleKeyDown}
+        />
+    </ModalBody>
+    <ModalFooter>
+        <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

UnicadoGUI/Frontend/src/lib/SaveProjectsToServerButton.svelte

+<script>
+    import { Button, Icon} from "@sveltestrap/sveltestrap";
+    import { saveProjectsOnServer } from '../stores/projects';
+    
+      const triggerFileUpload = async () => {
+        try {
+            await saveProjectsOnServer(); 
+                console.log("Project list saved successfully");
+            } catch (error) {
+                console.error("Error while trying to save the project list", error);
+        }
+    }
+</script>
+
+<Button on:click={triggerFileUpload}>
+    <Icon name="cloud-upload"/>
+    Save projects list on the server
+</Button>
\ No newline at end of file

UnicadoGUI/Frontend/src/lib/SaveProjectsToZipButton.svelte

+<script lang="ts">
+    import { Button, Icon } from "@sveltestrap/sveltestrap";
+    import { saveProjectsAsZip } from '../stores/projects';
+
+    const handleSave = async () => {
+        try {
+            await saveProjectsAsZip(); 
+                console.log("Projects saved successfully");
+            } catch (error) {
+                console.error("Error while trying to save the project list", error);
+        }
+    }
+</script>
+
+
+
+<Button on:click={handleSave}>
+    <Icon name="cloud-download"/>
+    Save Project list to a zip-file
+</Button>
\ No newline at end of file

UnicadoGUI/Frontend/src/routes/+layout.svelte

 <script lang="ts">
     import {Container, Image, Row, Styles, Col, Nav, NavItem, NavLink, Icon, Modal, ModalHeader, ModalBody, ModalFooter, Button} from '@sveltestrap/sveltestrap';
-    import { removeProjectbyId, userProjects, addProject } from '../stores/projects';
+    import { userProjects, addProject } from '../stores/projects';
     import { onMount } from 'svelte';
-
+    import DeleteProjectByIdButton from '$lib/DeleteProjectByIdButton.svelte';
   let projects : any[] = [];
   let showModal = false;
   let projectName = '';
@@ -39,9 +39,6 @@ function newProject() {
         }
     }
 
-    function deleteProject(id: number) {
-        removeProjectbyId(id);
-    }
 </script>
 
 <Container fluid>
@@ -67,9 +64,7 @@ function newProject() {
                                 <Icon name="airplane"></Icon>
                                 <span class="ms-1 d-none d-sm-inline">{project.name}</span>
                             </NavLink>
-                            <Button outline on:click={() => deleteProject(project.id)}>
-                                <Icon name="trash"/> <!-- Icon zum Entfernen des Projekts -->
-                            </Button>
+                            <DeleteProjectByIdButton projectId={project.id} />
                         
                         {#if openProjectIndex === index}
                             <ul class="sub-menu">

UnicadoGUI/Frontend/src/routes/+page.svelte

 <script>
-    import { Button, Styles, Icon, Modal, ModalHeader, ModalBody, ModalFooter} from "@sveltestrap/sveltestrap";
-    import { addProject, removeProject, saveProjectsAsZip, loadProjectsFromZip, saveProjectsOnServer, loadProjectsFromServer } from '../stores/projects';
-    let projectName = '';
-    let projectToRemove = '';
-    let showModal = false;
+  import { Styles } from "@sveltestrap/sveltestrap";
 
-    function newProject() {
-        if (projectName.trim() !== '') {
-            addProject(projectName);
-            projectName = '';
-            closeModal()
-        }
-    }
-
-    function deleteProject() {
-      if (projectToRemove.trim() !== '') {
-        removeProject(projectToRemove);
-        projectToRemove = '';
-      }
-    }
-
-    function openModal() {
-      showModal = true;
-    }
-
-    function closeModal() {
-      showModal = false;
-    }
-    const handleSave = async () => {
-        try {
-            await saveProjectsAsZip(); 
-                console.log("Projects saved successfully");
-            } catch (error) {
-                console.error("Error while trying to save the project list", error);
-        }
-    }
-
-  function handleFileUpload(/** @type any */event) {
-    const selectedFile = event.target.files[0];
-    if (selectedFile) {
-      loadProjectsFromZip(selectedFile);
-    }
-  }
-
-  function triggerFileInput() {
-    const fileInput = document.getElementById('file-input');
-    if (fileInput) {
-       fileInput.click();
-     } else {
-      console.error('file-input not found');
-    }
-  }
-
-  const triggerFileUpload = async () => {
-        try {
-            await saveProjectsOnServer(); 
-                console.log("Project list saved successfully");
-            } catch (error) {
-                console.error("Error while trying to save the project list", error);
-        }
-    }
-
-
-  const triggerFileDownload = async () => {
-    try {
-            await loadProjectsFromServer(); 
-                console.log("Project list Loaded successfully");
-            } catch (error) {
-                console.error("Error while trying to load the project list", error);
-    }
-  }
+  let projectName = "";
+  let projectToRemove = "";
 
+  import NewProjectButton from "$lib/NewProjectButton.svelte";
+  import DeleteProjectButton from "$lib/DeleteProjectByNameButton.svelte";
+  import SaveProjectsToZipButton from "$lib/SaveProjectsToZipButton.svelte";
+  import LoadProjectsFromZipButton from "$lib/LoadProjectsFromZipButton.svelte";
+  import LoadProjectFromServerButton from "$lib/LoadProjectsFromServerButton.svelte";
+  import SaveProjectsToServerButton from "$lib/SaveProjectsToServerButton.svelte";
 </script>
-<h1>Welcome to the UNICADO WebApp</h1>
-
-<Button color="dark" outline on:click={openModal}>
-    <Icon name="window-plus"/>
-    New Project
-</Button>
-
-<Button color="dark" outline on:click={deleteProject}>
-    <Icon name="window-plus"/>
-    Remove Project
-</Button>
-
-<Button on:click={handleSave}>
-    <Icon name="cloud-download"/>
-    Save Project list to a zip-file
-</Button>
 
-<input type="file" accept=".zip" id="file-input" on:change={handleFileUpload} style="display: none;" />
-
-<Button on:click={triggerFileInput}>
-    <Icon name="cloud-upload"/>
-    Load project Liste von zip-file
-</Button>
-
-<Button on:click={triggerFileUpload}>
-    <Icon name="cloud-upload"/>
-    Save projects list on the server
-</Button>
+<h1>Welcome to the UNICADO WebApp</h1>
 
-<Button on:click={triggerFileDownload}>
-    <Icon name="cloud-upload"/>
-    Load project Liste from the server
-</Button>
-{#if showModal}
-    <Modal isOpen={showModal} toggle={closeModal}>
-        <ModalHeader toggle={closeModal}>Add New Project</ModalHeader>
-        <ModalBody>
-            <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}
+<NewProjectButton bind:projectName />
+<DeleteProjectButton bind:projectToRemove />
+<SaveProjectsToZipButton />
+<LoadProjectsFromZipButton />
 
-<p>Create new Project....<br>Open existing Project...</p>
+<LoadProjectFromServerButton />
+<SaveProjectsToServerButton />
 
-<Styles/>
\ No newline at end of file
+<Styles />

UnicadoGUI/Frontend/src/stores/projects.js

@@ -45,7 +45,7 @@ export function removeProject(name) {
 /**
  * @param {number} id 
  */
-export function removeProjectbyId(id) {
+export function removeProjectById(id) {
   userProjects.update(projects => {
     return projects.filter((/** @type {{ id: number; }} */ project) => project.id !== id);
   });
@@ -64,7 +64,6 @@ export function removeProjectbyId(id) {
  * @returns {Promise<void>}
  */
 export const saveProjectsAsZip = async () => {
-  const zip = new JSZip();
 
   /** @type {Project[]} */
   let projectArray = [];
@@ -77,10 +76,26 @@ export const saveProjectsAsZip = async () => {
   const a = document.createElement('a');
   a.href = url;
   a.download = 'projects.zip';
+
+  document.body.appendChild(a);
   a.click();
+
+  document.body.removeChild(a);
   URL.revokeObjectURL(url);
 };
 
+/**
+ * @param {number} id - Die Projekt-ID
+ * @returns {string | undefined} - Der Name des Projekts oder undefined, wenn nicht gefunden
+ */
+export function getProjectNameById(id) {
+  let projectName;
+  userProjects.subscribe((projects) => {
+    const project = projects.find( (/** @type {Project} */ p) => p.id === id);
+    projectName = project ? project.name : undefined;
+  })();
+  return projectName;
+}
 
 
 /**