Refactored to new modal

Ecdar · Dec 14, 2023 · 0530e0d · 0530e0d
1 parent d998c42
commit 0530e0d
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 89 deletions.
diff --git a/src/lib/components/engineUI/EngineSeperate.svelte b/src/lib/components/engineUI/EngineSeperate.svelte
@@ -8,7 +8,6 @@
 		Check_box,
 		Check_box_outline_blank,
 	} from "svelte-google-materialdesign-icons";
-	import type iModalComponent from "$lib/interfaces/IModalComponent";
 	import {
 		comparePortRange,
 		validateEndPort,
@@ -18,9 +17,7 @@
 	} from "$lib/classes/engine/Validation";
 	import SvgButton from "../buttons/SvgButton.svelte";
 	import type { Writable } from "svelte/store";
-	// import { tempEngines } from "$lib/globalState/tempEngines";
 
-	let modalContainer: Modal & iModalComponent;
 	let nameContainer: HTMLInputElement;
 	let ipAddressContainer: HTMLInputElement;
 	let startPortContainer: HTMLInputElement;
@@ -60,12 +57,9 @@
 
 		$tempEngines = $tempEngines;
 
-		closeModal();
+		showDeleteDialog = false;	
 	}
 
-	function showModal() {
-		modalContainer.showModal();
-	}
 	function onNameChange() {
 		currentEngine.name = nameContainer.value;
 		currentEngine.hasBeenChanged = true;
@@ -131,20 +125,18 @@
 		}
 	}
 
-	function closeModal() {
-		modalContainer.closeModal();
-	}
-
 	function toggleUseBundle(event: MouseEvent) {
 		event.stopPropagation();
 		currentEngine.hasBeenChanged = true;
 		currentEngine.useBundle = !currentEngine.useBundle;
 		if (!currentEngine.useBundle) validateIP(currentEngine.address);
 		changeIpBorder();
 	}
+
+	let showDeleteDialog = false;
 </script>
 
-<Modal bind:this={modalContainer}>
+<Modal show={showDeleteDialog}>
 	<div class="delete-dialog">
 		<div class="inner-delete-dialog">
 			<h4 id="delete-text">
@@ -164,7 +156,7 @@
 				/>
 				<SvgButton
 					icon={Close}
-					click={closeModal}
+					click={() => {showDeleteDialog = false}}
 					size={24}
 					id="delete-button"
 				/>
@@ -187,7 +179,7 @@
 		/>
 	</div>
 	<div class="delete-button">
-		<SvgButton icon={Delete} id="show-modal" size={18} click={showModal} />
+	  <SvgButton icon={Delete} id="show-modal" size={18} click={() => {showDeleteDialog = true}} />
 	</div>
 	<p id="ip">IP Address:</p>
 	<div id="ip-input">

diff --git a/src/lib/components/engineUI/EngineUI.svelte b/src/lib/components/engineUI/EngineUI.svelte
@@ -4,16 +4,22 @@
 	import Modal from "../modal/Modal.svelte";
 	import EnginePanel from "./EnginePanel.svelte";
 	import { Save, Add, Close, Done } from "svelte-google-materialdesign-icons";
-	import type IModalComponent from "$lib/interfaces/IModalComponent";
 	import type IEngineSeperateComponent from "$lib/interfaces/IEngineSeperateComponent";
 	import SvgButton from "../buttons/SvgButton.svelte";
-	import { get, writable, type Writable } from "svelte/store";
+	import { writable, type Writable } from "svelte/store";
 	import type EngineSeperate from "./EngineSeperate.svelte";
-
+	import { showEngineUI } from "./showEngineUI";
 	import { engineStore } from "$lib/globalState/engines";
-	let dialogContainer!: Modal & IModalComponent;
-	let unsavedChangesModal: Modal & IModalComponent;
-	let incorrectInformationModal: Modal & IModalComponent;
+
+	let showUnsavedChanges = false;
+	$: if (!$showEngineUI && checkIfChanged() ){
+		showUnsavedChanges = false;
+	}
+
+	/**
+	 * Close the unsaved changes modal
+	 */
+	let showIncorrectInformation = false;
 
 	let tempEngines: Writable<Array<EngineDTO>> = writable<Array<EngineDTO>>(
 		[],
@@ -23,31 +29,6 @@
 		(EngineSeperate & IEngineSeperateComponent) | undefined
 	> = [];
 
-	/**
-	 * Reset the engineUI view and show the engineUI
-	 */
-	export function showEngineUI() {
-		tempEngines.set([]);
-
-		get(engineStore).forEach((engine) => {
-			let tempEngine: EngineDTO = {
-				address: engine.address,
-				name: engine.name,
-				portRangeEnd: engine.portRangeEnd,
-				portRangeStart: engine.portRangeStart,
-				id: engine.id,
-				hasBeenChanged: false,
-				useBundle: engine.useBundle,
-			};
-			tempEngines.update((items) => [...items, tempEngine]);
-		});
-
-		// if (get(tempEngines).length == 0) {
-		// 	addNewEngine();
-		// 	$tempEngines[0].hasBeenChanged = false; //dont mark empty engine as change
-		// }
-		dialogContainer.showModal();
-	}
 
 	//Always have at least one component!
 	$: if (
@@ -85,6 +66,11 @@
 		});
 	}
 
