Merge branch 'main' of https://github.com/szbk/smarthome

src/app.css

@@ -15,6 +15,6 @@
 body {
   margin: 0;
   padding: 0;
-  background-color: #F2F2F2;
+  background-color: #F3F4F9;
   width: 100vw;
 }

src/components/Details.svelte

@@ -21,6 +21,15 @@
   onMount(fetchData);
 </script>
 
-<div>
+<div class="body">
   <DeviceDetails {deviceLog} />
 </div>
+
+<style>
+  .body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+</style>

src/components/Header.svelte

@@ -1,15 +1,22 @@
+<script>
+  import logo from "../assets/logo.png";
+</script>
 
-    <div class="head">SMART HOME</div>
+<div class="head">SMART HOME</div>
 
 <style>
-    .head {
+  .head {
-        background-color: #fff;
+    width: 100vw;
-        width: 100vw;
+    height: 70px;
-        height: 70px;
+    background-color: #fff;
-        display: flex;
+    display: flex;
-        align-items:center;
+    align-items: center;
-        justify-content: flex-start;
+    justify-content: flex-start;
-        padding-left: 20px;
+    padding-left: 20px;
-        box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
+    box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
-    }
+    font-size: 25px;
+  }
+  .logo{
+    width: 50px;
+  }
 </style>

src/libs/DeviceDetails.svelte

@@ -1,5 +1,8 @@
 <script>
+  import Button from "./ui/Button.svelte";
+  import Stepper from "./ui/Stepper.svelte";
   export let deviceLog;
+  let buttonText = "Run";
 </script>
 
 <div class="table-wrapper">
@@ -24,7 +27,11 @@
         <div>{log.sensor_value}</div>
         <div>{log.battery_life}</div>
       {:else}
-      <div>door switch</div>
+        <div>door switch</div>
+        <div><Button {buttonText} /></div>
+        <br>
+        <div><Stepper /></div>
+        <br>
       {/if}
     {/each}
     <div class="divider"></div>
@@ -32,4 +39,59 @@
 </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-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/libs/ui/Button.svelte

@@ -0,0 +1,32 @@
+<script>
+  export let buttonText;
+</script>
+
+<div class="button">
+  {buttonText}
+</div>
+
+<style>
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 5px;
+    width: 100px;
+    height: 38px;
+    border-radius: 5px;
+    background-color: #364bc5;
+    color: #fff;
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+  }
+  .button:active {
+    background-color: #6a7bdd;
+  }
+</style>

src/libs/ui/Stepper.svelte

@@ -0,0 +1,105 @@
+<script>
+  let value;
+  let counter = 0;
+
+  const increaseCounter = () => {
+    counter++;
+  };
+  const decreaseCounter = () => {
+    counter = counter < 1 ? 0 : counter - 1;
+  };
+
+  const handleChange = (e) => {
+    value = e.target.value;
+    console.log(value);
+  };
+</script>
+
+<div class="stepper">
+  <div
+    class="button decrease"
+    on:click={decreaseCounter}
+    tabindex="0"
+    role="button"
+    on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
+  >
+    -
+  </div>
+  <div class="number">
+    <input class="number-text" type="text" bind:value={counter} on:input={handleChange} />
+  </div>
+  <div
+    class="button increase"
+    on:click={increaseCounter}
+    tabindex="0"
+    role="button"
+    on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
+  >
+    +
+  </div>
+</div>
+
+<style>
+  .stepper {
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    border: solid 1px #7b819e;
+    box-sizing: border-box;
+    padding: 0px;
+  }
+  .number {
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: solid 1px #7b819e;
+    border-right: solid 1px #7b819e;
+    color: #4a4d5d;
+  }
+  .number-text {
+    box-sizing: border-box;
+    width: 40px;
+    height: 100%;
+    border: none;
+    font-size: 20px;
+    text-align: center;
+  }
+  .number-text:focus {
+    outline: none;
+  }
+  .button {
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    color: #7b819e;
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 0px;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+  }
+  .button:hover {
+    background-color: #4759ba;
+    color: #fff;
+  }
+  .button:active {
+    background-color: #6a7bdd;
+  }
+  .increase {
+    border-radius: 0px 3px 3px 0px;
+  }
+  .decrease {
+    border-radius: 3px 0px 0px 3px;
+  }
+</style>