97 lines
2.3 KiB
Svelte
97 lines
2.3 KiB
Svelte
<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>
|
||
.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>
|