Added frontend code for portMappings

eremetic-framework · Sep 2, 2016 · a939dfa · a939dfa
1 parent c737594
commit a939dfa
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -126,6 +126,8 @@
 .volumes .field input,
 .env .field input,
 .uri .field input,
+.ports .field input,
+.ports .field select,
 .slave_constraints .field input {
   width: auto !important;
 }

diff --git a/static/js/eremetic.js b/static/js/eremetic.js
@@ -34,6 +34,13 @@ $(document).ready(function() {
       }, []);
     }
 
+    if (typeof json.ports !== "undefined") {
+      json.ports = json.ports.reduce(function(collector, element) {
+        collector.push({ 'containerPort': parseInt(element.containerPort), 'protocol': element.protocol });
+        return collector;
+      }, []);
+    }
+
     json.task_cpus = parseFloat(json.task_cpus);
     json.task_mem = parseFloat(json.task_mem);
 
@@ -143,6 +150,36 @@ $(document).ready(function() {
 
   }
 
+  function addPorts(e) {
+    var   $cont = $('#ports')
+        , index = $cont.data('count') + 1
+        , $input
+        ;
+
+    e.preventDefault();
+
+    $input = $(
+      '<div class="field ui action input ports">' +
+        '<div class="field">' +
+          '<input name="ports[' + index + '][containerPort]" placeholder="Container Port" type="number"/>' +
+        '</div>' +
+        '<div class="field">' +
+            '<select name="ports[' + index + '][protocol]">' +
+                '<option value="tcp" selected="selected">tcp</option>' +
+                '<option value="udp">udp</option>' +
+            '</select>' +
+        '</div>' +
+        '&nbsp;<button class="ui icon button">' +
+          '<i class="minus red icon"></i>' +
+        '</button>' +
+      '</div>'
+    );
+
+    $cont.append($input);
+    $cont.data('count', index);
+
+  }
+
   function addEnvironments(e) {
     var   $cont = $('#env')
         , index = $cont.data('count') + 1
@@ -200,6 +237,7 @@ $(document).ready(function() {
   $('#new_task').on('submit', submitHandler);
   $('#new_task #submit').on('click', submitHandler);
   $('#new_task #volumes .plus').on('click', addVolumes);
+  $('#new_task #ports .plus').on('click', addPorts);
   $('#new_task #env .plus').on('click', addEnvironments);
   $('#new_task #uris .plus').on('click', addURIs);
   $('#new_task #slave_constraints .plus').on('click', addSlaveConstraints);

diff --git a/templates/index.html b/templates/index.html
@@ -97,6 +97,16 @@ <h4 class="ui dividing header">Optional</h4>
                     </div>
                   </div>
                 </div>
+                <div class="field">
+                  <div class="two fields">
+                    <div class="field" id="ports" data-count=0>
+                      <label>
+                        Ports
+                        <i class="plus icon green add"></i>
+                      </label>
+                    </div>
+                  </div>
+                </div>
                 <div class="ui buttons right floated">
                   <button class="ui button" id="cancel">Cancel</button>
                   <div class="or"></div>