From c354393685fac4ce98ada04ba18252c2f19581ab Mon Sep 17 00:00:00 2001
From: catborise <catborise@yahoo.com>
Date: Fri, 3 Dec 2021 16:41:50 +0300
Subject: [PATCH] add MAC address inputs for instance create methods

---
 instances/templates/create_instance_w2.html | 46 +++++++++++++++------
 static/css/webvirtcloud.css                 |  8 ++++
 vrtManager/create.py                        |  6 ++-
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/instances/templates/create_instance_w2.html b/instances/templates/create_instance_w2.html
index 2c314bf..499dd3e 100644
--- a/instances/templates/create_instance_w2.html
+++ b/instances/templates/create_instance_w2.html
@@ -178,6 +178,12 @@
                                                                     </div>        
                                                                 </div>
                                                                 <div class="collapse" id="flavAddCollapse">
+                                                                    <div class="row">
+                                                                        <label class="col-sm-4 col-form-label">{% trans "MAC" %}</label>
+                                                                        <div class="col-sm-7">
+                                                                            <input type="text" class="form-control" name="mac" maxlength="17" value="{{ mac_auto }}" required pattern="[a-zA-Z0-9:]+">
+                                                                        </div>
+                                                                    </div>
                                                                     <div class="row">
                                                                         <label class="col-sm-4 col-form-label">{% trans "NWFilter" %}</label>
                                                                         <div class="col-sm-7">
@@ -200,12 +206,6 @@
                                                                             </select>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="row">
-                                                                        <label class="col-sm-4 col-form-label">{% trans "MAC" %}</label>
-                                                                        <div class="col-sm-7">
-                                                                            <input type="text" class="form-control" name="mac" maxlength="17" value="{{ mac_auto }}" required pattern="[a-zA-Z0-9:]+">
-                                                                        </div>
-                                                                    </div>
                                                                     {% if dom_caps.graphics_support == 'yes' %}
                                                                     <div class="row">
                                                                         <label class="col-sm-4 col-form-label">{% trans "Graphics" %}</label>
@@ -396,6 +396,7 @@
                                 {% endfor %}
                             </select>
                         </div>
+                        <input id="mac" type="hidden" name="mac" value=""/>
                     </div>
                     <div class="row">
                         <label class="col-sm-3 col-form-label">{% trans "Advanced" %}</label>
@@ -601,14 +602,17 @@
                             </div>
                         </div>
                         <div class="row">
-                            <label class="col-sm-3 col-form-label">{% trans "Network" %}</label>
-                            <div class="col-sm-7">
+                            <label class="col-sm-3 col-form-label">{% trans "Network/MAC" %}</label>
+                            <div class="col-sm-3">
                                 <select class="form-select" name="networks">
                                     {% for network in networks %}
                                         <option value="{{ network }}">{{ network }}</option>
                                     {% endfor %}
                                 </select>
                             </div>
+                            <div class="col-sm-4">
+                                <input type="text" class="form-control" name="mac" maxlength="17" value="{{ mac_auto }}" required pattern="[a-zA-Z0-9:]+">
+                            </div>
                         </div>
                         <div class="row">
                             <label class="col-sm-3 col-form-label">{% trans "Advanced" %}</label>
@@ -810,21 +814,39 @@
                 let input_value = toggleValue($('#networks').val(), element.val(), checked);
                 $('#networks').val(input_value);
                 let selected_list_html = '';
-                let counter = 0;
+                mac_array = [];
+                net_counter = 0;
                 if (input_value != '') {
                     $.each(input_value.split(','), function (index, value) {
-                        let li = '<li>eth' + counter +
+                        let li = '<li><input type="text" class="input-xs" name="mac'+ net_counter +'" maxlength="17" required pattern="[a-zA-Z0-9:]+" onchange="populate_mac(' + net_counter +')">' +
+                                ' eth' + net_counter +
                                 ' -> ' + value + ' ' +
                                 '<a class="btn-link float-end" onclick="$(\'#network-control\').multiselect(\'deselect\', \'' + value + '\', true)"><i class="fa fa-remove"></i></a></li>';
+                        random_mac(net_counter);
                         selected_list_html += li;
-                        counter++;
+                        net_counter++;
                     });
+                    
                 }
                 $('#net-list').html(selected_list_html);
             }
         });
     });
 
+    var mac_array = [];
+    function random_mac(c) {
+        $.getJSON("{% url 'instances:random_mac_address' %}", function (data) {
+            mac_array[c] = data['mac'];
+            $('input[name="mac' + c + '"').val(data['mac']);
+            populate_mac(c);
+        });
+    }
+
+    function populate_mac(c){
+        mac_array[c] = $('input[name="mac' + c + '"').val();
+        $('input[name="mac"').val(mac_array.join(","));
+    }
+
     $("id[vcpu_mode]").multiselect();
 
     function get_cust_vols(compute_id, pool) {
@@ -866,7 +888,7 @@
 {% if request.user.is_superuser %}
     <script>
         function goto_compute() {
-            let compute = {{ compute.id }}
+            let compute = {{ compute.id }};
             window.location.href = "{% url 'instances:create_instance_select_type' 1 %}".replace(1, compute);
         }
     </script>
diff --git a/static/css/webvirtcloud.css b/static/css/webvirtcloud.css
index d1fbdf7..5767098 100644
--- a/static/css/webvirtcloud.css
+++ b/static/css/webvirtcloud.css
@@ -173,3 +173,11 @@ p {
 a {
     outline: 0;
 }
+
+.input-xs {
+    height: 22px;
+    padding: 2px 5px;
+    font-size: 12px;
+    line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
+    border-radius: 2px;
+  }
\ No newline at end of file
diff --git a/vrtManager/create.py b/vrtManager/create.py
index 9cdaca4..fcae692 100644
--- a/vrtManager/create.py
+++ b/vrtManager/create.py
@@ -338,10 +338,12 @@ class wvmCreate(wvmConnect):
                 xml += """<target dev='vd%s' bus='%s'/>""" % (vd_disk_letters.pop(0), "virtio")
             xml += """</disk>"""
 
-        for net in networks.split(","):
+        if mac:
+            macs = mac.split(',')
+        for idx, net in enumerate(networks.split(",")):
             xml += """<interface type='network'>"""
             if mac:
-                xml += f"""<mac address='{mac}'/>"""
+                xml += f"""<mac address='{macs[idx]}'/>"""
             xml += f"""<source network='{net}'/>"""
             if nwfilter:
                 xml += f"""<filterref filter='{nwfilter}'/>"""