+	function forceCloseDialogContainer(){
+		showUnsavedChanges = false;
+		showIncorrectInformation = false;
+		$showEngineUI = false;
+	}
 	/**
 	 * onSubmit place all the temporary engines into EngineStorage, and delete the engines which have been deleted
 	 */
@@ -109,7 +95,6 @@
 			engineSeperateArray.forEach((engine) => {
 				if (engine != undefined) engine.setUpEngineSeperate();
 			});
-			incorrectInformationModal.showModal();
 		}
 	}
 	/**
@@ -126,38 +111,11 @@
 		);
 	}
 
-	/**
-	 * Close the modal, but check if there are any unsaved changes
-	 */
-	function closeModal() {
-		if (checkIfChanged()) {
-			unsavedChangesModal.showModal();
-			return;
-		}
-		dialogContainer.closeModal();
-	}
-
-	/**
-	 * Forcefully close the modal
-	 */
-	function forceCloseDialogContainer() {
-		closeUnsavedChangesModal();
-		dialogContainer.closeModal();
-	}
+	console.log($showEngineUI);
 
-	/**
-	 * Close the unsaved changes modal
-	 */
-	function closeUnsavedChangesModal() {
-		unsavedChangesModal.closeModal();
-	}
-
-	function closeIncorrectModal() {
-		incorrectInformationModal.closeModal();
-	}
 </script>
 
-<Modal bind:this={dialogContainer}>
+<Modal show={$showEngineUI}>
 	<div id="engine-ui-outer">
 		<div class="engine-panel" tabindex="-1">
 			<EnginePanel {tempEngines} {engineSeperateArray} />
@@ -181,14 +139,14 @@
 				id={"close-button"}
 				icon={Close}
 				size={24}
-				click={closeModal}
+				click={() => {$showEngineUI = false}}
 				color={"var(--engine-ui-text-color)"}
 			/>
 		</div>
 	</div>
 </Modal>
 
-<Modal bind:this={unsavedChangesModal}>
+<Modal show={showUnsavedChanges}>
 	<div class="modal-dialog">
 		<div class="inner-modal-dialog">
 			<h4 id="modal-text">
@@ -205,15 +163,15 @@
 				<SvgButton
 					icon={Close}
 					id="close-unsaved-changes-modal"
-					click={closeUnsavedChangesModal}
+					click={() => { showUnsavedChanges = false }}
 					size={24}
 				/>
 			</div>
 		</div>
 	</div>
 </Modal>
 
-<Modal bind:this={incorrectInformationModal}>
+<Modal show={showIncorrectInformation}>
 	<div class="modal-dialog" tabindex="-1">
 		<div class="inner-modal-dialog" tabindex="-1">
 			<h4 id="modal-text">
@@ -223,7 +181,7 @@
 			<div class="incorrect-information-button">
 				<SvgButton
 					icon={Done}
-					click={closeIncorrectModal}
+					click={() => { showIncorrectInformation = false }}
 					id="close-incorrect-information-modal"
 					size={24}
 				/>

diff --git a/src/lib/components/engineUI/showEngineUI.ts b/src/lib/components/engineUI/showEngineUI.ts
@@ -1,3 +1,4 @@
+import { writable } from "svelte/store";
 
-
+export const showEngineUI = writable(false);
 
diff --git a/src/lib/components/topBar/TopBar.svelte b/src/lib/components/topBar/TopBar.svelte
@@ -21,6 +21,8 @@
 	} from "svelte-google-materialdesign-icons";
 	import SettingsView from "$lib/components/settings/SettingsView.svelte";
 	import { showSettings } from "$lib/components/settings/showSettings";
+	import { showEngineUI } from "$lib/components/engineUI/showEngineUI";
+	import EngineUi from "../engineUI/EngineUI.svelte";
 
 	let projectHandler: typeof ProjectHandler;
 
@@ -214,7 +216,7 @@
 			icon={Settings_input_composite}
 			name="Engine Options"
 			on:click={() => {
-				dispatch("toggleEngineUI");
+				$showEngineUI = true;
 			}}
 		/>
 		<DropDownButton
@@ -248,6 +250,7 @@
 </div>
 
 <SettingsView />
+<EngineUi />
 
 <style>
 	div {

diff --git a/src/lib/interfaces/IEngineUIComponent.ts b/src/lib/interfaces/IEngineUIComponent.ts
diff --git a/src/lib/interfaces/IModalComponent.ts b/src/lib/interfaces/IModalComponent.ts
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@
		import { writable } from "svelte/store";


		export const showEngineUI = writable(false);