dashboard changes
This commit is contained in:
Sonika
parent
0d17432d0e
commit
173db6e4d6
91
package-lock.json
generated
91
package-lock.json
generated
@ -9,6 +9,7 @@
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@smui/common": "^7.0.0-beta.16",
|
||||
"axios": "^1.6.7",
|
||||
"sirv-cli": "^0.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -721,6 +722,21 @@
|
||||
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.6.7",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
|
||||
"integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.4",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
|
||||
@ -856,6 +872,17 @@
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
@ -888,6 +915,14 @@
|
||||
"resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
|
||||
"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dequal": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||
@ -924,6 +959,38 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.5",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
|
||||
"integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
|
||||
@ -1142,6 +1209,25 @@
|
||||
"node": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mri": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/mri/-/mri-1.1.5.tgz",
|
||||
@ -1236,6 +1322,11 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@smui/common": "^7.0.0-beta.16",
|
||||
"axios": "^1.6.7",
|
||||
"sirv-cli": "^0.4.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,25 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import axios from 'axios';
|
||||
|
||||
let pokemonData = null;
|
||||
|
||||
let fetchedData = [];
|
||||
|
||||
|
||||
async function fetchData() {
|
||||
const fetchPokemonData = async () => {
|
||||
try {
|
||||
const response = await fetch('https://api.example.com/data');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch data');
|
||||
}
|
||||
fetchedData = await response.json();
|
||||
const response = await axios.get('https://pokeapi.co/api/v2/pokemon/ditto');
|
||||
pokemonData = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error.message);
|
||||
}
|
||||
console.error('Error fetching Pokemon data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
onMount(fetchData);
|
||||
</script>
|
||||
|
||||
<div class="center-container">
|
||||
<div class="container">
|
||||
<p>hi</p>
|
||||
|
||||
<ul>
|
||||
{#each fetchedData as item}
|
||||
<li>{item.first} {item.last}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
onMount(fetchPokemonData);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if pokemonData}
|
||||
<h1>Index: {pokemonData.id}</h1>
|
||||
{:else}
|
||||
<p>Loading...</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import ApIopertaions from "./APIopertaions.svelte";
|
||||
import CRUDoperations from "./CRUDoperations.svelte";
|
||||
import Dashboard from './Dashboard.svelte';
|
||||
|
||||
|
||||
let currentRoute = '';
|
||||
@ -60,7 +61,7 @@
|
||||
<h1>Svelte</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
|
||||
<li><a href="#dash">Dashboard</a></li>
|
||||
<li><a href="#api">API Operations</a></li>
|
||||
<li><a href="#crud">CRUD Operations</a></li>
|
||||
</ul>
|
||||
@ -72,8 +73,9 @@
|
||||
<ApIopertaions />
|
||||
{:else if currentRoute === 'crud'}
|
||||
<CRUDoperations />
|
||||
{:else if currentRoute === 'dash'}
|
||||
<Dashboard />
|
||||
{:else}
|
||||
|
||||
<p>Page not found</p>
|
||||
{/if}
|
||||
|
||||
64
src/Dashboard.svelte
Normal file
64
src/Dashboard.svelte
Normal file
@ -0,0 +1,64 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let data = []; // Initialize an empty array to store the dummy data
|
||||
|
||||
onMount(() => {
|
||||
// Define dummy data
|
||||
data = [
|
||||
{ id: 1, title: 'Card 1', description: 'Description for Card 1' },
|
||||
{ id: 2, title: 'Card 2', description: 'Description for Card 2' },
|
||||
{ id: 3, title: 'Card 3', description: 'Description for Card 3' },
|
||||
{ id: 4, title: 'Card 4', description: 'Description for Card 4' },
|
||||
{ id: 5, title: 'Card 5', description: 'Description for Card 5' },
|
||||
{ id: 6, title: 'Card 6', description: 'Description for Card 6' }
|
||||
// Add more dummy data objects as needed
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="dashboard">
|
||||
{#each data as item}
|
||||
<div class="card">
|
||||
<h2>{item.title}</h2>
|
||||
<p>{item.description}</p>
|
||||
<!-- You can add more elements here to display additional data -->
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.dashboard {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 25%;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: #ffffff;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user