wisecolt/smarthome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

route added

Browse Source
This commit is contained in:
szbk
2024-03-25 00:41:57 +03:00
parent 6d0c0f1986
commit 11013931cc
10 changed files with 222 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/App.svelte
View File

@@ -1,33 +1,10 @@
<script>
import Header from "./components/Header.svelte";
import DeviceDetails from "./components/DeviceDetails.svelte";
import { Router, Route } from "svelte-routing";
import { onMount } from "svelte";
import { writable } from "svelte/store";
const apiURL = import.meta.env.VITE_API_URL;
const devices = writable([]);
const fetchData = async () => {
try {
const response = await fetch(apiURL);
const data = await response.json();
devices.set(data["result"]);
devices.subscribe((value) => {
console.log(value);
});
} catch (error) {
console.log(error);
}
};
onMount(fetchData);
import Router from "./routes/index.svelte";
</script>
<main>
<Header />
<Router />
</main>
<DeviceDetails {devices} />
<style>
</style>

3
src/app.css
View File

@@ -9,9 +9,12 @@
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
padding: 0;
background-color: #F2F2F2;
width: 100vw;
}

26
src/components/Details.svelte Normal file
View File

@@ -0,0 +1,26 @@
<script>
import DeviceDetails from "../libs/DeviceDetails.svelte";
import { onMount } from "svelte";
import { writable } from "svelte/store";
export let deviceId;
const apiURL = import.meta.env.VITE_API_URL + "/" + deviceId;
const deviceLog = writable([]);
const fetchData = async () => {
try {
const response = await fetch(apiURL);
const data = await response.json();
deviceLog.set(data["result"].device_log);
} catch (error) {
console.log(error);
}
};
onMount(fetchData);
</script>
<div>
<DeviceDetails {deviceLog} />
</div>

31
src/components/DeviceDetails.svelte
View File

@@ -1,31 +0,0 @@
<script>
export let devices;
</script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Manifactor</th>
<th>Serial Number</th>
<th>Model</th>
<th>Firmware Version</th>
<th>Device IP Address</th>
</tr>
</thead>
<tbody>
<!-- // store dan gelen veriyi okumak için $ kullan -->
{#each $devices as device}
<tr>
<td>{device.device_name}</td>
<td>{device.device_type}</td>
<td>{device.manifactor}</td>
<td>{device.serial_number}</td>
<td>{device.model}</td>
<td>{device.firmware_version}</td>
<td>{device.device_ip_address}</td>
</tr>
{/each}
</tbody>
</table>

3
src/components/Header.svelte
View File

@@ -3,12 +3,13 @@
<style>
.head {
background-color: #F2F3FA;
background-color: #fff;
width: 100vw;
height: 70px;
display: flex;
align-items:center;
justify-content: flex-start;
padding-left: 20px;
box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
}
</style>

35
src/components/Home.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script>
import DeviceList from "../libs/DeviceList.svelte";
import { onMount } from "svelte";
import { writable } from "svelte/store";
const apiURL = import.meta.env.VITE_API_URL;
const devices = writable([]);
const fetchData = async () => {
try {
const response = await fetch(apiURL);
const data = await response.json();
devices.set(data["result"]);
devices.subscribe((value) => {});
} catch (error) {
console.log(error);
}
};
onMount(fetchData);
</script>
<div class="body">
<DeviceList {devices} />
</div>
<style>
.body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>

0
src/components/Item.svelte
View File

35
src/libs/DeviceDetails.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script>
export let deviceLog;
</script>
<div class="table-wrapper">
<!-- Tablo başlıkları -->
<div class="table table-head">
<div class="table-row">
<div class="table-head-item">Name</div>
<div class="table-head-item">Type</div>
<div class="table-head-item">Manufacturer</div>
<div class="table-head-item">Serial Number</div>
<div class="table-head-item">Model</div>
<div class="table-head-item">Version</div>
<div class="table-head-item">IP Address</div>
</div>
<div class="divider"></div>
</div>
<!-- Cihaz bilgileri -->
<div class="table table-body">
{#each $deviceLog as log}
{#if log.sensor_value != undefined}
<div>{log.sensor_value}</div>
<div>{log.battery_life}</div>
{:else}
<div>door switch</div>
{/if}
{/each}
<div class="divider"></div>
</div>
</div>
<style>
</style>

104
src/libs/DeviceList.svelte Normal file
View File

@@ -0,0 +1,104 @@
<script>
export let devices;
import { Link } from "svelte-routing";
</script>
<div class="table-wrapper">
<!-- Tablo başlıkları -->
<div class="table table-head">
<div class="table-row">
<div class="table-head-item">Name</div>
<div class="table-head-item">Type</div>
<div class="table-head-item">Manufacturer</div>
<div class="table-head-item">Serial Number</div>
<div class="table-head-item">Model</div>
<div class="table-head-item">Version</div>
<div class="table-head-item">IP Address</div>
</div>
<div class="divider"></div>
</div>
<!-- Cihaz bilgileri -->
<div class="table table-body">
{#each $devices as device}
<Link
to="/details/{device._id}"
class="svelte-routing-link"
style="text-decoration: none; color: inherit;"
>
<div class="table-body-item">{device.device_name}</div>
<div class="table-body-item">{device.device_type}</div>
<div class="table-body-item">{device.manifactor}</div>
<div class="table-body-item">{device.serial_number}</div>
<div class="table-body-item">{device.model}</div>
<div class="table-body-item">{device.firmware_version}</div>
<div class="table-body-item">{device.device_ip_address}</div>
</Link>
<div class="divider"></div>
{/each}
</div>
</div>
<style>
.table-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
flex-direction: column;
background-color: white;
width: 95%;
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
}
.table {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.table-head-item {
width: 100%;
display: flex;
justify-content: start;
align-items: center;
padding: 5px 10px 10px 10px;
color: #535151;
font-size: 16px;
}
.table-row {
display: flex;
width: 100%;
text-decoration: none;
color: inherit;
}
.table-body-item {
width: calc(100% / 7);
display: flex;
justify-content: start;
padding: 5px 10px 10px 10px;
}
.table-head {
font-size: 15px;
}
.divider {
width: 100%;
background-color: #f2f2f2;
height: 1px;
}
/* Link bileşeni üzerinde cursor:pointer stilini uygulama */
:global(.svelte-routing-link) {
display: flex;
width: 100%;
text-decoration: none;
color: inherit;
}
:global(.svelte-routing-link:hover) {
cursor: pointer;
display: flex;
width: 100%;
text-decoration: none;
color: inherit;
background-color: #f3f3f3;
}
</style>

12
src/routes/index.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script>
import { Router, Route } from "svelte-routing";
import Details from "../components/Details.svelte";
import Home from "../components/Home.svelte";
export let url = "";
</script>
<Router {url}>
<Route path="/details/:deviceId" component={Details} />
<Route path="/" component={Home} />
</Router>