up

web/src/components/WebSwitch.svelte

@@ -0,0 +1,152 @@
+<script>
+  import { api } from '../lib/api.js';
+
+  export let status;
+
+  $: relays = status?.relays || [];
+
+  const relayNames = {
+    1: 'Power Supply',
+    2: 'PGXL',
+    3: 'TGXL',
+    4: 'Flex Radio Start',
+    5: 'Reserve'
+  };
+
+  let loading = {};
+
+  async function toggleRelay(relayNum) {
+    const relay = relays.find(r => r.number === relayNum);
+    const currentState = relay?.state || false;
+    
+    loading[relayNum] = true;
+    try {
+      if (currentState) {
+        await api.webswitch.relayOff(relayNum);
+      } else {
+        await api.webswitch.relayOn(relayNum);
+      }
+    } catch (err) {
+      console.error('Failed to toggle relay:', err);
+      alert('Failed to control relay');
+    } finally {
+      loading[relayNum] = false;
+    }
+  }
+
+  async function allOn() {
+    try {
+      await api.webswitch.allOn();
+    } catch (err) {
+      console.error('Failed to turn all on:', err);
+    }
+  }
+
+  async function allOff() {
+    try {
+      await api.webswitch.allOff();
+    } catch (err) {
+      console.error('Failed to turn all off:', err);
+    }
+  }
+</script>
+
+<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>
+  </div>
+</div>
+
+<style>
+  .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;
+  }
+</style>