add clickable link for devices, close #13

app/backend/wol/consumers.py

@@ -140,6 +140,7 @@ class WSConsumer(AsyncWebsocketConsumer):
                 "ip": dev.ip,
                 "mac": dev.mac,
                 "netmask": dev.netmask,
+                "link": dev.link,
                 "ports": [],
                 "wake": {
                     "enabled": False,
@@ -186,6 +187,7 @@ class WSConsumer(AsyncWebsocketConsumer):
                 "name": data["name"],
                 "ip": data["ip"],
                 "netmask": data["netmask"],
+                "link": data["link"],
                 "shutdown_cmd": data["shutdown"]["command"] if data.get("shutdown") else ""
             }
         )
@@ -309,6 +311,7 @@ class WSConsumer(AsyncWebsocketConsumer):
                     "ip": ip,
                     "netmask": netmask,
                     "mac": mac,
+                    "link": "",
                     "ports": [],
                     "wake": {
                         "enabled": False,

app/backend/wol/models.py

@@ -13,6 +13,7 @@ class Device(models.Model):
     ip = models.GenericIPAddressField()
     mac = models.CharField(max_length=17)
     netmask = models.CharField(max_length=15, default="255.255.255.0", blank=False, null=False)
+    link = models.URLField(blank=True, null=True)
     port = models.ManyToManyField(Port, blank=True)
     shutdown_cmd = models.TextField(null=True, blank=True)
 

app/backend/wol/tasks.py

@@ -37,6 +37,7 @@ class WolDevice:
             "mac": dev.mac,
             "netmask": dev.netmask,
             "up": False,
+            "link": dev.link,
             "ports": [],
             "wake": {
                 "enabled": False,

app/frontend/src/components/DeviceCard.svelte

@@ -113,7 +113,11 @@
                     <i class="fa-solid fa-ellipsis-vertical fa-2x"></i>
                 </div>
             </div>
-            <h5 class="card-title fw-bold my-2">{device.name}</h5>
+            {#if device.link}
+                <h5 class="card-title fw-bold my-2"><a class="inherit-color" href={device.link}>{device.name}</a></h5>
+            {:else}
+                <h5 class="card-title fw-bold my-2">{device.name}</h5>
+            {/if}
             <h6 class="card-subtitle mb-2 text-muted">{device.ip}</h6>
             <ul class="list-group">
                 {#each device.ports as port}
@@ -149,7 +153,7 @@
                                 <input type="text" class="form-control" id="inputMac{modalDevice.mac}" bind:value="{modalDevice.mac}" required>
                             </div>
                         </div>
-                        <div class="row">
+                        <div class="row mb-2">
                             <div class="col-sm">
                                 <label for="inputIp{modalDevice.id}" class="form-label">IP address</label>
                                 <input type="text" class="form-control" id="inputIp{modalDevice.id}" bind:value="{modalDevice.ip}" pattern="^([01]?\d\d?|2[0-4]\d|25[0-5])(?:\.(?:[01]?\d\d?|2[0-4]\d|25[0-5])){'{'}3{'}'}$" required>
@@ -159,6 +163,14 @@
                                 <input type="text" class="form-control" id="inputNetmask{modalDevice.id}" bind:value="{modalDevice.netmask}" pattern="^(((255\.){'{'}3{'}'}(255|254|252|248|240|224|192|128|0+))|((255\.){'{'}2{'}'}(255|254|252|248|240|224|192|128|0+)\.0)|((255\.)(255|254|252|248|240|224|192|128|0+)(\.0+){'{'}2{'}'})|((255|254|252|248|240|224|192|128|0+)(\.0+){'{'}3{'}'}))$" required>
                             </div>
                         </div>
+                        <div class="row">
+                            <div class="col">
+                                <div class="mb-3">
+                                    <label for="inputLinkAddDevice" class="form-label">Web link</label>
+                                    <input type="text" class="form-control" id="inputILinkAddDevice" placeholder="http://...." bind:value="{modalDevice.link}">
+                                </div>
+                            </div>
+                        </div>
                         <!-- ports -->
                         <h5 class="fw-bold mt-4">Ports</h5>
                         <p class="mb-2">Select ports to check if they are open.</p>
@@ -327,4 +339,8 @@
     .list-group-item {
         color: var(--color-text);
     }
+
+    .inherit-color {
+        color: inherit;
+    }
 </style>

app/frontend/src/components/Navbar.svelte

@@ -161,6 +161,13 @@
                                 <input type="text" class="form-control" id="inputNetmaskAddDevice" placeholder="255.255.255.0" bind:value="{addDevice.netmask}" pattern="^(((255\.){'{'}3{'}'}(255|254|252|248|240|224|192|128|0+))|((255\.){'{'}2{'}'}(255|254|252|248|240|224|192|128|0+)\.0)|((255\.)(255|254|252|248|240|224|192|128|0+)(\.0+){'{'}2{'}'})|((255|254|252|248|240|224|192|128|0+)(\.0+){'{'}3{'}'}))$" required>
                             </div>
                         </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="mb-3">
+                                <label for="inputLinkAddDevice" class="form-label">Web link</label>
+                                <input type="text" class="form-control" id="inputILinkAddDevice" placeholder="http://...." bind:value="{addDevice.link}">
+                            </div>
+                        </div>
                     </div>
                     <div class="row">
                         <div class="col-auto ms-auto">