Added requests to modals

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte

@@ -55,10 +55,6 @@
         flex-direction: column;
     }
 
-    #modal {
-        position: sticky;
-    }
-
     #expenseList {
         margin-top: 10px;
         scrollbar-width: none;

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte

@@ -3,7 +3,6 @@
     import { onMount, afterUpdate } from 'svelte';
     import axios from 'axios';
     import {getCookie} from "svelte-cookie";
-    import ContentExpense from "./contents/ContentExpense.svelte";
     import ContentIncome from "./contents/ContentIncome.svelte";
 
     let data = [];
@@ -51,10 +50,6 @@
 </div>
 
 <style>
-    #modal {
-        position: sticky;
-    }
-
     #incomeInfo {
         display: flex;
         flex-direction: column;

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte

@@ -1,40 +1,79 @@
 <script>
-    import Modal from '../modals/Modal.svelte'
+    import Modal from '../modals/Modal.svelte';
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+
     let showModal;
+    let amount;
+
+    const selectedIncomeId = writable(''); 
+
+    onMount(async () => {
+        try {
+            const response = await fetch('http://localhost/getElements');
+            if (response.ok) {
+                const data = await response.json();
+                incomeOptions.set(data);
+            } else {
+                console.error('Error:', response.status);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    });
+
+    const incomeOptions = writable([]);
+
+    const createIncome = async () => {
+        const selectedIncome = $incomeOptions.find(income => income.incomeid === $selectedIncomeId);
+        const data = {
+            incomeid: selectedIncome.incomeid,
+            amount: $amount,
+        };
+
+        try {
+            const response = await fetch('http://localhost/createIncome', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+
+            if (response.ok) {
+            } else {
+                console.error('Error:', response.status);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
 </script>
 
-<div id="exp">
+<div id="inc">
-    <h2>Expenses</h2>
+    <h2>Incomes</h2>
     <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
         +
     </div>
     <Modal bind:showModal>
-        <h2 slot="header">
+        <div>
-            modal
+            <label for="amount">Amount:</label>
-            <small><em>adjective</em> mod·al \ˈmō-dəl\</small>
+            <input type="text" id="amount" bind:value={amount} />
-        </h2>
 
-        <ol class="definition-list">
+            <label for="income">Select Income:</label>
-            <li>of or relating to modality in logic</li>
+            <select id="income" bind:value={$selectedIncomeId}>
-            <li>
+                {#each $incomeOptions as income (income.incomeid)}
-                containing provisions as to the mode of procedure or the manner of taking effect —used of a
+                    <option value={income.incomeid}>{income.incomename}</option>
-                contract or legacy
+                {/each}
-            </li>
+            </select>
-            <li>of or relating to a musical mode</li>
-            <li>of or relating to structure as opposed to substance</li>
-            <li>
-                of, relating to, or constituting a grammatical form or category characteristically indicating
-                predication
-            </li>
-            <li>of or relating to a statistical mode</li>
-        </ol>
 
-        <a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+            <button on:click={createIncome}>Submit</button>
+        </div>
     </Modal>
 </div>
 
 <style>
-    #exp {
+    #inc {
         padding-left: 20px;
         padding-right: 20px;
         display: flex;