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>
|
||||
|
||||
173
src/App.svelte
173
src/App.svelte
@ -1,128 +1,79 @@
|
||||
|
||||
|
||||
<script>
|
||||
let people = [
|
||||
{ first: 'Hans', last: 'Emil' },
|
||||
{ first: 'Max', last: 'Mustermann' },
|
||||
{ first: 'Roman', last: 'Tisch' }
|
||||
];
|
||||
import { onMount } from 'svelte';
|
||||
import ApIopertaions from "./APIopertaions.svelte";
|
||||
import CRUDoperations from "./CRUDoperations.svelte";
|
||||
|
||||
let prefix = '';
|
||||
let first = '';
|
||||
let last = '';
|
||||
let i = 0;
|
||||
// Define a variable to track the current route
|
||||
let currentRoute = '';
|
||||
|
||||
$: 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 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
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Header styles */
|
||||
header {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
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;
|
||||
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>
|
||||
|
||||
<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