header,navigation and component
This commit is contained in:
Sonika
parent
4fde04476e
commit
4cbdfd56f7
37
src/APIopertaions.svelte
Normal file
37
src/APIopertaions.svelte
Normal file
@ -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>
|
||||||
|
|
||||||
181
src/App.svelte
181
src/App.svelte
@ -1,128 +1,79 @@
|
|||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let people = [
|
import { onMount } from 'svelte';
|
||||||
{ first: 'Hans', last: 'Emil' },
|
import ApIopertaions from "./APIopertaions.svelte";
|
||||||
{ first: 'Max', last: 'Mustermann' },
|
import CRUDoperations from "./CRUDoperations.svelte";
|
||||||
{ first: 'Roman', last: 'Tisch' }
|
|
||||||
];
|
// Define a variable to track the current route
|
||||||
|
let currentRoute = '';
|
||||||
let prefix = '';
|
|
||||||
let first = '';
|
// Function to update the current route based on the URL hash
|
||||||
let last = '';
|
function updateRouteFromHash() {
|
||||||
let i = 0;
|
currentRoute = window.location.hash.slice(1); // Remove '#' from the URL hash
|
||||||
|
|
||||||
$: 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() {
|
// Call the updateRouteFromHash function when the component is mounted
|
||||||
selected.first = first;
|
onMount(() => {
|
||||||
selected.last = last;
|
window.addEventListener('hashchange', updateRouteFromHash); // Listen for hash change events
|
||||||
people = people;
|
updateRouteFromHash(); // Update the current route initially
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function to navigate to a different route
|
||||||
|
function navigateTo(route) {
|
||||||
|
window.location.hash = route; // Update the URL hash
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
function remove() {
|
|
||||||
const index = people.indexOf(selected);
|
<style>
|
||||||
people = [...people.slice(0, index), ...people.slice(index + 1)];
|
/* Header styles */
|
||||||
|
header {
|
||||||
first = last = '';
|
background-color: #333;
|
||||||
i = Math.min(i, filteredPeople.length - 2);
|
color: #fff;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset_inputs(person) {
|
nav ul {
|
||||||
first = person ? person.first : '';
|
list-style-type: none;
|
||||||
last = person ? person.last : '';
|
padding: 0;
|
||||||
}
|
|
||||||
</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;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
nav ul li {
|
||||||
width: 500px; /* Increase width for a bigger dialog box */
|
display: inline-block;
|
||||||
padding: 40px; /* Increase padding for more spacing inside the dialog box */
|
margin-right: 1rem;
|
||||||
background-color: #ffffff; /* Change background color to white */
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
nav ul li a {
|
||||||
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;
|
color: #fff;
|
||||||
font-size: 16px;
|
text-decoration: none;
|
||||||
transition: background-color 0.3s ease;
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
nav ul li a:hover {
|
||||||
background-color: #0056b3;
|
background-color: #555;
|
||||||
}
|
}
|
||||||
</style>
|
</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}
|
||||||
|
|
||||||
128
src/CRUDoperations.svelte
Normal file
128
src/CRUDoperations.svelte
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user