route added

src/App.svelte

@@ -1,33 +1,10 @@
 <script>
   import Header from "./components/Header.svelte";
-  import DeviceDetails from "./components/DeviceDetails.svelte";
+  import Router from "./routes/index.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);
 </script>
 
-<Header />
+<main>
+  <Header />
+  <Router />
+</main>
 
-<DeviceDetails {devices} />
-
-<style>
-</style>

src/app.css

@@ -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;
 }

src/components/Details.svelte

@@ -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>

src/components/DeviceDetails.svelte

@@ -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>

src/components/Header.svelte

@@ -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>

src/components/Home.svelte

@@ -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>

src/libs/DeviceDetails.svelte

@@ -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>

src/libs/DeviceList.svelte

@@ -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>

src/routes/index.svelte

@@ -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>