From 4cbdfd56f777d857c0a5da165bdea9f956b49bde Mon Sep 17 00:00:00 2001
From: Sonika <kumari.sonika@seryfertsoft.com>
Date: Mon, 19 Feb 2024 08:38:16 +0530
Subject: [PATCH] header,navigation and component

---
 src/APIopertaions.svelte  |  37 ++++++++
 src/App.svelte            | 181 ++++++++++++++------------------------
 src/CRUDoperations.svelte | 128 +++++++++++++++++++++++++++
 3 files changed, 231 insertions(+), 115 deletions(-)
 create mode 100644 src/APIopertaions.svelte
 create mode 100644 src/CRUDoperations.svelte

diff --git a/src/APIopertaions.svelte b/src/APIopertaions.svelte
new file mode 100644
index 0000000..784a487
--- /dev/null
+++ b/src/APIopertaions.svelte
@@ -0,0 +1,37 @@
+<script>
+    import { onMount } from 'svelte';
+  
+    // Define an array to store the fetched data
+    let fetchedData = [];
+  
+    // Function to fetch data from the API
+    async function fetchData() {
+      try {
+        const response = await fetch('https://api.example.com/data'); // Replace with your API endpoint
+        if (!response.ok) {
+          throw new Error('Failed to fetch data');
+        }
+        fetchedData = await response.json(); // Parse the JSON response
+      } catch (error) {
+        console.error('Error fetching data:', error.message);
+      }
+    }
+  
+    // Call the fetchData function when the component is mounted
+    onMount(fetchData);
+  </script>
+  
+  <div class="center-container">
+    <div class="container">
+        <p>hi</p>
+      <!-- Your existing Svelte code here -->
+  
+      <!-- Display the fetched data -->
+      <ul>
+        {#each fetchedData as item}
+          <li>{item.first} {item.last}</li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index de20ba1..b5997e2 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,128 +1,79 @@
-
-  
 <script>
-	let people = [
-		{ first: 'Hans', last: 'Emil' },
-		{ first: 'Max', last: 'Mustermann' },
-		{ first: 'Roman', last: 'Tisch' }
-	];
-
-	let prefix = '';
-	let first = '';
-	let last = '';
-	let i = 0;
-
-	$: filteredPeople = prefix
-		? people.filter((person) => {
-				const name = `${person.last}, ${person.first}`;
-				return name.toLowerCase().startsWith(prefix.toLowerCase());
-		  })
-		: people;
-
-	$: selected = filteredPeople[i];
-
-	$: reset_inputs(selected);
-
-	function create() {
-		people = people.concat({ first, last });
-		i = people.length - 1;
-		first = last = '';
+	import { onMount } from 'svelte';
+	import ApIopertaions from "./APIopertaions.svelte";
+	import CRUDoperations from "./CRUDoperations.svelte";
+  
+	// Define a variable to track the current route
+	let currentRoute = '';
+  
+	// Function to update the current route based on the URL hash
+	function updateRouteFromHash() {
+	  currentRoute = window.location.hash.slice(1); // Remove '#' from the URL hash
 	}
-
-	function update() {
-		selected.first = first;
-		selected.last = last;
-		people = people;
+  
+	// Call the updateRouteFromHash function when the component is mounted
+	onMount(() => {
+	  window.addEventListener('hashchange', updateRouteFromHash); // Listen for hash change events
+	  updateRouteFromHash(); // Update the current route initially
+	});
+  
+	// Function to navigate to a different route
+	function navigateTo(route) {
+	  window.location.hash = route; // Update the URL hash
 	}
-
-	function remove() {
-		const index = people.indexOf(selected);
-		people = [...people.slice(0, index), ...people.slice(index + 1)];
-
-		first = last = '';
-		i = Math.min(i, filteredPeople.length - 2);
+  </script>
+  
+  <style>
+	/* Header styles */
+	header {
+	  background-color: #333;
+	  color: #fff;
+	  padding: 1rem;
+	  text-align: center;
 	}
-
-	function reset_inputs(person) {
-		first = person ? person.first : '';
-		last = person ? person.last : '';
-	}
-</script>
-
-<div class="center-container">
-	<div class="container">
-
-<input placeholder="filter prefix" bind:value={prefix} />
-
-<select bind:value={i} size={5}>
-	{#each filteredPeople as person, i}
-		<option value={i}>{person.last}, {person.first}</option>
-	{/each}
-</select>
-
-<label><input bind:value={first} placeholder="first" /></label>
-<label><input bind:value={last} placeholder="last" /></label>
-
-<div class="buttons">
-	<button on:click={create} disabled={!first || !last}>create</button>
-	<button on:click={update} disabled={!first || !last || !selected}>update</button>
-	<button on:click={remove} disabled={!selected}>delete</button>
-</div>
-
-</div>
-</div>
-<style>
-	.center-container {
-	  display: flex;
-	  justify-content: center;
-	  align-items: center;
-	  height: 100vh;
-	  background-color: #ffffff; 
+  
+	nav ul {
+	  list-style-type: none;
+	  padding: 0;
 	  margin: 0;
 	}
   
-	.container {
-	  width: 500px; /* Increase width for a bigger dialog box */
-	  padding: 40px; /* Increase padding for more spacing inside the dialog box */
-	  background-color: #ffffff; /* Change background color to white */
-	  border-radius: 8px;
-	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+	nav ul li {
+	  display: inline-block;
+	  margin-right: 1rem;
 	}
   
-	label {
-	  display: block;
-	  margin-bottom: 16px; /* Increase margin bottom for more spacing between elements */
-	  color: #333;
-	}
-  
-	input[type="text"],
-	select {
-	  width: 100%;
-	  padding: 12px; /* Increase padding for larger input fields */
-	  border: 1px solid #ccc;
-	  border-radius: 4px;
-	  box-sizing: border-box;
-	  margin-bottom: 24px; /* Increase margin bottom for more spacing between elements */
-	  font-size: 16px;
-	}
-  
-	.button-group {
-	  display: flex;
-	  justify-content: space-between;
-	}
-  
-	button {
-	  padding: 12px 24px; /* Increase padding for larger buttons */
-	  border: none;
-	  border-radius: 4px;
-	  cursor: pointer;
-	  background-color: #007bff;
+	nav ul li a {
 	  color: #fff;
-	  font-size: 16px;
-	  transition: background-color 0.3s ease;
+	  text-decoration: none;
+	  padding: 0.5rem 1rem;
+	  border-radius: 4px;
+	  transition: background-color 0.3s;
 	}
   
-	button:hover {
-	  background-color: #0056b3;
+	nav ul li a:hover {
+	  background-color: #555;
 	}
-  </style>
\ No newline at end of file
+  </style>
+  
+  <header>
+	<h1>POC</h1>
+	<nav>
+	  <ul>
+		<!-- Define navigation links -->
+		<li><a href="#api">API Operations</a></li>
+		<li><a href="#crud">CRUD Operations</a></li>
+	  </ul>
+	</nav>
+  </header>
+  
+  <!-- Conditional rendering based on the current route -->
+  {#if currentRoute === 'api'}
+	<ApIopertaions />
+  {:else if currentRoute === 'crud'}
+	<CRUDoperations />
+  {:else}
+	<!-- Handle unknown routes or default content -->
+	<p>Page not found</p>
+  {/if}
+  
\ No newline at end of file
diff --git a/src/CRUDoperations.svelte b/src/CRUDoperations.svelte
new file mode 100644
index 0000000..654bdc6
--- /dev/null
+++ b/src/CRUDoperations.svelte
@@ -0,0 +1,128 @@
+<script>
+	let people = [
+		{ first: 'Hans', last: 'Emil' },
+		{ first: 'Max', last: 'Mustermann' },
+		{ first: 'Roman', last: 'Tisch' }
+	];
+
+	let prefix = '';
+	let first = '';
+	let last = '';
+	let i = 0;
+
+	$: filteredPeople = prefix
+		? people.filter((person) => {
+				const name = `${person.last}, ${person.first}`;
+				return name.toLowerCase().startsWith(prefix.toLowerCase());
+		  })
+		: people;
+
+	$: selected = filteredPeople[i];
+
+	$: reset_inputs(selected);
+
+	function create() {
+		people = people.concat({ first, last });
+		i = people.length - 1;
+		first = last = '';
+	}
+
+	function update() {
+		selected.first = first;
+		selected.last = last;
+		people = people;
+	}
+
+	function remove() {
+		const index = people.indexOf(selected);
+		people = [...people.slice(0, index), ...people.slice(index + 1)];
+
+		first = last = '';
+		i = Math.min(i, filteredPeople.length - 2);
+	}
+
+	function reset_inputs(person) {
+		first = person ? person.first : '';
+		last = person ? person.last : '';
+	}
+</script>
+
+<div class="center-container">
+	<div class="container">
+
+<input placeholder="filter prefix" bind:value={prefix} />
+
+<select bind:value={i} size={5}>
+	{#each filteredPeople as person, i}
+		<option value={i}>{person.last}, {person.first}</option>
+	{/each}
+</select>
+
+<label><input bind:value={first} placeholder="first" /></label>
+<label><input bind:value={last} placeholder="last" /></label>
+
+<div class="buttons">
+	<button on:click={create} disabled={!first || !last}>create</button>
+	<button on:click={update} disabled={!first || !last || !selected}>update</button>
+	<button on:click={remove} disabled={!selected}>delete</button>
+</div>
+
+</div>
+</div>
+
+
+<style>
+	.center-container {
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+	  height: 100vh;
+	  background-color: #ffffff; 
+	  margin: 0;
+	}
+  
+	.container {
+	  width: 500px; /* Increase width for a bigger dialog box */
+	  padding: 40px; /* Increase padding for more spacing inside the dialog box */
+	  background-color: #ffffff; /* Change background color to white */
+	  border-radius: 8px;
+	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+	}
+  
+	label {
+	  display: block;
+	  margin-bottom: 16px; /* Increase margin bottom for more spacing between elements */
+	  color: #333;
+	}
+  
+	input[type="text"],
+	select {
+	  width: 100%;
+	  padding: 12px; /* Increase padding for larger input fields */
+	  border: 1px solid #ccc;
+	  border-radius: 4px;
+	  box-sizing: border-box;
+	  margin-bottom: 24px; /* Increase margin bottom for more spacing between elements */
+	  font-size: 16px;
+	}
+  
+	.button-group {
+	  display: flex;
+	  justify-content: space-between;
+	}
+  
+	button {
+	  padding: 12px 24px; /* Increase padding for larger buttons */
+	  border: none;
+	  border-radius: 4px;
+	  cursor: pointer;
+	  background-color: #007bff;
+	  color: #fff;
+	  font-size: 16px;
+	  transition: background-color 0.3s ease;
+	}
+  
+	button:hover {
+	  background-color: #0056b3;
+	}
+  </style>
\ No newline at end of file