Merge pull request #26 from UKB-IT-Sec/25-add-status-field-in-device-…

…list-add-mouseover-for-icons add status with icons,add hover-feature
UKB-IT-Sec · Sep 16, 2024 · 4872b9a · 4872b9a
2 parents df09fdc + 2ef3c9e
commit 4872b9a
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 7 deletions.
diff --git a/src/static/default.css b/src/static/default.css
@@ -40,7 +40,6 @@ td {
 .inline {
   display: inline;
 }
-
 .link-button {
   background: none;
   border: none;
@@ -58,4 +57,27 @@ td {
 }
 .link-button:active {
   color: red;
-}
+}
+.icon-zoom:hover{
+	transform: scale(1.2);
+}
+.icon-desc {
+	position: relative;
+	display: inline-block;
+  }
+.icon-desc:hover::after {
+	content: attr(desc);
+	font-size: 12px;
+	position: absolute;
+	background: #333;
+	color: white;
+	padding: 3px;
+	border-radius: 10px;
+	pointer-events: none;
+	left: 50%;
+	transform: translateX(-50%);
+	top: 100%;
+	margin-top: 5px;
+	white-space: nowrap;
+	z-index: 2000;
+  }
diff --git a/src/static/icons/check-lg.svg b/src/static/icons/check-lg.svg
diff --git a/src/static/icons/wrench.svg b/src/static/icons/wrench.svg
diff --git a/src/static/icons/x-lg.svg b/src/static/icons/x-lg.svg
diff --git a/src/templates/base.html b/src/templates/base.html
@@ -10,7 +10,7 @@
         <!-- Bootstrap CSS -->
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
-		<link rel="stylesheet" href="{% static 'default.css' %}" rel="stylesheet">
+		<link rel="stylesheet" href="{% static 'default.css' %}">
 
 		<link rel="icon" href="{% static 'icons/favicon.svg' %}" sizes="any" type="image/svg+xml">
 

diff --git a/src/templates/devices.html b/src/templates/devices.html
@@ -11,6 +11,7 @@ <h1>Devices</h1>
 		<thead>
 			<tr>
 				<th scope="col">Name</th>
+				<th scope="col">Status</th>
 				<th scope="col">FQDN</th>
 				<th scope="col">Device Role Prod</th>
 				<th scope="col">MAC</th>
@@ -22,6 +23,16 @@ <h1>Devices</h1>
 			<td>
 				<a href="{% url 'device_detail' device.pk %}">{{ device.name }}</a>
 			</td>
+			<td>
+				{% if device.appl_NAC_Active %}
+					<span class="icon-desc" desc="Active Device"><img src="{% static 'icons/check-lg.svg' %}" alt="appl_NAC_Active_True" height="25" width="25" class="icon-zoom" /></span>
+				{% else %}
+					<span class="icon-desc" desc="Inactive Device"><img src="{% static 'icons/x-lg.svg' %}" alt="appl_NAC_Active_False" height="25" width="25" class="icon-zoom" /></span>
+				{% endif %}
+				{% if device.appl_NAC_Install %}
+					<span class="icon-desc" desc="Install"><img src="{% static 'icons/wrench.svg' %}" alt="appl_NAC_Install" height="25" width="25" class="icon-zoom"/></span>
+				{% endif %}
+			</td>
 			<td>
 				{{ device.appl_NAC_FQDN }}
 			</td>
@@ -32,26 +43,27 @@ <h1>Devices</h1>
 				{% for mac in device.get_appl_NAC_macAddressAIR %}
 					<b> 
 						{% if mac != None %}
-							<img src="{% static 'icons/wifi.svg' %}" alt="appl_NAC_macAddressAIR" height="14" width="14">
+							<span class="icon-desc" desc="macAddressAIR"><img src="{% static 'icons/wifi.svg' %}" alt="appl_NAC_macAddressAIR" height="14" width="14" class="icon-zoom"/></span>
 							<b> {{mac}}</b> <br />
 						{% endif %}
 					</b>
 				{% endfor %}
 				{% for mac in device.get_appl_NAC_macAddressCAB %}
 					<b> 
 						{% if mac != None %}
-							<img src="{% static 'icons/ethernet.svg' %}" alt="appl_NAC_macAddressCAB" height="14" width="14">
+						<span class="icon-desc" desc="macAddressCAB"><img src="{% static 'icons/ethernet.svg' %}" alt="appl_NAC_macAddressCAB" height="14" width="14" class="icon-zoom"/></span>
 							<b> {{mac}}</b> <br />
 						{% endif %}
 					</b>
 				{% endfor %}
 			</td>
 			<td>
 				<a href="{% url 'device_edit' device.pk %}">
-					<img src="{% static 'icons/pencil-square.svg' %}" alt="edit" height="16" width="16">
+					<span class="icon-desc" desc="edit"><img src="{% static 'icons/pencil-square.svg' %}" alt="edit" height="16" width="16" class="icon-zoom"/></span>
+
 				</a>
 				<a href="{% url 'device_delete' device.pk %}">
-					<img src="{% static 'icons/trash.svg' %}" alt="delete" height="16" width="16">
+					<span class="icon-desc" desc="delete"><img src="{% static 'icons/trash.svg' %}" alt="delete" height="16" width="16" class="icon-zoom"/></span>
 				</a>
 			</td>
 		</tr>