From 0a74f0e42c8f56bb8d095ef57f972e91cfdccac8 Mon Sep 17 00:00:00 2001
From: Stefano Alberto Russo <stefano.russo@gmail.com>
Date: Wed, 3 Nov 2021 20:20:04 +0100
Subject: [PATCH] Improved adding container interface.
---
.../core_app/templates/add_container.html | 63 ++++++++++++-------
1 file changed, 42 insertions(+), 21 deletions(-)
diff --git a/services/webapp/code/rosetta/core_app/templates/add_container.html b/services/webapp/code/rosetta/core_app/templates/add_container.html
index 2e833ac..c62fca0 100644
--- a/services/webapp/code/rosetta/core_app/templates/add_container.html
+++ b/services/webapp/code/rosetta/core_app/templates/add_container.html
@@ -8,19 +8,17 @@
<div class="container">
<div class="dashboard">
<div class="span8 offset2">
- <h1>Add container</h1>
+ <h1>Add software container</h1>
<hr>
{% if not data.added %}
- <h3>Set up the new container.</h3>
-
- <br/>
-
+ <h4>Container basics</h4>
+
<form action="#" method="POST">
{% csrf_token %}
- <table class="dashboard" style="width:360px">
+ <table class="dashboard" style="width:360px; margin-bottom:25px">
<tr>
<td><b>Name</b></td>
@@ -61,7 +59,10 @@
</table>
- <table class="dashboard" style="width:360px">
+
+
+ <h4>Container interface </h4>
+ <table class="dashboard" style="width:360px; margin-bottom:25px">
<tr>
<td><b>Interface port</b></td>
@@ -75,11 +76,15 @@
</td>
</tr>
</table>
-
- <table class="dashboard" style="width:360px">
- <tr><td colspan=2><hr style="margin:5px"> Advanced</td></tr>
+
+ <a href="javascript:void(0);" id="show_button" onclick="toggle_visibility('advanced_div')">Show advanced...</a>
+
+ <div id="advanced_div" style="display:none; width:360px;">
+ <h4>Container advanced settings <font size=-1>| <a href="javascript:void(0);" id="hide_button" onclick="toggle_visibility('advanced_div')" style="display:none">hide</a></font></h4>
+
+ <table class="dashboard" style="width:360px; margin-bottom:25px">
<tr>
<td><b>Architecture</b></td><td>
@@ -90,7 +95,7 @@
</tr>
<tr>
- <td><b>OS</b></td><td>
+ <td><b>Operating System</b></td><td>
<select name="container_os" >
<option value="linux" selected>linux</option>
</select>
@@ -98,7 +103,7 @@
</tr>
<tr>
- <td><b>interface transport</b></td><td>
+ <td><b>Interface transport</b></td><td>
<select name="container_interface_transport" >
<option value="tcp/ip" selected>tcp/ip</option>
</select>
@@ -119,13 +124,15 @@
</td>
</tr>
-
- <tr>
- <td colspan=2 align=center style="padding:20px">
- <input type="submit" value="Add">
- </td>
- </tr>
</table>
+ </div>
+
+ <table style="width:360px; border:0; background:#ffffff; margin-top:20px">
+ <tr><td align="center">
+ <input type="submit" value="Add">
+ </td></tr>
+ </table>
+
</form>
<br/>
@@ -138,9 +145,6 @@
<br/>
<br/>
-
-
-
{% else %}
Ok, Container added. Go back to your <a href="/containers">container list</a>.
@@ -161,6 +165,23 @@
{% include "footer.html" %}
+<script>
+function toggle_visibility(id) {
+ var x = document.getElementById(id);
+ var y = document.getElementById('show_button');
+ var z = document.getElementById('hide_button');
+ if (x.style.display === "none") {
+ x.style.display = "block";
+ y.style.display = "none"
+ z.style.display= "inline"
+
+ } else {
+ x.style.display = "none";
+ y.style.display= "inline"
+ z.style.display = "none"
+ }
+ }
+</script>
--
GitLab