Merge branch 'main' of https://git.rouggy.com/rouggy/ShackMaster

web/src/components/WebSwitch.svelte

@@ -4,7 +4,10 @@
   export let status;
 
   $: relays = status?.relays || [];
+<<<<<<< HEAD
   $: connected = status?.connected || false;
+=======
+>>>>>>> 4ab192418e21065c68d59777493ea03b76c061e7
 
   const relayNames = {
     1: 'Power Supply',
@@ -52,6 +55,7 @@
   }
 </script>
 
+<<<<<<< HEAD
 <div class="card">
   <div class="card-header">
     <h2>WebSwitch</h2>
@@ -95,10 +99,40 @@
         ALL OFF
       </button>
     </div>
+=======
+<div class="webswitch-card card">
+  <h2>
+    1216RH
+    <span class="status-indicator" class:status-online={relays.length > 0} class:status-offline={relays.length === 0}></span>
+  </h2>
+  
+  <div class="relays">
+    {#each [1, 2, 3, 4, 5] as relayNum}
+      {@const relay = relays.find(r => r.number === relayNum)}
+      {@const isOn = relay?.state || false}
+      <div class="relay-row">
+        <span class="relay-name">{relayNames[relayNum]}</span>
+        <button 
+          class="relay-toggle"
+          class:active={isOn}
+          disabled={loading[relayNum]}
+          on:click={() => toggleRelay(relayNum)}
+        >
+          <div class="toggle-icon"></div>
+        </button>
+      </div>
+    {/each}
+  </div>
+
+  <div class="controls">
+    <button class="btn btn-primary" on:click={allOn}>ALL ON</button>
+    <button class="btn btn-danger" on:click={allOff}>ALL OFF</button>
+>>>>>>> 4ab192418e21065c68d59777493ea03b76c061e7
   </div>
 </div>
 
 <style>
+<<<<<<< HEAD
   .card {
     background: linear-gradient(135deg, #1a2332 0%, #0f1923 100%);
     border: 1px solid #2d3748;
@@ -301,5 +335,73 @@
 
   .all-off:hover {
     box-shadow: 0 6px 16px rgba(244, 67, 54, 0.5);
+=======
+  .webswitch-card {
+    min-width: 280px;
+  }
+
+  h2 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 20px;
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--accent-teal);
+  }
+
+  .relays {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  .relay-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .relay-name {
+    font-size: 14px;
+  }
+
+  .relay-toggle {
+    width: 60px;
+    height: 32px;
+    background: #555;
+    border-radius: 16px;
+    position: relative;
+    transition: background 0.3s ease;
+  }
+
+  .relay-toggle.active {
+    background: var(--accent-green);
+  }
+
+  .toggle-icon {
+    width: 24px;
+    height: 24px;
+    background: white;
+    border-radius: 50%;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    transition: transform 0.3s ease;
+  }
+
+  .relay-toggle.active .toggle-icon {
+    transform: translateX(28px);
+  }
+
+  .controls {
+    display: flex;
+    gap: 12px;
+  }
+
+  .controls button {
+    flex: 1;
+>>>>>>> 4ab192418e21065c68d59777493ea03b76c061e7
   }
 </style>